高性能网站建设进阶指南

按有用程度 按页码先后 最新笔记

• 

  第130页

  JeremyWei (上善若水)

  9. Going Beyond Gzipping Gzip工作原理： Browser发送 Accept-Encoding: gzip,deflate头给Web Server告知浏览器支持gzip和deflate压缩 Web Server返回Content-Encoding: gzip头告诉浏览器返回的内容是经过了gzip压缩的。 据统计会有15%用户的响应是没有经过压缩的，原因是： 用户的请求中的Accept-Encoding: gzip, deflate被移除了，罪魁祸首是WEB代理和杀毒软件。它们都需要对从服务器返回的响应进行监听，监听没有被压缩... (更多)

  9. Going Beyond Gzipping

  Gzip工作原理：

  Browser发送 Accept-Encoding: gzip,deflate头给Web Server告知浏览器支持gzip和deflate压缩

  Web Server返回Content-Encoding: gzip头告诉浏览器返回的内容是经过了gzip压缩的。

  据统计会有15%用户的响应是没有经过压缩的，原因是：

  用户的请求中的Accept-Encoding: gzip, deflate被移除了，罪魁祸首是WEB代理和杀毒软件。它们都需要对从服务器返回的响应进行监听，监听没有被压缩的响应肯定比经过压缩的响应要占有更少的CPU，但是这样增加的网络时间已经超过了解压响应所占用的CPU时间。

  处理方法：

  1. 精简HTML大小

  2. 使用事件委托(event delegation)来节省JS代码量，把事件处理程序绑在父元素上。

  如果有50个如下的链接，那么会增加页面的大小。

  <a href=”/xxx/yyy” onclick=”somefunction()” />

  改成如下：

  <div onclick=”somefunction()”>

  <a href=”/xxx/yyy” />

  </div>

  把事件处理程序绑定到父元素上，减少很多代码。

  3. 使用相对URL减少页面大小

  1995年后，几乎所有的浏览器都支持如下的相对URL：

  以http://www.example.com/path/page.html为基准

  目标地址 相对地址 http://www.example.com/ //www.example.com http://www.example.com/index.html /index.html http://www.example.com/path/page2.html page2.html http://www.example.com/path2/page2.html ../path2/page.html http://www.example.com/path/page.html#f=bar #f=bar http://www.example.com/path/page.html?f=bar ?f=bar

  参考RFC1808

  4. 移除空白

  5. 移除属性的引号

  如果HTML是按照XHTML来写的，那么属性必须要用引号引起来。HTML4.01规范中说如果属性中只包含数字，字母，连字符，句点，冒号，下划线，那么属性的引号是可以被移除的。

  6. 避免行内样式

  7.为javascript变量设置别名

  为javascript比较长并且比较常用的函数设置一个别名，可以减少很多内容字节。

  var $ = document.getElementById;
  var a = $(“someid”);
  

  (收起)

  2011-06-08 21:52:37   1人收藏   回应

  收藏

  推荐
• 

  第195页

  冰雅冷轩

  *CSS选择符是从右到左进行匹配的*。“样式系统从最右边的选择符开始向左匹配规则。只要当前选择符的左边还有其他选择符，样式系统就会继续向左移动，直到找到和规则匹配的元素，或者因为不匹配而退出。” (更多)

  *CSS选择符是从右到左进行匹配的*。“样式系统从最右边的选择符开始向左匹配规则。只要当前选择符的左边还有其他选择符，样式系统就会继续向左移动，直到找到和规则匹配的元素，或者因为不匹配而退出。” (收起)

  2011-11-07 20:13:49   回应

  收藏

  推荐
• 

  布置行内脚本

  大怪兽 Karma (The Mayflower)

  还没读完，但是就已经急于发表我激动的心情。如果对于前端架构师来说是必读的书。对于前端开发工程师来说是开拓眼界的机会 (更多)

  还没读完，但是就已经急于发表我激动的心情。如果对于前端架构师来说是必读的书。对于前端开发工程师来说是开拓眼界的机会 (收起)

  2011-08-06 22:35:01   回应

  收藏

  推荐

