标签：
对于我们前端开发人员来说，最繁琐的莫过于页面的优化以及浏览器兼容问题，今天我就浅谈一下关于页面的优化问题。
设计和构造计算机程序要经过成千上万次抉择，每个选择都有其显著的优缺点，而我们又期望收益最大化，损耗最小化，那我们肯定就只有选择最利于我们并且整体开销最小的方法，优化的原则也就是这个。
显然，优化的目的也非常明确了。举个例子，如果JavaScript代码执行时间超过0.1秒，页面将给人不够平滑快捷的感觉；如果执行时间超过1秒，则会感到应用程序缓慢；超过10秒，那么用户将感到非常沮丧，这当然是我们作为前端开发人员不愿意看到的了。
那么，现在我就作为一个初学者谈谈对于页面优化的一些小技巧吧：
我们可以通过合并图片、js/css，压缩js/css来达到减少请求的目的。当然，这些我们都可以通过grunt和fis工具来达到要求。一些看得过去的字体图标也可以拿来直接引用，还可以减少使用flash，多使用css动画。而http的缓存我们可以通过设置缓存的时间来提高浏览器的性能，而关于http版本不同而设置方法的不同就不细细介绍了。
Html中连接css以及js的位置也是有讲究的，css样式我们都习惯于放在顶部，而js代码放在底部，因为css先解析的话，我们的Html的样式就可以一下子显现出来，不会出现闪屏的现象，js则是等样式加载完再对对象进行操作。css/js我们一班也要采用外联的方法，以便于浏览器缓存。
应减少使用@import导入css和避免使用滤镜（Filter），当然，这些我们已经基本用不到了（以前的版本采用的方法），css中颜色也可以做细小的优化，比如#000000，可以写成#000。关于css选择器，我们应让它匹配的规则越少越好，减少使用属性选择器和后代选择器，多利用它的继承属性，如font、color等属性。
4. js代码优化
我们可以使用多线程来实现优化目的，如使用定时器setTimeout、setInterval、webwork技术、Gears。内存管理也是优化的重要手段要删除对象中的属性以及dom节点中不必要的节点。
5. DOM的优化
在我们添加节点的时候要使用appendChild或使用JQuery的append方法，这样才不会影响到其它节点。当我们批量操作DOM的时候，使用innerHTML开销小，速度快，同时让内存更加安全，如果要循环增加节点，应该采用临时变量进行存放，再一次性使用innerHTML添加。删除DOM节点前一定要先删除节点，否则节点所占的内存不会释放。尽可能地为父元素注册事件，由于浏览器有事件冒泡行为，因此就不需要为每个子元素添加事件。
6. 图片优化
图片优化也有很多方法，如减少图片数、降低图像质量，使用恰当的格式。在base64编码中必须加上数据头：data:image/png;base64。
关于页面优化的问题，其实还有许多的技巧，如减少回流的css样式设置。然而关于前端页面的性能优化带来的效益远不及后台服务器的优化，优化好服务器才是王道。在做优化的时候我们就更应该先做好评估。
以上仅作为我一个前端初学者关于前端页面优化的一点心得，如有错误，请大神指导！
标签：
原文地址：http://www.cnblogs.com/jiangyunfei/p/4540183.html
