(1.1)WEB性能优化-雅虎军规剖析.md

title: (1.1)WEB 性能优化-Yahoo 军规剖析 speaker: 刘正午 url: https://github.com/midday/WPO-Yahoo transition: slide3 files: /js/zoom.js theme: moon usemathjax: yes

[slide]

WEB 性能优化-Yahoo 军规剖析

@刘正午

<iframe src="http://ghbtns.com/github-btn.html?user=midday&repo=WPO-Yahoo&type=watch&count-true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20" style="width:110px;height:20px; background-color: transparent;"></iframe><iframe src="http://ghbtns.com/github-btn.html?user=midday&repo=WPO-Yahoo&type=fork&count=false" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20" style="width:110px;height:20px; background-color: transparent;"></iframe><iframe src="http://ghbtns.com/github-btn.html?user=midday&repo=WPO-Yahoo&type=follow&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="170" height="20" style="width:170px;height:20px; background-color: transparent;"></iframe>

[slide] [magic data-transition="cover-circle"]

施主，该上图了...

==== ##YAHOO 35条前端优化建议

[/magic]

[slide]

常用优化手段无非3个层面

- **传输层面**：减少请求数，降低请求量 {:&.rollIn}
- **执行层面**：减少重绘&回流
- **其它层面**

[slide] [magic data-transition="cover-circle"]

• 传输层面-需要对浏览器有一个基本了解
  • 网页自上而下的解析渲染，边解析边渲染，页面内 CSS 文件会阻塞渲染，异步 CSS 文件会导致回流
  • 浏览器在 document 下载结束会检测静态资源，新开线程下载（有并发上限），在带宽限制的条件下，无序并发会导致主资源速度下降，从而影响首屏渲染
  • 浏览器缓存可用时会使用缓存资源，这个时候可以避免请求体的传输，对性能有极大提高 ====
• 执行层面-需要对网页生成过程有一个基本了解
  • HTML 代码转化成 DOM
  • CSS 代码转化成 CSSOM（CSS Object Model）
  • 结合 DOM和 CSSOM，生成一棵渲染树（包含每个节点的视觉信息）
  • 生成布局（layout），即将所有渲染树的所有节点进行平面合成
  • 将布局绘制（paint）在屏幕上 ====

施主，该上图了...

====

网页生成过程流程图

[/magic]

[slide]

目录

---

• 服务器部分 {:&.rollIn}
• 网页内容
• 图片
• Cookie
• CSS
• JavaScript
• 移动客户端
• 各种优化手段在“国美在线”的应用
• 番外篇-Nginx的基本使用+服务器优化配置
• 番外篇-Node.js的服务器优化
• 番外篇-HTTP协议缓存机制
• 番外篇-静态资源md5&时间戳
• 番外篇-浏览器重绘&回流
• 番外篇-编码技巧&最佳实践
• 番外篇-前后端分离