cssjs渲染机制,html渲染机制

发布时间：2023-12-08

cssjs渲染机制,html渲染机制

更新：2022-11-18 12:25

本文目录一览：

  1. 渲染机制、回流、重绘
  2. 浏览器中动画渲染效率原生js高还是css高？
  3. 浏览器的渲染过程及涉及到的缓存机制
  4. 前端性能优化总结(一)-js、css优化

渲染机制、回流、重绘

  • 解析 HTML 标签, 构建 DOM 树
  • 解析 CSS, 构建 CSSOM 树
  • 把 DOM 和 CSSOM 组合成渲染树 (render tree)
  • 在渲染树的基础上进行布局, 计算每个节点的几何结构
  • 把每个节点绘制到屏幕上 (painting)

回流与重绘

  • Reflow：重新计算元素的几何尺寸、位置 + repaint
  • Repaint：绘制界面发生变化的部分
  • 回流会引起重绘，所以代价更大

常见触发回流/重绘的操作

  • 添加、删除、更新DOM节点（reflow、repaint）
  • 修改元素的 margin、padding、border（reflow、repaint）
  • display: none（reflow、repaint）
  • visibility: hidden（repaint）
  • 修改颜色、背景色（repaint）

优化建议

  • 尽量一次性修改样式
  • DOM离线后修改
  • 给动画使用绝对定位可以减小 reflow

参考链接

浏览器中动画渲染效率原生js高还是css高？

  • CSS的执行顺序是优先于JS的
  • CSS一旦被引入，立即存到浏览器内存中
  • 动画的话，当然是CSS高

浏览器的渲染过程及涉及到的缓存机制

渲染流程

  1. DNS解析
  2. TCP连接
  3. 发送HTTP请求
  4. 服务器处理请求并返回报文
  5. 浏览器解析渲染页面
  6. 连接结束

DNS解析

  • 是将网址解析成IP地址的过程
  • 从本地域名服务器中查找，找不到则向上查找根域名服务器，直到顶级域名
  • 存在DNS优化环节，查找资源时会先找缓存（浏览器缓存 → 系统缓存 → 路由器缓存等）
  • 会根据机器负载和距离用户的位置进行DNS负载均衡

TCP连接建立

  1. 客户端发送SYN到服务器要求连接
  2. 服务端向客户端发送ACK
  3. 客户端收到ACK并确认后，向服务端发送ACK，连接建立

HTTP请求与响应

  • TCP连接建立后，通过HTTP协议传输资源
  • 可使用HTTPS
  • 包括请求行、请求报头、请求正文（POST、PUT等）
  • Keep-Alive可在请求头中添加

服务端处理

  • 接到请求后解析HTTP请求，封装成HTTP request对象
  • 响应码（1xx：请求已接受，2xx：成功，3xx：重定向，4xx：客户端错误，5xx：服务端错误）

浏览器解析渲染

  • 解析HTML，构建DOM树
  • 解析CSS，构建CSSOM树
  • 不一定HTML和CSS谁先渲染，取决于位置
  • CSS和同步JS会阻塞DOM树渲染，但不阻塞DOM解析
  • JS会修改DOM或CSSOM，因此CSSOM构建完成前JS会被阻塞

defer 与 async

  • 正常模式：<script src="script.js"></script>，立即加载并执行
  • async模式：<script async src="script.js"></script>，与DOM解析并行，加载完成后立即执行
  • defer模式：<script defer src="script.js"></script>，与DOM解析并行，加载完成后等待DOM解析完成再执行

DOMContentLoaded 与 onLoad

  • DOMContentLoaded：DOM解析完成后触发
  • onLoad：页面所有资源加载完成后触发，会在DOMContentLoaded之后

回流与重绘

  • 回流代价更大，会引发重绘
  • 浏览器会优化，将多次操作合并为一次批处理
  • 避免频繁操作样式和DOM

前端性能优化总结(一)-js、css优化

用户体验优化重点

  • 首屏加载速度
  • 从输入URL到页面渲染全过程优化

关键渲染路径优化

  • 减少DOM和CSSOM构建时间
  • CSS加载会阻塞DOM渲染
  • JS会阻塞DOM和CSSOM构建

优化建议

  • 避免频繁操作样式，一次性修改style或使用class
  • 避免频繁操作DOM，使用documentFragment
  • 设置display: none后再操作DOM
  • 缓存频繁读取的属性
  • 动画元素使用绝对定位
  • 图片懒加载
  • 事件委托
  • 防抖与节流优化滚动/搜索事件

图片懒加载实现

  • <img>标签src指向默认图片，data-src指向真实图片
  • 页面加载时先加载可视区域图片，滚动时加载后续图片

事件委托

  • 利用事件冒泡机制，将事件绑定到父元素
  • 减少事件监听器数量，提升性能

防抖与节流

  • 防抖（debounce）：输入搜索时减少HTTP请求
  • 节流（throttle）：滚动条调用接口时减少HTTP请求

参考链接

推荐文章