web前端优化，你知道多少？

还记得当初选择学web前端，是被网页的华丽效果而震撼。转眼间发现自己接触web前端也快一年了，期间自己也总结了一些web前端的优化，也参考了下别人的资料，今天就把它们分享出来给大家：

一、html页面优化

1.css文件放在head，js文件放在html尾部（</body>的前面即可）

因为：下载某一个js时其他任务是暂停的，需要等这个JS下载并执行完毕后再下载其他的。

2.尽量减少标签，不多用一个标签

比如:clear清除浮动用:after

3.减少dns查询

每引用一个来自外部的文件，就会有一个dns查询，一般对首次访问网站的速度会有影响。

4.避免出现空的src，如 src=""

5.减少http请求

   比如:(1)使用CSS Sprite技术(css精灵)

          (2)css和js代码，能尽量合并就合并。(外部链接)

6.js的延迟加载，异步加载，使用defer标签 、 async="true"

二、代码优化

1.项目最后使用压缩工具压缩css，js

   因为这样，可以减少页面的体积加快打开速度。

2.css的class不要太长，要有清楚的层级关系

3.js操作样式时使用class，html里不使用内联css和js代码

三、JS优化

1.字符串的拼接：使用 += 是较低效的，可使用数组的 join() 方法

2.使用循环时尤其不要使用 for(in),while比for的效率要高一点。（循环次数很大的时候）

3.局部变量的访问速度比全局变量更快，而且要尽量避免全局变量

4.对DOM元素的每一次操作代价都比较高，所以尽量少得操作。

比如：for循环中有对字符串的拼接，然后使用innerHTML操作,就应该把innerHTML放在for循环外面。

5.对某个dom节点进行操作时，将这个dom节点存在一个局部变量中。

6.关于字符串遍历，优先使用正则表达式

7.使用直接量  var a = [] 比var a = new Array()快

8.创建dom节点 最好不要直接写字符串，而应该调用creatElement()方法

四、服务器方面优化

1.提高自己服务器质量，带宽等方面

2.开启浏览器缓存，减少http请求

3.开启gzip压缩

写在最后：我认为学习就是不断的自己总结，和吸取别人的经验和教训。俗话说的好:“好记性不如烂笔头！”同理:“代码看得再多，不如敲一篇”因为这样才会体会其中的含义和语义，并能增加自己的记忆力。

本文由段亮博客，原创出品，如需转载请注明出处。

本文出处：http://www.duanliang920.com/learn/web300.html