Web前端优化最佳实践之Server篇

Web 前端优化最佳实践第二部分面向 Server 。目前共计有 6 条实践规则。【注,这最多算技术笔记,查看最原始内容,还请访问:Exceptional Performance : Best Practices for Speeding Up Your Web Site 】

1. 使用 CDN (Use a Content Delivery Network)

国内 CDN 的普及还不够。不过我们有独特的电信、网通之间的问题,如果针对这个作优化,基本上也算能收到 CDN 或类似的效果吧(假装如此)。【Tin 说国内 CDN 用的挺多,看看 CDN 厂商的市场就知道了,还没走入寻常百姓家】

2. 添加 Expires 或 Cache-Control 信息头 (Add an Expires or a Cache-Control Header)各个浏览器都有针对的方案, Apache 例子【注意:下面的说明例子还不够精细,具体的环境上还要加一些调整】:ExpiresActive On
ExpiresByType image/gif "modification plus 1 weeks"

Lighttpd 启用 mod_expire 模块 后:

$HTTP["url"] =~ "\.(jpg|gif|png)$" {
   expire.url = ( "" => "access 1 years" )
}

Nginx 例子参考:

location ~* \.(jpg|gif|png)$ {
 if (-f $request_filename) {
    expires   max;
  break;
 }    
}
3. 压缩内容 (Gzip Components)

对于绝大多数站点,这都是必要的一步,能有效减轻网络流量压力。或许有人担心对 CPU 压缩对于 CPU 的影响,放心大胆的整吧,没事儿。Nginx 例子:

gzip      on;
gzip_types   text/plain text/html text/css ext/javascript;

另外参见:

IIS 如何启用 Gzip 压缩? 4. 设置 Etags (Configure ETags)

对于 Etag,可能是多数网站维护者都会忽略的地方。在这一系列优化规则出现之前,可能互联网上绝大多数站点都对这个问题忽略了。当然,Etag 对多数站点性能的影响并不是很大。除非是面向 RSS 的网站。【看到有朋友批评说写的简略,并且说 IE 不支持 ETag。明确说一下:IE 支持 ETag,倒是使用 IIS 要注意相关 Etag Bug。】

补充:我的意思是"很多网站在不注意的情况下都是打开 Etag 的,而没有网站关心如何用,消耗资源而不知。并不是说 Etag 不好,合理利用 Etag ,绝对能取得很好的收益.

5. 尽早刷新 Buffer (Flush the Buffer Early)

对这一条,琢磨了半天,貌似还是异步的思路。能更好的提升用户体验?

6. 对 AJAX 请求使用 GET 方法 (Use GET for AJAX Requests)

XMLHttpRequest POST 要两步,而 GET 只需要一步。但要注意的是在 IE 上 GET 最大能处理的 URL 长度是 2K。

时间: 2024-10-30 20:22:51

Web前端优化最佳实践之Server篇的相关文章

Web前端优化最佳实践之JavaScript篇

Web 前端优化最佳实践之 JavaScript 篇,这部分有 6 条规则,和 CSS 篇 重复的有几条.前端优化最佳实践,最重要的还是"实践",要理解这东西容易得很,关键是要去"实践",去"执行",去"反馈",去获取受益. 1. 脚本放到 HTML 代码页底部 (Put Scripts at the Bottom) 当一个脚本在下载的时候,浏览器干不了其它的事儿(串行了).所以,把它扔到最后面去处理.对于一些功能性的脚本,可

Web前端优化最佳实践之Cookie篇

Web 前端优化最佳实践第三部分面向 Cookie .目前只有 2 条实践规则. 1. 缩小 Cookie (Reduce Cookie Size) Cookie 是个很有趣的话题.根据 RFC 2109 的描述,每个客户端最多保持 300 个 Cookie,针对每个域名最多 20 个 Cookie (实际上多数浏览器现在都比这个多,比如 Firefox 是 50 个) ,每个 Cookie 最多 4K,注意这里的 4K 根据不同的浏览器可能不是严格的 4096 .别扯远了,对于 Cookie

Web前端优化最佳实践之CSS篇

