浏览器知识点

目录

• 如何实现浏览器内多个标签页之间的通信
• 严格模式和混杂模式
  • 如何触发？
  • 如何判断？
• 浏览器的存储有哪些？它们之间的区别？
• 输入URL后发生了什么？
• 浏览器渲染的步骤
• 如何阻止事件传播和阻止默认行为？
• 什么是跨域？
• 怎样解决跨域问题？
• 浏览器的缓存机制
• Chrome打开一个页面需要几个进程？
• 为什么有些站点第二次打开速度会很快？

如何实现浏览器内多个标签页之间的通信

• websocket
• localStorage
• cookie + setInterval（定时器）
• SharedWorker

严格模式和混杂模式

• 严格模式（标准模式），浏览器按照W3C标准（以其支持的最高标准）来解析代码，呈现页面。
• 混杂模式（怪异模式），浏览器以比较宽松的向后兼容的方式来解析代码，呈现页面。

如何触发？

DOCTYPE不存在或形式不正确会触发混杂模式，DOCTYPE符合严格模式规范的会触发严格模式

如何判断？

通过document.compatMode属性来判断：

• BackCompat：混杂模式（严格模式关闭）
• CSS1Compat：严格模式（严格模式开启）

浏览器的存储有哪些？它们之间的区别？

区别项	cookie	sessionStorage	localStorage	indexDB
存储大小	4k	5MB	5MB	无限
通信	http头中	不参与服务器通信，仅在本地	同sessionStorage	同sessionStorage
生命周期	自己设置或默认浏览器关闭	页面或浏览器关闭	永久有效，除非自行删除或清除缓存	永久有效，除非自行删除或清除缓存
作用域	同源窗口是共享的	不在不同浏览器窗口共享，即使是同一个页面	同源窗口是共享的	同源窗口是共享的
易用性	原生接口不友好，需要自己封装	原生接口友好	原生接口友好	按需封装

输入URL后发生了什么？

1. DNS域名解析；
2. 建立TCP连接；
3. 发起HTTP请求；
4. 接收HTTP响应；
5. 解析并渲染页面；
6. 关闭TCP连接。

浏览器渲染的步骤

1. 构建节点树DOM Tree
2. 构建CSS规则树CSSOM Tree
3. 构建渲染树Render Tree
4. 布局渲染树Layout of the render tree
5. 绘制渲染树Painting the render tree
   参考资料

如何阻止事件传播和阻止默认行为？

• 阻止事件传播： e.stopPropagation()
• 阻止默认行为： e.preventDefault()

什么是跨域？

当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同域。不同域之间相互请求资源，就算作“跨域”。

怎样解决跨域问题？

1. JSONP
2. CORS
3. postMessage
4. Websocket
5. Node中间件代理（两次跨域）
6. Nginx反向代理
7. window.name + iframe
8. location.hash + iframe
9. document.domain + iframe
   日常使用最多的是2和6,即CORS和Nginx反向代理。
   参考资料

浏览器的缓存机制

参考资料

Chrome打开一个页面需要几个进程？

• 浏览器进程
• GPU进程
• 渲染进程（最新浏览器可能会有多个渲染进程）
• 网络进程
• 插件进程（非必要）

为什么有些站点第二次打开速度会很快？

因为在第一次加载页面过程中，缓存了一些耗时的数据。

• DNS缓存
• Memory缓存
• 浏览器缓存
  参考资料