前端优化方法合集

好久没有写博客了，我参与的项目马上要改版，也想在前端方面做优化，于是总结前辈经验，留下记录，希望今后能有大用处。

减少http请求

• 使用雪碧图，合并图片
• 使用延迟加载图片技术lazyload
• 合并css文件，在一个CSS文件利用@import url('其他的CSS文件');
• 合并js文件

减少对DOM的操作

• javascript操作中减少对DOM元素的查询和修改，查询时可将其赋值给局部变量。 

使用json格式来进行数据交换

• var obj={"name":"darren","age":24,"location":"beijing"}  对象方式

• var jsonlist=[{"name":"darren","age":24,"location":"beijing"},{"name":"weidong.nie","age":24,"location":"hunan"}];  数组方式

高效使用HTML标签和css样式

• 精简高效的css命名之“三无原则”：无ID，无层级，无标签
• css命名简洁易懂

将css和js放到外部文件中引用，css放头，js放尾

• 因为浏览器在执行javascript代码时，不能同时 做其他事情，所以<script>每次出现会让页面等待脚本的解析和执行，javascript代码执行完成后才继续渲染页面。因为javascript的阻塞特点，建议把javascript代码放到</body>标签以前，这样既能有效防止javascript的阻塞，又能使得页面的html结构更快的释放。

精简css和js文件

•  使用css和javascript的压缩版本，可以减少下载的文件体积。
• 压缩工具YUI Compressor
• css可以使用sass