Web 前端优化最佳实践第四部分面向 CSS.目前共计有 6 条实践规则.另请参见 Mozilla 开发者中心的文章:Writing Efficient CSS 1. 把 CSS 放到代码页上端 (Put Stylesheets at the Top) 官方的解释我觉得多少有点语焉不详.这一条其实和用户访问期望有关.CSS 放到最顶部,浏览器能够有针对性的对 HTML 页面从顶到下进行解析和渲染.没有人喜欢等待,而浏览器已经考虑到了这一点. 2. 避免 CSS 表达式 (Avoid CSS Ex

Web前端优化最佳实践之内容篇

Yahoo! 的 Exceptional Performance team 在 Web 前端方面作出了卓越的贡献.广为人知的优化规则也由 13 条到 14 条,再到 20 条,乃至现在的 34 条--真是与时俱进啊.最新的 34 条也针对不同的角度做了分类. 面向内容的优化规则目前有 10 条. 1. 尽量减少 HTTP 请求 (Make Fewer HTTP Requests) 作为第一条,可能也是最重要的一条.根据 Yahoo! 研究团队的数据分析,有很大一部分用户访问会因为这一条而取得最大

Web前端优化最佳实践之Mobile(iPhone)篇

Web 前端优化最佳实践最后一部分是针对移动应用的,其实只是针对 iPhone 的,目前只有两条规则. 1. 单个数据对象小于 25K (Keep Components under 25K) 这个似乎只是针对 iPhone 研究的.建议保持单个 Web 数据对象在 25 K 以下.为什么是 25K? Apple 官方信息指出可缓存到内存中的 Web 对象最大支持到 10M,但经过测试,发现也就是 25K 左右. iPhone 在市场上的优异表现,让 Web 人员不得不考虑如何针对其进行优化.相信

Web前端优化最佳实践之图象篇

Web 前端优化最佳实践第六部分面向 图片(Image),这部分目前有 4 条规则.在最近的 Velocity 2008 技术大会上,Yahoo! 的 Stoyan Stefanov 做的 Image Optimization: How Many of These 7 Mistakes Are You Making 也非常有参考价值.结合一起说一下. 1. 优化图片 (Optimize Images) 使用 GIF .JPG 还是 PNG 格式的图片? 尽可能的使用 PNG 格式的图片,更多的功

《Web前端开发最佳实践》——2.2 前端代码重构

2.2 前端代码重构 代码重构是业内经常讨论的一个热门话题.重构指的是在不改变代码外部行为的情况下进行源代码修改,重构之前需要考虑的是重构后如何才能保证外部行为不改变.对于后端代码来说,可以通过大量的自动化测试来确保重构后的代码逻辑,可对于普遍缺乏自动化测试的前端代码来说,重构之前一定要考虑再三才能下手.我曾经有一次不算太成功的前端重构经历,所幸的是没有导致太大的问题,但教训是惨痛的.此次重构的项目本身没有足够的自动化测试,尤其是针对前端的自动化测试,其实在重构之前也预想到了重构的风险.先来介绍

《Web前端开发最佳实践》——3.7 添加必要的< meta>标签

3.7 添加必要的< meta>标签 < meta >标签放置在HTML页面的head中,主要用于标识网站.其中基本上包含了网站的一些描述信息,如简介.作者等.这些信息有助于搜索引擎更准确地识别网页的内容,也有助于第三方工具抓取网站基本信息. 按照W3C的标准介绍,< meta>元素有4个属性:name.http-equiv.content和charset.< meta>标签通过name属性来表述页面文档的元信息,通过http-equiv属性设置HTTP请求

《Web前端开发最佳实践》——第2章 高效Web前端开发2.1 前端代码的结构组织和文件的命名

第2章 高效Web前端开发 本章首先将概述Web前端开发中的相关最佳实践,如前端代码文件组织.前端代码重构.前端框架的选择,以及前端开发过程中实用的开发辅助工具等,帮助读者提高前端开发的效率.好的开发方式在项目中会起到事半功倍的效果,并且可确保开发过程中的代码结构清晰,易维护.本章然后会介绍前端代码的基本命名规范和格式规范,良好的命名规范和规整的格式让代码看起来干净整洁,也体现了开发者良好的职业素养,应该说命名规范.整齐的格式不仅是开发过程中的一种约定,而且是程序员之间良好沟通的桥梁. 2.1