一、具体体现的几个方面，（大家可以在评论区补充）

1.前面文章的pc端优化，在移动端同样适用。

2.目前对于开发者，用户来说，首屏的加载提出了3s加载完资源。（也可以用其他方式去优化加载的时间）

3.更加第二点，目前可以使用loading或者懒加载的方式去完成一个优化。使界面更加顺畅，用户体验更好。

4.移动端因手机配置的原因，除加载外呈现页面速度也是一个优化的重点。

5.合理的处理代码，减少代码的冗余程度，削减页面的损耗等等。

6.加载完结后用户交互使用时也要注意功能的开发。

二、具体展开（包括优点和缺点）

1.数据加载优化

1)、尽量减少http请求

• 由于移动端WebView能够同时响应的请求为4个（Android 4个，iOS 5后可以6个），所以要尽量缩减页面的请求个数，首次加载的请求个数不能超过4个。
• a) CSS、JavaScript代码合并。
• b) 小图片进行合并，并且运用雪碧图。

2）、使用缓存

• 运用缓存能够减少向服务器的请求数，节约加载time，所以所有静态资源都要在服务器端设置缓存，而且尽量运用长Cache（备注：长Cache资源的更新可运用唯一标志）。
• a) 缓存全部可缓存的资源。
• b) 运用长Cache。
• c) 运用外联式引用CSS、JavaScript。

3）、按需加载

• 将不影响首屏的资源和当前屏幕资源不必要的资源放到用户需求时才加载，能够大大提高重要资源的显现速度和下降整体流量。
• 按需加载会导致很多重绘，影响加载性能。
• LazyLoad。
• 滚屏加载。
• 经过Media Query加载。

4）、预加载

• 大型重资源页面（如游戏）可使用增加Loading的方法，资源加载完成后再显示页面。但Loading时间过长，会造成用户流失。
• 对用户行为分析，可以在当前页加载下一页资源，提升速度。
• 可感知Loading(如进入空间游戏的Loading)。
• 不可感知的Loading（如提前加载下一页）。

5）、图片压缩

• 运用css3，svg，iconFont等方式代替图片。
• 图片大小要合适
• 运用Srcset
• 图标可以用一个大的png，然后用样式去寻找自己想要的图标，这样利于加快加载速度。

6）、cookie减少

cookie会影响加载速度。

7）、避免重定向

重定向会影响加载速度。

8）、第三方资源进行异步加载。

9）、补充！！！ 压缩代码文件。例如启用Gzip等。（webpack打包，也会编译后压缩）

2.脚本执行优化

1. CSS写在头部，JavaScript写在尾部或异步。

2. 防止图片和iFrame等的空Src，空Src会从头加载当时页面，影响速度和效率。

3. 尽量防止重设图片大小，重设图片大小是指在页面、CSS、JavaScript等中屡次重置图片大小，屡次重设图片大小会引发图片的屡次重绘，影响性能。

4. 图片尽量防止运用DataURL。

5. DataURL图片没有运用图片的紧缩算法文件会变大，而且要解码后再烘托，加载慢耗时长。

1）、优化css

• 尽量防止写在HTML标签中写Style特点。
• 防止CSS表达式。
• CSS表达式的履行需跳出CSS树的烘托，因而请防止CSS表达式。
• 移除空的CSS规矩，空的CSS规矩增加了CSS文件的大小，且影响CSS树的履行，所以需移除空的CSS规矩。
• 正确运用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。

• 不乱用Float，Float在烘托时核算量比较大，尽量削减运用。
• 不乱用Web字体，Web字体需求下载，解析，重绘当时页面，尽量削减运用。
• 不声明过多的Font-size，过多的Font-size引发CSS树的功率。
• 值为0时不需要带任何单位，为了浏览器的兼容性和功能，值为0时不要带单位。
• 标准化各种浏览器前缀。

a) 无前缀应放在最后面。

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

c) 其它前缀为 -webkit- -moz- -ms- 无前缀 四种，（-o-Opera浏览器改用blink内核，所以筛选）。

• 防止让选择符看起来像正则表达式
• 高级选择器履行耗时长且不易读懂，防止运用

2）、js执行优化

• 削减重绘和回流

a) 防止不必要的Dom操作。

b) 尽量改动Class而不是Style，运用classList替代className。

c) 防止运用document.write。

d) 削减drawImage。

• 缓存Dom挑选与核算，每次Dom挑选都要核算，缓存它。
• 缓存列表.length，每次.length都要核算，用一个变量保存这个值。
• 尽量运用事件处理，防止批量绑定事件。
• 尽量运用ID挑选器，使用ID作为选择器，速度是最快的。
• touch事件优化，运用touchstart、touchend替代click，因快影响速度快。但应注意Touch响应过快，易引发误操作。

3）、渲染优化

• HTML运用Viewport，Viewport能够加快页面的烘托，请运用以下代码< meta name=”viewport” content=”width=device-width, initial-scale=1″>。
• 削减Dom节点，Dom节点太多影响页面的烘托，应尽量削减Dom节点。
• 动画优化。

a) 尽量运用CSS3动画。

b) 合理运用requestAnimationFrame动画替代setTimeout。

c) 恰当运用Canvas动画 5个元素以内运用css动画，5个以上运用Canvas动画（iOS8可运用webGL）。

• 高频事件优化，Touchmove、Scroll 事情可导致屡次烘托。

a) 运用requestAnimationFrame监听帧改变，使得在正确的时刻进行烘托。

b) 添加呼应改变的时刻距离，削减重绘次数。

• GPU加快。CSS中以下特点（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）来触发GPU烘托，请合理运用。