《浏览器工作原理与实践》读书笔记(4)

浏览器中的页面

1.根据网络单个请求的时间线面板来做优化：

1.排队过久：域名分片或者升级到 http2.0
2.第一字节时间（waiting ttfb）过久：服务器生成页面数据的时间过久；网络原因；请求头带上了多余的用户信息
3.content loading 过久：减少文件大小

2.HTML 解析器是随着 HTML 文档边加载边解析的。

3.javascript 会阻塞 DOM 的解析。（chrome 对此做了优化，使用了预解析；我们可以用 defer、async 关键词等）

4.css 也会影响 DOM 的解析：因为在执行 javascript 之前，需要等待外部 css 下载完成，并解析生成 cssom 对象之后，所以如果有 javascript 阻塞了 dom 的解析的话，css 就会影响这段 javascript 的执行时间，从而间接影响 dom 的解析。（其它情况下，css 不会影响 dom 的解析）

5.cssom（其实就是document.styleSheets）的作用：1.提供给 javascript 操作样式表的能力；2.为布局树的合成提供基础的样式信息。

6.白屏时间主要做了这些操作：解析 html、下载 css、下载 javascript、生成 cssom、执行 javascript、生成布局树、绘制页面。所以主要瓶颈在于：下载 css 文件、下载 javascript 文件和执行 javascript。缩短白屏时间的方法：

1.内联 css 和 js
2.减少 css、js 文件大小
3.将不需要在解析 html 阶段使用的 javascript 加上 defer、async
4.对于大的 css，使用媒体查询，在特定场景才加载特定的 css

7.对于浏览器中的每一帧，有重排、重绘和合成三种方式，其中合成又分为分层、分块和合成。

8.为了提升每帧的渲染效率，chrome 引入了分层和合成机制，分层会把素材分成多个图层，最后把这些图层合在一起的操作叫做合成。合成操作是在合成线程上完成的，因此不会影响到主线程执行。（分块是指，把全部页面分为几个块来渲染，这样就不会渲染看不见的区域了）

9.will-change 会将元素单独放在一层，大大提升了渲染的效率，这也是 css 动画比 javascript 高效的原因。（由于多了一层，所以内存会增加）

10.通常一个页面有三个阶段：加载阶段、交互阶段和关闭阶段。所以当我们优化一个页面的时候，就从加载阶段和交互阶段入手：

加载阶段：减少关键资源个数、降低关键资源大小、降低关键资源RTT次数或时长
交互阶段：减少 javascript 脚本执行时间；避免强制同步布局；避免布局抖动（多次强制布局和抖动）；合理使用 css 合成动画；避免频繁的垃圾回收

11.双缓存：一般屏幕会从前缓冲区读取数据并显示，而双缓存是指会先把计算结果存放到另一个缓冲区，等计算结束之后，再一次性复制到前缓冲区。这样图像的输出会非常稳定。其实虚拟 dom 就是类似的这种架构。

12.浏览器的三大进化路线：应用程序 web 化；web 应用移动化；web 操作系统化

13.PWA 是一套理念，渐进式增强 Web 的优势，并通过技术手段渐进式缩短和本地应用程序的差距。

14.Web 应用和本地应用的差距：没有离线能力；缺少消息推送；缺少一级入口。前两个使用 service worker 解决，后一个使用 manifest.json 文件解决。

15.阻碍前端组件化（高内聚，低耦合