随笔分类 -  High Performance Web Sits

摘要：1. Web2.0、DHTML、Ajax Web 2.0的关键概念包括类似应用程序的用户界面和来自多个Web Services的聚合信息。Web页面变得越来越像一个具有良好定义的输入、输出的应用程序。DHTML和Ajax是实现这些概念的技术； DHTML是允许在页面加载完毕后，HTML页面的表现能够变化。这使用Javascript和CSS与浏览器的DOM进行交互来实现。Ajax是DHTML中使用的一项技术，客户端可以获取和显示用户请求的新信息而无需重新加载页面； Ajax表示异步的JavaScript和XML（Asynchronous JavaScript and XML)。Ajax不是... 阅读全文

摘要：1. ETag a. ETag（实体标签 Entity Tag）是web服务器和浏览器用于确认缓存组件的有效性的一种机制； b. 如果缓存过期了，则会发送一个条件GET请求进行有效性检查（和没设置Expires或max-age一样 Cache-Control:no-store才意味着不缓存）；若用户明确加载（refresh or reload）则会发送一个max-age：0【刷新缓存有效期】的条件GET请求；组件仍有效服务器则返回340 Not Modified。 c. 服务器检测缓存组件是否和服务器组件匹配有两种方式：比较最新修改时间 和 比较实体标签。2. ETag存在的问题 a.... 阅读全文

摘要：1. 导致重复脚本的主要因素：团队大小和脚本数量。2. 重复脚本损伤性能 a. 不必要的HTTP请求 重复脚本无长久缓存时（没设置Expires），会产生两次HTTP请求。第一次会产生一次脚本请求，一次条件GET请求；第二次会产生两次条件GET请求； 重复脚本有长久缓存时（设置Expires），第一次会产生一次HTTP请求，第二次就不会产生缓存（但刷新页面会产生二次max-age=0【刷新缓存有效期】的条件GET请求）； b. 执行Javascript所浪费的时间 脚本会多次执行。3. 避免重复脚本——实现一个脚本管理模块 a. HTML中：<script type="... 阅读全文

