电脑占内存小的浏览器 前端性能优化 —— 移动端浏览器优化策略(5)

3．使用CSS3，开启GPU加速

使用CSS3时可以设置transform: translateZ(0)来开启移动设备浏览器的GPU图形处理加速，让过程更加流畅。

-webkit-transform: translateZ(0);

-ms-transform: translateZ(0);

-o-transform: translateZ(0);

transform: translateZ(0);

4．合理使用Canvas和requestAnimationFrame

选择Canvas或requestAnimationFrame等更高效的实现方式，尽量避免使用setTimeout、setInterval等方式来直接处理连续。

5．SVG代替图片

部分情况下可以考虑使用SVG代替图片实现，因为使用SVG格式内容更小，而且SVG DOM结构方便调整。

6．不滥用float

在DOM渲染树生成后的布局渲染阶段，使用float的元素布局计算比较耗性能，所以尽量减少float的使用，推荐使用固定布局或flex-box弹性布局的方式来实现页面元素布局。

7．不滥用web字体或过多font-size声明

过多的font-size声明会增加字体的大小计算，而且也没有必要的。

六、架构协议类

1．尝试使用SPDY和HTTP 2

在条件允许的情况下可以考虑使用SPDY协议来进行文件资源传输，利用连接复用加快传输过程，缩短资源加载时间。HTTP 2在未来也是可以考虑尝试的。

2．使用后端数据渲染

使用后端数据渲染的方式可以加快页面内容的渲染展示，避免空白页面的出现，同时可以解决移动端页面SEO的问题。如果条件允许，后端数据渲染是一个很不错的实践思路。后面的章节会详细介绍后端数据渲染的相关内容。

3．使用Native View代替DOM的性能劣势

可以尝试使用Native View的MNV开发模式来避免HTML DOM性能慢的问题，目前使用MNV的开发模式已经可以将页面内容渲染体验做到接近客户端Native应用的体验了。

关于页面优化的常用技术手段和思路主要包括以上这些，尽管列举出很多，但仍可能有少数遗漏，可见前端性能优化不是一件简简单单的事情，其涉及的内容很多。大家可以根据实际情况将这些方法应用到自己的项目当中，要想全部做到几乎是不可能的，但做到用户可接受的原则还是很容易实现的。

于此同时我们要清楚的是，在我们做到了极致优化的同时也付出了很大的代价，这也是前端优化的一个问题。理论上这些优化都是可以实现的，但是作为工程师我们也要明白懂得权衡。优化提升了用户体验，使数据加载更快，但是项目代码却可能打乱，异步内容要拆分出来，首屏的一个雪碧图可能要分成两个，页面项目代码维护成本成倍增加，项目结构也可能变得混乱。

所以前期在设计构建、组件的解决方案时要解决好异步的自动处理问题。任何一部分优化都可以做得很深入，但不一定都值得，在优化的同时也要尽量考虑性价比，这才是我们作为一名前端工程师处理前端优化时应该具有的正确思维。

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/ruanjian/article-59534-5.html