浏览器相关基础知识总结

[sanjings]

浏览器相关基础知识总结

1. 常用浏览器有哪些？内核分别是什么？

• chrome浏览器：以前使用WebKit内核，现在使用Blink内核；
• firefox浏览器：Gecko内核；
• safari浏览器：WebKit内核；
• opera浏览器：以前使用Presto内核，被360收购后，短暂使用过webkit，现在使用Blink内核；
• IE浏览器：Trident内核
• Edge浏览器：之前使用EdgeHTML内核（Trident的升级版），现在使用的chromium内核

2. 浏览器渲染页面的流程？

1. 构建DOM树，也就是解析DOM节点的过程，采用深度优先原则；
2. 构建CSS树，也就是解析CSS的过程，把当前浏览器不兼容的CSS属性屏蔽掉；
3. DOM树和CSS树构建完成后，合成render树，浏览器根据render树渲染页面。render树每个节点都被当成一个盒子，都有自己的样式，render树不包含display：none和head标签里面的节点。

【注】：现代浏览器都是边解析边构建渲染树边渲染页面，不会等到DOM树和CSS树都构建完成后才生成render树。

3. 什么是回流和重绘？

当js对页面进行节点操作时，就会产生回流或者重绘，回流时，浏览器会重新构建受影响部分的render树，就会发生重绘。
回流： 当节点的尺寸，位置，display：none变成display：block时，render树的一部分或者全部需要重新构建，这就叫回流；
重绘： 回流完成后，浏览器根据新的render树重新渲染受影响的部分节点，这个过程叫重绘；

引起回流的原因：

• dom节点的增加，删除；
• dom节点的位置变化；
• dom节点的宽高、边距、填充、边框、文字大小变化时；
• dom节点的display显示是否；
• 页面初始化渲染时；
• 浏览器窗口尺寸变化时；
• 向浏览器请求某些样式信息时：offset、scroll、client、width、height、getComputedStyle（），currentStyle（）
• 只引起重绘，不引起回流的方式：只影响元素的外观，不影响元素的布局的，就只会重绘，不会回流。
• 节点的颜色，背景颜色改变时；
• visibility显示与否

4. 浏览器加载HTML文档的时间线？

概念：从浏览器加载页面开始到页面加载完成的过程中，按顺序发生的每一个时间的总流程叫时间线。

1. js引擎生成document对象，浏览器开始解析文档，构建DOM树，document.readyState="loading"；
2. 解析到link标签，就异步加载css文件，加载完成后解析css，构建css树；解析到style标签，同样也是异步构建css树；
3. 解析到script标签，加载外部js脚本时，如果没有设置异步加载（defer或async），则浏览器暂停解析，由js引擎加载js脚本并执行，执行完成后浏览器继续解析；如果设置了异步加载，则不会阻塞dom树的构建；
4. 解析到img和viedo标签，异步加载图片和视频资源，不阻塞浏览器解析文档；
5. 文档解析完成，dom树构建完成，document.readyState=“interactive”，同时设置了defer的script标签所加载的js脚本按照顺序执行，并且触发DOMContentloaded事件；
6. 所有js脚本加载并执行完成，img和viedo加载的图片资源和视频资源也加载完成后，window.onlaod事件触发，并且document.readyState="complete"。表示页面加载完成。

document.onreadystatechange事件会监听文档解析加载的变化，也就是readyState的值的变化。

5. 浏览器的怪异模式和标准模式是什么？

标准模式： 浏览器按照W3C标准解析并执行代码；
怪异模式： 按照浏览器自己的方式解析并执行代码，因为不同浏览器解析的方式不一样，所以叫做怪异模式。
浏览器解析时使用标准模式还是怪异模式，与文档中的DTD声明有关，DTD声明定义了标准文档的类型，声明了DTD，则浏览器会根据声明的文档类型解析文档，没有声明DTD，则变成怪异模式。

使用document.compatMode可以查看当前的解析模式：

• CSS1Compat：标准模式；
• BackCompat：怪异模式；

标准模式和怪异模式的区别：

1. 盒模型不一样；
2. 标准模式无法操作行内元素的宽高，怪异模式可以；
3. 标准模式下，子元素设置百分比高度是根据父元素高度定的，父元素没有设置固定高度，则子元素设置百分比高度无效，怪异模式下，父元素没有固定高度，子元素也可以设置百分比高度，根据窗口的高度而定；
4. 怪异模式下，IE的margin：0 auto无效