前端性能优化是指浏览器加载网页时，减少加载时间，提高网页运行速度，从而达到一个更好的用户体验。可是要做到前端性能优化这一点却并不容易，因为前端性能优化涉及多个方面，在html ,css ,js里面都可以做到前端性能优化。这里就从这三个方面来看一下怎么做到这方面。
做到前端性能优化首先就应该按照Web标准来写网页，
Web标准是指html, css, js, 各自分开独立实现。在引入css和js时，所放的位置是有讲究的，浏览器在加载网页时按照从上到下的顺序，如果引入的css放在body下面，在网速较慢的情况下就会出现，首先看到的是没有css样式的页面，如果放在上面，即使在网速较慢的情况下，也不会出现看不到css样式未显示的清况，在上面引入css时，浏览器首先加载了css，再加载html, 这样就到了一个正常的浏览效果，加载js时，不能加载其他内容，所以在下面引入js，是最为合适的。
在html里面，图片是加载时间较慢的一种。由于图片大小不一，数量众多，所以将图片合并是不错的一种方式。
图片和并是指在css里面使用背景进行裁剪的方式，使用background:position在设置一下x轴和y轴即可。Js. css合并压缩同样可以减少浏览器的加载时间，这里就要使用到一个叫grunt.js 的工具使用grunt.js工具首先需要安装node.js运行环境。使用字体图标，减少使用flash, 多使用css动画。
避免使用表达式。在css当中应避免使用@import导入css.避免使用滤镜（Filter）在使用颜色值时，如果出现相同的单个字母，可以缩写为3个，例如#ffffff,则可以写为#fff，#aabbcc，
可以写为#abc。css选择器匹配的规则越少越好，因为选择器在加载时，是做右到左的顺序，并减少使用属性选择器，减少使用后代选择器，多利用css继承属性。如font.color等属性。Js代码优化中应使用多线程，线程包含在进程当中，进程包含在系统当中。进程可以同时运行。使用定时器.setTimeout.setInterval。使用Google开发的插件Gear（采用Webwork技术，解决兼容性内存管理）。使用delete删除对象的属性，从dom节点中删除不必要的节点 添加节点应该使用apppendChlid或使用Jquieryde append方法，这有这样才不会影响到其他节点。批量操作dom，使用innerHTML开销小，数度快，同时让内存更加安全。如果循环增加节点应该采用临时变量进行存放，再一次性使用innerTHML添加。
删除节点前，一定要先删除事件在删除节点，否则节点所占的内存不会释放。为节点添加事件时，可以为父元素注册事件，由于浏览器有事件冒泡的行为，因此就不需要为每个子元素添加事件。在html里面添加图片可以降低图片的质量，因为图片的质量越高，加载时间越长，并使用恰当的格式，如.jpg. gif. png。也可以使用base64编码这种方式添加图片，但必须加上数据头。
原文：http://www.cnblogs.com/9192miss/p/4542892.html