浏览器

BOM对象模型

跨域相关问题

浏览器渲染

1、构建 dom 树和 csscom
2、生成渲染树：从DOM树的根节点开始遍历每个可见节点，对于每个可见的节点，找到CSSOM树中对应的3、规则，并应用它们，根据每个可见节点以及其对应的样式，组合生成渲染树
4、Layout（回流）：根据生成的渲染树，进行回流（Layout），得到节点的集合信息
5、Painting（重绘）：根据渲染树及其回流得到的集合信息，得到节点的绝对像素。
绘制，在页面上展示，这一步还涉及到绘制层级、GPU相关的知识点
6、加载js脚本，加载完成解析js脚本

image.png

重绘&回流

回流：元素的几何尺寸发生改变都会发生回流，重新计算，然后重新绘制。
重绘：元素的样式改变并没有改变几何尺寸，就只会重绘
重绘不一定导致回流，回流一定会导致重绘

1、对元素的width、height、padding、margin、left、top、border等几何属性改变时。会重新计算，而且计算可能导致父亲元素等都重新计算
2、对元素节点增删改，可能导致父亲、兄弟节点重新计算。
3、对元素的offsetTop、offsetLeft、 offsetWidth、offsetHeight进行获取，也需要回流，因为是实时获取。

如何避免？
1、将offsetTop等属性缓存起来，避免频繁改动。
2、避免逐条改变样式，使用类名去合并样式
3、修改之前先将dom display设置为none，修改完再放出

参考文章

hash&history

hash 路由，在 html5 前，为了解决单页路由跳转问题采用的方案， hash 的变化不会触发页面渲染，服务端也无法获取到 hash 值，前端可通过监听 hashchange 事件来处理hash值的变化

image.png

history 路由history 路由，是 html5 的规范，提供了对history栈中内容的操作，常用api有：

image.png