寒冬期前端准备总结---浏览器篇

⚠️⚠️传送门⚠️⚠️

寒冬期前端准备总结---JS篇
[寒冬期前端准备总结---浏览器篇]
寒冬期前端准备总结---服务器和网络篇
寒冬期前端准备总结---CSS篇
寒冬期前端准备总结---框架篇
寒冬期前端准备总结---算法篇

• 浏览器渲染机制（重绘和回流）

image.png

图解：
1.解析HTML，生成DOM树；解析CSS，生成CSSDOM树

2.将DOM和CSSDOM树结合，生成渲染树（Render Tree）

3.Layout（回流）：根据生成的渲染树进行回流，得到节点的几何信息（位置、大小）

4.Painting（重绘）：根据渲染树以及回流得到的几何信息，得到节点的绝对像素

5.Display：将像素发送给GPU，展示在页面上

回流事件：（几何信息变化）

* 添加或删除可见的DOM元素

* 元素的位置发生变化

* 元素的尺寸发生变化

* 元素内容发生变化

* 页面一开始渲染时

* 浏览器的窗口尺寸变化

重绘事件：

* 元素属性变化但是不影响布局的：outline、visibility、color、background-color等

**回流一定重绘，重绘不一定回流，减少回流**

CSS优化方案

* 使用visibility代替dispaly: none

* 避免使用table布局

* 避免多层内联样式，CSS选择器从右往左匹配

JS优化方案

* 避免频繁操作样式，一次性重写style属性

* 避免频繁操作DOM

* 对复杂动画元素使用绝对定位，避免引起父元素以及后续元素的回流

• 页面渲染过程 详细版

1 并行解析资源，需要解析HTML结构字符串（DOM树形结构）、CSS（CSS规则树）、JS脚本（可操作DOM和CSSOM）

2 三者解析完成后，通过DOM树和CSS树构建渲染树，生成节点和节点样式信息

3 根据信息绘制到页面上

通常DOM构建和CSSOM的构建时并行的，但是当浏览器遇到非异步的js脚本时，DOM的构建会被阻塞，而如果此时CSSOM构建没有完成，则会先构建CSSOM，再执行JS基本，最后继续构建DOM结构树

所以把js脚本放在DOM的后面，或者脚本异步

外链script的defer：同步解析（不会解析阻塞），都解析完成后执行脚本，有顺序

外链script的async：异步加载，加载完成后立即执行，可能会阻塞HTML的解析，动态脚本默认async为false，无顺序

• 输入URL到页面加载的全过程

* DNS域名解析

* TCP连接

* 客户端发送http请求

* 服务端处理请求并返回请求内容

* 浏览器解析渲染页面

* 断开连接

• DNS的解析过程优先级

1 客户端本地hosts文件映射

2 本地DNS服务器

3 发送服务器请求

• document.onreadystatechange 或者window.domContentLoaded判断dom的加载情况

• indexDB: 浏览器缓存数据库，支持异步，支持数据库事务