雅虎优化
其他情况不一一罗列,原则是在最大程度保证图片不变形与图片最大面积展现的前提下,尽可能为图片设置宽高值,总之就是权衡。
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合并静态资源
Comet:基于http的服务端推技术
使用DataURI减少图片请求
尝试仅作必要的JS更新
利用本地存储做缓存
关于最小化HTML
进一步讨论Gzip
进一步讨论域名划分
打开keep-alive,重用HTTP连接
使用JSON进行数据交换
保障页面可交互性
缩短最快可交互时间
异步无阻脚本下载
高效的javaScript
第三方代码性能问题
inline脚本不要与CSS穿插使用
使用高效的CSS选择器
进一步讨论及早Flush
关于视觉和心理学
相关阅读
ab是一种用于测试Apache超文本传输协议(HTTP)服务器的工具。apache自带ab工具,可以测试apache、IIs、tomcat、nginx等服务器但是ab没
深度 | 从Go高性能日志库zap看如何实现高性能Go组件 原创: 李子昂 高可用架构 导语:zap是uber开源的Go高性能日志库。本文作者
小编为大家带来最新的显卡天梯图(更新至2017年1月)。我们知道显卡天梯图是可以查看历来重要的显卡性能排行榜,一目了然的梯度排名可
一、TCP协议的特点 TCP全称为 “传输控制协议”(Transmission Control Protocol),顾名思义, 要对数据的传输进行一个详细的控制。
在性能测试中通常使用二八原则来量化业务需求。二八原则:指80%的业务量在20%的时间里完成。例:如某个公司1000个员工,在周五下午3点-