移动手机平台的HTML5前端优化指南

我们一起来看看来自ISUX的米随随分享的移动手机平台HTML5前端优化内容，或许能对你有所帮助和启发。

概述

1. PC优化手段的适用性：PC端的优化手段在移动端同样适用。
2. 首屏渲染指标：在移动端，我们提出三秒内渲染完成首屏的指标。
3. 首屏加载策略：基于第二点，首屏需在3秒内加载完成，若无法完成则使用Loading。
4. 首屏资源大小限制：联通3G网络平均速度为338KB/s（2.71Mb/s），所以首屏资源不应超过1014KB。
5. 渲染速度优化重点：移动端因手机配置原因，除加载速度外，渲染速度也是优化的重点。
6. 代码处理原则：基于第五点，要合理处理代码，减少渲染损耗。
7. 代码后置处理：基于第二、第五点，所有影响首屏加载和渲染的代码应在处理逻辑中后置。
8. 用户交互性能注意事项：加载完成后，在用户交互使用时也需注意性能。

优化指南

加载优化

加载过程通常最为耗时，可能占到总耗时的80%，因此是优化的重点。

• 减少HTTP请求：手机浏览器同时响应请求的数量有限，Android支持4个，iOS 5及以后版本可支持6个。所以要尽量减少页面的请求数，首次加载时同时请求数不能超过4个。
• 合并CSS、JavaScript：将多个CSS和JavaScript文件合并为一个，减少请求次数。
• 合并小图片，使用雪碧图：把多个小图片合并成一张雪碧图，通过CSS背景定位来显示不同的部分。
• 缓存：使用缓存可以减少向服务器的请求数，节省加载时间。所有静态资源都要在服务器端设置缓存，并且尽量使用长Cache（长Cache资源的更新可使用时间戳）。
• 缓存一切可缓存的资源：将可缓存的资源进行缓存，提高加载效率。
• 使用长Cache（使用时间戳更新Cache）：设置较长的缓存时间，并通过时间戳来更新缓存内容。
• 使用外联式引用CSS、JavaScript：避免内联式引用，提高缓存利用率。
• 压缩HTML、CSS、JavaScript：减少资源大小可以加快网页显示速度，要对HTML、CSS、JavaScript等进行代码压缩，并在服务器端设置GZip。
• 压缩（例如，多余的空格、换行符和缩进）：去除代码中的多余字符，减小文件大小。
• 启用GZip：在服务器端开启GZip压缩，进一步减小传输数据量。
• 无阻塞：写在HTML头部的JavaScript（无异步）和写在HTML标签中的Style会阻塞页面的渲染。因此，CSS应放在页面头部并使用Link方式引入，避免在HTML标签中写Style，JavaScript放在页面尾部或使用异步方式加载。
• 使用首屏加载：首屏的快速显示可以大大提升用户对页面速度的感知，应尽量针对首屏的快速显示做优化。
• 按需加载：将不影响首屏的资源和当前屏幕暂不使用的资源放到用户需要时才加载，可以大大提升重要资源的显示速度和降低总体流量。但按需加载会导致大量重绘，影响渲染性能。
• LazyLoad：延迟加载图片等资源，当资源进入可视区域时再进行加载。
• 滚屏加载：在滚动屏幕时加载新的资源。
• 通过Media Query加载：根据设备的媒体查询条件加载相应的资源。
• 预加载：大型重资源页面（如游戏）可使用增加Loading的方法，资源加载完成后再显示页面。但Loading时间过长会造成用户流失。通过对用户行为分析，可以在当前页加载下一页资源，提升速度。
• 可感知Loading（如进入空间游戏的Loading）：在页面加载时显示Loading提示，让用户知道页面正在加载。
• 不可感知的Loading（如提前加载下一页）：在用户无感知的情况下提前加载下一页的资源。
• 压缩图片：图片是最占流量的资源，因此尽量避免使用，若使用则选择最合适的格式（在满足需求的前提下，以大小判断）和合适的大小，然后使用智图压缩，同时在代码中用Srcset来按需显示。但过度压缩图片大小会影响图片显示效果。
• 使用智图（http://zhitu.tencent.com/ ）：利用智图工具对图片进行压缩。
• 使用其它方式代替图片：如使用CSS3、SVG、IconFont等。
• 使用Srcset：根据设备的屏幕分辨率和像素密度等条件，按需显示不同大小的图片。
• 选择合适的图片：webP格式优于JPG，PNG8格式优于GIF。
• 选择合适的大小：首次加载图片不大于1014KB，宽度不宽于640（基于手机屏幕一般宽度）。
• 减少Cookie：Cookie会影响加载速度，所以静态资源域名不使用Cookie。
• 避免重定向：重定向会影响加载速度，所以要在服务器正确设置，避免重定向。
• 异步加载第三方资源：第三方资源不可控，会影响页面的加载和显示，因此要异步加载第三方资源。

