前端代码优化流程

目录

1. HTML性能优化

2. CSS性能优化

3. JQ/JS性能优化

4. 图片大小优化

5. 设备和浏览器兼容性优化

目的：为了提高加载速度，提高网站兼容性，代码的可读性和易用性，前端代码需要做优化工作。

 

方法：前端优化分为6个部分的优化，循序渐进。

1、HTML性能优化

1.1 P C端不用HTML5标签，减少兼容性问题。

如header、section、footer、nav、article取消，转化为.header,.section,.footer。css也随之重构。

 

1.2通过w3c检测

Validator.w3.org

 

2、css性能优化

1、运用boostrap.css的样式尽量用已经声明的class，然后在style.css里覆盖。

2、css压缩，用min.css

3、合并CSS和JSS文件

 

3、JQ/JS性能优化

1、减少DOM的操作，

2、使用新版的JQ

3、使用合适的选择器，ID>ELEMNT>CLASS>VALUE

4、查询时赋值给局部变量，缓存对象。

5、循环时DOM的操作

6、数组方式使用JQ对象

7、压缩JS

 

4、图片大小优化

压缩图片和使用图片Sprite技术