如何衡量性能

性能也是响应式设计的一部分，良好的性能才是顺利访问的前提。

页面加载速度

减少 HTTP 请求

请求越多，花费的时间越多。
常见的减少数据传输的手段:

  • 使用 CDN
  • 利用浏览器缓存
  • CSS 精灵
  • 使用 Gzip 压缩
  • 使用字体图标

  • 使用数据 URI 代替图片

    速度指数

    通过加载时间来权衡页面性能太过局限性。通常将页面首屏加载并呈现在浏览器视口中的内容称为“滚动之上”。更快加载“滚动之上”对吸引用户有利，甚至无需考虑整张页面的加载速度。

    帧数

    页面良好加载每帧16.7 ms

    测试

    良好的测试能使你发现解决问题。

    传统脚本的性能优化

    懒加载初级版本

  • 获取页面上需要懒加载的图片元素。

  • 在页面滚动时反复检查图片元素是否滚动进入浏览器的可视区域内。
  • 一旦发现图片元素滚动进入可视区域内，加载图片。

    重绘和回流

  1. 当页面上的某一个元素的大小或者位置发生更改时，都会影响到与它相邻元素的情况，甚至整个的元素状态（位置、大小）都需要重新计算和更新。这种操作称为回流（reflow）或者布局（layout）。一个页面至少会有一次回流，就是在页面初始化的时候。
  2. 当某个元素颜色样式发生改变时（如背景颜色、文字颜色），页面需要更新，浏览器需要重新绘制元素，称为重绘（repaint）。

重绘和回流的成本很高。

其他方面的优化

  • 不要给 scroll 事件直接绑定回调函数。
  • 总是将选择器的选择结果缓存起来。
  • 避免脚本 — Don’t do in JS what you can do in CSS（能够使用 CSS 实现的功能请勿使用 JavaScript）。

    参考

    【1】高性能响应式 Web 开发实战 @ 李光毅