浏览器知识点

时间:2021-09-01
本文章向大家介绍浏览器知识点,主要包括浏览器知识点使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

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

  • 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反向代理。
    参考资料

浏览器的缓存机制

参考资料

原文地址:https://www.cnblogs.com/kuki/p/15215048.html