1. 尽量削减 HTTP 恳求 (Make Fewer HTTP Requests) 做为第一条，可能也是最重要的一条。按照 Yahoo! 研究团队的数据阐发，有很大一部门用户拜候会因为那一条而获得更大受益。有几种常见的办法能实在削减 HTTP 恳求：
•1) 合并文件，好比把多个 CSS 文件合成一个； •2) CSS Sprites 操纵 CSS background 相关元素停止布景图绝对定位；拜见：CSS Sprites: Image Slicings Kiss of Death •3) 图像地图 •4) 内联图象 利用 data: URL scheme 在现实的页面嵌入图像数据. 2. 削减 DNS 查找 (Reduce DNS Lookups) 必需明白的一点，DNS 查找的开销是很大的。别的，我却是觉得那是 Yahoo! 所有站点的通病，Yahoo！主站点可能还不敷明显，一些分站点，存在明显的类似问题。关于国内站点来说，若是过多的利用了站外的 Widget ，也很容易引起过多的 DNS 查找问题。
3. 制止重定向 (Avoid Redirects) 不是绝对的制止，尽量削减。别的，应该留意一些没必要要的重定向。好比对 Web 站点子目次的后面添加个 / (Slash) ，就能有效制止一次重定向。http://www.dbanotes.net/arch 与http://www.dbanotes.net/arch/ 二者之间是有差别的。若是是 Apache 办事器，通过设置装备摆设 Alias 或mod_rewrite 或是 DirectorySlash 可以消弭那个问题。
4. 使得 Ajax 可缓存 (Make Ajax Cacheable) 响应时间对 Ajax 来说至关重要，不然用户体验绝对好不到哪里去。进步响应时间的有效手段就是 Cache 。其它的一些优化规则对那一条也是有效的。
5. 延迟载入组件 (Post-load Components)6. 预载入组件 (Preload Components) 上面两条严酷说来，都是属于异步那个思惟灵敏运用的事儿。
7. 削减 DOM 元素数量 (Reduce the Number of DOM Elements)8. 切分组件到多个域 (Split Components Across Domains) 次要的目标是进步页面组件并行下载才能。但不要跨太多域名，不然就和第二条有些抵触了。
9. 最小化 iframe 的数量 (Minimize the Number of iframes) 熟悉 SEO 的伴侣晓得 iframe 是 SEO 的大忌。针对前端优化来说 iframe 有其益处，也有其短处，一分为二看问题吧。
10. 根绝 http 404 错误 (No 404s) 对页面链接的充实测试加上对 Web 办事器 error 日记的不竭跟踪能有效削减 404 错误，亦能提拔用户体验。值得一提的是，CSS 与 Java Script 引起的 404 错误因为定位稍稍"难"一点而往往容易被忽略。
那是内容篇的 10 条。应该说详细引导性的内容还不敷详细。逐步会按照本身的理解弥补上来。
网页造做poluoluo文章简介：Web 前端性能优化是个鬼话题，是个值得运维人员持续跟踪的话题，是被良多网站无情轻忽的手艺。
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 OnExpiresByType image/gif "modification plus 1 weeks"Lighttpd 启用 mod_expire 模块 后：
$HTTP["url"] =~ "\.(jpg|gif|png)___FCKpd___1quot; { 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。
网页造做poluoluo文章简介：Web 前端性能优化是个鬼话题，是个值得运维人员持续跟踪的话题，是被良多网站无情轻忽的手艺。
Web 前端优化更佳理论第三部门面向 Cookie 。目前只要 2 条理论规则。
1. 缩小 Cookie (Reduce Cookie Size)Cookie 是个很有趣的话题。按照 RFC 2109 的描述，每个客户端最多连结 300 个 Cookie，针对每个域名最多 20 个 Cookie (现实上大都阅读器如今都比那个多，好比 Firefox 是 50 个) ，每个 Cookie 最多 4K，留意那里的 4K 按照差别的阅读器可能不是严酷的 4096 。别扯远了，关于 Cookie 最重要的就是，尽量控造 Cookie 的大小，不要塞入一些无用的信息。
2. 针对 Web 组件利用域名无关性的 Cookie (Use Cookie-free Domains for Components)那个话题在此前针对 Web 图片办事器的讨论中曾经提及。那里说的 Web 组件(Component)，多指静态文件，好比图片 CSS 等，Yahoo! 的静态文件都在 yimg.com 上，客户端恳求静态文件的时候，削减了 Cookie 的频频传输对主域名 (yahoo.com) 的影响。
从那篇 When the Cookie Crumbles 能看出，MySpace 和 eBay 的 Cookie 都不小的，想必是对用户行为比力关心。eBay 前不久构造了 Personalization Platform ，就是从 Cookie 的限造中跳出来。
网页造做poluoluo文章简介：Web 前端性能优化是个鬼话题，是个值得运维人员持续跟踪的话题，是被良多网站无情轻忽的手艺。
Web 前端优化更佳理论第四部门面向 CSS。
目前共计有 6 条理论规则。另请拜见 Mozilla 开发者中心的文章：Writing Efficient CSS
1. 把 CSS 放到代码页上端 (Put Stylesheets at the Top)官方的解释我觉得几有点语焉不详。那一条其实和用户拜候期望有关。CSS 放到最顶部，阅读器可以有针对性的对 HTML 页面从顶到下停止解析和衬着。没有人喜好期待，而阅读器已经考虑到了那一点。
2. 制止 CSS 表达式 (Avoid CSS Expressions)小我认为通过 CSS 表达式能做到的工作，通过其它手段也同样能做到并且风险更小一些。
3. 从页面中剥离 JavaScript 与 CSS (Make JavaScript and CSS External)剥离后，可以有针对性的对其停止零丁的处置战略，好比压缩或者缓存战略。
4. 精简 JavaScript 与 CSS (Minify JavaScript and CSS)若是没有 JavaScript 与 CSS 可能更好。但，那是不成能的，SO，尽量小点吧。语法能简写的简写。
5. 利用 而不是@importChoose over @import在 IE 中 @import 指令等同于把 link 标识表记标帜写在 HTML 的底部。而那与第一条相违犯。
6. 制止利用Filter (Avoid Filters)
网页造做poluoluo文章简介：Web 前端性能优化是个鬼话题，是个值得运维人员持续跟踪的话题，是被良多网站无情轻忽的手艺。
Web 前端优化更佳理论之 JavaScript 篇
那部门有 6 条规则，和 CSS 篇 反复的有几条。前端优化更佳理论，最重要的仍是"理论"，要理解那工具容易得很，关键是要去"理论"，去"施行"，去"反应"，去获取受益。
1. 脚本放到 HTML 代码页底部 (Put Scripts at the Bottom)当一个脚本鄙人载的时候，阅读器干不了其它的事儿(串行了)。所以，把它扔到最初面去向理。关于一些功用性的脚本，可能实现起来有些两难。不外关于国内网站来说，有良多利用 Google Analytics 办事停止网站数据阐发的。那那一点来说，绝对可行的建议，放到页面更底下。
2. Make JavaScript and CSS External拜见 CSS 篇的描述
3. 精简 JavaScript 与 CSS (Minify JavaScript and CSS)拜见 CSS 篇的描述
4. 移除反复脚本 (Remove Duplicate Scripts)关于一些汗青遗留站点或是论坛类的网站来说，那却是比力常见的。接手维护人前后变革过多，每小我都有本身的一套。那就会带来一些潜在的费事。
5. 削减 DOM 拜候 (Minimize DOM Access)有三条指点建议:
•缓存已经拜候过的元素 (Cache references to accessed elements) •"离线"更新节点, 再将它们添加到树中 (Update nodes "offline" and then add them to the tree) •制止利用 JavaScript 输出页面规划--应该是 CSS 的事儿 (Avoid fixing layout with JavaScript) 6. Develop Smart Event Handlers除了英文解释外，那里也提醒一下留意关于 Java Script 内存泄露的问题。
别的保举一篇《若何优化 JavaScript 脚本的性能》，关于 Ajax 优化指点原则，能够拜见 进步 Ajax 应用法式性能，避开 Web 办事破绽。
跋文1) ：整理得差不多之后，发现收集上已经有一篇 《Yahoo!网站性能更佳体验的34条黄金守则》，是翻译稿。看来我做了一部门反复劳动。
跋文 2)：CSS / JavaScript 都有优化规则。但似乎贫乏了对 Flash 的优化理论。
网页造做poluoluo文章简介：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 格局的图片，更多的功用，更小的尺寸(与 GIF 比拟)。
关于 PNG 图片，考虑用 Pngcrush 或类似的东西停止优化。常见的东西如下表:
•pngcrushhttp://pmt.sourceforge.net/pngcrush/ •pngrewritehttp://www.pobox.com/~jason1/pngrewrite/ •OptiPNGhttp://www.cs.toronto.edu/~cosmin/pngtech/optipng/ (refer: 教程) •PNGOuthttp://advsys.net/ken/utils.htm 另请拜见: Five Tips For the Effective Use of PNG Images
对 JPEG 图片的优化东西：
•jpegtran (http://jpegclub.org/) 必须要强调的是，图片设想的同窗啊，请考虑设想面向 Web 的图片，不要动不动就设想超越可承受尺寸之外各人伙，那应该是一种习惯，而不是什么崇高高贵的技能，只需要记住就成了。
2. 利用 CSS Sprites 技巧对图片优化 (Optimize CSS Sprites)之前提到过，简单的说就是"操纵 CSS background 相关元素停止布景图绝对定位"，把屡次 HTTP 挪用变成一次挪用，更多参考：CSS Sprites: Image Slicings Kiss of Death
弥补一下：关于那个技巧我曾经见到有人滥用的。把多个布景图片揉成一个，削减 HTTP 挪用，那是一个很好的思绪。但必然要记住那个大图片不克不及太"重"，我看到过 100 多K 的布景图。一个图片就把整个网站拖得很慢。比力好的例子能够参考雅虎关系的那个图.
更新：利用 CSS Sprites 的一个潜在的副感化是客户端将消耗更多内存(参考)。
3. 不要在 HTML 中利用缩放图片 (Dont Scale Images in HTML)更多的时候，可能是因为偷懒而没有造做适宜大小的图片，若是是批量处置图片的话，可能一条 ImageMagic 号令（convert ）就能搞定 。必需提及的是，看到太多的对图片拉伸很难看的页面，救救那些页面!
4. 用更小的而且可缓存的 favicon.ico (Make favicon.ico Small and Cacheable)更小，可缓存，那两条可能都不是问题。问题是，太多站点底子没有 favicon.ico 。有的时候，判断独立域名的 Blog 能否专业，根本看一下能否有 favicon.ico 就差不多了。
--EOF--
弥补：视觉设想者应该尽量考虑控造图片大小，保举在 200K 以下。那不是乱说的，参考页面。
网页造做poluoluo文章简介：Web 前端性能优化是个鬼话题，是个值得运维人员持续跟踪的话题，是被良多网站无情轻忽的手艺。
Web 前端优化更佳理论最初一部门是针对挪动应用的，其实只是针对 iPhone 的，目前只要两条规则。
1. 单个数据对象小于 25K (Keep Components under 25K)那个似乎只是针对 iPhone 研究的。建议连结单个 Web 数据对象在 25 K 以下。为什么是 25K? Apple 官方信息指出可缓存到内存中的 Web 对象更大撑持到 10M，但颠末测试，发现也就是 25K 摆布。
iPhone 在市场上的优良表示，让 Web 人员不能不考虑若何针对其停止优化。相信那部门内容也在不竭变革中。
2. Pack Components into a Multipart Document把Web 页面组件打包成一个多部门构成的文档。其目标是削减 HTTP 恳求。对那部门语焉不详，期待后续更新吧。
评论列表