menu
refresh
shufu
这是一个前端开发记录Debug过程和杂谈的博客
前端性能优化:
access_time
brush 1069个字
whatshot 42 ℃
  • DNS是否可以通过缓存减少DNS查询时间
  • 网络请求的过程走最近的网络环境
  • 相同的静态资源是否可以缓存
  • 能否减少请求http大小
  • 减少http请求

资源的合并与压缩

  • 减少http请求数量
  • 减少请求资源的大小
  • html的压缩和混淆

    > 删除空格、制表符等。
  • css的压缩和混淆

    > 无效代码删除,
    > html-minifier
    > css语义化合并
    > clean-css [clean-css](https://www.npmjs.com/package/clean-css)
    > 无效字符的删除
    > 删除注视
    > 代码语义的缩减和优化
    > 代码保护 - 混淆
  • js的压缩和混淆

    > 使用uglify-js [uglify-js](https://www.npmjs.com/package/uglify-js)
  • 文件合并

    > 文件与文件之间有插入的上行请求,增加了N-1个网络延迟
    > 受丢包问题影响更严重
    > 经过代理服务器时可能会被断开
    > 合并后文件如果过大首屏渲染问题
    > 缓存失效问题
    -
    > 公共库合并
    > 不同页面的引用文件合并。
    
  • 开启gzip

    > 
    

Html页面加载渲染的过程

浏览器获取到html文件后,会进行html文件词法分析,后分析成词法token,添加到DOM树上,解析到Css后进行解析,分析成对应CSSDOM树,然后DOM和CSSDOM同步解析好后合并成Render Tree 进行渲染。

  • 顺序执行、并发加载

    • 词法分析

      > 词法分析是从上到下分析执行。
    • 并发加载

      > 解析html时会并发请求资源
    • 并发上限
  • 是否阻塞
  • 依赖关系
  • 引入方式

Css阻塞

  • css在heade中会阻塞页面的渲染
  • css会阻塞内部js的执行
  • css不会阻塞外部脚本的加载。

Js阻塞(单线程的原因)

  • 直接引入的js会阻塞页面的渲染
  • js不阻塞资源的加载
  • js顺序执行,阻塞后续js逻辑的执行。(可以通过async执行。可能会有报错)

懒加载和预加载

懒加载

  • 图片进入可是区域之后请求图片资源
  • 对于电商等图片很多,页面很长的业务场景适用
  • 减少无效资源的加载
  • 并发加载的资源过多会阻塞js的加载。影响网站的正常使用。

预加载

  • 图片等静态资源在使用之前的提前请求。
  • 资源使用到时能从缓存中加载,提升用户加载
  • 页面展示的依赖关系维护。

重绘与回流

  • Css性能会让javascript变慢么?

会,重绘与回流频繁触发会导致ui频繁渲染,最终导致js执行变慢。

  • 回流必将引起重绘,而重绘不一定会引起回流。

回流

  • 当reander tree中的一部分因为元素的规模尺寸、布局、隐藏等改变而需要重新构建,会触发回流机制。
  • 当页面布局和几何属性改变时就需要回流。

重绘

  • 当render tree中的一些元素需要更新属性,而这些属性只是影响元素的外观、风格而不影响布局的、比如color、background-color 则称之为重绘

新建DOM的过程。

  • 1、获取DOM后会分割为多个图层
  • 2、对每个图层的节点计算样式结果(Recalculate style -- 样式重计算)
  • 3、为每个节点生成图形和位置(Layout - 回流和重布局)
  • 4、将每个节点绘制填充到图层位图中。(Paint Setup 和 Paint -- 重绘)
  • 5、图层作为纹理上传至GPU
  • 6、符合多个图层到页面上生成最终屏幕图像(Composite Layers -- 图层重组)

如何将DOM元素变成新的独立图层?

Chrome创建图层的条件。

  • 1、3D或者透视变化css属性(perspective transform)
  • 2、使用加速视频解码<video>节点
  • 3、拥有3D(WebGL)上下文或加速的2D上下文的<canvas>节点。
  • 4、混合插件(如Flash)
  • 5、对自己的opacity做css动画或使用一个动画webkit变化的元素
  • 6、拥有加速css过滤器的元素。
  • 7、元素有一个包含复合层的后台节点
  • 8、元素有一个z-index较低且包含一个复合层的兄弟元素。
    <style>
       div{position:relative;}
       img{position:absolute;z-index:123;}
       span{z-index:1;}
    </style>
    <div>
       <img />
       <span></span
    </div>

实战优化点。

  • 1、因为top会回流,所以使用transform来替代top的改变。。 不考虑ie8以下的话。
  • 2、用opacity来替代visibility;
  • 3、把DOM离线后修改,比如:先把DOM给display:none 然后修改完毕后再显示出来。
  • 4、不建议使用table,因为只要tb有一个小变动,整个table都要重新回流和重绘制
  • 5、启用GPU硬件加速
  • 6、对动画进行新建图层。transform;

缓存

这个地方讲的是浏览器缓存

  • 强缓存

    • Expires

      > 
    • Cache-Control

      > 
  • 协议缓存

    • Last-Modified If-Modified-Sincek

      > 
    • Etag If-Nono-Match

      >

#如无特别声明,该文章均为 shufu 原创,转载请遵循 署名-非商业性使用 4.0 国际(CC BY-NC 4.0) 协议,即转载请注明文章来源。
#最后编辑时间为: 2020 年 08 月 17 日


account_circle
email
explore


DreamCat

主题名称:DreamCat | 版本:X1.6-20201226

主题开发:HanFengA7 | TeddyNight | Dev-Leo | CornWorld

鸣谢:学神之女

鸣谢:学神之女