前端性能优化知识整理总结

文章目录

  • -1. 优化思想
    • 优化原因
    • 优化目标
    • 优化方法
        • 优化内容效率
        • 图片优化
          • 合并图像
    • 优化检测
        • lighthouse
        • pagespeed
  • 0. 简略原则
  • 1. 加载性能
    • 减少文件体积
    • CSS异步加载
    • 脚本执行
    • 减少阻塞加载
    • dns-prefetch预解析
  • 2. 动画优化
    • 原理
          • 层的创建标准
          • 利用合成层
            • 提升动画效果
            • 减少绘制区域
            • 合理管理合成层
      • 回流 (reflow)
      • 重绘 (repaint)
    • 硬件加速
    • 优先使用transtion与opacity做动画效果
  • 3. Canvas优化
    • 运用requestAnimationFrame
    • 利用剪辑区域来处理动画背景或其他不变的图像
    • 离屏canvas
    • 避免浮点运算
    • 使用css的transform
    • 关闭透明度
    • 减少调用耗时的 API
    • 尽量少的调用 canvas API
    • 渲染绘制操作不要频繁调用
    • 尽量少的改变状态机 ctx的里状态
    • 避免阻塞
      • web worker
      • 分解任务
  • 参考

-1. 优化思想

优化原因

  • 谷歌的数据表明,一个有10条数据0.4秒可以加载完的页面,在变成30条数据加载时间为0.9秒后,流量和广告收入减少了20%。当谷歌地图的首页文件大小从100kb减少到70~80kb时,流量在第一周涨了10%,接下来的三周涨了25%。

  • 腾讯的前端工程师根据长期的数据监控也发现页面的一秒钟延迟会造成9.4%的PV的下降,8.3%跳出率的增加以及3.5%转化率的下降。

  • 让用户在使用产品时有更快更舒适的浏览体验

优化目标

Google团队提出的RAIL模型:
前端性能优化知识整理总结_第1张图片

Response:100ms内响应;
在用户注意到滞后之前,我们有 100 ms的时间可以响应用户输入。
对于需要超过 500 毫秒才能完成的操作,始终提供反馈,则用户不会陷入困惑。这也是一些交互设计师一直坚持处处操作有反馈的原因。

Animation:10ms内生成一帧;
在数学上来说,人眼感受到的帧数为60帧/s,则会认为是流畅的动画。
1s/60 = 1000ms/60 = 16ms/帧;
也就是说加上每一帧的预算是16ms,减去浏览器绘制帧的时间,留给我们的大约只有10ms/帧。 如果超过这个时间,用户眼中动画的流畅度就会降低。

Idle:最大程度增加空闲时间;
利用空闲的时间完成推迟的工作。
例如,尽可能减少预加载数据以便应用快速加载,并利用空闲时间加载剩余数据。推迟的工作应分成每个耗时约 50 毫秒的多个块。
如果用户开始交互,优先级最高的事项是响应用户。

Load:1000ms内呈现内容;
在 1 秒钟内网站加载完毕。
否则用户的注意力会分散,他们处理任务的感觉会中断。启用渐进式渲染和在后台执行一些工作。将非必需的加载推迟到空闲时间段。

用户评价性能延迟
0-16ms:用户可以感知每秒渲染 60 帧的平滑动画转场。也就是每帧 16 毫秒。留给应用大约 10 毫秒的时间来生成一帧。
0-100ms:在此时间窗口内响应用户操作,他们会觉得可以立即获得结果。时间再长,操作与反应之间的连接就会中断。
100-300ms:轻微可觉察的延迟
300-1000ms:延迟感觉像是任务自然和持续发展的一部分(用户觉得这是正常流,但不会觉得快)
1000+ms:用户的注意力将离开他们正在执行的任务。
10,000+ms:用户感到失望,可能会放弃任务;之后他们或许不会再回来。

优化方法

优化内容效率

评估每个资产的表现:其价值及其技术性能。

  • 它提供给用户的价值能否抵消下载并显示它的开销?

  • 是否能够评估并证明其价值?

  • 该资源(特别是第三方资源)能否保持稳定的性能?

  • 该资源是否处于或是否需要处于关键路径中?

  • 如果该资源不可用,是否会影响网页的性能和用户体验?

不断地去对资源做检查,以给用户展示想看到的高性能、有价值信息。

图片优化

前端性能优化知识整理总结_第2张图片
JPG有损压缩,PNG、GIF无损

——需要动画:gif

——不需要动画
————不需要高画质细节清晰:jpg

————需要高画质细节清晰

——————需要>256色图片:png24
——————不需要>256色:png8
前端性能优化知识整理总结_第3张图片优化gif图:http://www.lcdf.org/gifsicle/

优化jpg图:http://jpegclub.org/jpegtran/

png无损优化:http://optipng.sourceforge.net/

png有损优化:https://pngquant.org/

svg压缩:https://github.com/svg/svgo

合并图像

web优化中的减少http请求数量,通过减少页面图片的数量来实现。
合并图片后,可以通过css的background-image、background-size、background-position属性定位使用单个图片。

  • 合并主要用于图标和按钮等小而多的元素,复杂的图像尽量不合并,尤其是jpg格式。

  • logo和内容图片不要合并,不能破坏html本身的语义结构。

  • 尽可能让颜色值相近的图片合并到同一张雪碧图里面。

  • 空白也要占用空间,控制图片之前的空隙。

  • 追求优化度可以手动合并,追求速度可以使用工具合并,例如cssGaga:http://www.99css.com/cssgaga/

优化检测

lighthouse

前端性能优化知识整理总结_第4张图片
前端性能优化知识整理总结_第5张图片前端性能优化知识整理总结_第6张图片

pagespeed

前端性能优化知识整理总结_第7张图片
前端性能优化知识整理总结_第8张图片

0. 简略原则

  • 不要用 inline style 或 table 布局,flexbox 布局也会给性能带来一些小困扰。inline style 会在 html 下载完后进行一次额外的 Reflow,table布局的开销远比其他 DOM 元素的布局开销要大。flexbox 的 item 会在 HTML 下载完成后改变尺寸。

  • 尽量简写 CSS,避免使用复杂的 CSS 选择器,使用 Unused CSS, uCSS, gulp-uncss可以有效的减少样式的定义和文件的大小。

  • 减少 DOM 的层级,减少 DOM 的数量,如果不需适配老浏览器,删掉一些无用的 wrapper 性质的 DOM 元素,总之越少越好。

  • display:none 的元素不会引发 Reflow 和 Repaint,可以在让这些元素在 display 之前进行一些诸如颜色、尺寸的改变。

  • 批量去更新元素

  • 避免大量 DOM 之间互相影响

1. 加载性能

性能优化中重要的指标——首次有效绘制(First Meaningful Paint,简称FMP)即指页面的首要内容出现在屏幕上的时间。这一指标影响用户看到页面前所需等待的时间,而内联首屏关键CSS(即Critical CSS,可以称之为首屏关键CSS)能减少这一时间。

减少文件体积

压缩代码使用代码压缩工具压缩代码,去掉多余空格和换行等多余部分

CSS异步加载

将马上要用到的文件,放在页面头部加载。其他模块的CSS可以使用loadCSS 和 Preload待页面渲染完后异步加载

“阻塞渲染”仅是指浏览器是否需要暂停网页的首次渲染,直至该资源准备就绪。CSS 是阻塞渲染的资源。需要将它尽早、尽快地下载到客户端,以便缩短首次渲染的时间。

脚本执行

无论我们使用

你可能感兴趣的:(前端)