移动端性能优化

 

一、移动网站加载速度缓慢的原因

 

1、网站服务器

 

网站服务器（比如软件），默认情况下运行缓慢，或者尚未针对加载速度最大化进行合适的配置

 

2、虚拟主机解决方案

 

移动网站被托管于一个相对缓慢的虚拟主机解决方案（或硬件）中，或者这个网站流量非常高，经常超出虚拟主机可以处理的流量水平。

 

3、网站浏览器缓存

 

移动网站尚未被配置使用网站浏览器缓存

 

4、文件大小

 

移动网站页面要求下载资源，并且这些资源的文件大小加起来过大了。

 

5、HTTP请求

 

移动网站页面要求下载过多的资源，比如图片、音频、视频、js、css等文件，这会导致过多的http请求，每一次http请求都会执行三次握手，每次握手都会消耗较多的时间。

 

6、DNS查询

 

移动网站页面要求从过多的不同的主机名处下载各种资源，比如图片、音频、视频、js、css等文件，这会增加DNS查询次数，并且使网页加载速度变慢。

 

7、总体连接速度缓慢

 

一些有意或者无意的设置（过多的重定向、无效的请求等），会大大减慢页面加载速度

 

8、CDN

 

移动网站的用户大部分来自于面积极大的国家（或者横跨非常大的地理位置），但却没有使用CDN

 

9、网络自身速度缓慢

 

网站服务器与请求移动网站页面的用户（比如浏览器）之间的网络连接较慢。

 

 

 

二、HTML5框架可以提升网站的访问速度，通过优化前端将响应时间加快，使用户的等待时间减少。如何优化HTML5在移动设置上的性能表现，下面看一张图：

 

总之PC端性能优化的方法都可以应用到移动端来，而且移动端的时间消耗大部分在资源下载过程。

 

一：加载优化

 

1、减少HTTP请求数目

 

因为手机浏览器同时响应请求为4个请求（Android支持4个，iOS 5后可支持6个），所以要尽量减少页面的请求数，首次加载同时请求数不能超过4个。下面介绍减少HTTP请求数目的方法：

 

A、CSS Sprites：国内俗称 CSS 精灵，即雪碧图，这是将多张小图片合并成一张图片，达到减少 HTTP 请求的一种解决方案。可以通过 CSS background 属性来访问图片内容。这种方案同时还可以减少图片总字节数，节省命名词汇量（由命名多张图片文件变成一张）。

 

 B、合并 CSS 和 JS 文件：现在前端有很多工程化打包工具，如：grunt、gulp、webpack等。为了减少 HTTP 请求数量，可以通过这些工具再发布前将多个 CSS 或者 多个 JS 合并成一个文件。

 

C、采用 lazyLoad：俗称懒加载，可以控制网页上的内容在一开始无需加载，不需要发请求，等到用户操作真正需要的时候立即加载出内容。这样就控制了网页资源一次性请求数量。

 

 

2、缓存

使用缓存可以减少向服务器的请求数，节省加载时间，所以所有静态资源都要在服务器端设置缓存，并且尽量使用长Cache（长Cache资源的更新可使用时间戳）。

 

A、缓存一切可缓存的资源

 

B、使用长Cache（使用时间戳更新Cache）

 

C、使用外联式引用CSS、JavaScript

 

3、压缩HTML、CSS、JavaScript

减少资源大小可以加快网页显示速度，所以要对HTML、CSS、JavaScript等进行代码压缩，并在服务器端设置GZip。

A、压缩（例如，多余的空格、换行符和缩进、注释）

B、启用GZip

 

4、使用首屏加载（对一些重要内容优先加载显示，一些次要内容可延迟加载）

 

首屏的快速显示，可以大大提升用户对页面速度的感知，因此应尽量针对首屏的快速显示做优化。

 

 5、按需加载（按需加载可能会导致很多的重绘，影响渲染性能）

 

将不影响首屏的资源和当前屏幕资源不用的资源，放到用户需要时在加载，可以大大提升重要资源的显示速度和降低总体流量。

 

A、LazyLoad

B、滚屏加载

C、通过Media Query加载

 

6、预加载

 

大型重资源页面（如游戏）可使用增加Loading的方法，资源加载完成后再显示页面，但Loading时间过长，会造成用户流失。

A、可感知Loading(如进入空间游戏的Loading)

B、不可感知的Loading（如提前加载下一页）

C、对用户行为分析，可以在当前页加载下一页资源，提升速度。

 

7、避免重定向

重定向会影响加载速度，所以在服务器正确设置，避免重定向。

 

8、异步加载第三方资源

第三方资源不可控，会影响页面的加载和显示，因此要异步加载第三方资源。

 

9、控制资源文件加载优先级

资源文件处理不当会阻塞页面加载、渲染，因此在使用时需要注意以下几点：

 

 

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

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

 

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

 

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

 

 

 

二、图片优化

 

 1、压缩图片

 

图片是最占流量的资源，因此尽量避免使用他，使用时选择最合适的格式（实现需求的前提下，以大小判断），合适的大小，然后使用智图压缩，同时在代码中用Srcset来按需显示。

