Web性能优化随笔

谈到web性能优化,一般我们可以把它分为两个部分来讲,页面加载(Page Speed)和页面渲染(Page Performance)。

页面加载

加快服务器脚本的计算速度

  • 动态内容缓存
  • 数据缓存
  • 动态内容静态化
  • 选择适合的web服务器软件(Apache、nginx等)
  • 数据库优化
  • 等等···

压缩源码和图片

  • Js 混淆压缩
  • CSS 普通压缩
  • JPG 根据具体质量压缩到50%~70%
  • PNG 色彩压缩、去除一些格式信息等

选择合适的图片

  • 颜色较多,则使用JPG格式
  • 颜色较少,则使用PNG格式
  • 尽量使用WebP、SVG

总之就是,尽量减少每一个资源的体积

合并静态资源

合并CSS、Javascript和小图片

尽量减少同一域下的HTTP请求数

开启服务器短的Gzip压缩

Gzip开启以后会将输出到用户浏览器的数据进行压缩的处理,这样就会减小通过网络传输的数据量,提高浏览的速度。所以Gzip对文本资源非常有效。

使用CDN

一些公用的静态资源(比如jquery、angular、bootstrap等)。使用这些公用的静态资源一方面可以增加页面文件并发下载量,另一方面还能和其他网站共享这些缓存。

尽可能缓存静态资源

尽可能延长静态资源的缓存时间,不但能使频繁访问网站的用户更快的访问,还能减轻服务器压力。至于静态资源的更新,则可以结合修改文件名和+版本号的方式来确保资源更新时,用户会加载到新的内容。

尽可能将CSS文件放在页面头部,JavaScript放在页面底部

应为javascript在加载的时候会出现阻塞,所以为避免出现阻塞页面渲染,让页面页面出现长时间空白,尽量将Javascript文件放在页面底部。

页面渲染

关键渲染路径

CRP

上图是浏览器渲染的关键路径,首先,让我们从浏览器解析一个页面开始吧。

  • 转化: 浏览器从磁盘或网络读取 HTML 的原始字节,浏览器会将这段原始文件按照相应编码规范进行解码(现在一般为 utf-8)。
  • 符号化: 根据 W3C 标准转化为对应的符号(一般在尖括号内)。
  • DOM 构建:HTML 解析器会解析其中的 tag 标签,生成 token ,遇到 CSS 或 JS 会发送相应请求。HTML 解析时阻塞主进程的,CSS 一般也是阻塞主进程的(媒体查询时例外),也就是说它们在解析过程中是无法做出响应的。而 JS 手动添加 async 后达到异步加载,根据 token 生成相应 DOM 树。
  • CSSDOM 构建:添加 CSS 样式生成 CSSDOM 树。
  • 渲染树构建:从 DOM 树的根节点开始,遍历每个可见的节点,给每个可见节点找到相应匹配的 CSSOM 规则,并应用这些规则,连带其内容及计算的样式。
  • 样式计算:浏览器会将所有的相对位置转换成绝对位置等一系列的样式计算。
  • 布局:浏览器将元素进行定位、布局。
  • 绘制:绘制元素样式,颜色、背景、大小、边框等。
  • 合成:将各层合成到一起、显示在屏幕上。

如果我们是做一个动画,一般会用 JS 更改相应样式,接着浏览器就会经历 JS 运行、样式计算、布局、绘制、合成等多个重要步骤(后面还会讲到这个步骤实际过程中可以更长或者更短)。那么要做的优化就是在这几个步骤中进行优化并且尽量去掉中间的耗时步骤。

优化JavaScript的执行

  • 函数的输入事件处理
  • 优化处理

样式计算

  • 减小选择器的复杂性
  • 减少样式的计算量

布局

  • 避免触发布局
  • 使用Flexbox布局
  • 避免强制同步布局事件
  • 避免快速连续的布局

绘制

  • 提升移动或渐变元素的绘制层
  • 仔细规划动画和简化绘制的复杂度

合成

  • 使用transform/opacity实现动画效果
  • 管理渲染层、避免过多数量的层

其他

  • 关注趋势,今天很多的性能瓶颈很可能在将来都不再是问题。
  • 充分利用工具 Chrome DevTools。
  • 不要进行微优化,有时花上很短的带来的性能提升却很小,对于日常快速迭代的业务是没必要这样做的。

[更多详细关于页面渲染的内容,请查看][Performance]
[Performance]:https://segmentfault.com/a/1190000005754881