浏览器加载步骤

浏览器加载步骤梳理，包括缓存问题、HTTP的缓存，后台和前台的HTTP交互，JS引擎解析过程，服务器接收到请求到对应后台接收到请求等等。

🎯浏览器加载步骤

• 其他
  • 跨域
  • web安全
    • SQL注入攻击
    • XSS注入
      • 注入原理
        • 跨站脚本攻击
        • 允许恶意web用户将代码植入到web网站里面，供给其他用户访问，当用户访问到由恶意代码的网页就会产生xss攻击
        • 用户输入内容被浏览器当作前端代码进行执行
      • 危害
        • 盗取各类用户账号
        • 控制数据，读取、篡改、添加、删除敏感数据
        • 窃取重要资料
        • 非法转账
        • 强制发送电子邮件，钓鱼
        • 网站挂马
        • 控制受害者及其（肉鸡）向其他网站发起攻击
      • 分类
        • 反射型XSS
          • 不会永久存储用户的数据，仅发生在用户的一次访问后
        • 存储型XSS
          • 攻击代码被持久化保存在服务器上
        • DOM型XSS
    • CSRF
      • Corss Site Request Forgery，跨站请求伪造
    • 文件上传下载
      • 服务器端对上传文件的类型、大小以及保存的路径及文件名采用白名单进行严格限制，且无法通过客户端篡改，无法上传业务需求之外的任何类型文件
  • hybrid模式
