半山烟雨的博客

Appearance

http 1.0，1.1，2.0 的特性和区别 ​

查看详情

特性

  • http 1.0
    • 无状态：服务器不跟踪记录请求过的状态
    • 无连接：浏览器每次请求都需要建立 tcp 连接（无连接会导致无法复用连接和请求阻塞）
  • http 1.1
    • 长连接：新增了 Connection 字段，可以设置 keep-live 值保持连接不断开
    • 管道化：基于上面长连接的基础，管道化可以不等第一个请求响应继续发送后面的请求，但响应的顺序还是按照请求的顺序返回的
    • 缓存的处理：新增字段 cache-control
    • 断点传输：在上传/下载资源时，如果资源过大，将其分割为多个部分，分别上传/下载，如果遇到网络故障，可以从已经上传/下载好的地方继续请求，不用从头开始，提高效率
  • http 2.0
    • 二进制分帧：将所有传输的信息分割为更小的消息和帧,并对它们采用二进制格式的编码
    • 多路复用：在共享 TCP 链接的基础上同时发送请求和响应
    • 头部压缩
    • 服务器推送：服务器可以额外的向客户端推送资源，而无需客户端明确的请求

区别

  • http1.0 到 http1.1 的主要区别，就是从无连接到长连接
  • http2.0 对比 1.X 版本主要区别就是多路复用

http 和 https 的区别 ​

查看详情
  • http 全称超文本传输协议，是互联网上应用最为广泛的一种网络协议，是一个客户端和服务器端请求和应答的标准
  • https 简单的讲就是 http 的安全版，即在 http 下加入 SSL 层
  • https 协议需要到数字证书认证机构申请证书
  • http 信息传输是明文传输，https 则是具有安全性的 SSL 加密传输
  • http 页面的响应速度比 https 快。http 使用 TCP 三次握手建立连接，客户端和服务器需要交换三个包； 而 https 除了 TCP 的三个包还要加上 SSL 握手的 9 个包，一共 12 个包。
  • http 和 https 使用完全不同的链接方式，用的端口号也不一致，前者是 80 后则是 443
  • https 比 http 更耗费服务器资源

http 的状态码 ​

查看详情
  • 1xx
    • 100 Continue：客户端应继续其请求。
    • 101 Switching Protocols：服务器根据客户端的请求切换协议。
  • 2xx
    • 200 OK：请求成功，服务器返回所请求的数据。
    • 201 Created：请求成功并且服务器创建了新的资源。
    • 202 Accepted：服务器已接受请求，但尚未处理。
    • 204 No Content：服务器成功处理了请求，但没有返回任何内容。
  • 3xx
    • 301 Moved Permanently：请求的资源已被永久移动到新URL。
    • 302 Found：请求的资源临时被移动到新URL。
  • 4xx
    • 400 Bad Request：服务器无法理解请求的格式，客户端应修改请求。
    • 401 Unauthorized：请求未授权，客户端必须提供身份验证信息。
    • 403 Forbidden：服务器拒绝请求，客户端无权访问资源。
    • 404 Not Found：服务器找不到请求的资源。
    • 405 Method Not Allowed：请求方法不被服务器允许。
  • 5xx
    • 500 Internal Server Error：服务器遇到未预料的情况，无法完成请求。
    • 501 Not Implemented：服务器不支持请求的功能。
    • 502 Bad Gateway：服务器作为网关或代理，从上游服务器收到无效响应。
    • 503 Service Unavailable：服务器当前无法处理请求，通常是因为过载或维护。
    • 504 Gateway Timeout：服务器作为网关或代理，未能及时从上游服务器收到响应。

get 和 post 请求的区别 ​

查看详情
请求方式getpost
参数位置参数拼接在 url 的后面参数在请求体内
参数的大小受浏览器 url 大小限制，不超过 32k1G
适用场景从服务器获取数据向服务器提交数据
安全性参数携带在 url 中，安全性低相对于 get，安全性更高

get 请求传参长度有无限制？ ​

查看详情
  • HTTP 协议并未规定 get 和 post 的参数大小
  • 浏览器或者 web 服务器限制了 URL 的长度所以限制了 get 传参的大小
  • 不同浏览器和 web 服务器限制的最大长度是不一样的

性能优化的方式有哪些 ​