• 

  第1页

  心皿 (灵魂，以及做到……)

  看了一些书和一些网站之后，关于Web 2.0站点如何提高可用性与性能的一点心得。基本上结合了《高性能网站》与Hijax的思路。 　　可以参考的一些网址： 　　《高性能网站建设指南》读后随感 　　http://www.dbanotes.net/web/high_performance_web_site.html 　　Yahoo!网站性能最佳体验的34条黄金守则——JavaScript和CSS 　　http://yy-web.javaeye.com/blog/274059 　　图片优化漫谈 　　http://www.cn... (更多)

  看了一些书和一些网站之后，关于Web 2.0站点如何提高可用性与性能的一点心得。基本上结合了《高性能网站》与Hijax的思路。

  　　

  　　可以参考的一些网址：

  　　

  　　《高性能网站建设指南》读后随感

  　　http://www.dbanotes.net/web/high_performance_web_site.html

  　　

  　　

  　　Yahoo!网站性能最佳体验的34条黄金守则——JavaScript和CSS

  　　http://yy-web.javaeye.com/blog/274059

  　　

  　　

  　　图片优化漫谈

  　　http://www.cnblogs.com/wanghongyuan/archive/2009/01/14/1375664.html

  　　

  　　High Performance Web Sites 读书笔记

  　　http://www.hickwu.com/?cat=4

  　　

  　　Hijax

  　　http://domscripting.com/blog/display/41

  　　

  　　Hijax PPT(同时也是一个可退化的Demo)

  　　http://domscripting.com/presentations/xtech2006/

  　　

  　　

  　　AHAH: Asynchronous HTML and HTTP

  　　http://microformats.org/wiki/rest/ahah

  　　

  　　以下是心得：

  　　

  　　1）Web 2.0 站点，应当在CSS没有load成功的情况下，依然能够呈现有意义有层次的内容

  　　

  　　这就是为什么，使用ul/li这样的办法来实现Menu要好过div。我们在XHTML中依然要保持文档自身的逻辑，而不能过于依赖CSS。不要过于滥用CSS，使得XHTML文件中只剩下一堆没有任何意义感的div和span。

  　　

  　　2）Web 2.0 站点应当能够在JavaScript被禁用的情况下，自然地退化为传统的Web 1.0的每页面刷新模式（所谓的Hijax开发方式）

  　　

  　　这就意味着，应该使用渐进式的方式引入Ajax：首先使用户点击的是一个真的链接，然后再用JavaScript加以拦截，并以Ajax的方式获取信息和刷新部分页面，而且在标签里直接onclick，而要在外部js中通过操作DOM的方式实现，并且在函数体中return false以禁用那个链接。

  　　

  　　这也意味着后端必须以模块化的方式实现，既能返回整个页面，也能返回部分页面，或者数据或脚本。这对于Ruby的erb特别好实现。推荐视频（http://media.railscasts.com/videos/136_jquery.mov），不过你得熟悉jQuery和Rails。

  　　

  　　这还意味着，对数据有效性的验证，Ajax仅仅起提升用户体验的效果（即时性），真正的验证需要在后端再做。

  　　

  　　优先使用返回部分页面（即Ahah方式），接下来依次考虑：JSON、XML、JavaScript脚本。

  　　

  　　不要滥用Ajax。何况这种滥用，不利于SEO(搜索引擎优化)。有一些过于富的应用，应该使用Air使其成为桌面程序，却又拥有Web的许多优点，如CSS就非常利于程序的换肤。

  　　

  　　3）Web 2.0 站点应当为用户在Web 1.0时代建立起的许多直觉提供支持，这包括：页面刷新提示、后退/前进支持，甚至可收藏的链接。

  　　

  　　页面刷新提示是最基本的。包括正在读取的动画、保存成功的一个div的提示等。

  　　

  　　关于后两方面，网上有不少讨论。Hijax的方式将方便可收藏性的实现。

  　　

  　　4)Web 2.0 站点应该能够以某种方式提供Web Services

  　　

  　　可以以REST方式或SOAP方式，或曰Open API来为其他网站提供它所实现的服务。这可以使网站的服务的可重用性大大提高。

  　　

  　　5）Web 2.0 站点必须保持较高的性能

  　　

  　　不可以因为追求rich而让网速poor的用户无法顺利访问。

  　　

  　　这里讲三个我能理解的要点：

  　　

  　　将CSS置于页面头部（注意对于IE，@import相当于将其至于尾部，所以应尽量避免@import），这样可以CSS中指定的样式更早起作用，避免用户看到较丑陋的HTML或空白。

  　　

  　　将脚本置于页面脚部，这样可以防止脚本的执行阻塞了页面的载入，而且这也合乎逻辑，因为大多数脚本本质上都在页面完全载入之后，改变其DOM，或作其他功能性运算。

  　　

  　　尽可能减少连接，即减少小文件的传输，这意味着将CSS、js、图片文件尽可能地合并，并争取以压缩的方式传输——理想状况只有一个CSS，一个js，一张图片（即CSS Sprites技术）。

  　　

  　　原来发表的地方：

  　　

  　　http://utensil.javaeye.com/blog/367408 (收起)

  2011-02-05 15:33:31   回应

  收藏

  推荐
• 

  第1页

  明成序

  开篇写得不错 (更多)

  开篇写得不错 (收起)

  2011-07-22 14:35:49   回应

  收藏

  推荐
• 

  第6页

  腻歪 (你来过一下子，我想念一辈子。)

  重点语句： - 瓶颈不是javascript而是DOM - 浏览器绝大部分时间是消耗在DOM上的 这句“不要纠结于个别浏览器的怪癖”是不是再说IE6呀~~ (更多)

  重点语句：

  - 瓶颈不是javascript而是DOM

  - 浏览器绝大部分时间是消耗在DOM上的

  这句“不要纠结于个别浏览器的怪癖”是不是再说IE6呀~~ (收起)

  2011-02-15 20:41:05   回应

  收藏

  推荐

• 

  第195页

  冰雅冷轩

  *CSS选择符是从右到左进行匹配的*。“样式系统从最右边的选择符开始向左匹配规则。只要当前选择符的左边还有其他选择符，样式系统就会继续向左移动，直到找到和规则匹配的元素，或者因为不匹配而退出。” (更多)

  *CSS选择符是从右到左进行匹配的*。“样式系统从最右边的选择符开始向左匹配规则。只要当前选择符的左边还有其他选择符，样式系统就会继续向左移动，直到找到和规则匹配的元素，或者因为不匹配而退出。” (收起)

  2011-11-07 20:13:49   回应

  收藏

  推荐
• 

  布置行内脚本

  大怪兽 Karma (The Mayflower)

  还没读完，但是就已经急于发表我激动的心情。如果对于前端架构师来说是必读的书。对于前端开发工程师来说是开拓眼界的机会 (更多)

  还没读完，但是就已经急于发表我激动的心情。如果对于前端架构师来说是必读的书。对于前端开发工程师来说是开拓眼界的机会 (收起)

  2011-08-06 22:35:01   回应

  收藏

  推荐
• 

  第1页

  明成序

  开篇写得不错 (更多)

  开篇写得不错 (收起)

  2011-07-22 14:35:49   回应

  收藏

  推荐