浏览器渲染机制

查看答案

首先会从上到下解析 html 生成 dom 树

然后解析 css 生成 css 对象模型

然后将两者合并生成渲染树

然后根据每个节点的几何信息计算布局

最后根据布局绘制内容，分层合成，显示到屏幕上

浏览器的缓存机制

查看答案

浏览器缓存分为强缓存和协商缓存

强缓存通过 cache-control 来控制，他一般有几个属性，分别是：

• max-age：缓存有效时间

• public：所有人都可以缓存

• private： 只有浏览器可以缓存

• no-cache：使用协商缓存

• no-store：不使用任何缓存

协商缓存一般由两个部分控制，一个是文件的最后修改时间：last-modified 和 if-modified-since，一个是文件哈希内容：etag 和 if-none-match。 在浏览器第一次请求资源的时候，服务器会在响应头中返回 last-modified 和 etag 这两个字段，之后浏览器再次请求的时候会带上 if-modified-since 和 if-none-match 这两个字段，服务器会根据修改时间和文件哈希进行判断资源是否更新，有则返回 200，没有则返回 304，从缓存中获取。

浏览器一帧做了什么事情？

查看答案

首先会处理事件，比如用户的点击、输入等等

然后执行 js 代码

然后计算样式

计算布局

然后进行绘制

最后进行合成渲染到屏幕上