前端优化总结

最近看了不少关于前端页面优化的文章，在此将本人认为比较好的点总结一下。

关于html

1.标签嵌套层级不要太深，标签尽量简洁化

2.避免空的src和href

注解：当link标签的href属性为空、script标签的src属性为空的时候，浏览器渲染的时候会把当前页面的URL作为它们的属性值，从而把页面的内容加载进来作为它们的值。

3.javascript 脚本尽量放在底部

注解：以防止javascript阻塞。

关于 CSS

1.使用内联CSS

注解：可以减少浏览器去服务端去下载 CSS 文件。若CSS代码比较少可考虑使用内联CSS，若CSS代码大且复杂，应该使用外部CSS文件。

2.不要使用 @import 调用 CSS

注解：使用@import引用的文件只有在引用它的那个css文件被下载、解析之后，浏览器才会知道还有另外一个css需要下载，这时才去下载，然后下载后开始解析、构建render tree等一系列操作。

总结：不要使用 @import 调用 CSS，并且有多个CSS文件应该合并为一个。

3: 嵌套层级不要太深，一般三层最多

注解：这个主要还是看团队项目结构，命名规范对这个有很大影响，互有取舍，是命名长一点不会有重复还是命名方便一点嵌套深一点。

4.写多个css属性时，能连在一起写的就连在一起写

如:background: #fff url() center center no-repeat

关于javascript

1.延迟加载

注解：即当我们调用外部 javascript 的时候，使用 "onload" 事件

2.缓存变量

如：$("ul") 使用jquery这种语句记得将其存在变量里。

注解：每一句$()都是非常重的函数，能尽量少用就少用。

3. 多使用原生选择器

4. 条件相等判断使用===

注解：==要进行类型转换比较，多了一个步骤，效率低

5.for循环里的条件判断lis.length一定要缓存在变量里

注解：不然每一次都要去查询一次长度。

6. 构建DOM结构时使用字符串拼接方式
注解：效率最高。

7. 插入到DOM中时，将插入结果放在变量里，在for循环结束后插入

注解：如果在for循环中执行插入操作，会造成大量的重绘重排，应尽量减少对DOM的操作。

8. 使用直接函数，而不是与之等同的函数

如：$.ajax(),其他$.get()等最终都是调用$.ajax()，多余的步骤多余的调用必然导致效率相对低。

9. 善用事件委托

ITDogFire –ttsy