Web前端优化的34条法则

原文是Yahoo!网络开发团队对于如何快速呈现网站方法的一些总结,本人仅是对其中的要点翻译,纯属于个人学习。如有疏漏之处,欢迎指正。
原文地址:http://developer.yahoo.com/performance/rules.html


针对内容的Web
前端优化:

1.尽量减少HTTP请求Make Fewer HTTP Requests
1>合并文件:例如将所有的CSS结合到一个单一的样式表。
2>CSS精灵CSS Sprit:将背景图像相结合成一个整体图像,使用CSS背景图像和背景位置属性来显示所需的图像部分。
3>图像地图:结合多张图片到一个整体图像,多用于影像地图中。
4>内置图象:结合内置图片到您的(缓存)的样式表以减少HTTP请求,并避免增加您的网页大小。内置图片还不支持在所有主要浏览器。

2.减少DNS查找Reduce DNS Lookups

3.避免重定向Avoid Redirects

4.让Ajax可缓存Make Ajax Cacheable

5.延迟载入组件Post-load Components

6.预载入组件Preload Components

7.减少DOM元素数量Reduce the Number of DOM Elements

8.切分组件到多个域Split Components Across Domains

提高页面组件并行下载能力。

9.最小化框架页的数量 Minimize the Number of iframes

10.灭掉HTTP404No 404s

针对服务器的Web前端优化:

1.使用内容分发式网络Use a Content Delivery Network
使用内容分发式网络目的是通过在现有的Internet中增加一层新的网络架构,将网站的内容发布到最接近用户的网络“边缘”,使用户可以就近取得所需的内容,提高用户访问网站的响应速度。CDN有别于镜像,因为它比镜像更智能,或者可以做这样一个比喻:CDN=更智能的镜像+缓存+流量导流。

2.添加 Expires 或 Cache-Control 信息头 Add an Expires or a Cache-Control Header
针对不同浏览器有不同的方案。

3.压缩内容 Gzip Components

4.设置 Etags Configure ETags
HTTP协议规格说明定义ETag为“被请求变量的实体值” (参见章节:14.19)。

5.尽早刷新Buffer Flush the Buffer Early

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

针对Cookie的Web前端优化:

1.减少Cookie大小 Reduce Cookie Size

2.Use Cookie-free Domains for Components(暂时不知道如何准确定义)

针对CSS的Web前端优化:

1.把CSS放在页面顶部 Put Stylesheets at the Top

2.避免CSS表达式 Avoid CSS Expressions

3.单独放置JavaScript与CSS Make JavaScript and CSS External

4.精简JavaScript与CSS Minify JavaScript and CSS

5.使用<link>胜过@import Choose <link> over @import

6.避免使用Filter Avoid Filters
CSS里面的Filter实在不知道如何解释最好,个人觉得解释为像Photoshop里面为滤镜非常的不妥。

针对Javascript的Web前端优化

1.脚本放到页面底部 Put Scripts at the Bottom

2.单独放置JavaScript与CSS Make JavaScript and CSS External

3.精简JavaScript与CSS Minify JavaScript and CSS

4.移除重复脚本Remove Duplicate Scripts

5.减少DOM访问 Minimize DOM Access

6.开发智能事件Develop Smart Event Handlers(暂时不知如何解释最妥当)

针对图像的Web前端优化:

1.优化图像 Optimize Images
尽可能的使用PNG8格式的图片,经过我的实际测试过。

2.使用CSS Sprites优化Optimize CSS Sprites

3.不要在HTML中使用缩放图片 Don't Scale Images in HTML

4.用更小的并且可缓存的favicon.ico Make favicon.ico Small and Cacheable

针对Mobile的Web前端优化:(主要指的是iPhone那样的)

1.保持单个Web对象小于25K Keep Components under 25K

2.把Web页面组件打包成一个多部分组成的文档Pack Components into a Multipart Document

如有疑问,请和我一起讨论。
原文地址:https://www.cnblogs.com/crmhf/p/3823171.html