针对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 事件)中修改视图,这会导致多次渲染。