• JS引擎解析过程
  • 渲染引擎
    • 关键渲染路径是指浏览器从最初接收请求来的HTML、CSS、javascript等资源，然后解析、构建树、渲染布局、绘制，最后呈现给客户能看到的界面这整个过程
  • JavaScript引擎
    • 专门处理JavaScript脚本的虚拟机，一般会附带在网页浏览器中，JavaScript引擎从头到尾负责整个JavaScript程序的编译和执行过程。js的引擎有很多种，V8引擎用于Chrome浏览器和Node中
    • v8引擎主要由两个部分组成
      • Memory Heap（内存堆）：内存分配地址的地方
      • Call Stack（调用堆栈）：代码执行的地方
  • JS引擎执行过程
    • 执行顺序
      • js是单线程语言
      • 在浏览器中一个页面永远只有一个线程在执行js脚本代码
      • js是单线程语言，但是代码解析是非常迅速的，不会发生解析阻塞
      • js是异步执行的，通过事件循环（event loop）方式实现的
      • 浏览器先按照js的顺序加载<script>标签分隔的代码块，js代码块加载完毕之后，立刻进入到上面的三个阶段，然后再按照顺序找下一个代码块，再继续执行三个阶段，无论是外部脚本文件（不异步加载）还是内部脚本代码块，都是一样的，并且都在同一个全局作用域中。
    • 语法分析阶段
      • 分析该js脚本代码块的语法是否正确，如果出现错误，则向外抛出一个语法错误（SyntaxError），停止该js代码块的执行，然后继续查找并加载下一个代码块；如果语法正确，则进入预编译阶段
    • 预编译阶段
      • 运行环境
        • 全局环境（js代码加载完毕后，进入到预编译也就是进入到全局环境）
        • 函数环境（函数调用的时候，进入到该函数环境，不同的函数，函数环境不同）
        • eval环境（不建议使用，存在安全、性能问题）
      • 执行上下文
        • 当前的执行环境
        • 每进入到一个不同的运行环境都会创建 一个相应的执行上下文（execution context），在一段js程序中一般都会创建多个执行上下文，js引擎会以栈的数据结构对这些执行进行处理，形成函数调用栈（call stack），栈底永远是全局执行上下文（global execution context），栈顶则永远时当前的执行上下文
      • 函数调用栈
        • 函数调用栈就是使用栈存取的方式进行管理运行环境，特点是先进后出，后进先出
      • 创建执行上下文
        • 创建变量对象（variable object）
          • 创建arguments对象，检查当前上下文参数，建立该对象的属性与属性值，仅在函数环境（非箭头函数）中进行，全局环境没有此进程
          • 检查当前上下文的函数声明，按照代码顺序查找，将找到的函数提前声明，如果当前上下文的变量对象没有该函数名属性，则在该变量对象以函数名建立一个属性，属性值则指向该函数所在堆内存地址引用，如果存在，则会被新的引用覆盖掉
          • 检查当前上下文的变量声明，按照代码顺序查找，将找到的变量提前声明，如果当前上下文的变量对象没有变量名属性，则在该变量对象以变量名建立一个属性，属性值为undefined，如果存在，则忽略该变量声明
          • 在全局环境中，window对象就是全局执行上下文的变量对象，所有的变量和函数都是window对象的属性方法
          • 函数声明提前和变量声明提升是在创建变量对象中进行的，且函数声明优先级高于变量声明
          • 创建变量对象发生在预编译阶段，还没有进入到执行阶段，该变量对象都不能访问的，因为此时的变量对象中的变量属性尚未赋值，值仍为undefined，只有在进行执行阶段，变量中的变量属性才进行赋值后，变量对象（Variable Object）转为活动对象（Active Object）后，才能进行访问，这个过程就是VO->AO过程。
        • 创建作用域链（scope chain）
          • 作用域链由当前执行环境的变量对象（未进入到执行阶段前）与上层环境的一系列活动对象组成，保证了当前执行环境对复合访问权限的变量和函数有序访问
          • scopeChain: [VO(innerTest), AO(test), AO(global)]
            • 使用数组表示作用域链，作用域链的活动对象或者变量对象可以直接理解成作用域
            • 作用域链的第一项永远是当前作用域（当前上下文的变量对象或者活动对象）
            • 最后一项永远是全局作用域（全局上下文的活动对象）
            • 作用域链保证了变量和函数的有序访问，查找方式是沿着作用域链从左至右查找变量或者函数，找到则会停止找，找不到则一直查找全局作用域，再找不到就会报错
        • 闭包
          • 在函数内部定义新函数
          • 新函数访问外层函数的局部变量，即访问外层函数环境的活动对象属性
          • 新函数执行，创建新函数的执行上下文，外层函数即为闭包
        • 确定this的指向
          • 在全局环境下，全局执行的上下文中变量对象的this属性指向为window
          • 在函数环境下的this指向比较灵活，需要根据执行环境和执行方法确定
    • 执行阶段
      • 通过事件循环（Event Loop）进行异步执行
      • js是单线程，但js执行过程会有四个线程参与该过程，只有JS引擎线程在执行JS脚本程序，其他的三个线程只协助，不参与代码解析与执行
        • JS引擎线程
          • JS内核，负责解析执行Javascript脚本程序的主线程（例如V8引擎）
        • 事件触发线程
          • 归属于浏览器内核进程，不受JS引擎线程控制。主要用于控制事件（例如鼠标，键盘等事件），当该事件被触发时候，事件触发线程就会把该事件的处理函数推进事件队列，等待JS引擎线程执行
        • 定时器触发线程
          • 主要控制计时器setInterval和延时器setTimeout，用于定时器的计时，计时完毕，满足定时器的触发条件，则将定时器的处理函数推进事件队列中，等待JS引擎线程执行
          • W3C在HTML标准中规定setTimeout低于4ms的时间间隔算为4ms
        • HTTP异步请求线程
          • 通过XMLHttpRequest连接后，通过浏览器新开的一个线程，监控readyState状态变更时，如果设置了该状态的回调函数，则将该状态的处理函数推进事件队列中，等待JS引擎线程执行
          • 浏览器对同一域名请求的并发连接数是有限制的，Chrome和Firefox限制数为6个，ie8则为10个
      • 执行任务
        • 宏任务（macro-task，task）
          • 同步任务
            • 同步任务指的是在JS引擎主线程上按顺序执行的任务，只有前一个任务执行完毕后，才能执行后一个任务，形成一个执行栈（函数调用栈）
          • 异步任务
            • 异步任务指的是不直接进入JS引擎主线程，而是满足触发条件时，相关的线程将该异步任务推进任务队列(task queue)，等待JS引擎主线程上的任务执行完毕，空闲时读取执行的任务，例如异步Ajax，DOM事件，setTimeout等
        • 微任务（micro-task，jobs）
          • 执行宏任务中同步任务，执行结束
          • 检查是否存在可执行的微任务，有的话执行所有微任务，然后读取任务队列的任务事件，推进主线程形成新的宏任务；没有的话则读取任务队列的任务事件，推进主线程形成新的宏任务
          • 执行新宏任务的事件任务，再检查是否存在可执行的微任务，如此不断的重复循环
        • 宏任务（同步任务）--> 微任务 --> 宏任务（异步任务）
        • 事件循环（Event Loop）
          • 主线程执行栈
            • 首先执行宏任务的同步任务，在主线程上形成一个执行栈，可理解为函数调用栈
            • 当JS引擎主线程上的任务执行完毕，则会读取任务队列中的事件，将任务队列中的事件任务推进主线程中，按任务队列顺序执行
            • 当JS引擎主线程上的任务执行完毕后，则会再次读取任务队列中的事件任务，如此循环，这就是事件循环（Event Loop）的过程
          • 异步任务等待触发
            • 当执行栈中的函数调用到一些异步执行的API（例如异步Ajax，DOM事件，setTimeout等API），则会开启对应的线程（Http异步请求线程，事件触发线程和定时器触发线程）进行监控和控制
          • 任务队列
            • 任务队列(task queue)就是以队列的数据结构对事件任务进行管理，特点是先进先出，后进后出
            • 异步任务的事件满足触发条件时，对应的线程则会把该事件的处理函数推进任务队列(task queue)中，等待主线程读取执行
  • VO
    • 变量对象（Variable Object）
  • AO
    • 活动对象（Active Object）
  • 作用域链
  • 回收机制
    • https://segmentfault.com/a/1190000019584487
