移动端优化篇

减少资源大小可以加快网页显示速度，所以要对

HTML

复制代码

、

CSS

复制代码

、

JavaScript

复制代码

等进行代码压缩，并在服务器端设置

GZip

复制代码

GZip

复制代码

[h2]2.3 无阻塞[/h2]

写在

HTML

复制代码

头部的

JavaScript

复制代码

（无异步），和写在

HTML

复制代码

标签中的

Style

复制代码

会阻塞页面的渲染，因此

CSS

复制代码

放在页面头部并使用

Link

复制代码

方式引入，避免在

HTML

复制代码

标签中写

Style

复制代码

，

JavaScript

复制代码

放在页面尾部或使用异步方式加载[h2]2.4 使用首屏加载[/h2]

首屏的快速显示，可以大大提升用户对页面速度的感知，因此应尽量针对首屏的快速显示做优化。[h2]2.5 按需加载[/h2]

将不影响首屏的资源和当前屏幕资源不用的资源放到用户需要时才加载，可以大大提升重要资源的显示速度和降低总体流量。[h3]PS：按需加载会导致大量重绘，影响渲染性能[/h3]

LazyLoadMedia Query

复制代码

[h2]2.6 预加载[/h2]

大型重资源页面（如游戏）可使用增加

Loading

复制代码

的方法，资源加载完成后再显示页面。但

Loading

复制代码

时间过长，会造成用户流失。

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

LoadingLoading

复制代码

[h2]2.7 压缩图片[/h2]

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

Srcset

复制代码

来按需显示[h3]PS：过度压缩图片大小影响图片显示效果[/h3]

a）使用智图（ http://zhitu.tencent.com/ ）
b）使用其它方式代替图片(1. 使用
1. CSS3
复制代码
2. 使用
1. SVG
复制代码
3. 使用
1. IconFont
复制代码
）
c）使用
1. Srcset
复制代码
d）选择合适的图片(1.
1. webP
复制代码
优于
1. JPG
复制代码
2.
1. PNG8
复制代码
优于
1. GIF
复制代码
）
e）选择合适的大小（1. 首次加载不大于
1. 1014KB
复制代码
2. 不宽于
1. 640
复制代码
（基于手机屏幕一般宽度））

[h2]2.8 减少Cookie[/h2]

Cookie

复制代码

会影响加载速度，所以静态资源域名不使用

Cookie

复制代码

。[h2]2.9 避免重定向[/h2]

重定向会影响加载速度，所以在服务器正确设置避免重定向。[h2]2.10 异步加载第三方资源[/h2]

第三方资源不可控会影响页面的加载和显示，因此要异步加载第三方资源[h2]2.11 减少HTTP请求[/h2]

因为手机浏览器同时响应请求为4个请求（

Android

复制代码

支持4个，

iOS

复制代码

5后可支持6个），所以要尽量减少页面的请求数，首次加载同时请求数不能超过4个

a）合并
1. CSS
复制代码
、
1. JavaScript
复制代码
b）合并小图片，使用雪碧图

[h1]三、脚本执行优化[/h1]

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

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

[h1]四、CSS优化[/h1]

尽量避免写在HTML标签中写

Style

复制代码

属性[h2]4.1 css3过渡动画开启硬件加速[/h2]

.translate3d{ -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

复制代码

[h2]4.2 避免CSS表达式[/h2]

CSS表达式的执行需跳出CSS树的渲染，因此请避免CSS表达式。[h2]4.3 不滥用Float[/h2]

Float在渲染时计算量比较大，尽量减少使用[h2]4.4 值为0时不需要任何单位[/h2]

为了浏览器的兼容性和性能，值为

0

复制代码

时不要带单位[h1]五、JavaScript执行优化[/h1][h2]5.1 减少重绘和回流[/h2]

避免不必要的Dom操作
尽量改变
1. Class
复制代码
而不是
1. Style
复制代码
，使用
1. classList
复制代码
代替
1. className
复制代码
避免使用
1. document.write
复制代码
减少
1. drawImage
复制代码

[h2]5.2 TOUCH事件优化[/h2]

使用

touchstart

复制代码

、

touchend

复制代码

代替

click

复制代码

，因快影响速度快。但应注意

Touch

复制代码

响应过快，易引发误操作[h1]六、渲染优化[/h1][h2]6.1 HTML使用Viewport[/h2][h3]Viewport可以加速页面的渲染，请使用以下代码[/h3]

[/code][h2]6.2 动画优化[/h2][list][*]尽量使用 [code]CSS3

复制代码

动画

合理使用

requestAnimationFrame

复制代码

动画代替

setTimeout

复制代码

适当使用

Canvas

复制代码

动画

5

复制代码

个元素以内使用

css

复制代码

动画，

5

复制代码

个以上使用

Canvas

复制代码

动画（

iOS8

复制代码

可使用

webGL

复制代码

）[h2]6.4 高频事件优化[/h2]

Touchmove

复制代码

、

Scroll

复制代码

事件可导致多次渲染

requestAnimationFrame

复制代码

本次给大家推荐一个免费的学习群，里面概括移动应用网站开发，css，html，webpack，vue node angular以及面试资源等。
对web开发技术感兴趣的同学，欢迎加入Q群：943129070，不管你是小白还是大牛我都欢迎，还有大牛整理的一套高效率学习路线和教程与您免费分享，同时每天更新视频资料。
最后，祝大家早日学有所成，拿到满意offer，快速升职加薪，走上人生巅峰。