W3C中国

» 给Web开发者的性能优化建议

 

说明:本文试图帮助Web开发者梳理进行性能优化的可能切入点,系W3C中国的吴小倩根据W3C各工作组标准草案整理,内容经过W3C交互技术领域内部审阅,但这不是一份正式的W3C标准或文档,仅代表个人观点,供Web开发者参考。该文档初稿发布于2013年10月,2014年有修订,原文维护于 Evernote

内容提要:

从服务器入手 | 优化内容 | 优化脚本和CSS | 更快页面绘制 | 从移动角度 | 经常测试

 

1 Start from Server 从服务器着手

- 1.1 Reduce TCP Connection by Keep-alive 通过Keep-alive机制减少TCP连接

- 1.2 Fix Latency Problems with a CDN 通过CDN减少延时

- 1.3 Configure Entity Tags 配置Entity标签

- 1.4 Set an Expires or Cache Control Headers 在Headers里面设置Expires或者Cache Control

- 1.5 Compress Files in Gzip 通过Gzip压缩文件

- 1.6 Process Parallely (BigPipe) 平行处理请求(参考BigPipe)

 

2 Try the Tricks in Content 尝试优化Content

- 2.1 Reduce HTTP Request by Combining Files or Image Sprites 通过合并文件或者Image Sprites减少HTTP请求

- 2.2 Avoiding Redirects( HTTP 301 and 40x/50x) 减少重定向( HTTP 301和40x/50x)

- 2.3 Structure the HTML to Prioritize Critical Content 重构HTML,把重要内容的优先级提高

- 2.4 Post-load the Not Absolutely Required Content Post-load(次要加载)不是必须的资源

- 2.5 Take Advantage of Pre-loading 利用预加载优化资源

- 2.6 Keep Your DOM Simple 合理架构,使DOM结构尽量简单

- 2.7 Minify Resources by Compressing 压缩资源,减小加载压力

- 2.8 Use LocalStorage 利用LocalStorage合理缓存资源

- 2.9 Choose the Right Format for Images 使用格式正确的图片

 

3 Optimize Scripts and CSS 优化脚本和CSS

- 3.1 Inline Small CSS and Javascript Resources 把小的CSS和Js资源放置于行内

- 3.2 Put Stylesheets at the Top and Scripts at the Bottom 把样式文件放在上端,把脚本放在后面

- 3.3 Avoid CSS Expressions and Filters 尽量避免CSS表达式和滤镜

- 3.4 Try Defer Loading of Javascript 尝试使用defer方式加载Js脚本

- 3.5 Be Cautious to DOM Access 谨慎通过脚本访问DOM

- 3.6 New Feature: will-change 新特性:will-change,把即将发生的改变预先告诉浏览器

- 3.7 New Feature: Beacon 新特性Beacon,不堵塞队列的异步数据发送

 

4 Paint Faster 实现更快的页面绘制

- 4.1 Take Advantage of HTML5 New Elements and CSS3 New Features 使用HTML5和CSS3的一些新特性

- 4.2 Avoid Plugins 避免使用插件

- 4.3 Avoid Scaling Images in HTML 避免在HTML里面缩放图片

- 4.4 Make Sure Font Size is Valid 确保使用正确的字体大小

- 4.5 Page Visibility 决定当前页面是不是能被访问

 

5 Think about Mobile 从移动的角度思考

- 5.1 What's Different? -- Slower Network, Smaller Cache, Unsatisfactory Browser Processing 不同之处:网络缓慢,缓存更小,不令人满意的浏览器处理机制

- 5.2 Cache as Much as Possible 尽量多地缓存文件

- 5.3 Use HTML5 Web Workers to Enable Multi-threading 使用HTML5 Web Workers来允许多线程工作

- 5.4 Use Server-sent Events 使用Server-sent Events

- 5.4 Include a Meta Viewport 设置一个Meta Viewport

- 5.5 Size Content to Different Viewports 为不同的Viewports设置不同大小的Content

- 5.6 Size Tap Targets Properly 正确设置可Tap的目标的大小

- 5.7 Try Responsively-sized Images 使用响应式图片

- 5.8 Consider Using Acceleration Hardware 考虑使用可加速硬件

- 5.9 Support new Protocals (HTTP2) 支持新接口协议(如HTTP2)

- 5.10 Future of caching/offline: Service Workers 未来的缓存离线机制:Service Workers

- 5.11 Future Resource Loading Optimization, Resource Hints(preconnect, preload, and prerender) 未来的资源优化Resource Hints(preconnect, preload, 和prerender)

 

6 Test Often 经常测试

- 6.1 Measure all the Optimization by Testing 通过测试来检验你的所有性能优化手段

- 6.2 Analyze the Waterfall Chart 分析浏览器提供的Waterfall图片来思考优化入口

- 6.3 Discover Where are the Bottlenecks 发现性能瓶颈处

- 6.4 Try Some New Testing Methods(Navigation, Resource, and User timing) 新的测试手段(Navigation, Resource, 和User timing, http://www.w3.org/wiki/Web_Performance/Publications)

- 6.5 requestAnimationFrame(Script-based animations where the user agent is in control of limiting the update rate of the animation) (以脚本为基础的动画,由浏览器控制动画的更新频率)

评论已关闭

站内搜索

万维网联盟(World Wide Web Consortium, W3C)是Web领域的国际标准化组织,开发开放Web标准,确保Web的长期发展。欢迎您加入W3C的朋友计划,支持W3C实现“尽展Web无限潜能”的使命,并为Web开发者提供更多工具。

更多内容>>

TPAC 2017

W3C 2017年度技术大会及顾问委员会会议(TPAC 2017)将于11月6-10日在美国加利福尼亚州柏林格姆(Burlingame)举行。注册现已开放。

更多内容>>

W3Cx 开放课程

W3C与edX合作,推出W3Cx系列课程,您可以免费注册这些课程:

- CSS概述
- HTML5:第一部分
- HTML5:第二部分
- HTML5概述
更多内容>>

W3C技术标准

查看Web技术标准
- 按时间 | 按工作组
■ Web与产业融合 ■
- 汽车 | 数字出版 | Web与电信
- 娱乐与广播电视 | Web支付 | Web数据
- 物联万维网(WoT) | Web安全
■ Web For All ■
- Web无障碍 | 国际化 | 索引(A to Z)
■ 社区组与商务组 ■
- 所有社区组 | 新建社区组
■ 标准工作组 ■
- 所有推荐标准 | 参与指南

更多内容>>

W3C标准翻译

我们欢迎您加入W3C标准翻译计划,了解W3C标准和文档的翻译情况,并成为W3C翻译计划的志愿者,帮助提供不同语言的W3C标准规范及文档的志愿者翻译及W3C授权翻译,更好服务全球技术社区。

更多内容>>

W3C中国贡献榜

我们通过贡献榜,感谢您积极参与W3C标准制定及审阅工作并提供建设性意见、提供W3C相关标准及技术文章的中文翻译、参与各类W3C技术研讨会。

更多内容>>

中国参与W3C

W3C中国目前正在不断加大全球W3C工作的参与力度,并设立了一系列以了解中国行业需求、引导标准制定为主要目的兴趣小组(IG)和社区组(CG)。
- HTML中文兴趣小组
- 中国信息无障碍社区组
- 中文数字出版社区组
- 中文文字布局需求特别任务组
- 数据可视化社区组

更多内容>>

开发者资源

会员链接

相关资源需要使用 W3C账号登录后使用

首页 | 加入工作组 | 申请W3C账号

合作伙伴

  • 北京航空航天大学
  • 北航计算机学院
  • w3ctech