移动端性能优化的方法

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

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渲染，请合理使用。

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

移动端性能优化的方法相关推荐

人人都能掌握的Java服务端性能优化方案
转载自人人都能掌握的Java服务端性能优化方案作为一个Java后端开发,我们写出的大部分代码都决定着用户的使用体验.如果我们的代码性能不好,那么用户在访问我们的网站时就要浪费一些时间等待服务器的响 ...
移动端性能优化系列—启动速度
简介: 移动端性能对用户体验.留存有着至关重要的影响,作为开发者是不是被这样吐槽过,"这个 APP 怎么这么大?"."怎么一直在 APP 封面图转悠,点不进去" ...
unity移动端性能优化技术整理（持续更新）
目录 Overview 性能优化主要针对四大类问题填充率发热量功耗比瓶颈可能性的顺序性能分析工具性能测试方法确定瓶颈 CPU瓶颈 GPU瓶颈确定顶点瓶颈确定片元瓶颈确定带宽瓶颈增 ...
标题:ASP.NET几种进行性能优化的方法及注意问题
正文: 网站的性能对于ASP.NET程序开发人员来说非常重要.一个优秀的网站虽然有美观的页面设计,完善的服务功能,但是打开网页时有长时间的延迟,用户最终将会无法忍受.尤其对于大型的电子商务网站而言,每 ...
WEB前端性能优化常见方法
web前端是应用服务器处理之前的部分,前端主要包括:HTML,CSS,javascript,image等各种资源,针对不同的资源有不同的优化方式. 1. 内容优化 (1)减少HTTP请求数:这条策略是 ...
宝塔php并发500什么意思,宝塔bt面板服务器设置调整PHP最大并发性能优化设置方法方案...
这篇文章主要为大家详细介绍了宝塔bt面板服务器设置调整PHP最大并发性能优化设置方法方案,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴. 今天要给大家介绍的是宝塔 ...
时间段优化oracle,九大Oracle性能优化基本方法详解
51CTO数据库频道向您推荐<Oracle数据库调试与性能优化>专题,以便于您更好的理解本文. Oracle性能优化基本方法包括一下几个步骤,包括: 1)设立合理的Oracle性能优化目标 ...
html压缩原理,webpack--前端性能优化与Gzip原理
目录前言前不久看过掘金小册<前端性能优化原理与实践>,受益匪浅."我深感性能优化实在是前端知识树中特别的一环--当你需要学习前端框架时,文档和源码几乎可以告诉你所有问题的答案 ...
性能测试之前端性能优化（前端基础知识，前端性能测试常用工具，前端性能优化常见方法）
目录 1. 前端基础知识 1.1 为什么要关注前端页面的性能,了解页面的加载,渲染方式和顺序? 1.2 一次页面请求会经历哪些步骤? 1.3 页面的展示过程 2. 前端性能测试的常用工具 2.1 Go ...

移动端性能优化的方法

移动端性能优化的方法相关推荐

最新文章

热门文章