Web前端优化的34条法则
2014-01-22 15:04 池戎 阅读(208) 评论(0) 编辑 收藏 举报原文是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