浏览器

zfh大约 4 分钟约 1235 字...

从输入 URL 到看到页面发生了什么

没有标准答案。 每一个过程都可以深入,前端关注的主要以下方面

window.onload 和 DOMContentLoaded 的区别

onload 事件:页面的所有资源加载完才会执行,包括图片视频

DOMContentLoaded:DOM 渲染完即可执行,此时图片、视频可能还没有加载完

加载过程

  1. DNS 解析域名转成 ip地址
  2. 浏览器根据ip地址向服务器发起http请求
  3. 服务器处理http请求,并返回给浏览器

渲染过程

  1. 根据 HTML 代码生成 DOM 树
  2. 根据 CSS 代码生成 CSSOM
  3. 将 DOM tree 和 CSSOM 整合形成 render tree
  4. 根据 render tree 渲染页面,遇到 script 暂停渲染,优先加载并执行 JS 代码,完成再继续进行渲染(JS 有可能要会改变 DOM 结构,JS 执行和页面渲染共用一个线程)

讲一下浏览器的渲染过程

  • 首先解析收到的文档,根据文档定义构建一棵 DOM 树,DOM 树是由 DOM 元素及属性节点组成的
  • 然后对 CSS 进行解析,生成 CSSOM 树
  • 根据 CSSOM 树和 DOM 树构建渲染树。渲染树的节点被称为渲染对象,渲染对象是一个包含有颜色和大小属性的矩形,渲染对象和 DOM 元素相对应,但这种对应关系不是一对一的,不可见的 DOM 元素不会插入渲染树。还有一些 DOM 元素对应几个可见对象,它们一般是一些具有复杂结构的元素,无法用一个矩形来描述。
  • 当渲染对象被创建并添加到树中,它们并没有位置和大小,所以当浏览器生成渲染树以后,就会根据渲染树来进行布局 回流
  • 布局结束后是绘制阶段,遍历渲染树并调用渲染对象的 paint 方法将他们的内容显示在屏幕上

大致过程图示:

浏览器渲染过程
浏览器渲染过程

Cookie、LocalStorage、SessionStorage 区别

  1. 存储大小(单个域名)

cookie:4k

sessionStorage:5M

localStorage:5M

  1. 生命周期

cookie:若没有设置失效时间,关闭浏览器 cookie 失效,如果设置了时间,过期后失效

sessionStorage:仅在当前浏览器关闭之前有效,关闭页面会被删除

localStorage:永久有效,除非手动删除

  1. 作用域

cookieCookie 的作用域仅仅由 domain(当前域或父域)和 path(当前路径和上級路径) 决定与协议和端口无关

sessionStorage:当前浏览器标签页

localStorage:在所有同源窗口中共享

  1. 通信

cookiecookie 在浏览器和服务器之间来回传递,如果使用 cookie 保存过多数据会造成性能问题

sessionStorage:仅在浏览器中保存,不参与服务器的通信

localStorage:仅在浏览器中保存,不参与服务器的通信

  1. 应用场景

cookie:最常见的是 cookie 和 session 结合使用,我们将 sessionId 存储到 cookie 中,每次发请求都会携带这个 sessionId,这样服务端就知道是谁发起的请求,从而响应相应的信息

localStorage:存储用户的持久性数据

sessionStorage 实际没怎么用过 :游客登录信息

  • name:cookie 的名称
  • value:cookie 的值,对于认证 cookie,value 值包括 web 服务器所提供的访问令牌
  • size: cookie 的大小
  • path:可以访问 cookie 的页面路径。比如 domain 是 abc.com,path 是/test,那么只有/test 路径下的页面可以读取此 cookie
  • secure:指定是否使用 HTTPS 安全协议发送 cookie。
  • domain:可以访问该 cookie 的域名,cookie 机制并未遵循严格的同源策略,允许一个子域可以获取其富裕的 cookie。当需要实现单点登录方案时,cookie 的上述特性非常有用,然而也增加了 cookie 受攻击的危险,比如攻击者可以借此发动会话固定攻击。因此浏览器禁止在 domain 属性中设置.org,.com 等通用顶级域名,以及在国家及地区顶级域下注册的二级域名,以减小攻击发送的范围
  • http:该字段包含 HTTPOnly 属性,该属性用来设置 cookie 能否通过脚本来访问,默认为空,即可以通过脚本访问。
  • expires/max-size:cookie 的超时时间。不设置,浏览器关闭此 cookie 失效

讲一下浏览器(V8)的垃圾回收机制 待完善

上次编辑于:
本站勉强运行 小时
本站总访问量
網站計數器