这种东西,网站上的各路学习笔记五花八门的,推荐直接看官网文件
英文原稿: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可以对页面进行评分分析,评价网页加载性能,比如小图标多了性能评分就差,因为小图标的加载也需要时间。