web前端性能优化的方法，web前端性能优化pdf

目前有10条面向内容的优化规则。

1.“减少HTTP 请求数量”是第一项，也可能是最重要的一项。雅虎研究团队的数据分析显示，大多数用户访问从这些访问中受益最多。有几种常见方法可以实际减少HTTP 请求。

•1) 合并文件。例如，将多个CSS 文件合并为一个。 •2) CSS sprites 使用CSS 背景相关元素来执行背景图像的绝对定位。另请参阅：CSS Sprites: 用于图像切片的死亡之吻•3) 图像映射•4) 内联图像使用data: URL 方案将图像数据嵌入到实际页面中2. 减少DNS 查找减少DNS 查找显然，成本非常高高的。我还认为这是所有Yahoo! 网站的常见问题。主站点可能不那么明显，但一些子站点也有类似的明显问题。对于国内网站来说，过多使用站外小部件很容易导致过度的DNS 查找问题。

3. 避免重定向这并不是绝对的避免。尽量减少它。您还应该注意一些不必要的重定向。例如，在网站子目录后添加/（斜杠）可以有效避免重定向。 http://www.dbanotes.net/arch 和http://www.dbanotes.net/arch/之间存在差异。对于Apache服务器，可以通过配置Alias或mod_rewrite或DirectorySlash来解决这个问题。

4.使Ajax可缓存响应时间对于Ajax来说非常重要。否则，用户体验永远不会改善。提高响应时间的有效方法是缓存。其他几个优化规则也适用于此规则。

5. 后加载组件6. 预加载组件严格来说，以上两个都是异步的、灵活的应用。

7. 减少DOM 元素的数量8. 跨域拆分组件主要目标是提高并行下载页面组件的能力。但是，请避免跨越太多域名。否则会和第二条冲突。

9. 尽量减少iframe 的数量懂SEO 的朋友都知道iframe 在SEO 中是大忌。由于iframe 在前端优化方面各有优缺点，所以我们将问题分为两部分。

10、消除http 404错误（无404s） 对页面链接进行适当的测试，持续跟踪Web服务器错误日志，可以有效减少404错误，提高用户体验。请注意，由CSS 或JavaScript 引起的404 错误通常较难发现，因此很容易被忽略。

以下是内容部分的10 项。不得不说，具体的教学内容解释得不够详细。我会根据我的理解逐步补充。

网页制作poluoloo的文章简介：Web前端性能优化是一门大课题，是一个值得运维人员不断跟踪的课题，也是一项被很多网站残酷忽视的技术。

Web 前端优化最佳实践第二部分是关于服务器的。

目前共有6条练习规则。 [请注意，这些只是技术说明。要查看原始内容，另请参阅：卓越性能： 加快网站速度的最佳实践]

1. 使用CDN（使用内容分发网络） CDN 在日本尚未普及。然而，电信和中国网通之间存在一些独特的问题，如果进行优化，基本上可以导致CDN 或类似的效果（并使其看起来像这样）。 [丁说CDN在中国很普遍。如果你看看CDN厂商的市场，你会发现CDN还没有进入消费者的家庭。 ]

2. 添加Expires 或Cache-Control headers（添加Expires 或Cache-Control headers） 每个浏览器都有特定的解决方案（Apache 示例）您的具体环境。部分调整】:

ExpiresActive OnExpiresByType image/gif \'修复加1 周\'启用Lighttpd mod_expire 模块后：

$HTTP[\'url\']=~ \'\.(jpg|gif|png)___FCKpd___1quot; {expired.url=( \'\'=\'访问1 年\' )}Nginx 示例参考：

位置~* \.(jpg|gif|png)$ { if (-f $request_filename) { 直到过期； 中断； } }

3、压缩内容（Gzip组件）是大多数网站的必要步骤，可以有效减轻网络流量压力。有些人可能担心CPU 压缩对CPU 的影响，但不用担心。 Nginx 示例：

gzip on;gzip_types text/plain text/html text/css ext/javascript;另请参阅：

如何在IIS 4 中启用Gzip 压缩。配置Etag（配置ETag） Etag是大多数网站管理员可能会忽略的东西。在这套优化规则出现之前，互联网上的大多数网站可能都忽略了这个问题。当然，Etag 对大多数站点的性能不会产生重大影响。除非您的网站是面向RSS 的。 【有朋友批评这篇文章过于简单，说IE不支持ETags。】让我说清楚。虽然IE 支持ETag，但在使用IIS 时应该注意相关的ETag bug。 ]

