为了账号安全,请及时绑定邮箱和手机立即绑定

Web前端性能优化 - 让你的页面飞起来

资源合并与压缩

  • 减少http请求数量
  • 减少请求资源大小

浏览器一个请求从发送到返回都经历了什么?

图片描述
图片描述

html压缩

图片描述

css压缩 js压缩(混乱)

图片描述

文件合并

图片描述

图片优化

图片描述

图片压缩

图片描述

Image inline

针对小图片我们可以使用Image inline的方法
将图片的内容内嵌到html当中
减少你的网站的HTTP请求数量

css和js的装载与执行

图片描述

  • 词法分析
  • 并发加载
  • 并发上限
  • css head中阻塞页面的渲染
  • css阻塞js的执行
  • css不阻塞外部脚本的加载(预资源加载器,但是会阻塞执行的过程)
  • 直接引入的js阻塞页面的渲染
  • js不阻塞资源的加载(预加载)
  • js顺序执行,阻塞后续js逻辑的执行

懒加载

图片描述

预加载

图片描述

  1. 隐藏image加载
  2. 使用Image对象加载
  3. XMLHttpRequest (存在跨域问题,不过可以更加精准的控制预加载的过程)
  4. PreloadJS

重绘与回流

频繁触发重绘与回流,会导致UI频繁渲染,最终导致js变慢
回流必将引起重绘
而重绘不一定会引起回流


当render tree中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建。这就称为回流(reflow)
当页面布局和几何属性改变时就需要回流


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

触发页面重布局的属性

  • 盒子模型相关属性会触发重布局
  • 定位属性及浮动也会触发重布局
  • 改变节点内部文字结构也会触发重布局

图片描述

只触发重绘的属性

图片描述

新建DOM的过程

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

Chrome创建图层的条件

  • 3D或透视变换(perspective transform)CSS属性,比如transform:translateZ(0);
  • 使用加速视频解码的<video>节点
  • 拥有3D(WebGL)上下文或加速的2D上下文的<canvas>节点
  • 混合插件(如Flash)
  • 对自己的opacity做CSS动画或使用一个动画webkit变换的元素
  • 拥有加速CSS过滤器的元素
  • 元素有一个包含复合层的后代节点(一个元素拥有一个子元素,该子元素在自己的层里)
  • 元素有一个z-index较低且包含一个复合层的兄弟元素(换句话说就是该元素在复合层上面渲染)
  • <video>,<canvas>,will change:transform,overflow-scrolling:touch

    调试方法

  • 通过chrome控制台的layers查看页面图层
  • 通过chrome控制台的Rendering来实时查看重绘的元素
  • Performance很有用

优化技巧

  1. 用translate替代top/left改变,原因:http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/
  2. 用opacity替代visibility(会触发重绘)
    • opacity=0,该元素隐藏起来了,但不会改变页面布局,并且,如果该元素已经绑定一些事件,如click事件,那么点击该区域,也能触发点击事件的
      • visibility=hidden,该元素隐藏起来了,但不会改变页面布局,但是不会触发该元素已经绑定的事件
      • display=none,把元素隐藏起来,并且会改变页面布局,可以理解成在页面中把该元素删除掉一样
  3. 不要一条一条地修改 DOM 的样式(尽管有缓存机制),预先定义好 class,然后修改 DOM 的 className
  4. 把 DOM 离线后修改,比如:先把 DOM 给 display:none (有一次 Reflow),然后你修改100次(不会重发任何Reflow),然后再把它显示出来
  5. 不要把 DOM 结点的属性值(ex. offsetHeight,offsetWidth,当我们获取这种属性一定会触发回流的过程,因为他要去获取最新的某个DOM元素的位置,强制刷新回流队列缓存)放在一个循环里当成循环里的变量,在循环外面声明一个变量来中转
  6. 不要使用 table 布局,可能很小的一个小改动会造成整个 table 的重新布局
  7. 动画实现的速度的选择(css的性能会影响js变慢,UI线程和JS线程是相互阻塞的),选择合适的动画的间隔时间
  8. 对于动画新建图层(当我们使用自定义的DOM做动画时,这时chrome不会自动创建图层)
  9. 启用 GPU 硬件加速,比如加上transform:translateZ(0); transform:translate3d(0,0,0);可以看下这个https://www.cnblogs.com/PeunZhang/p/3510083.html 问题就是防止过多的图层,因为图层合并也会消耗性能

图片描述

一般来说,我们要在是否创建图层之间权衡是否创建,因为合并图层也是有成本(比较消耗性能)的,依据是否有所优化而定

图片描述

浏览器存储

Cookie

图片描述

如果您在cookie中设置了HttpOnly属性,那么通过js脚本将无法读取到cookie信息,这样能有效的防止XSS攻击,具体一点的介绍请google进行搜索
问题:cookie中在相关域名下都会携带,cdn的流量损耗
解决方法: cdn的域名和主站域名分开

图片描述

LocalStorage and SessionStorage

图片描述

IndexedDB

图片描述

PWA与Service Worker

图片描述
图片描述

缓存

  • httpheader
  • max-age 最大缓存时间,优先级高
  • s-maxage public缓存时间,比如CDN,304。优先级比s-maxage高

图片描述

Expires

图片描述

Last-Modified/If-Modified-Since

图片描述

Etag/If-None-Match

图片描述
图片描述
图片描述

优化策略

  • 构建层模板编译
  • 数据无关的prerender方式(公共数据),直接生成相关的html页面
  • 服务端渲染
点击查看更多内容
2人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
PHP开发工程师
手记
粉丝
1.6万
获赞与收藏
1807

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消