移动端开发前端优化方案

移动端开发主要是基于微信及手机浏览器的H5开发，其特点是设备屏幕较小、新特性兼容性较好、支持一些较新的 HTML5 和 CSS3 特性、需要与 Native 应用交互等。但移动端浏览器可用的 CPU 计算资源和网络资源极为有限，因此要做好移动端 Web 上的优化往往需要做更多的事情。

• 1．首屏数据请求提前，避免 JavaScript 文件加载后才请求数据
  为了进一步提升页面加载速度，可以考虑将页面的数据请求尽可能提前，避免在 JavaScript 加载完成后才去请求数据。通常数据请求是页面内容渲染中关键路径最长的部分，而且不能并行，所以如果能将数据请求提前，可以极大程度上缩短页面内容的渲染完成时间。

• 2．首屏加载和按需加载，非首屏内容滚屏加载，保证首屏内容最小化
  JavaScript 资源放到 HTML 文档底部可以防止 JavaScript 的加载和解析执行对页面渲染造成阻塞。由于 JavaScript 资源默认是解析阻塞的，除非被标记为异步或者通过其他的异步方式加载，否则会阻塞 HTML DOM 解析和 CSS 渲染的过程。

• 3．模块化资源并行下载
  在加载大量的图片元素时，尽量预先限定图片的尺寸大小，否则在图片加载过程中会更新图片的排版信息，产生大量的重排

• 4．inline 首屏必备的 CSS 和 JavaScript
  在 HTML 中直接缩放图片会导致页面内容的重排重绘，此时可能会使页面中的其他操作产生卡顿，因此要尽量减少在页面中直接进行图片缩放。

• 5．meta dns prefetch 设置 DNS 预解析
  设置文件资源的 DNS 预解析，让浏览器提前解析获取静态资源的主机 IP，避免等到请求时才发起 DNS 解析请求。通常在移动端 HTML 中可以采用如下方式完成。

<!--cdn域名预解析-->
<meta http-equiv="x-dns-prefetch-control" content="on" >
<link rel="dns-prefetch" href="//cdn.domain.com" >

• 6．资源预加载
  对于移动端首屏加载后可能会被使用的资源，需要在首屏完成加载后尽快进行加载，保证在用户需要浏览时已经加载完成，这时候如果再去异步请求就显得很慢。

• 7．图片压缩处理
  在移动端，通常要保证页面中一切用到的图片都是经过压缩优化处理的，而不是以原图的形式直接使用的，因为那样很消耗流量，而且加载时间更长。

• 8．使用较小的图片，合理使用 base64 内嵌图片
  在页面使用的背景图片不多且较小的情况下，可以将图片转化成 base64 编码嵌入到 HTML 页面或 CSS 文件中，这样可以减少页面的 HTTP 请求数。需要注意的是，要保证图片较小，一般图片大小超过 2KB 就不推荐使用 base64 嵌入显示了。

• 9．使用更高压缩比格式的图片
  使用具有较高压缩比格式的图片，如 webp（需要设计降级兼容方案）等。在同等图片画质的情况下，高压缩比格式的图片体积更小，能够更快完成文件传输，节省网络流量。

• 10．图片懒加载

<img data-src="//cdn.domain.com/path/photo.jpg" alt="懒加载图片" >

• 11. 使用 MediaQuery 或 srcset 根据不同屏幕加载不同大小图片
• 12. 使用 iconfont 代替图片图标
• 13. 页面元素尽量使用事件代理，避免直接事件绑定
• 14. 尽量使用 id, 合理缓存 DOM 对象
• 15. 使用 touchstart 代替 click
• 16. 避免使用 eval、with，使用 join 代替连接符＋，推荐使用 ECMAScript6 的字符串模板
• 17. 尽量使用 ECMAScript6＋的特性来编程
• 18. 使用 NativeView 代替 DOM 的性能劣势