旁注：这意味着许多网站在没有Etag 的情况下打开，并且没有网站关心它们如何使用Etag，甚至在没有意识到的情况下消耗资源。这并不是说Etag不好，而是如果合理使用Etag，一定会获得不错的收益。

5. 尽早刷新缓冲区我对此思考了很长时间，看起来这仍然是一个异步的想法。改善用户体验

6、使用GET进行AJAX请求XMLHttpRequest POST需要两步，而GET只需要一步。但是，请记住，GET 在IE 中可以处理的最大URL 长度为2K。

网页制作poluoloo的文章简介：Web前端性能优化是一门大课题，是一个值得运维人员不断跟踪的课题，也是一项被很多网站残酷忽视的技术。

Web 前端优化最佳实践的第3 部分是关于cookie 的。目前，只有两条实践规则。

1. 减少cookie 大小Cookie 是一个非常有趣的话题。 RFC 2109解释说，每个客户端最多可以保存300个cookie，每个域名最多可以保存20个cookie（事实上，目前大多数浏览器可以保存的cookie数量都比这个多，例如Firefox有50个）。注意：此处的4K 可能不完全是4096，具体取决于您的浏览器。不要做得太过分。关于cookie，最重要的是尽可能控制它们的大小，并避免在其中包装不必要的信息。

2. 早期关于Web 图像服务器的讨论中涵盖了为组件使用无cookie 域的主题。这里所说的Web组件主要是指图片、CSS等静态文件。所有Yahoo! 静态文件均位于yimg.com。当客户端请求静态文件时，可以减少向主域重复发送cookie。名称（yahoo）.com）。

从《当Cookie崩溃时》这篇文章中可以看出，MySpace和eBay的cookie都相当大，所以他们一定更关心用户行为。 eBay 最近建立了一个个性化平台来摆脱cookie 的限制。

网页制作poluoloo的文章简介：Web前端性能优化是一门大课题，是一个值得运维人员不断跟踪的课题，也是一项被很多网站残酷忽视的技术。

Web 前端优化最佳实践的第4 部分都是关于CSS 的。

目前共有6条练习规则。另请参阅Mozilla 开发人员中心文章：编写高效CSS。

1.将样式表放在代码页的开头我觉得官方的解释有点难以理解。实际上，这个项目与用户访问期望有关。 CSS放在顶部，让浏览器从上到下有针对性地解析和渲染HTML页面。没有人喜欢等待，浏览器也会考虑到这一点。

2.避免CSS表达式（Avoid CSS Expressions） 我个人认为，任何可以通过CSS表达式完成的事情也可以通过其他风险较小的方式完成。

3.从页面中移除JavaScript和CSS（外部化JavaScript和CSS）后，您可以对其应用单独的处理策略，例如压缩和缓存策略。

4. 缩小JavaScript 和CSS 最好不要使用JavaScript 和CSS。但这是不可能的，所以尽量让它尽可能小。语法缩写的缩写。

5、选择并使用@import代替@import 在IE中，@import指令相当于在HTML的底部写一个链接标签。这与第一点相矛盾。

6.避免过滤

网页制作poluoloo的文章简介：Web前端性能优化是一门大课题，是一个值得运维人员不断跟踪的课题，也是一项被很多网站残酷忽视的技术。

JavaScript Web 前端优化最佳实践

这部分有6 个规则，其中一些规则在CSS 文章中重复。最重要的前端优化最佳实践就是实践。这很容易理解。重要的是“实践”、“执行”、“反馈”、获得效益。

1.将脚本放置在HTML代码页的底部（Place script at thebottom） 当脚本被下载时，浏览器不能做任何其他事情（脚本被序列化）。所以，把它抛在身后并处理它。一些功能性脚本在实现时可能会遇到困境。不过，对于国内网站来说，很多都是使用Google Analytics服务来进行网站数据分析。此时，页面底部会出现绝对可行的建议。

2. 外部化JavaScript 和CSS 参见CSS 说明

3. 缩小JavaScript 和CSS 请参阅CSS 说明。

4.删除重复的脚本这在一些历史站点和论坛类型的网站上很常见。负责维护的人有太多差异，每个人都以自己的方式进行维护。这可能会导致潜在的麻烦。

5. 最小化DOM Access 的三个准则：

