浏览器
从输入 URL 到看到页面发生了什么
没有标准答案。 每一个过程都可以深入,前端关注的主要以下方面
window.onload 和 DOMContentLoaded 的区别
onload 事件:页面的所有资源加载完才会执行,包括图片视频
DOMContentLoaded:DOM 渲染完即可执行,此时图片、视频可能还没有加载完
加载过程
什么是DNS?
DNS(Domain Name System)是一个用于将域名(如www.google.com)转换为计算机可以理解的IP地址(如172.217.164.68)的系统。这个过程对于互联网的正常运行至关重要,它允许用户使用易于理解的域名而不是复杂的IP地址来访问网站和其他在线资源
DNS
解析域名转成ip
地址- 浏览器根据
ip
地址向服务器发起http
请求 - 服务器处理
http
请求,并返回给浏览器
渲染过程
- 根据
HTML
代码生成DOM
树 - 根据
CSS
代码生成CSSOM
- 将
DOM
和CSSOM
整合形成render tree
- 根据
render tree
渲染页面,遇到script
暂停渲染,优先加载并执行 JS 代码,完成再继续进行渲染(JS 有可能要会改变 DOM 结构,JS 执行和页面渲染共用一个线程)
讲一下浏览器的渲染过程
- 首先解析收到的文档,根据文档定义构建一棵 DOM 树,DOM 树是由 DOM 元素及属性节点组成的
- 然后对 CSS 进行解析,生成 CSSOM 树
- 根据 CSSOM 树和 DOM 树构建渲染树。渲染树的节点被称为渲染对象,渲染对象是一个包含有颜色和大小属性的矩形,渲染对象和 DOM 元素相对应,但这种对应关系不是一对一的,不可见的 DOM 元素不会插入渲染树。还有一些 DOM 元素对应几个可见对象,它们一般是一些具有复杂结构的元素,无法用一个矩形来描述。
- 当渲染对象被创建并添加到树中,它们并没有位置和大小,所以当浏览器生成渲染树以后,就会根据渲染树来进行布局 回流
- 布局结束后是绘制阶段,遍历渲染树并调用渲染对象的 paint 方法将他们的内容显示在屏幕上
大致过程图示:

Cookie、LocalStorage、SessionStorage 区别
- 存储大小(单个域名)
cookie
:4k
sessionStorage
:5M
localStorage
:5M
- 生命周期
cookie
:若没有设置失效时间,关闭浏览器 cookie
失效,如果设置了时间,过期后失效
sessionStorage
:仅在当前浏览器关闭之前有效,关闭页面会被删除
localStorage
:永久有效,除非手动删除
- 作用域
cookie
:Cookie
的作用域仅仅由 domain
(当前域或父域)和 path
(当前路径和上級路径) 决定与协议和端口无关
sessionStorage
:当前浏览器标签页
localStorage
:在所有同源窗口中共享
- 通信
cookie
:cookie
在浏览器和服务器之间来回传递,如果使用 cookie
保存过多数据会造成性能问题
sessionStorage
:仅在浏览器中保存,不参与服务器的通信
localStorage
:仅在浏览器中保存,不参与服务器的通信
- 应用场景
cookie:最常见的是 cookie 和 session 结合使用,我们将 sessionId 存储到 cookie 中,每次发请求都会携带这个 sessionId,这样服务端就知道是谁发起的请求,从而响应相应的信息
localStorage:存储用户的持久性数据
sessionStorage 实际没怎么用过 :游客登录信息
cookie 有哪些字段,作用分别是什么?
- 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 失效