查看详情
  • 从编码的角度
    • html
      • 减少不必要的 DOM，避免不必要的 DOM 层层嵌套
      • 避免<img src="">空标签，因为 src 为空时浏览器任然会发起请求
      • 图片提前指定宽高或者脱离文档流，这样能减少因图片加载而导致的页面回流
      • 语义化标签，有利于 SEO 和浏览器的解析
      • 减少 table 布局
      • 在 header 引入 css，在 body 底部引入 js
    • css
      • 使用 class，避免一层层的向下查找子节点
    • js
      • 数据扁平化，有利于数据的读取和维护
      • 尽可能的减少循环的次数，完成循环的目的后尽量终止循环
      • 尽量避免 for...in 循环，因为他会枚举原型对象，耗时大于普通的循环
      • 减少访问 DOM 的次数，如需多次访问，尽量将其缓存于变量中
      • 多次操作 DOM 尽量合并为一次操作，如在 JS 中修改样式等
      • 避免对计算属性的访问，如：offsetTop，getComputedStyle 等
      • 使用事件委托，避免大量的事件绑定
  • 从其他的角度
    • 合理运用浏览器的缓存
    • 利用浏览器并行请求的功能，适当的合并/拆分资源
    • 混淆/压缩代码，开启 gzip 压缩
    • 小的图片合并成雪碧图，低于 5k 的图片可以转换为 base64 内嵌
    • 将静态资源放到 CDN 服务器
    • 非关键性的资源尽可能异步加载和懒加载
    • 路由懒加载

如何进行图片懒加载？ ​

查看详情
  • 使用原生 loading="lazy" 属性，最简单，但浏览器兼容性有限。
  • 使用 Intersection Observer API，灵活且性能优越。
  • 使用第三方库，如 lazysizes，简化实现并增加浏览器兼容性。

跨页面通信的方式有哪些 ​

查看详情
  • 父页面通过 window.open(url, name)方式打开的子页面可以获取句柄，然后通过 postMessage 完成通信需求
    • 只能与自己打开的页面完成通信，应用面比较窄
    • 在跨域场景中也能使用该方式
  • 同源下共享 localStorage
    • 跨域场景下需要配合其他方案使用
    • API 简洁，兼容性比较好

从输入 url 到展示出页面经历了哪些过程？ ​

查看详情
  • 网络通信
    • DNS 将域名解析为 IP 地址
    • 建立 TCP 链接（三次握手）
    • 浏览器向 WEB 服务器发起 HTTP 请求
    • WEB 服务器将结果返回给浏览器
    • 关闭 TCP 链接（四次挥手）
  • 浏览器渲染
    • 浏览器解析 HTML 生成 DOM tree
    • 解析 CSS 生成 CSSOM Tree
    • 解析完成后浏览器引擎会通过 DOM tree 和 CSSOM Tree 来构造 Render Tree
    • 布局（layout）Render Tree，计算每个节点的几何信息
    • 绘制（paint）Render Tree，绘制页面像素信息
    • 将像素发送给 GPU，将各个节点绘制到屏幕上

浏览器的渲染机制是什么？ ​

查看详情
  • 浏览器解析 HTML 生成 DOM tree
  • 解析 CSS 生成 CSSOM Tree
  • 解析完成后浏览器引擎会通过 DOM tree 和 CSSOM Tree 来构造 Render Tree
  • 布局（layout）Render Tree，计算每个节点的几何信息
  • 绘制（paint）Render Tree，绘制页面像素信息
  • 将像素发送给 GPU，将各个节点绘制到屏幕上

重绘和回流是什么？会触发回流的操作有哪些？如果避免？ ​

查看详情
  • 重绘：当元素样式的改变不影响布局时，浏览器将使用重绘对元素进行更新，此时由于只需要 UI 层面的像素绘制，因此损耗较小
  • 回流：当元素的尺寸、结构或者触发某些属性时，浏览器会重新计算元素的位置，再进行绘制。
  • 会触发回流的操作：
    • 浏览器窗口大小改变
    • 元素尺寸、位置、内容发生改变
    • 元素的字体大小发生改变
    • 添加删除可见的 DOM 元素
    • 激活 CSS 的伪类
    • JS 查询某些属性或者调用某些方法
      • clientWidth、clientHeight、clientTop、clientLeft
      • offsetWidth、offsetHeight、offsetTop、offsetLeft
      • scrollWidth、scrollHeight、scrollTop、scrollLeft
      • getComputedStyle()
      • getBoundingClientRect()
      • scrollTo()
  • 避免：
    • CSS
      • 避免使用 table 布局
      • 避免将动画效果应用到 position 属性为 absolute 或者 fixed 元素
    • JS
      • 避免频繁的修改样式，修改样式最好一次完成
      • 尽量使用 class 进行样式修改
      • 减少 DOM 的增删次数

浏览器端的存储方式有哪些？ ​

查看详情
  • cookie
    • cookie 的兼容性比较好
    • 存储量比较小，不同的浏览器存储量不同，基本都在 4KB 左右
    • 由于 Cookie 会由浏览器作为请求头发送，因此存储过多会影响性能
    • 只能存储字符串
    • 存在安全问题，存储在 cookie 的数据可以被他人访问
  • localStorage、sessionStorage
    • API 更简单
    • 更加安全
    • 可存储的数据量更大
    • 它们是 HTML5 的 API 所以存在一定的兼容性
    • 受同源策略限制
  • indexedDB
    • 可以存储更大量的结构化数据
    • IndexedDB 是异步的，操作时不会锁死浏览器
    • 一系列操作中只要异步失败整个事务就会取消，数据库回滚到之前的状态
    • IndexedDB 不仅可以存储字符串还可以存储二进制数据
    • 兼容性更差
    • 受同源策略的限制