• CSS的可视化规格模型
  • 元素的渲染规则
    • 包含块
    • 控制框
    • BFC
    • IFC
• 浏览器接收到HTTP数据包后的解析流程。
  • 解析html-词法分析然后解析成dom树
  • 解析css生成css规则树
  • 合成render树
  • layout、painting渲染
  • 复合图层的合成
  • GPU绘制
  • 外链资源的处理
  • loaded
  • DOMContentLoaded
• 从浏览器接收url到开启网络请求线程
  • 浏览器机制
    • 浏览器是多进程的
    • 系统分配给浏览器运行需要的资源（CPU，内存）
    • 浏览器每新开一个页签，系统相当于创建了一个独立的进程，资源独立
      • 任务管理器中新增一个进程
      • 单个页面挂掉（比如存在死循环）不会影响其他页签
  • 浏览器中存在的进程
    • 浏览器进程（Browser进程）：浏览器的主进程（负责协调，主控），只有一个
      • 负责浏览器的界面显示，与用户交互，网址栏输入、前进、后退等
      • 负责管理各个页面，创建和销毁进程
      • 将页面内容（位图）写入到浏览器内存中，最后将图像显示在屏幕上
      • 文件存储等功能
    • 渲染进程（浏览器内核，Renderer进程，内部是多线程的）：默认一个tab页面一个渲染进程（特殊情况下：渲染进程不一定每个tab就一个），主要的作用为页面渲染，脚本执行，事件处理等
    • GPU进程：用于3D绘制等，将开启了3D绘制的元素的渲染由CPU转向GPU，开启GPU加速，最多一个
    • 网络进程：主要负责页面网络资源加载，之前是作为一个模块运行在浏览器进程里面的，现在独立开来，成为一个单独的进程
    • 插件进程：每种类型的插件对应一个进程，仅当使用该插件时才创建
    • 音频进程：浏览器音频管理
  • 浏览器多进程的好处
    • 避免单个页面崩溃影响整个浏览器
    • 避免第三方插件崩溃时影响整个浏览器
    • 多进程充分利用多核优势
    • 方便使用沙河模型隔离插件等进程，提高浏览器稳定性
    • 利用空间换时间，牺牲内存换来性能
  • 浏览器线程
    • 线程主要存在于渲染进程里，即浏览器内核里
    • GUI渲染线程
      • 负责渲染浏览器界面，解析HTML，CSS，构建DOM树和RenderObject树，布局和绘制
      • 当界面需要重新绘制（Repaint）或由于某种操作引发回流（reflow）时，该线程就会执行
      • 与JS引擎互斥，当执行JS引擎线程时，GUI会pending，当任务队列空闲时，才会继续执行GUI
    • JS引擎线程
      • 也称JS内核，负责处理JavaScript脚本程序
      • JS引擎线程负责解析JavaScript脚本，运行代码
      • JS引擎一直等待任务队列中任务的到来，然后加以处理，浏览器无论何时都只有一个JS线程在运行JS程序
      • 与GUI渲染引擎互斥，如果JS执行时间过长，就会造成页面渲染不连贯，导致页面渲染加载阻塞
    • 事件触发线程
      • 归属于浏览器而不是JS引擎（辅助JS引擎），用来控制事件循环（存在一个事件队列）
      • 当JS引擎执行触发事件代码块时（也可来自浏览器内核的其他线程，如鼠标点击，Ajax异步请求等），会将对应的任务添加到事件线程中
      • 当对应的事件符合触发条件被出发时，该线程会把事件添加到待处理队列的队尾，等待JS引擎的处理
      • 由于JS的单线程关系，所以这些待处理队列的事件都得排队等待JS引擎的处理（当JS引擎空闲时才会去执行）
    • 定时触发器线程
      • setInterval、setTimeOut所在线程
      • 浏览器定时计数器并不是由JavaScript引擎计数的（因为JS引擎为单线程的，如果处于阻塞线程状态就会影响计时的准确）
      • 通过单独线程来计时并出发（计时完毕后，添加到事件队列中，等待JS引擎空闲后执行）
      • W3C在HTML标准中规定要求setTimeOut中低于4ms的时间间隔为4ms
    • 异步HTTP请求线程（IO线程）
      • XMLHttpRequest在连接后是通过浏览器新开一个线程请求
      • 当检测到状态变更时，如果设置有回调函数，异步线程就产生状态变更事件，将这个回调再放入事件队列中（放入事件触发线程中），再由JS引擎执行
    • 总结
      • js执行的主线程为JS引擎，无论何时都只有一个JS线程在运行，所以是单线程执行
      • GUI渲染线程和JS引擎线程是互斥的，并且JS会阻塞页面的加载和渲染
      • 定时器（setInterval，setTimeOut）会在定时器触发器线程中进行计时
      • 定时触发器线程计时结束后需要执行的事件和异步HTTP请求线程的回调事件都会进入到事件触发线程的任务队列中等待JS引擎的执行
