497 浏览器的底层渲染机制

DOM树:DOM的层级关系、节点关系

页面之所以能渲染

  1. 从服务器获取需要渲染的内容(URL解析/DNS/TCP/HTTP...)
  2. 浏览器基于自己的渲染引擎(例如:webkit/gecko/trident/blink...)开始自上而下加载渲染代码

性能优化

CRP性能节点优化:根据渲染的每个关键节点,提高关键节点的优化效率。

  1. 减少DOM树渲染的时间(HTML层级不要太深,标签语义化...)
  2. 减少CSSOM树渲染时间(选择器是从右向左解析,所以尽可能减少选择器的层级【less/sass中的层级嵌套虽然好用,但是是一个大坑】)
  3. 一般会把CSS放在页面的开始位置(提前请求资源,用link,别用@import,对于移动端来讲,如果CSS比较少,尽可能采用内嵌式即可...)
  4. 为了避免白屏,可以进来第一件事,快速生成一套 loding 的渲染树(前端骨架屏);服务器的SSR骨架屏提高的渲染是避免了客户端再次单独请求数据,而不是样式和结构上的(首屏处理);
  5. 把JS放在页面底部,尽可能使用defer、async
  6. 减少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多请求并发机制)
    • style
    • link
    • @import
    • 放到顶部
  • 避免阻塞的JS加载
    • defer:请求过程中,遇到script,要请求外部资源文件,会单独发一个请求,相当于开启一个新的http请求线程,不会阻碍渲染,当所有的DOM树生成完了,跟link一样,js资源回来后,按照js导入的优先级顺序,依次去渲染js代码。【js中有相互依赖顺序的。】
    • async:和defer的相同点,开辟一个新的http请求线程。当请求资源回来后,立即执行代码。
    • 放到底部

【绿色:页面渲染;蓝色:请求网络资源;红色:执行代码。】

  • 减少DOM的回流和重绘

    布局,回流,重新布局

posted on 2020-07-03 12:54  冲啊!  阅读(470)  评论(0编辑  收藏  举报

导航