什么是垃圾回收机制？什么是内存泄漏？ ​

查看详情
  • JavaScript 是在创建变量的时候自动进行了内存的分配，并且在不使用他们的时候自动释放内存，释放的过程称为垃圾回收。
  • 由于某种原因导致某个变量不在被使用的时候他所占据的内存不能够释放，称为内存泄漏

浏览器的缓存 ​

查看详情
  • 缓存类型
    • 强制缓存（强缓存）：
      • Expires：HTTP响应头中的Expires字段指定资源的过期时间，是一个绝对时间点。在此时间之前，浏览器会直接使用缓存，不会发送请求到服务器。
      • Cache-Control：HTTP响应头中的Cache-Control字段提供了更灵活的缓存控制选项，比如max-age（相对时间）指定资源的最大存活时间，no-cache要求浏览器在使用缓存前必须与服务器进行验证，no-store表示资源不应被缓存。
    • 协商缓存：
      • Last-Modified / If-Modified-Since：Last-Modified是服务器响应头，表示资源的最后修改时间。浏览器在后续请求中通过If-Modified-Since头发送这个时间给服务器，服务器根据资源是否更新返回304 Not Modified状态码或新的资源。
      • ETag / If-None-Match：ETag是服务器生成的资源唯一标识符。浏览器在后续请求中通过If-None-Match头发送这个标识符，服务器根据资源是否匹配返回304 Not Modified状态码或新的资源。
  • 缓存策略
    • 优先使用强制缓存：浏览器首先检查资源是否符合强制缓存条件，如果是，则直接使用缓存，不发送请求到服务器。
    • 协商缓存：如果强制缓存失效，浏览器发送请求到服务器，并带上相应的验证头（If-Modified-Since或If-None-Match）。服务器根据资源的状态返回304 Not Modified或新的资源

XSS 和 CSRF 是什么？它们的区别, 原理是什么？如何防范？ ​

查看详情
  • XSS：即跨站脚本攻击。攻击者在网站注入恶意代码，通过恶意脚本对客户端网页进行篡改，从而在用户浏览网页时对用户浏览器进行控制或者获取用户隐私数据。
    • 反射型 XSS：攻击者诱导用户点击恶意链接，或者提交表单，或者进入恶意网站，注入脚本进入被攻击者的网站。
    • 存储型 XSS：攻击者把输入的恶意代码存储到服务器，当浏览器请求数据时，脚本从服务器返回给浏览者的页面执行。
    • DOM 型 XSS：攻击者通过恶意脚本修改页面的 DOM 结构，
  • XSS 防御：
    • 现在的主流浏览器内置了防范 XSS 的措施。而且框架本身也对 XSS 做了防范。但对于开发者也应该采用一些措施来防止 XSS 攻击，例如：对输入输出检查转译。
  • CSRF：跨站请求伪造。攻击者借助受害者的 Cookie 骗取服务器的信任，以受害者的名义伪造请求发送给受攻击的服务器
  • CSRF 防御：
    • 阻止第三方网站请求接口
    • 添加 token 验证：CSRF 攻击之所以能成功是因为用户验证信息都是存在于 Cookie 中，攻击者可以利用用户自己的 Cookie 来进行校验，然后伪造请求。
  • 区别：
    • 原理不同，CSRF 是利用网站 A 本身的漏洞，去请求网站 A 的 api；XSS 是向目标网站注入 JS 代码然后执行 JS 里的代码
    • CSRF 需要用户登录目标网站获取 cookie，而 XSS 不需要登录
    • CSRF 攻击的目标是用户，XSS 的目标是服务器

http request header 和 response header 中常见的字段有哪些？ ​

查看详情
  • request:
    • Accept: 能够接受的响应内容类型（Content-Types）
    • Content-Type: 请求体的类型 （用于 POST 和 PUT 请求中），例如：Content-Type: application/x-www-form-urlencoded
    • Host: 服务器的域名(用于虚拟主机 )，以及服务器所监听的传输控制协议端口号。如果所请求的端口是对应的服务的标准端口，则端口号可被省略。自超文件传输协议版本 1.1（HTTP/1.1）开始便是必需字段。
    • User-Agent: 浏览器的浏览器身份标识字符串
    • If-Modified-Since
    • If-None-Match
  • response:
    • Access-Control-Allow-Origin: 指定哪些网站可参与到跨来源资源共享过程中
    • Content-Type: 当前内容的 MIME 类型，例如：Content-Type: text/html; charset=utf-8
    • Expires
    • Cache-Control: 向从服务器直到客户端在内的所有缓存机制告知，它们是否可以缓存这个对象
    • ETag
    • Last-Modified
  • 通用
    • Pragma
    • Content-Type