浏览器

输入一个URL到页面过程中发生了什么

  1. DNS解析，将url解析为网站的IP
  2. 建立TCP连接
  3. 发起HTTP请求
  4. 服务器返回请求结果
  5. 关闭TCP连接
  6. 客户端渲染页面

客户端渲染页面的过程是怎样的

  1. 解析服务器返回的内容
  2. 建立DOM树
  3. 构建CSS树
  4. 构建render树， 构建CSSOM树，将DOM和CSS进行结合
  5. 布局—layout：计算出节点在页面中的位置
  6. 绘制—Painting：绘制节点到页面上

回流和重绘的区别

回流Layout：当渲染树中元素的尺寸、位置发生变化时会重新构建，重建构建时会影响布局，这个过程就称为回流

重绘Painting：当渲染树中元素的颜色或其他属性变化时会重新构建，构建时不影响布局，这个过程就是重绘

区别：

  • 回流肯定会引起重绘，重绘一定不会引起回流
  • 回流会导致页面重新排列，会影响性能
  • 回流会影响性能，那么如何避免回流？
    不要修改元素的尺寸、位置这些会影响布局的属性，尽量使用transform

TCP 传输的三次握手、四次挥手策略

三次握手

  • 第一次握手：客户端 请求 服务端
  • 第二次握手：服务端 回复 客户端
  • 第三次握手：客户端 回复 服务端

四次挥手

  • 第一次挥手：客户端 请求 服务端
  • 第二次挥手：服务端 回复 客户端
  • 第三次挥手：服务端 回复 客户端
  • 第四次挥手：客户端 回复 服务端

http 和 https 的区别

  • http端口是80 htpps端口是443
  • http是超文本传输协议，是明文传输；https是SSL协议，是加密传输
  • http连接简单，是无状态的。https是http和ssl证书构建的加密传输，是安全的。

HTTP常见的状态码

200

  • 200 请求成功

300

  • 301 永久重定向
  • 302 临时重定向

400

  • 401 身份认证有问题
  • 403 服务端拒绝访问
  • 404 找不到页面

500

  • 500 服务器问题，服务器没开或者有错误

什么是跨域？

发送请求时，客户端和服务端不是同源策略，也就是协议、域名、端口号一致的情况就是跨域。

同源策略：协议、域名、端口号一致

如何解决跨域？

  1. Cors跨域，需要后端配置
    header(“Access-Control-Allow-Origin:*”); // 允许任何来源
header(“Access-Control-Allow-Origin:http://me.com”); //只允许来自域名http://me.com的请求
  2. 代理proxy
    • Vue: 在vue.config.js中devServer配置proxy
    • React: 使用http-proxy-middleware库配置跨域

浏览器本地存储

LocalStoreage****周期：永久，不删一直在。 位置：浏览器本地 存储大小： 5MB 共享：同源策略，不同浏览器窗口可以共享

**SessionStorage: **周期：临时，页面关闭不存在。 位置：浏览器本地 存储大小： 5MB 共享：同源策略，不同浏览器窗口不可以共享，即使同一个页面。

**Cookie: **周期：可以设置有效期，页面关闭不存在。 位置：可以和浏览器通信 存储大小： 4k 共享：同源策略窗口

防抖和节流的区别

  • 防抖：连续多次触发时，上一次没有执行完的时候，会清除上次执行的事件，执行本次新的事件
  • 节流：连续多次触发时，上一次没有执行完的时候，会清除本次执行的事件，执行上次的事件

防抖和节流的区别：防抖是无论执行多少次都执行最后一次，节流是n秒执行一次，减少执行次数。

浏览器缓存机制

首次访问页面的时候浏览器会讲页面缓存到本地，之后再次访问的时候会根据缓存策略决定使用缓存还是向服务器发送请求。

  • 浏览器的缓存策略有哪些
    • 强制缓存：强制使用缓存， 客户端通过Expires 、Cache-Control字段判断是否已过期，如果缓存未过期，直接使用缓存内容，如果已过期讲走协商缓存。
  • 协商缓存：当强制缓存失效后，会使用协商缓存。服务器通过Etag、Last-Modified字段判断是否过期，如果已过期，但文件未更新返回304，使用缓存; 如果文件已更新，返回请求的内容，状态200.