知识点

• 浏览器工作原理

  • 渲染引擎
  • JavaScript 引擎
  • 网络模块

• 渲染过程

  • 构建 DOM 树
  • 计算 CSS 样式
  • 布局页面
  • 绘制页面

• JavaScript 执行机制

  • 单线程执行

  • 事件循环和异步回调

  • 常见的性能问题

    • 闭包
    • 作用域链
    • 垃圾回收

• 前端性能优化

  • 减少 HTTP 请求
  • 压缩代码
  • 合并文件
  • 使用 CDN 加速
  • 进行图片优化等技术手段

• Web 安全

  • XSS 攻击
  • CSRF 攻击
  • SQL 注入等多种攻击方式
  • 防范这些攻击的原理和方法

真题

从浏览器地址栏输入URL到呈现页面都发生了什么？

• 第一部分：URL解析和缓存
  • URL解析6个部分（HSTS服务器响应头）
  • 卸载页面，释放内存
  • 重定向 - 302
  • 应用缓存 - 客户端200，服务端304
    • 强缓存
      • Expires（1.0，时间要一致）
      • Cache-Control（1.1，max-age，也可以no-cache不用）
    • 协商缓存：
      • Last-Modified（本地打开可能修改，If-Modified-Since）
      • etag（md5，If-None-Match）
    • 存储位置：
      • Service Worker，需要https协议，并且要手动注册
      • Memory Cache
      • Disk CachePush Cache（推送缓存，http2.0，Session级别，只能用一次）
• 第二部分：网络部分
  • DNS域名解析 - 网址和IP地址转换（dns-prefetch）。逐层查找：
    • 浏览器(1min，1000)
    • 本地
    • 根. -> .com. -> google.com. -> www.google.com.
  • TCP/IP
    • 7层网络协议（TCP/IP协议分层简单记忆：链路 - IP - TCP - HTTP）
      • 链路层
        • 物理 - 物理设备上比特流
        • 数据链路 - 寻址，比特流转为逻辑传输线路
      • 网络 - 子网运行：编址、分组、路由。IP
      • 传输 - 数据传到端。TCP/UDP
      • 应用层
        • 会话 - 不同机器用户会话。SSL/TLS
        • 表示 - 语义化。加密、压缩、翻译
        • 应用 - 应用程序。HTTP、FTP、SMTP
    • TCP连接和断开 - 互相知道对方的存在
      • 三次握手：连接、返回、收到了。半连接队列会重传，队满了会丢包。SYN 攻击是一种典型的 DoS/DDoS 攻击
      • 四次挥手：关闭、C->S我关掉了、我要关掉S->C，关吧
  • HTTP
    • 发展
      • HTTP1.1 - restful的API、增强性能缓存、握手挥手
      • HTTP2 - 二进制传输、并行发请求、头信息压缩
      • HTTP3 - QUIC传输层tcp都换成UDP。降低100ms
    • 特点
      • 无状态 - 需要重发
      • 无连接 - 发完就断开
      • 灵活 - content-type支持多种类型
      • C/S模式
      • 请求只需要方法路径等，简单快速
    • https 7次握手 - 再加一层TLS（传输层安全性协议）或者SSL（安全套接层）
      • TLS握手4步：我用了什么算法、给你证书和公钥我要验证你的证书、发你证书，之后发送会加密、验证完，后面信息会加密
    • 发起HTTP请求
      • get和post的区别 - 长度限制、参数位置、安全方式、编码方式、缓存、预检请求
    • HTTP响应
      • udp tcp的区别：是否连接、是否可靠、连接个数、速度、场景
      • 状态码：301永久移动、302临时移动、304未修改、400不理解、401未授权、403禁止、404未找到、422无法处理
• 第三部分：渲染渲染
  • 结构构造
    • 构建DOM树
      • 转码（Bytes -> Characters），字符串
      • Tokens 化（Characters -> Tokens），标签
      • 构建 Nodes（Tokens -> Nodes），包括scope
      • 构建 DOM 树（Nodes -> DOM Tree），父兄关系
    • 样式计算：CSSOM，与上面相同，有样式标准化，层叠样式计算
    • 页面布局树：LayoutTree，DOM 树与 CSSOM 树合并后形成渲染树
  • 渲染
    • 生成分层树：分割图层。复杂的 3D 变换、页面滚动，或者使用 z-indexing 做 z 轴排序等。
    • 样式重计算（Recalculate style）：每层样式重新计算
    • 重排、回流（Layout）：每个节点生成图形和位置。
    • 重绘（Paint）：每个节点绘制填充到图层位图中
    • 栅格化：图层作为纹理上传到GPU
    • 重组（Composite Layers）：组合多个图层到页面上生成最终屏幕图像
    • 显示：合成线程发送绘制图块命令给浏览器进程。浏览器进程根据指令生成页面，并显示到显示器上

参考：

• juejin.cn/spost/71941…
• juejin.cn/post/693523…
• juejin.cn/post/684490…