这种东西，网站上的各路学习笔记五花八门的，推荐直接看官网文件
英文原稿：How browsers work
中文翻译：浏览器内部工作原理
当然，也有写的不错的读书笔记，这个妹子写的还是很赞的：浏览器的加载解析
看完上面的基本就了解原理了
然后开始贴我的笔记，
从这篇博文里可以用一个例子来了解：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>标题</title>
<link href="../css/css.css" rel="Stylesheet" type="text/css" />
</head>
<body>
<div>
</div>
<img src="images/test.jpg" alt="示例图片" />
<br />
<p>
</p>
</body>
<script type="text/javascript" src="js/js.js"></script>
</html>这个页面一共会发出四次资源请求：
- 请求HTML页面
- 请求link的CSS资源
- 请求img图片资源
- 请求JS文件
从上至下执行，除了JS会阻塞渲染，其他的都会一边下载一边渲染
前端渲染过程
首先加载和渲染的顺序是从上到下的，浏览器发出网页请求（http请求），得到HTML 页面（http相应），开始解析、渲染、绘制：
- 解析html以构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树
- 说明两点：CSS的加载会另外开一个线程，不阻塞；JS的加载会阻塞HTML的加载，因为有可能会改变DOM树的结构。
- 详细的可以看中文文档
根据浏览器的渲染思考怎么优化
（1） 从HTML层面来说：
- a) 给页面减肥，减少不必要的空格和注释。
- b) 减少页面引用的文件数量（可以减少HTTP的连接数），所以JS/CSS引用可以合并的尽量合。
（2） 从CSS层面来说：
- a) 尽量减少CSS的层级数，因为CSS的渲染是从右往左匹配的。
- b) 避免后代选择符，尽量使用子选择符。原因：子元素匹配符的概率要大于后代元素匹配符。
- c) 为动画的HTML元件使用fixed或者absoult的position这样的话，重绘不会影响其他元素的布局，修改他们的CSS是不会reflow的。
- d) 避免内联样式
- e) 避免用table布局
（3） 从JS的层面来说
- a) 尽可能地合并脚本。页面中的script标签越少，加载也就越快
- b) 减少inline JavaScript的数量浏览器parser会假设inline JavaScript会改变页面结构，所以使用inline JavaScript开销较大
Yslow可以对页面进行评分分析，评价网页加载性能，比如小图标多了性能评分就差，因为小图标的加载也需要时间。
360
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