A、使用智图压缩（制图是基于window系统的一款压缩图片的软件，转化为合适的图片格式）

B、使用其它方式代替图片（使用CSS3；使用SVG；使用IconFont）

C、使用Srcset（设置响应式图片，根据不同的屏幕分辨率和设备像素比，尽可能选择高分辨率的图片）

D、选择合适格式的图片（webP优于JPG；PNG8优于GIF）

E、选择合适的大小（首次加载不大于1014KB；基于手机屏幕一般宽度不宽于640）

 

 

注意：过度压缩图片大小会影响图片显示效果。

 

三、CSS优化

 

1、尽量避免在HTML标签中使用style属性。( 因为在HTML标签中的style会阻塞页面的渲染 )

 

2、避免使用CSS表达式。（因为其执行频率很高，当页面滚动或者鼠标移动的时候，就会执行，这会带来很大的性能损耗）

3、移除空的CSS规则。（空的CSS规则增加了CSS文件的大小，且影响CSS树的执行，所以需移除空的CSS规则）。

4、正确使用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

5、不滥用float。（float在渲染时计算量比较大，尽量减少使用）。

6、不滥用Web字体。（Web字体需要下载，解析，重绘当前页面，尽量减少使用）。

7、不声明过多的font-size。（过多的font-size引发CSS树的效率）。

8、值为0时不需要任何单位。（为了浏览器的兼容性和性能，值为0时不要带单位）。

9、标准化各种浏览器前缀

 

    （a）、无前缀应放在最后。

    （b）、CSS动画只用（-webkit-，无前缀）两种即可。

    （c）、其它前缀为“-webkit- -moz- -ms-无前缀”四种（-o-Opera浏览器改用blink内核，所以淘汰）。

10、避免让选择符看起来像正则表达式。

11、高级选择器执行耗时长且不易读懂，避免使用。

 

四、js优化

 

1、用一个变量保存列表的length的值，避免每次执行的时候到要计算该值。

 

2、缓存DOM的选择与计算，避免每次Dom选择都要重新计算。

 

3、尽量使用ID选择器，ID选择器是最快的。（因为用id访问时，只要找到元素就停止在DOM上查找；而用其他选择器去查找元素则要对DOM所有节点都访问一遍。）

 

4、减少重绘和回流

 

    （a）、避免不必要的DOM操作

    （b）、尽量改变Class而不是Style，使用classList代替className

    （c）、避免使用document.write

    （d）、减少drawImage

5、尽量使用事件代理，避免批量绑定事件。（当网页中需要触发事件的对象比较多的时候，为了避免内存泄漏，我们把事件委托到其父对象上，借助事件冒泡机制，可以将事件委托到body，document等元素上，这样等于一个页面就只有一个事件触发，避免直接把事件添加到多个对象上）

6、touch事件优化，使用touchstart、touchend代替click。（响应速度快，但应注意touch响应过快，易引发误操作)。

 

减少DOM的操作

 

DOM操作为什么会影响性能？

 

在浏览器中，DOM的实现和ECMAScript的实现是分离的。例如，在IE中，ECMAScript的实现在jscript.dll中，而DOM的实现在mshtml.dll中；在chrome中使用webkit的WebCore处理DOM和渲染，但ECMAScript是在V8引擎中实现的，其他浏览器情况类似，所以通过Javascript调用dom接口，是相当于两个模块的交互。相比较在同一模块中的调用，这种跨模块的调用其性能损耗是很高的，但DOM操作对性能影响最大是因为它导致了浏览器的重绘和重排。

 

 浏览器渲染原理

 

从下载文档到渲染页面的过程中，

 

1）浏览器会通过解析HTML文档来构建DOM树

 

2）解析CSS产生CSS render tree(不包括位置和大小属性)

 

3）javascript在代码解析的过程中，可能会修改生成的dom树、和css render tree，之后根据dom树和css  render tree构建渲染树（包括位置和大小属性），在这个过程中css会根据选择器匹配HTML元素。渲染树包括了每个元素的大小，边距等样式属性渲染树中不包含隐藏元素及head元素等不可见元素。最后浏览器根据元素的坐标和大小来计算每个元素的位置，并绘制这些元素到页面上。

 

 五、渲染优化

 

1、HTML使用viewport。（viewport可以加速页面的渲染），如以下代码：

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

2、减少DOM节点

 

3、动画优化

（a）、尽量使用CSS3动画。

（b）、合理使用requestAnimationFrame动画代替setTimeout。

（c）、适当使用Canvas动画，5个元素以内使用css动画，5个以上使用Canvas动画（iOS8可使用webGL）。

 

4、高频事件优化。（ Touchmove、Scroll事件可导致多次渲染）

 

（1）、使用requestAnimationFrame监听帧变化，使得在正确的时间进行渲染。

（2）、增加响应变化的时间间隔，减少重绘次数。

 

5、GPU加速

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

注意：过度使用这些属性，会引发手机过度耗电