• 开启网络线程到发出一个完整的HTTP请求
  • DNS查询
    • DNS
      • 域名系统，Domain Name System，DNS是互联网的一项服务
      • 将域名和IP地址相互映射的一个分布式数据库
      • 使用UDP端口53
      • DNS通过层次结构的分布式数据库建立一致性的名字空间，用来定位网络资源
    • 查询方式
      • 本地查询
        • 主机保存近期的DNS查询记录，主要有hosts文件和客户机的高速缓存
      • 直接查询
        • 查询本地DNS服务器
      • 迭代查询
        • 需要经过多次迭代查询才能得到相应的结果
        • 转发器按照域名级别高低进行迭代
        • 本地DNS服务器向其他域名服务器请求的过程是迭代查询
      • 递归查询
        • 只要发出一次请求，就能得到相应的结果
        • 向本地DNS服务器发送请求的方式是递归查询
    • 查询过程
      • 搜索浏览器的DNS缓存，缓存中维护一张域名与IP地址的对应表
      • 若没有命中，则继续搜索操作系统的DNS缓存
      • 若没有命中，则操作系统将域名发送至本地域名服务器，本地域名服务器采用递归查询自己的DNS缓存，查找成功则返回结果
      • 若本地域名服务器的DNS缓存没有命中，则本地域名服务器向上级域名服务器进行迭代查询
        • 本地域名服务器向根域名服务器发起请求，根域名服务器返回顶级域名服务器的地址给本地服务器
        • 本地域名服务器拿到这个顶级域名服务器的地址后，就向其发起请求，获取权限域名服务器的地址
        • 本地域名服务器根据权限域名服务器的地址向其发起请求，最终得到该域名对应的 IP 地址
      • 本地域名服务器将得到的IP地址返回给操作系统，同时将其缓存
      • 操作系统将IP地址返回给浏览器，同时将其缓存
      • 浏览器得到了域名对应的IP地址，并将其缓存
  • TCP/IP请求
  • 五层因特网协议栈
