HTML5性能优化（三）

[脚本执行优化]

---

脚本处理不当会阻塞页面加载、渲染，因此在使用时需当注意：

CSS写在头部，JavaScript写在尾部或异步。

避免图片和iFrame等的空Src，空Src会重新加载当前页面，影响速度和效率。

尽量避免重设图片大小。

重设图片大小是指在页面、CSS、JavaScript等中多次重置图片大小，多次重设图片大小会引发图片的多次重绘，影响性能。

DataURL的使用，DataURL图片没有使用图片的压缩算法文件会变大，并且要解码后再渲染，加载慢耗时长

Data URL能用在很多场合，跟传统的外部资源引用方式相比，它有如下独到的用处：

当访问外部资源很麻烦或受限时 当图片是在服务器端用程序动态生成，每个访问用户显示的都不同时。
当图片的体积太小，占用一个HTTP会话不是很值得时。

Data URL也有一些不适用的场合

Base64编码的数据体积通常是原数据的体积4/3，也就是Data URL形式的图片会比二进制格式的图片体积大1/3。
Data URL形式的图片不会被浏览器缓存，这意味着每次访问这样页面时都被下载一次。这是一个使用效率方面的问题——尤其当这个图片被整个网站大量使用的时候。
通过CSS样式文件。CSS中的url操作符是用来指定网页元素的背景图片的，而浏览器并不在意URL里写的是什么——只要能通过它获取需要的数据。所以，我们就有了可以将Data URL形式的图片存储在CSS样式表中的可能。而所有浏览器都会积极的缓存CSS文件来提高页面加载效率。

.striped_box
  {
      width: 100px;
      height: 100px;
      background-image: url("data:image/gif;base64,R0lGODlhAwADAIAAAP///8zMzCH5BAAAAAAALAAAAAADAAMAAAIEBHIJBQA7");
      border: 1px solid gray;
      padding: 10px;
  }

 <div class="striped_box">
    这是一个有条纹的方块
 </div>

在这个例子中，Data URL的使用是完全符合场景的。它避免了让这个小小的背景图片独自产生一次HTTP请求，而且，这个小图片还能同CSS文件一起被浏览器缓存起来，重复使用，不会每次使用时都加载一次。只要这个图片不是很大，而且不是在CSS文件里反复使用，就可以以Data
URL方法呈现图片降低页面的加载时间，改善用户的浏览体验。

---

[CSS优化]

尽量避免写在HTML标签中写Style属性

• 避免CSS表达式
  CSS表达式的执行需跳出CSS树的渲染，因此请避免CSS表达式。
  如：
  background-color: expression((new Date()).getHours()%2 ? “#B8D4FF” : “#F08A00” );
  这里可以使用一个特殊的expression函数，其实这是一个javascript的函数。它可以进行根据一个表达式进行计算，动态地决定background-color的值。

  看起来是一个相当不错的功能，但我们可能不会想到这个表达式会运算很多次（对浏览器性能严重损耗）

• 移除空的CSS规则

  空的CSS规则增加了CSS文件的大小，且影响CSS树的执行，所以需移除空的CSS规则。
  这个规则不包含任何属性，类似：.foo { }空规则的产生原因一般来说是为了预留样式。去除这些空规则无疑能减少css文档体积。

• 正确使用Display的属性
  Display属性会影响页面的渲染，因此请合理使用。

  a） display:inline后不应该再使用width、height、margin、padding以及float
  b） display:inline-block后不应该再使用float
  c） display:block后不应该再使用vertical-align
  d） display:table-*后不应该再使用margin或者float

• 不滥用Float
  Float在渲染时计算量比较大，尽量减少使用。

• 不滥用Web字体

  Web字体需要下载，解析，重绘当前页面，尽量减少使用。

• 不声明过多的Font-size

  过多的Font-size引发CSS树的效率，font-size是有继承性的。

  继承方式是根据父元素来定的，如果父元素已经定义了字体大小，子元素没有设置字体大小，那么会默认使用父元素的font-size值，也可以单独给某一个元素设置其值

• 值为0时不需要任何单位

为了浏览器的兼容性和性能，值为0时不要带单位。

• 标准化各种浏览器前缀

  a） 无前缀应放在最后
  b） CSS动画只用 （-webkit- 无前缀）两种即可
  c） 其它前缀为 -webkit- -moz- -ms- 无前缀 四种，（-o-Opera浏览器改用blink内核，所以淘汰）

• 避免让选择符看起来像正则表达式
  高级选择器执行耗时长且不易读懂，避免使用。

---

[JavaScript执行优化]

• 减少重绘和回流
  a） 避免不必要的Dom操作
  b） 尽量改变Class而不是Style，使用classList代替className
  c） 避免使用document.write
  d） 减少drawImage

• 缓存Dom选择与计算
  每次Dom选择都要计算，缓存他。

• 缓存列表.length
  每次.length都要计算，用一个变量保存这个值

• 尽量使用事件代理，避免批量绑定事件
  尽量使用ID选择器，ID选择器是最快的。

• TOUCH事件优化

  使用touchstart、touchend代替click，因快影响速度快。但应注意Touch响应过快，易引发误操作

---

[渲染优化]

• HTML使用Viewport

  Viewport可以加速页面的渲染，请使用以下代码：

<meta name=”viewport” content=”width=device-width, initial-scale=1″>

• 减少Dom节点
  Dom节点太多影响页面的渲染，应尽量减少Dom节点

• 动画优化
  a） 尽量使用CSS3动画
  b） 合理使用requestAnimationFrame动画代替setTimeout
  c） 适当使用Canvas动画 5个元素以内使用css动画，5个以上使用Canvas动画（iOS8可使用webGL）

• 高频事件优化

  Touchmove、Scroll 事件可导致多次渲染

  a） 使用requestAnimationFrame监听帧变化，使得在正确的时间进行渲染
  b） 增加响应变化的时间间隔，减少重绘次数

• GPU加速

  CSS中以下属性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）来触发GPU渲染，请合理使用。

  CSS animations, transforms 以及 transitions 不会自动开启GPU加速，而是由浏览器的缓慢的软件渲染引擎来执行。
  现在，像Chrome, FireFox, Safari, IE9+和最新版本的Opera都支持硬件加速，当它们检测到页面中某个DOM元素应用了某些CSS规则时就会开启，最显著的特征的元素的3D变换。

    .class {
       -webkit-transform: translate3d(250px,250px,250px)
       rotate3d(250px,250px,250px,-120deg)
       scale3d(0.5, 0.5, 0.5);
    }

虽然我们可能不想对元素应用3D变换，可我们一样可以开启3D引擎。例如我们可以用transform: translateZ(0); 来开启硬件加速 。

    .class {
       -webkit-transform: translateZ(0);
       -moz-transform: translateZ(0);
       -ms-transform: translateZ(0);
       -o-transform: translateZ(0);
       transform: translateZ(0);
       /* Other transform properties here */
    }

PS：过渡使用会引发手机过耗电增加。

---