输入网址按下回车键之后都发生了什么
该过程大致分为两部分：
1.URL解析过程：
1.1 缓存查询，若该URL被浏览过，以及不做强制刷新，则不会再次请求；
1.2 浏览器根据域名寻找IP地址（DNS服务器保存了一张域名--IP表）；
1.3 浏览器向服务器发送http请求,若返回3**之类的重定向，浏览器根据相应头中的location再次发送请求；
1.4 服务器接收请求，处理请求并生成HTML代码返回给浏览器，且此时代码很可能为经过压缩的；
1.5 浏览器接收结果，解压代码，开始渲染页面。
2.浏览器渲染引擎的工作流程：
2.1 创建DOM树（利用HTML解析器，分析HTML元素，构建一棵DOM树）；
2.2 创建StyleRules（利用css解析器，分析css文件以及元素上的inline样式，生成页面样式表）；
2.3 创建Render树（将DOM树与页面样式表关联起来，构成一棵Render树）；
2.4 布局Layout（浏览器为每个render树上的dom节点确定一个在显示屏上出现的精准坐标）；
2.5 绘制Painting
js和css是如何影响DOM树构建的？
1. html页面中引入javaScript文件
//foo.js
let div1 = document.getElementsByTagName('div')[0]
div1.innerText = 'time.geekbang'
<html>
<body>
<div>1</div>
<script type="text/javascript" src='foo.js'></script>
<div>test</div>
</body>
</html>
当解析到script脚本标签时，暂停整个DOM的解析，执行javascript代码。不过这里执行javascript时，这里需要重点关注下载环境，因为javascript文件的下载过程会阻塞DOM解析，而通常下载又是非常耗时的，会受到网络环境、javascript文件大小等因素的影响。
2. html页面中有css样式
//theme.css
div {color:blue}
<html>
<head>
<style src='theme.css'></style>
</head>
<body>
<div>1</div>
<script>
let div1 = document.getElementsByTagName('div')[0]
div1.innerText = 'time.geekbang' // 需要 DOM
div1.style.color = 'red' // 需要 CSSOM
</script>
<div>test</div>
</body>
</html>
该示例中，JavaScript 代码出现了 div1.style.color = ‘red’ 的语句，它是用来操纵 CSSOM 的，所以在执行 JavaScript 之前，需要先解析 JavaScript 语句之上所有的CSS 样式。所以如果代码里引用了外部的 CSS 文件，那么在执行 JavaScript 之前，还需要等待外部的 CSS 文件下载完成，并解析生成 CSSOM 对象之后，才能执行 JavaScript 脚本。
而 JavaScript 引擎在解析 JavaScript 之前，是不知道 JavaScript 是否操纵了 CSSOM的，所以渲染引擎在遇到 JavaScript 脚本时，不管该脚本是否操纵了 CSSOM，都会执行CSS 文件下载，解析操作，再执行 JavaScript 脚本。所以说 JavaScript 脚本是依赖样式表的，这又多了一个阻塞过程。
故，综上所述可知：JavaScript 会阻塞 DOM 生成，而样式文件又会阻塞JavaScript的执行。
async和defer区别：
参考：
https://juejin.cn/post/6844903560879013896
https://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html
-
<script src="script.js"></script>
没有defer或async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该script标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。 <script defer src="script.js"></script>
这个属性的用途是表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕后再运行。因此，在
<script>元素中设置defer属性，相当于告诉浏览器立即下载，但延迟执行。
HTML5规范要求脚本按照它们出现的先后顺序执行，因此第一个延迟脚本会先于第二个延迟脚本执行，而这两个脚本会先于DOMContentLoaded事件执行。在现实当中，延迟脚本并不一定会按照顺序执行，也不一定会在DOMContentLoad时间触发前执行，因此最好只包含一个延迟脚本。
<script async src="script.js"></script>
这个属性与
defer类似，都用于改变处理脚本的行为。同样与defer类似，async只适用于外部脚本文件，并告诉浏览器立即下载文件。但与defer不同的是，标记为async的脚本并不保证按照它们的先后顺序执行。
第二个脚本文件可能会在第一个脚本文件之前执行。因此确保两者之间互不依赖非常重要。指定async属性的目的是不让页面等待两个脚本下载和执行，从而异步加载页面其他内容。
接着上图来做区分（蓝色线代表网络读取，红色线代表执行时间，这俩都是针对脚本的；绿色线代表 HTML 解析。）
DOMContentLoaded与load
对于其定义，在MDN中的描述：DOMContentLoaded 文档地址、load 文档地址
-
DOMContentLoaded: 浏览器已完全加载 HTML，并构建了 DOM 树，但像 <img> 和样式表之类的外部资源可能尚未加载完成。 （DOM 已经就绪，因此处理程序可以查找 DOM 节点，并初始化接口。） -
load： 浏览器不仅加载完成了 HTML，还加载完成了所有外部资源：图片，样式等。（外部资源已加载完成，样式已被应用，图片大小也已知了。）
如果想要更直观地感受二者的区别，还可以 点击这里 查看效果。
重绘与回流：
dom树与render树的区别：render tree能识别样式，render tree中每个node都有自己的style，而且render tree不包含隐藏的节点(比如display:none的节点，还有head节点)，因为这些节点不会用于呈现，而且不会影响呈现的，所以就不会包含到 render tree中。
重绘：
当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。回流：
当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候，这时候是一定会发生回流的，因为要构建render tree。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。
区别：
回流必将引起重绘，而重绘不一定会引起回流。比如：只有颜色改变的时候就只会发生重绘而不会引起回流。
当页面布局和几何属性改变时就需要回流。比如：添加或者删除可见的DOM元素，元素位置改变，元素尺寸改变——边距、填充、边框、宽度和高度，内容改变
