侧边栏壁纸
博主头像
Eday个人博客 博主等级

永远热爱

  • 累计撰写 12 篇文章
  • 累计创建 25 个标签
  • 累计收到 1 条评论

目 录CONTENT

文章目录

网站性能优化具体手段——渲染优化及缓存优化

Alng
2025-04-21 / 0 评论 / 0 点赞 / 0 阅读 / 0 字 / 正在检测是否收录...
  • 渲染优化

关注点:浏览器获取到资源之后进行渲染部分的相关性能优化。

浏览器渲染过程处理“黑盒”:

资源文件:

  1. html解析:DOM

  2. css姐姐:CSSOM

  3. 样式结构合并:RenderTree

  4. 页面布局:节点的结构关系及样式信息 到 浏览器视口的那个位置占据多大空间

  5. 绘制:绘制元素的可视内容如颜色、边框、文字等

  6. 合成:内容绘制了多个图层,对多个图层进行合成

操作js,css对页面进行修改时会触发生命周期的变化——重绘/重排,减少重绘重排以提高页面性能

重排:dom节点之间会相互关联,修改其中某一个dom节点的几何属性,其他元素的几何属性及位置会受到相关影响,就会触发重排,影响除了dom渲染之外所有渲染

重绘:当对dom的修改导致样式变化,如颜色,背景色,字体等改变,浏览器就不需要重新计算元素几何属性,就减少了重排步骤

相比于重绘,重排更消耗性能,重点对重排进行优化。

会触发重排的操作:对元素几何属性修改如宽高,内外边距,距上下左右边距等。修改dom树结构,增加修改删除dom结构。获取特定属性值,如offsetTOP、scrollTOP、clientWidth、clientHeight等。

渲染性能:避免样式频繁修改:

3次布局:

const Box = document.querySelector('#box');

box.style.width = '100px';

box.style.height = '100px';

box.style.border = '2px solid blue'

1次布局:

.my-box { width: 100px;height: 100px;border:2px solid blue; }

const Box = document.querySelector('#box');

box.classList.add('my-box')

0

评论区