一. DOM加载过程
在浏览器地址栏输入url，DNS域名解析，找到IP，向服务器发起请求，服务器返回数据，浏览器接收二进制文件。浏览器将二进制文件转换为html，构建DOM树。
- HTML解析器
解析过程：
- 遇到link的外部css,遇到css的代码会进行css的加载；
- 遇到script标签会先去执行js的内容，直至脚本完成执行，然后继续构建DOM；
- 解析器遇到设置了async属性的script时，开始下载脚本并继续解析文档，脚本会在下载完成后尽快执行，但是解析起不会停下来等它下载，不会影响到后续DOM的渲染；
- 如果有设置了defer的script标签存在，则会按照顺序执行所有的script,defer脚本会在文档渲染完毕后，DOMContentLoaded事件调用前执行，脚本会被延迟到整个页面都解析完毕后再运行。
- CSS解析器：
每个css文件解析为样式表对象CSSStyleSheet，每个对象都包含CSSRule,CSSRule包含选择器和声明对象，以及其他与CSS语法对应的对象 - 构建render树：DOM树 + CSS树
- 布局layout与绘制paint：
计算对象之间的大小，距离确定每个节点在屏幕上的确切坐标，映射浏览器屏幕绘制，使用UI后端层绘制每个节点；
- reflow(回流)：当元素属性发生改变并影响布局时(宽度，高度，内外边距等)，产生回流，相当于刷新页面
- repaint(重绘)：当元素属性发生改变且不影响布局(背景色，字体样式等)，产生重绘不一样引起回流，回流一定引起重绘。
了解DOM加载过程可以更好地知道如何web性能优化，比如如何有效地避免reflow回流
二. history和location注意事项
1. window.history属性指向History对象，它表示当前窗口的浏览历史
- History.back() 浏览器回退
- History.forward() 浏览器前进
- History.go(val) // 可加载历史列表中的某个具体的页面(val: -1上一个页面，1前进一个页面)
- History.pushState() // 向当前浏览器会话的历史堆栈中添加一个状态
- History.replaceState() //修改当前历史记录实体
2. Location 对象window.location和document.location属性，可以拿到这个对象
- Location.href 整个URL
- Location.protocal 当前URL的协议
- Location.host 主机
- Location.hostname 主机名
- Location.port 端口号
- Location.pathname URL的路径部分，从根路径开始
- Location.search 查询字符串部分
- Location.hash 片段字符串部分，从#开始
- Location.username 域名前面的用户名
- Location.password 域名前面的密码
网友评论