必威体育Betway必威体育官网
当前位置:首页 > 网站建设

再谈Yahoo关于性能优化的N条军规

时间:2018-11-19 20:41:03来源:网站建设作者:seo实验室小编阅读:56次「手机版」
 

雅虎优化

其他情况不一一罗列,原则是在最大程度保证图片不变形与图片最大面积展现的前提下,尽可能为图片设置宽高值,总之就是权衡。

Tables的宽高值同图片,尽可能设置。

3、 拆离内容

尽量用div取代tables,或者将tables打破成嵌套层次深的结构;

避免用这样的嵌套

<table> <table> <table> ... </table> </table> </table>

采用下面的或者div重构:

<table></table> <table></table> <table></table>

4、 高效的CSS书写规则

众所周知,CSS选择符是从右向左进行匹配的。

通常一个图片列表的的小模块

<div id="box"> <div class="hd"> <h3>我的旅途</h3> </div> <div class="bd"> <h4>旅途1</h4> <ul id="pics"> <li> <a href="#pic" title=""><img src="" alt="" /> </a> <p>这是在<strong>图片1</strong></p> </li> </ul> </div> </div>

为了代码上缩进后内层的整洁性,我们html有可能这样写之外,更喜欢看这样的css写法:

.box{border:1px solid #ccc }

.box .hd{border-bottom:1px solid #ccc }

.box .hd h3{color:#515151}

.box .bd{color:#404040 }

.box .bd ul{margin-left:10px}

.box .bd ul li{border-bottom:1px dashed #f1f1f1}

.box .bd ul li a{text-decoration:none}

.box .bd ul li a:hover{text-decoration:underline}

.box .bd ul li a img{border:1px solid #ccc}

.box .bd ul li p{text-align:left;}

.box .bd ul li p strong{color:#ff6600}

其实写到这里,问题已经显而易见了。深达五层抑或六层的嵌套,同时右边的选择符都是采用标签,在满足我们视觉平整与代码结构系统化的时候,付出的是性能的代价。

不做进一步的代码书写方式的探讨,受个人习惯与应用场景影响。这里对css选择符按照开销从小到大的顺序梳理一下:

ID选择符 #box

类选择符 .box

类型选择符 div

相邻兄弟选择符 h4 + #pics

子选择符 #pics li

后代选择符 .box a{}

通配选择符 *

属性选择符 [href=”#pic”]

伪类和伪元素 a:hover

参考《高性能网站建设-进阶指南》,有如下建议

避免使用统配规则;

不要限定ID选择符;

不要限定类选择符;

让规则越具体越好;

避免使用后代选择符;

避免使用标签-子选择符;

质疑子选择符的所有用途;

依靠继承;

还要注意到,即便是页面加载后,当页面被触发引起回流(reflow)的时候,低效的选择符依然会引发更高的开销,显然这对于用户是不佳的体验。

三、Yahoo军规再度挖掘会怎样?

在网站性能优化的路上,是不会有终点的,这也是前端工程师永不会妥协的地方。

想看到更牛P的优化建议么,请移步这里来关注李牧童鞋的分享:

使用combo合并静态资源

Bigpipe技术合并动态数据

Comet:基于http的服务端推技术

使用DataURI减少图片请求

使用良好的JS,CSS版本管理方案

尝试仅作必要的JS更新

利用本地存储做缓存

关于最小化HTML

进一步讨论Gzip

进一步讨论域名划分

打开keep-alive,重用HTTP连接

使用JSON进行数据交换

保障页面可交互性

缩短最快可交互时间

异步无阻脚本下载

优化内存使用,防止内存泄露

高效的javaScript

第三方代码性能问题

inline脚本不要与CSS穿插使用

使用高效的CSS选择器

进一步讨论及早Flush

关于视觉和心理学

分享到:

栏目导航

推荐阅读

热门阅读