• 服务器接收到请求到对应后台接收到请求
  • 负载均衡
  • 安全拦截
  • 后台内部处理
• 后台和前台的HTTP交互
  • 报文结构
    • https://blog.csdn.net/qq_40276626/article/details/120375077
  • HTTP头部
    • https://blog.csdn.net/sinat_34166518/article/details/83584910
    • 通用头域（通用头）
      • Cache-Control头域
      • Date头域
      • Pragma头域
      • Connection连接状态
    • 请求消息（请求头）
      • Accept
        • 指定客户端能够接收的内容类型
        • Accept: text/plain, text/html
    • 响应消息（响应头）
    • 实体消息（实体头和实体）
  • 状态码
    • 1XX：信息状态码
      • 100 Continue
    • 2XX：成功状态
      • 200 OK，成功 服务器已成功处理了请求。GET：服务器成功返回用户请求的数据，该操作是幂等的
      • 201 CREATED，创建 表示服务器执行成功，并且创建了新的资源。POST/PUT/PATCH：用户新建或修改数据成功
      • 202 Accepted，已接受 服务器接受请求，但未处理。*：表示一个请求已经进入后台排队（异步任务）
      • 203 非授权信息 服务器成功执行了请求，但是返回的信息可能来自另一来源
      • 204 NO CONTENT，空内容 服务器成功执行请求，但是没有返回信息。DELETE：用户删除数据成功
      • 205 重置内容 服务器成功执行了请求，但是没有返回内容，与204不同，他需要请求者重置文档视图（比如，清除表单内容，重新输入）
      • 206 部分内容 服务器成功执行了部分请求
    • 3XX：重定向
      • 304 Not Modified。未修改。所请求的资源未修改，服务器返回此状态码时，不会返回任何资源。客户端通常会缓存访问过的资源，通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源
    • 4XX：客户端错误
      • 400 INVALID REQUEST。POST/PUT/PATCH：用户发出的请求有错误，服务器没有进行新建或修改数据的操作，该操作是幂等的
      • 401 Unauthorized。*：表示用户没有权限（令牌、用户名、密码错误）
      • 403 Forbidden。*：表示用户得到授权（与401错误相对），但是访问是被禁止的
      • 404 NOT FOUND。*：用户发出的请求针对的是不存在的记录，服务器没有进行操作，该操作是幂等的
      • 406 Not Acceptable。GET：用户请求的格式不可得（比如用户请求JSON格式，但是只有XML格式）
      • 410 Gone。GET：用户请求的资源被永久删除，且不会再得到的
      • 422 Unprocesable entity。POST/PUT/PATCH：当创建一个对象时，发生一个验证错误
    • 5XX：服务器错误
      • 500 INTERNAL SERVER ERROR。*：服务器发生错误，用户将无法判断发出的请求是否成功
      • 502 Bad Gateway。作为网关或者代理工作的服务器尝试执行请求时，从远程服务器接收到了一个无效的响应，一般来说是后端服务器挂掉时前端网页服务器进行的返回
  • cookie
  • cookie优化
  • 静态资源优化
  • HTTP协议中的编码和解码
    • https://blog.csdn.net/lgxzzz/article/details/124715287
    • URL的编码和解码
    • 浏览器对不同媒体资源类型（mime-type）的“资源”的解码
    • 服务器对资源的编码和解码
  • 请求和响应数据的压缩和解压缩
    • https://blog.csdn.net/weixin_33277597/article/details/122919497
    • gzip
    • Deflate
    • Brotli
• 缓存问题，HTTP的缓存
  • https://segmentfault.com/a/1190000018342655
  • HTTP缓存头部
  • ETag
  • Catch-Control