無標題文檔

创建高性能的 Web 页面

首先,感谢 圆心 和 小马 主持这次的技术交流会。此次关注的是 客户端的效率问题 ,根据 Yahoo 的总结,可以总结下面 14 条「军规」。

  1. 尽可能的减少 HTTP 的请求数 [content]
  2. 使用 CDN(Content Delivery Network) [server]
  3. 添加 Expires 头(或者 Cache-control) [server]
  4. Gzip 组件 [server]
  5. 将 CSS 样式放在页面的上方 [css]
  6. 将脚本移动到底部(包括内联的)[javascript]
  7. 避免使用 CSS 中的 Expressions [css]
  8. 将 JavaScript 和 CSS 独立成外部文件 [javascript] [css]
  9. 减少 DNS 查询 [content]
  10. 压缩 JavaScript 和 CSS (包括内联的)[javascript] [css]
  11. 避免重定向 [server]
  12. 移除重复的脚本 [javascript]
  13. 配置实体标签(ETags)[css]
  14. 使 Ajax 缓存 [content]

根据,PPT 的内容所示,我使用 Yslow 检查了下本人的主页,才得了个「F 47」(坦白说,与我本人估计的非常有出入)。

https://friable.rocks/_/2009_11_05/1971454c2cf7.jpg

主要的问题就是没有开启 Gzip 压缩,以及没有设置 HTTP 头缓存。看来折腾了那么久,除了服务器端的性能,客户端的缓存还是不能忽视的。

想想看,如果淘宝首页没有缓存,即便是多了 1KB 的页面容量,乘以每天上亿的 PV,这个数字将是多么的庞大。

最后, 提供本次的交流会的 PPT 下载 ,再次感谢他们。

有关更多的信息,可以访问 圆心 同志的 Blog ,他上面有更详实的内容。

别忘记清除浮动

很早的时候, 圆心 就告诫我,「要随时清楚浮动元素」。当时由于忙(也许这算不上是借口),我把他的话当作了耳边风。

今天偏偏在工作最为忙乱的时候,运营那边在添加数据时,发现页面乱了。幸好又是伟大的 圆心 同志帮我找到了这个老问题,并解决(大哥在上,请接受小弟一拜)。

总结下清除浮动的一般解决方案,更多的总结可以 看这里

用空标签清除

.clr {clear: both;}

<div id="layout">
    <div id="left">Left</div>
    <div id="right">Right</div>
    <p class="clr"></p>
</div>

使用 overflow 属性

#layout {overflow:auto; zoom:1;}

<div id="layout">
    <div id="left">Left</div>
    <div id="right">Right</div>
</div>

使用 :after (非 IE 浏览器)

#layout:after{
    display: block;
    clear: both; content: "";
    visibility:hidden; height: 0;
}

<div id="layout">
    <div id="left">Left</div>
    <div id="right">Right</div>
</div>

注:使用 :after 需要注意几点,设置高度为零(height: 0;);content 是必须的,但其值可以为空。

太子湾公园采花

上次的植物园采花 ,意犹未尽。多日的阴霾天气今日突然消去,于是又萌发了外出溜达的心思。

据说,西湖边的太子湾公园郁金香开得正胜,门票也便宜,算得上是性价比较高的娱乐活动,遂带上三五个挚友,向太子湾进军。

https://friable.rocks/_/2009_11_05/56157549c7f5.jpg

https://friable.rocks/_/2009_11_05/25773549c79a.jpg

https://friable.rocks/_/2009_11_05/35700549c802.jpg

传说中的郁金香,可怜我那三百万像素的相机,无法再将这些花儿拍得更漂亮。如果能有机会身临其境,感觉会更好。

https://friable.rocks/_/2009_11_05/83198549c7ae.jpg

https://friable.rocks/_/2009_11_05/87435549c7c5.jpg

https://friable.rocks/_/2009_11_05/31609549c7ca.jpg

正如美女需要如花来衬托一样,郁金香的美丽也需要其他的花来作为对比。与植物园那些冷艳的梅不同,太子湾的花儿可以用「奔放」来形容。

说道鲜花,想起了句很经典的论调。就是首个形容女性像鲜花的是个天才,第二个则是庸才,而第三个则是蠢材。遂此,我放弃了用这些话形容妮子,以讨好她的想法-- 即便向来都认为自己还算不上才,不过还是性命要紧。扯远了……

https://friable.rocks/_/2009_11_05/09887549c806.jpg

https://friable.rocks/_/2009_11_05/29910549c80f.jpg

下午的太子湾公园,太阳照着整个身子都觉得懒洋洋的,甚至萌发了睡意。但赏玩花后看见这些非常欧式的建筑,还是激起了极大的拍照欲望。这些「鸟巢」一样的建筑,看似美丽,但除了喝茶聊天以外,几乎没有其他的适用场合了。

https://friable.rocks/_/2009_11_05/76762549c87d.jpg

其内的东西并不便宜,普通的冰棍就要五元人民币起步,又比如原价三元的饮料,店主硬生生的给涂成了五元。看来,每个景区的物价虚高,这是极富中国特色的。

https://friable.rocks/_/2009_11_05/70596549c830.jpg

最后,来张此次活动人员的「集体照」,人员有 陆哥 夫妇、 Van妮子 以及本人,哪位读者能够依次辨别?

附,有关更多的照片,可以 访问这里

我的照片

您好!我叫「明城」,八零后、码农、宁波佬,现居杭州。除了这里,欢迎您通过 GitHubTwitterInstagram 了解我的更多动态。

本博客原名 Gracecode.com 、现更名 「無標題文檔」「精于心、简于形」以此践行极简、务实的理念。 在工作之外的个人生活方面,我崇尚简单、追求平淡,偶尔也带着一些可能不被所有人理解的幽默感。

同时为避免争议和麻烦,在此郑重声明:本站所有内容为非 AI 生成,所有观点及立场均仅代表我个人,不代表任何我所就职或关联的公司与组织。

如果您想联系我,可以发我邮件 `echo bWluZ2NoZW5nQG91dGxvb2suY29tCg== | base64 -d`

分类

搜索

文章