2020前端面试题之HTML篇

html

浏览器缓存？ cache-control？

浏览器缓存分为强缓存和协商缓存
在请求的时候会根据http请求头判断是否命中强缓存：
如果命中则加载缓存中的数据，不会发送请求
如果没有命中则浏览器请求服务器，服务器会判断本地缓存是否有效？有效则加载本地数据，服务器不返回信息
如果命中的是协商缓存则服务器会根据请求把数据返回，浏览器加载数据并更新本地缓存

// cache-control
在header中设置用来控制浏览器缓存行为

public： http通信的过程中，包括请求的发起方（浏览器）、代理缓存服务器都可以进行缓存。
private ：只允许请求的发起方（浏览器）进行缓存。
no-cache：可以在请求的发起方（浏览器）进行缓存，但是每次都需要去服务器进行资源验证。
no-store：任何地方都不可以缓存。
复制代码

Html离线存储？

在浏览器得html头部加上manifest属性，如果是第一次访问浏览器会根据manifest 得内容进行下载存储离线内容，
如果已经访问过则从离线存储中进行加载，然后在比对服务器如果有新内容在更新离线存储
复制代码

svg和canvas 的区别？

svg 输出的图形都有独立的dom   是一个矢量图形 放大缩小不会
canvas 输出的是一整块  是一个画布  放大 缩小会失贞
复制代码

src 和 href 的区别？

src 是引入资源的
href 是跳转url的
复制代码

前端有哪三层构成，分别是什么？

结构层   html  dom结构
表示层   css 渲染
行为层   js操作
复制代码

什么是标签语义？有什么作用？

即使在没有css的情况下 页面代码也能很好的被阅读理解，用正确的标签 能够对浏览器和搜索引擎的支持更好。便于后期的维护。
复制代码

常见的浏览器内核有哪些？以及你对内核的了解？

IE(trident)  chrome safari(webkit)   firefox(gecko)  opera(presto)
分为渲染引擎和js 引擎
渲染引擎  负责 取得网页的html  css 图像 等信息 然后根据css 将页面渲染出来
js 引擎 则负责页面数据或者动态效果的处理
复制代码

cookie、session、localstroage、sessionStorage 的区别？优缺点？

session存在于服务端不在客户端

cookie 是用于和服务端通信，其他两个则不会

cookie 有大小限制相对于其他两个，单个不超过4kb，个数不超过150个，超过4kb不会被设置，超过150个视各浏览器不同，删旧留新

localStorage 数据永远存储，除非你主动删除 如果超过5mb会报错
sessionStorage 数据在浏览器关闭之前一直存在
复制代码

input如何监听值的变化？

可以监听input 的 focus 或者 keydown 属性
复制代码

输入URL后发生了什么？

首先 从DNS解析域名 获取ip地址，根据ip地址 找到服务器，服务器根据地址请求 返回页面相关数据，浏览器获取到数据进行页面加载渲染页面
复制代码

浏览器的渲染过程？

1、将获取的html解析成dom树
2、处理css，构成层叠样式表模型CSSOM
3、将dom树和CSSOM合并为渲染树
4、根据CSSOM将渲染树的节点布局计算
5、将渲染树节点样式绘制到页面上
// 注意
在渲染的过程中是自上而下渲染，
js会阻塞页面的渲染，优先等js执行完成
如果在渲染的过程中改变了样式，会造成回流需要重新渲染
复制代码

加入前端微信群