移动端性能优化的方法

悠悠 2022-05-28 08:57 391阅读 0赞

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

1、网站服务器

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

2、虚拟主机解决方案

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

3、网站浏览器缓存

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

4、文件大小

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

5、HTTP请求

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

6、DNS查询

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

7、总体连接速度缓慢

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

8、CDN

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

9、网络自身速度缓慢

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

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

![20180403095650211][]

总之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可以加速页面的渲染），如以下代码：

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渲染，请合理使用。  
  
**注意**：过渡使用这些属性，会引发手机过度耗电

[20180403095650211]: /images/20220528/538c6b734e924c90b0a6af7b3d10bc4a.png