浏览器渲染原理

& 性能优化

浏览器的组成

由以下部分组成

1. 渲染引擎 - 负责解析 HTML 和 CSS
2. JS引擎 - 负责解析 JavaScript
3. 其他

浏览器

渲染引擎

JS引擎

浏览器的功能

主要功能就是向服务器发出请求，在浏览器窗口中展示您选择的网络资源。包括 HTML文档、图片、PDF文档、Flash等

对 HTML、CSS、JS 的处理遵循 W3C 标准

拥有相似的外观：地址栏、下载管理器等。用于用户交互

浏览器的工作原理（简）

浏览器是如何处理页面的？

参考：

《浏览器的渲染原理简介》

《浏览器的工作原理：新式网络浏览器幕后揭秘》

浏览器的工作原理（简）

浏览器是如何处理页面的？

浏览器渲染时的 DOM Tree

浏览器的工作原理（简）

浏览器是如何处理页面的？

DOM Tree & Style Context Tree

浏览器的工作原理（简）

浏览器是如何处理页面的？

绘制图像

阻塞渲染？

1. JS 下载、执行时肯定阻塞渲染
2. CSS 下载、执行时可能阻塞渲染，但不阻塞其他CSS的下载

为什么？

按下回车后浏览器做了什么

参考长文

1. DNS 查询
2. 发起 HTTP 请求
3. 处理 HTTP 响应
   1. 下载内容
   2. 解析内容
   3. 绘制图像

网站性能优化的N条军规

文章：http://www.uml.org.cn/site/201208171.asp

视频：http://www.imooc.com/view/50

1. 尽可能的减少 HTTP 的请求数    
2. 使用 CDN（Content Delivery Network）    
3. 添加 Expires 头(或者 Cache-control )    
4. Gzip 组件    
5. 将 CSS 样式放在页面的上方    
6. 将脚本移动到底部（包括内联的）    
7. 避免使用 CSS 中的 Expressions    
8. 将 JavaScript 和 CSS 独立成外部文件    
9. 减少 DNS 查询    
10. 压缩 JavaScript 和 CSS (包括内联的)    
11. 避免重定向    
12. 移除重复的脚本    
13. 配置实体标签（ETags）    
14. 使 AJAX 缓存

HTTP  缓存

1. ETAG
2. Cache-control
3. Expires