脚本执行优化

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

• CSS和JavaScript位置：CSS写在头部，JavaScript写在尾部或使用异步加载。
• 避免图片和iFrame等的空Src：空Src会重新加载当前页面，影响速度和效率。
• 尽量避免重设图片大小：在页面、CSS、JavaScript等中多次重置图片大小会引发图片的多次重绘，影响性能。
• 图片尽量避免使用DataURL：DataURL图片没有使用图片的压缩算法，文件会变大，并且要解码后再渲染，加载慢、耗时长。

CSS优化

• 避免在HTML标签中写Style属性：尽量将样式写在CSS文件中，提高代码的可维护性。
• 避免CSS表达式：CSS表达式的执行需跳出CSS树的渲染，因此应避免使用。
• 移除空的CSS规则：空的CSS规则增加了CSS文件的大小，且影响CSS树的执行，所以需移除。
• 正确使用Display的属性：Display属性会影响页面的渲染，因此要合理使用。
• display:inline后不应该再使用width、height、margin、padding以及float
• display:inline - block后不应该再使用float
• display:block后不应该再使用vertical - align
• *display:table - 后不应该再使用margin或者float**
• 不滥用Float：Float在渲染时计算量比较大，应尽量减少使用。
• 不滥用Web字体：Web字体需要下载、解析和重绘当前页面，尽量减少使用。
• 不声明过多的Font - size：过多的Font - size会影响CSS树的执行效率。
• 值为0时不需要任何单位：为了浏览器的兼容性和性能，值为0时不要带单位。
• 标准化各种浏览器前缀
• 无前缀应放在最后
• CSS动画只用（-webkit - 无前缀）两种即可
• 其它前缀为 -webkit - -moz - -ms - 无前缀四种，（-o - Opera浏览器改用blink内核，所以淘汰）
• 避免让选择符看起来像正则表达式：高级选择器执行耗时长且不易读懂，应避免使用。

JavaScript执行优化

• 减少重绘和回流
• 避免不必要的Dom操作：频繁的Dom操作会导致重绘和回流，应尽量减少。
• 尽量改变Class而不是Style，使用classList代替className：通过修改类名来改变样式，减少重绘和回流。
• 避免使用document.write：document.write会导致页面重绘，影响性能。
• 减少drawImage：减少Canvas中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节点。
• 动画优化
• 尽量使用CSS3动画：CSS3动画性能较好，优先使用。
• 合理使用requestAnimationFrame动画代替setTimeout：requestAnimationFrame可以在浏览器的下一帧中执行动画，性能更优。
• 适当使用Canvas动画：5个元素以内使用CSS动画，5个以上使用Canvas动画（iOS8可使用webGL）。
• 高频事件优化：Touchmove、Scroll事件可导致多次渲染。
• 使用requestAnimationFrame监听帧变化，使得在正确的时间进行渲染
• 增加响应变化的时间间隔，减少重绘次数
• GPU加速：CSS中以下属性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）可触发GPU渲染，请合理使用。但过度使用会导致手机耗电量增加。