标签：CSSOM 浏览器 请求 DOM 渲染 497 节点 CSS
DOM树：DOM的层级关系、节点关系
页面之所以能渲染
- 从服务器获取需要渲染的内容（URL解析/DNS/TCP/HTTP...）
- 浏览器基于自己的渲染引擎(例如：webkit/gecko/trident/blink...)开始自上而下加载渲染代码
性能优化
CRP性能节点优化：根据渲染的每个关键节点，提高关键节点的优化效率。
- 减少DOM树渲染的时间（HTML层级不要太深，标签语义化...）
- 减少CSSOM树渲染时间（选择器是从右向左解析，所以尽可能减少选择器的层级【less/sass中的层级嵌套虽然好用，但是是一个大坑】）
- 一般会把CSS放在页面的开始位置（提前请求资源，用link，别用@import，对于移动端来讲，如果CSS比较少，尽可能采用内嵌式即可...）
- 为了避免白屏，可以进来第一件事，快速生成一套 loding 的渲染树（前端骨架屏）；服务器的SSR骨架屏提高的渲染是避免了客户端再次单独请求数据，而不是样式和结构上的（首屏处理）；
- 把JS放在页面底部，尽可能使用defer、async
- 减少HTTP的请求次数和请求大小
.......
布局，回流，重新布局
构建DOM树、CSSOM树、RENDER树
- 转换：把进制数据转换为代码字符串
- 词法分析：依托w3c规范生成对应的节点
- DOM/CSSOM构建：根据节点生层对应的树
【DOM树】
【CSSOM树】
【Render-Tree渲染树】
总结步骤：
- 处理 HTML 标记，构建 DOM 树
- 处理 CSS 标记，构建 CSSOM 树
- 将 DOM 树和 CSSOM 树融合成渲染树
- 根据生成的渲染树，计算它们在设备视口(viewport)内的确切位置和大小，这个计算的阶段就是回流 => 布局（Layout）或 重排（reflow）
- 根据渲染树以及回流得到的几何信息，得到节点的绝对像素 => 绘制（painting）或栅格化（rasterizing）
优化方案：
- 标签语义化和避免深层次嵌套
- CSS选择器渲染是从右到左
- 尽早尽快地把CSS下载到客户端（充分利用HTTP多请求并发机制）
stylelink@import- 放到顶部
- 避免阻塞的JS加载
defer：请求过程中，遇到script，要请求外部资源文件，会单独发一个请求，相当于开启一个新的http请求线程，不会阻碍渲染，当所有的DOM树生成完了，跟link一样，js资源回来后，按照js导入的优先级顺序，依次去渲染js代码。【js中有相互依赖顺序的。】async：和defer的相同点，开辟一个新的http请求线程。当请求资源回来后，立即执行代码。- 放到底部
【绿色：页面渲染；蓝色：请求网络资源；红色：执行代码。】
-
减少DOM的回流和重绘
布局，回流，重新布局
标签：CSSOM,浏览器,请求,DOM,渲染,497,节点,CSS 来源： https://www.cnblogs.com/jianjie/p/13229789.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。