浏览器
大约 4 分钟约 1235 字...
从输入 URL 到看到页面发生了什么
没有标准答案。 每一个过程都可以深入，前端关注的主要以下方面
window.onload 和 DOMContentLoaded 的区别
onload 事件：页面的所有资源加载完才会执行，包括图片视频
DOMContentLoaded：DOM 渲染完即可执行，此时图片、视频可能还没有加载完
加载过程
DNS解析域名转成ip地址- 浏览器根据
ip地址向服务器发起http请求 - 服务器处理
http请求，并返回给浏览器
渲染过程
- 根据 HTML 代码生成 DOM 树
- 根据 CSS 代码生成 CSSOM
- 将 DOM tree 和 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 失效