关于Web前端优化，作为一名前端工程师肯定明白。之前IT培训网跟大家也介绍了一些关于移动端前端优化事项和知识点。比如 以下的八点移动端的优化规范指南。同时也是我们需要遵循的8项原则。

1、PC优化手段在Mobile侧同样适用

2. 在Mobile侧我们提出三秒种渲染完成首屏指标

3. 基于第二点，首屏加载3秒完成或使用Loading

4. 基于联通3G网络平均338KB/s(2.71Mb/s)，所以首屏资源不应超过1014KB

5. Mobile侧因手机配置原因，除加载外渲染速度也是优化重点

6. 基于第五点，要合理处理代码减少渲染损耗

7. 基于第二、第五点，所有影响首屏加载和渲染的代码应在处理逻辑中后置

8. 加载完成后用户交互使用时也需注意性能

下面是IT培训网的小编为大家收集的一些WebAPP移动前端性能优化规范和设计指导。希望对大家有所帮助。

一、加载优化

1. 合并 CSS. Javascript

2、合并小图片，使用雪碧图

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

4. 使用长Ca ch e

5、使用外联式引用CSS、Javascript

6. 压缩 HTML. CSS. Javascript

7. 启用GZip

8.使用首屏加我

9、使用按需加载

10.使用滚屏加我

11, 通过Media Querw日载

12.增加Loading进度条

13. 减少Cookie

14，避免重定向

15.异步加载第二方资源

二、CSS优化

1、CSS写在头部，J avascri pt写在尾部或异步

2，避免图片和I Frame等的空Src

3.尽量避免重设图片大小

4，图片尽量避免使用DataURL

5.尽量避免写在HTM L标签中写Style属性

7.移除空的CSS规则

8.正确使用Display的属性

9. 不滥用Float

10.不滥用Web字体

11.不声明过多的Font-size

12.值为0时不需要任何单位

13.标准化各种浏览器前缀

三、图片优化

1、使用 (CSS3、SVG、Icon Font)代替图片

2、使用Srcset

3. webp优于J PG

4. PNG8优于GIF

5、首次加载不大于1014KB(基于3秒联通平 均网速所能达到值)

6、图片不宽于640

四、脚本优化

1、减少吏绘和回流

2、缓存Dom选择与计算

3、缓存列表、length

4、尽量使用剥引弋理，避免批量幺J定于件

5、尽量使用ID选择器

6. 使用 touchstart. Touchend 代替 click

五、渲染优化

1. HTM L 使用 Viewport

2、减少Dom节点

3、尽量使用CSS3动画

4、合理使requestAnimation Frame动画代 isetTimeout

5、适当使用Canvas动画

6.Touchmove、Scroll事件会导致多次渲染

7. 使用 (CSS3 transitions. CSS 3D