跳至主要內容

浏览器

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

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

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

window.onload 和 DOMContentLoaded 的区别

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

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

加载过程

什么是DNS?

DNS(Domain Name System)是一个用于将域名(如www.google.com)转换为计算机可以理解的IP地址(如172.217.164.68)的系统。这个过程对于互联网的正常运行至关重要,它允许用户使用易于理解的域名而不是复杂的IP地址来访问网站和其他在线资源

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

渲染过程

  1. 根据HTML代码生成 DOM
  2. 根据 CSS 代码生成 CSSOM
  3. DOM 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)的垃圾回收机制 待完善

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