前端的性能优化

一、CSS样式

1、避免使用@import
加入的@import会使页面在加载时添加额外的延迟
2、避免使用AlphalmageLoader滤镜
3、避免使用CSS表达式
4、避免使用通配选择器
5、避免使用单规则的属性选择器
6、避免正则属性选择器
7、移除无匹配的样式

二、避免使用Iframe

iframe也叫内联iframe，可以将一个HTML文档嵌入另一个文档，好处是嵌入的文档时父文档，通常借此使用浏览器模拟多线程。

三、避免使用空连接属性

空连接指img、link、script和iframe元素的src href属性的值为空，假如为空的时候，浏览器找不到src就会重新加载页面的src，消耗性能。

四、缩减HTML文档大小

1、删除对执行结果无影响的空行和注释。
2、避免table布局。
3、使用HTML5.

五、避免节点深层次嵌套

层次越深的节点在初始化构建时，所占越多通过浏览器HTML解析器会将整个HTML文档的结构储存到COM结构，当节点嵌套越深结构构建DOM树层次也就越深。

六、显示指定文档字符集

在HTML页面开始指定字符集有助于浏览器立即开始解析HTML代码

七、显示设置图片的宽高

有时需要在页面加载完之前，就对面页面布局进行定位，若页面中的图片无指定尺寸或尺寸于实际不符，浏览器会在图片下载完成在”回溯“该图片并重新显示，浪费时间。

八、避免脚本阻塞加载

1、使用事件代理
2、缓存选择器查询结果
3、避免频繁的IO操作
4、减少浏览器的缓存
应当减少cookie或coalStorage的操作，因为对它们进行的API是同步的，而它们是多个tab页面间共享的。
5、避免频繁的DOM操作
JavaScript访问DOM元素缓慢
缓存已经查询的元素
线下更新完节点之后，将它们添加到文档树中
避免使用JavaScript来修改页面布局
6、使用微类库
尽量避免大量使用大而全的类库存，而是按需使用微类库存来辅助开发