摘要：1. 重定向 a. 重定向（Redirect）用于将用户从一个URL重新路由到另一个URL； b. 重定向有很多种——301和302最常用； c. 通常针对HTML文档进行重定向，但通常也能用在请求页面的组件（图片、脚本等）； d. 使用重定向的原因：网站重新设计、跟踪流量、记录广告点击、建立易于记忆的URL； e. 重定向会让页面变慢。2. 重定向类型 300 Multiple Choices(基于Content-Type）； 301 Moved Permancently 302 Moved Temporarily 303 See Other(对302的说明) 304 N... 阅读全文

摘要：1. 精简和混淆 精简是从代码中移除不必要的字符以减小其大小，进而改善加载时间的实践； 混淆也会移除注释和空白，同时它还会改写代码，函数和变量的名字将被转换为更短的字符串；（可能引入错误，维护麻烦，调试困难） 精简有工具JSMin（有很多语言版本），混淆有工具DojoCompressor（改名为ShrinkSafe）； 内联脚本也应该精简，而且比外部文件简单，可以直接用后端语言版本的JSMin集成。2. 压缩和精简 压缩比精简节省更多，精简后压缩和混淆后压缩性能差别不大，但精简不具有混淆带来的风险，所以建议精简后压缩。3. 精简CSS CSS中的注释和空白比JavaScript少，... 阅读全文

摘要：1. DNS DNS就是URL和实际宿主服务器之间的一个间接层，将主机名映射到IP地址上。 如果一个服务器被另外一个具有不同IP地址的服务器替代了，DNS允许用户用同样的主机名来连接到新的服务器。可以将多个IP地址关联到一个主机名，为网站提供高冗余度。2. DNS和TTL a. DNS可以被DNS服务器（ISP或局域网的一台特殊的缓存服务器）、操作系统、浏览器缓存； b. 只要浏览器在其缓存中保留了DNS记录，就无需请求操作系统。浏览器丢弃该记录时，就会向操作系统询问IP地址，操作系统或者通过其DNS缓存响应，或者将请求发送给远程DNS服务器； c. 考虑到IP地址变化以及缓存会消耗... 阅读全文

摘要：1. 内联 VS 外置 a. 纯粹而言，内联快点，因为内联的组件http请求少，虽然合一并行下载组件，但总之外置要慢； b. 然而由于JavaScript和CSS外部文件可以被缓存，HTML文档的大小减小，而且不会增加HTTP请求的数量； c. 比较依赖于页面查看（一次会话查看次数和查看周期）、空缓存VS完整缓存、组件重用。2. 组件重用---JavaScript和CSS作为外部文件可以被组件重用 a. 为每个页面提供一组分离的外部文件---每个页面都要强制用户使用另外一组外部组件并产生HTTP请求；（一般一次会话只访问网站一个页面） b. 创建一个单独的、联合所有的JavaScri... 阅读全文

摘要：1. CSS表达式：　CSS expressions only work in Internet Explorer background-color: expression((new Date()).getHours()%2 ?"#B8D4FF" :"#F08A00"); expression方法接受一个JavaScript表达式，CSS属性将被设置为对js表达式进行求值得结果。 expression被其他浏览器忽略，但却是IE浏览器创建跨浏览器有效方法。 IE不支持min-width, 可以这样： width: expression(document. 阅读全文

摘要：1. 脚本下载时，将阻塞 后面内容的呈现 和 后面组件的下载 。因为脚本可能会使用document.write来修改页面内容，因此浏览器会等待，以确保页面能恰当地布局；还有一个原因是确保脚本的执行顺序。2. 并行下载 HTTP1.1 建议浏览器从每个主机名并行的下载两个组件，IE和Firefox都遵守这一建议，但可以修改浏览器配置； 也可以通过使用CNAME（DNS别名）来讲组件分别放到多个主机名中，Yahoo！研究表明，使用2个主机名比使用1,4,或10和主机名性能更好； 脚本下载会阻塞并行下载和页面呈现，执行时会阻塞页面呈现。3. 最佳情况：将脚本放在底部 defer属性指定不需要... 阅读全文

摘要：1. 组件（图片、样式表、脚本等等）是呈现页面所必须的，组件通常是按照在文档出现的顺序下载的。2. 样式表在页面中的位置并不影响下载时间，但是会影响页面的呈现。 如果样式表仍在加载，构建呈现树就是一种浪费，因为在所有样式表加载并解析完毕之前无需绘制任何东西。否则，在其准备好之前显示内容就会遇到FOUC（无样式内容闪烁）问题。 样式表放在文档底部时，IE针对以下三种情况会用白屏代替闪烁： a. 在新窗口中打开时； b. 重新加载时； c. 作为主页。3. @import会造成组件无序下载，从而可能会引起闪烁和白屏，用link不会出现问题。 HTML规范：和A不一样，<link>只能出 阅读全文

摘要：1. 压缩是通过浏览器发送Accept-Encoding头和服务器响应Content-Encoding完成的。2. 压缩什么 很多网站会压缩其HTML文档，实际上压缩脚本和样式表也是非常值得做的（还包括XML和JSON在内的文本响应）。图片和PDF不应该被压缩，因为他们本来就被压缩了，再压缩只会浪费CPU资源。 根据经验通常对大于1kb或2kb的文件进行压缩，mod_gzip_minimun_file_size指令会控制着希望压缩的文件的最小值，默认值为500B。3. 配置 a. 一般压缩方法有gzip和deflate，但gzip支持的浏览器最多，并且压缩效果也较好； b. Apach... 阅读全文

摘要：1. Expires and Max-Age a. Expires可以指示浏览器使用缓存组件直到有效期，通过指定一个特定有效期时间（Expires: Thu, 15 Apr 2010 20:00:00 GMT），需要考虑服务器和客户端同步性； b. Cache-Control使用max-age来指定缓存被缓存多久，指定的是一个相对时间,单位为秒（Cache-Control: max-age=315360000）； c. Cache-Control优先级更高，同时存在时可以重写Expires，但是HTTP1.0不支持Cache-Control； d. mod_expires Apache... 阅读全文

摘要：1. 正确部署服务器：当用户群增加时，有必要在多个地理位置不同服务器上部署内容，由于性能黄金法则，首先可以考虑将组件服务器分散开；2. 内容发布网络（CDN） a. CDN是一组分布在多个不同地理位置的Web服务器，用于更加高效地向用户发布内容； b.CDN可以缩短响应时间、备份、扩展存储能力、进行缓存、缓和web流量峰值压力； c.CDN缺陷：响应时间可能受到其他网站影响，因为CDN服务商在其所有客户之间共享web服务器；无法直接控制组件服务器所带来的特殊麻烦； d.CDN用于发布静态内容。 阅读全文

摘要：1. 由性能黄金法则得知，改善响应时间的最简单途径就是减少组件的数量，并由此减少HTTP请求的数量。2. 图片地图 a. 允许在一个图片上关联多个URL，目标URL的选择取决于单击图片哪个位置； b. 服务器端图片地图：所有点击提交到同一URL，向其传递用户点击的x，y坐标。Web将x，y映射为适当的操作； c. 客户端图片地图：将用户点击映射到指定操作。通过HTML的MAP标签实现； d. 缺点：区域坐标难确定，通过DHTML创建的图片地图在IE下无法工作。 e. <img usemap="#map1" border=0 src="/image/image 阅读全文

摘要：1. 性能黄金法则 只有10%~20%的最终用户响应时间花在了下载HTML文档上。其余的80%~90%时间花在了下载页面中的所有组件上。2. 时间分配： a. 有缓存：没有太多的下载活动，HTML文档下载后将阻塞HTTP请求，先进行解析HTML、JavaScript、CSS，并从缓存中获取组件； b. 大量的HTTP请求并行发生：因为使用了多个不同的主机名； c.HTML请求得到响应后（不需要响应完全结束）就开始解析（同时构造DOM树）并开始下载解析出的组件； d. 在请求脚本时不会发生并行请求：大多情况下（defer，async除外）浏览器在下载脚本时会阻塞其他其他组件下载（页面呈... 阅读全文