• 缓存对访问元素的引用• 在将节点添加到树之前“离线”更新节点（“离线”更新节点，然后将它们添加到树） • 使用JavaScript 输出页面布局避免- 这应该是CSS 修复的问题（避免固定布局与JavaScript） 6. 开发智能事件处理程序除了英文解释之外，我们还包含有关JavaScript 中内存泄漏问题的注释。

另一篇推荐文章是《如何优化 JavaScript 脚本的性能》。有关Ajax 优化指南，请参阅提高Ajax 应用程序性能和避免Web 服务漏洞。

附录1）：我整理的时候发现网上已经有一篇翻译草稿《Yahoo!网站性能最佳体验的34条黄金守则》了。看起来你已经重复了你的努力。

附录2)：CSS/JavaScript都有优化规则。然而，对于Flash来说似乎缺乏优化技术。

网页制作poluoloo的文章简介：Web前端性能优化是一门大课题，是一个值得运维人员不断跟踪的课题，也是一项被很多网站残酷忽视的技术。

Web 前端优化最佳实践第6 部分适用于图像(Image)

目前本节有四项规则。图像优化： 同样具有重要价值的是“您犯了多少这7 个错误”，由Yahoo! 的Stoyan Stefanov 在最近的Velocity 2008 技术会议上发表。我们一起来讨论一下吧。

1. 优化图像使用GIF、JPG 和PNG 格式的图像使用PNG 格式的图像，因为它们具有更多功能且尺寸更小（与GIF 相比）。

对于PNG 图像，请考虑使用Pngcrush 或类似的工具来优化它们。常用工具有：

•pngcrush http://pmt.sourceforge.net/pngcrush/•pngrewrite http://www.pobox.com/~jason1/pngrewrite/•OptiPNG http://www.cs.toronto.edu/~cosmin/pngtech/optipng/（参考： 教程） •PNGOut http://advsys.net /ken/utils.htm : 另请参阅有效使用PNG 图像的5 个技巧。

JPEG图像优化工具：

•jpegtran (http://jpegclub.org/) 考虑为网络设计图像的图像设计学生应该强调，他们并不总是需要设计大于可接受的尺寸。这应该是一种习惯，而不是一项伟大的技能。正是您所需要的。要记住这一点。

2.我们之前谈到使用CSS精灵技术优化图像（Optimize CSS Sprites），但简而言之：“使用CSS背景相关元素对背景图像进行绝对定位。”，将多个HTTP调用转换为单个调用， ETC。参考：CSS Sprites: 死亡之吻图像切片

补充：我见过有人滥用这种技术。我们建议将多个背景图像合并为一张以减少HTTP 调用。然而，必须记住，这个大图像并不会变得“沉重”。我已经看过超过100K 的背景图片。一张图片可能会减慢整个网站的速度。要获得更好的示例，请参阅Yahoo! 中的此图。

更新：使用CSS 精灵的一个潜在副作用是客户端消耗更多内存（请参阅）。

3. 不要缩放HTML 中的图像。在大多数情况下，这可能是由于滞后和未创建适当大小的图像造成的。如果您要批量处理图像，ImageMagic 命令（转换）可能就足够了。结尾。我必须指出，有太多页面有难看的放大图像。请保存这些页面。

4. Make favicon.icosmallandcacheable（使favicon.icosmallandcacheable） 这两个都可能不是问题。问题是太多网站根本没有favicon.ico。要判断一个具有自定义域名的博客是否专业，您可以只看它是否有favicon.ico。

--EOF--

旁注：视觉设计师应尽量控制图像大小，我们建议将其保持在200K 以下。这不是废话，这是参考页。

网页制作poluoloo的文章简介：Web前端性能优化是一门大课题，是一个值得运维人员不断跟踪的课题，也是一项被很多网站残酷忽视的技术。

Web 前端优化最佳实践的最后一部分涉及移动应用程序，但这实际上仅适用于iPhone。目前只有两条规则。

1.单个数据对象小于25K（保持组件小于25K） 这似乎只针对iPhone进行了研究。我们建议将单个Web 数据对象保持在25K 以下。为什么是25K呢？苹果官方的资料说，内存中可以缓存的Web对象最大大小是10M，但我们的测试显示只有25K左右。

iPhone在市场上的优越表现，迫使Web开发者考虑如何对其进行优化。我觉得这部分的内容是不断变化的。

2. 将组件打包到多部分文档中将网页组件打包到多部分文档中。其目的是减少HTTP请求。我们对这部分还不太了解，所以请等待进一步的更新。