浏览器知识点
目录
如何实现浏览器内多个标签页之间的通信
- websocket
- localStorage
- cookie + setInterval(定时器)
- SharedWorker
严格模式和混杂模式
- 严格模式(标准模式),浏览器按照W3C标准(以其支持的最高标准)来解析代码,呈现页面。
- 混杂模式(怪异模式),浏览器以比较宽松的向后兼容的方式来解析代码,呈现页面。
如何触发?
DOCTYPE不存在或形式不正确会触发混杂模式,DOCTYPE符合严格模式规范的会触发严格模式
如何判断?
通过document.compatMode属性来判断:
- BackCompat:混杂模式(严格模式关闭)
- CSS1Compat:严格模式(严格模式开启)
浏览器的存储有哪些?它们之间的区别?
区别项 | cookie | sessionStorage | localStorage | indexDB |
---|---|---|---|---|
存储大小 | 4k | 5MB | 5MB | 无限 |
通信 | http头中 | 不参与服务器通信,仅在本地 | 同sessionStorage | 同sessionStorage |
生命周期 | 自己设置或默认浏览器关闭 | 页面或浏览器关闭 | 永久有效,除非自行删除或清除缓存 | 永久有效,除非自行删除或清除缓存 |
作用域 | 同源窗口是共享的 | 不在不同浏览器窗口共享,即使是同一个页面 | 同源窗口是共享的 | 同源窗口是共享的 |
易用性 | 原生接口不友好,需要自己封装 | 原生接口友好 | 原生接口友好 | 按需封装 |
输入URL后发生了什么?
- DNS域名解析;
- 建立TCP连接;
- 发起HTTP请求;
- 接收HTTP响应;
- 解析并渲染页面;
- 关闭TCP连接。
浏览器渲染的步骤
- 构建节点树DOM Tree
- 构建CSS规则树CSSOM Tree
- 构建渲染树Render Tree
- 布局渲染树Layout of the render tree
- 绘制渲染树Painting the render tree
参考资料
如何阻止事件传播和阻止默认行为?
- 阻止事件传播: e.stopPropagation()
- 阻止默认行为: e.preventDefault()
什么是跨域?
当协议、子域名、主域名、端口号中任意一个不相同时,都算作不同域。不同域之间相互请求资源,就算作“跨域”。
怎样解决跨域问题?
- JSONP
- CORS
- postMessage
- Websocket
- Node中间件代理(两次跨域)
- Nginx反向代理
- window.name + iframe
- location.hash + iframe
- document.domain + iframe
日常使用最多的是2和6,即CORS和Nginx反向代理。
参考资料
浏览器的缓存机制
Chrome打开一个页面需要几个进程?
- 浏览器进程
- GPU进程
- 渲染进程(最新浏览器可能会有多个渲染进程)
- 网络进程
- 插件进程(非必要)
为什么有些站点第二次打开速度会很快?
因为在第一次加载页面过程中,缓存了一些耗时的数据。
- DNS缓存
- Memory缓存
- 浏览器缓存
参考资料