针对CSS、HTML、JavaScript如何进行性能优化

在前端网站中，我们通常使用精灵图合并、减少HTTP请求；压缩HTML、CSS、JavaScript文件；使用CDN托管静态文件；使用localstorage缓存和mainfest应用缓存等方法来提升网站的性能，下面我将介绍一下在我们设计网站的时候对代码的一些优化。

针对CSS如何进行性能优化？

(1)正确使用display属性，display属性会影响页面的渲染， 因此要注意以下几方面，●display:inline后不应该再使用width、 height、 margin、 padding和float.

●display:inline-block后不应该再使用float.

●display:block 后不应该再使用vertical-align.

●display:table-*后 不应该再使用margin或者float.

(2)不滥用float.

(3)不声明过多的font-size.

(4)当值为0时不需要单位。

(5)标准化各种浏览器前缀，并注意以下几方面。

●浏览器无前缀应放在最后。

●CSS动画只用( -webkit-无前缀)两种即可。

●其他前缀包括-webkit-、-m0z-、 -ms-、无前缀(Opera浏览器改用blink内核，所以-0-被淘汰)。

(6)避免让选择符看起来像是正则表达式。高级选择器不容易读懂，执行时间也长。

(7)尽量使用id、 class选择器设置样式(避免使用style属性设置行内样式)。

(8)尽量使用CSS3动画。

(9)减少重绘和回流。

针对HTML,如何优化性能?

(1)对于资源加载，按需加载和异步加载。

(2)首次加载的资源不超过1024KB, 即越小越好。

(3)压缩HTML、CSS、JavaScript 文件。

(4)减少DOM节点。

(5)避免空src (空src在部分浏览器中会导致无效请求)。

(6)避免30*、40*、 50*请求错误。

(7)添加Favicon.ico, 如果没有设置图标ico, 则默认的图标会导致发送一个404或者500请求。

针对JavaScript,如何优化性能?

(1)缓存DOM的选择和计算。

(2)尽量使用事件委托模式，避免批量绑定事件。

( 3)使用touchstart、 touchend代替click.

( 4)合理使用requestAnimationFrame动画代替setTimeOut。

(5)适当使用canvas动画。

(6)尽量避免在高频事件(如TouchMove、 Scroll 事件)中修改视图，这会导致多次渲染。