【22届】【秋招】前端向复习指北（中）

进击的Oliver
601 阅读7分钟

https://pic1.zhimg.com/80/v2-cb0e4f8cfc2ba10cdb1ae881b005d1c7_720w.jpg?source=1940ef5c

网络篇

GET和POST区别

更多：juejin.cn/post/684490…

  1. get用来获取数据，post用来提交数据。
  2. get请求使用url传参而实体部分为空，post请求中实体部分为数据。
  3. get请求在URL中传送的参数是有长度限制的，而post没有。
  4. get请求会被缓存，post不会被缓存。
  5. 最重要的区别—幂等性：GET 请求是一个幂等的请求，一般 Get 请求用于对服务器资源不会产生影响的场景；而 Post 不是一个幂等的请求，一般用于对服务器资源会产生影响的情景。

HTTP状态码

1xx：进一步操作
  • 100：可以继续发送（POST请求会先发header后发body）
2xx 表示成功
  • 200：请求成功
  • 204：请求成功，但没有响应体。
    一般用在只是客户端向服务器发送信息，而服务器不用向客户端返回什么信息的情况
3xx 表示需要进一步操作
  • 301：永久重定向
  • 302：暂时重定向
  • 304：缓存命中
4xx 表示浏览器方面出错
  • 400：请求报文语法错误
  • 403：请求被服务器拒绝
  • 404：服务器找不到指定资源
5xx 表示服务器方面出错

  • 500：服务器错误

  • 503：服务器停机维护

HTTP版本

更多：mp.weixin.qq.com/s/GICbiyJpI…
多路复用相关：muyiy.cn/question/ne…

HTTP /0.9

  • 请求方法：GET
  • 不支持请求头 / 响应头
  • 仅能请求HTML格式文件

HTTP /1.0

  • 请求方法：GET POST HEAD
  • 支持请求头 / 响应头
  • 多种content-type（不仅限于html文件）
  • 支持长连接（默认短连接）：connection：keep-alive
  • 缓存（cache）：Expire，If-modified-since

HTTP /1.1

  • 请求方法：GET、POST、HEAD、OPTIONS、PUT、PATCH、DELETE、TRACE 、CONNECT
  • 默认开启长连接，以及请求的流水线处理。但存在队头阻塞问题：后面的请求等待前面请求的返回才能获得执行机会，一旦有某请求超时，后续请求只能被阻塞。
  • 新的缓存功能：
    • ETag，if-none-match：协商缓存
    • cache-control：强缓存
  • 新增状态码：410 - 服务器上的某个资源被永久删除。
  • Host域：解决了多个主机共享一个ip的问题。
  • 带宽优化：支持断点续传。

HTTP /2.0

  • 二进制分帧：更加方便且健壮。

  • 多路复用：

  • Header压缩：体积更小，加速传输。

  • 服务端推送：服务端推送能把客户端所需要的资源伴随着index.html一起发送到客户端，省去了客户端重复请求的步骤。

总结

  • http1.0 vs http1.1
    1. http1.0默认无连接，长连接需要使用keep-alive；http1.1默认开启长连接，但是存在队头阻塞问题。
    2. http1.0只支持 GET POST HEAD三种方法。http1.1新增了PUT OPTIONS DELETE TRACE等更加细分的方法。
    3. http1.0使用expire+if-modified-since关键字控制缓存；http1.1使用cache-control if-none-match控制缓存，更加可靠。
  • http1.1 vs http2.0
    1. http2.0采用二进制分帧，使得应用更加健壮
    2. http2.0使用压缩头部方法，更加高效
    3. http2.0采用服务端推送，将请求的html文件中引用的js、css文件一并发送，提高了效率。
    4. http2.0使用了多路复用的方式，解决了队头阻塞问题。

跨域

JSONP

  • 原理：浏览器同源策略允许 <script> 标签的跨域资源嵌套，<script> 不受同源策略限制。 比如：通常为了减轻web服务器的负载，我们把js、img、css等静态资源分离到另一台独立域名的服务器上，在html页面中再通过对应的标签 <script> 加载不同域下的资源。

  • 实现方法：前端设置好回调函数，并把回调函数当做请求url的参数；后端接受到请求后，返回回调函数名，传入所需的数据；在前端执行该函数。

http.createServer((req, res)=>{
  let urlObj = url.parse(req.url, true)
  if(urlObj.pathname === '/getWeather'){
    let data = {city:'杭州',weather:'晴天'}
    res.end(`${urlObj.query.callback}(${JSON.stringify(data)})`)
  }
}).listen(2020)

<script>
  function showData(data) {
    console.log(data) //
  }
</script>
<script src="http://127.0.0.1:2020/getWeather?callback=showData"></script>
  • 优点：兼容性好。
  • 缺点：只支持GET方式的HTTP请求。

CORS

  • 原理：发送Ajax请求时，浏览器发现该请求不符合同源策略，会给该请求加一个请求头：Origin。后台收到请求后，如果确定接受请求则在返回结果中加入一个响应头：Access-Control-Allow-Origin；浏览器判断该响应头中是否包含当前 Origin 的值，如果有则浏览器会处理响应，我们就可以拿到响应数据，如果没有浏览器则被XMLHTTPRequest的onerror捕获。

OPTIONS 方法在跨域请求中的作用 && 204状态码的应用场景

参考：blog.csdn.net/qizhiqq/art…

浏览器篇

浏览器的渲染原理

更多：juejin.cn/post/684490…

浏览器端的存储技术

浏览器常见的存储技术有 cookie、localStorage 和 sessionStorage。

cookies，sessionStorage 和 localStorage 的区别

  • 知识点

    SessionStorage， LocalStorage， Cookie 这三者都可以被用来在浏览器端存储数据，而且都是字符串类型的键值对。区别在于:

    • 前两者属于H5 webStorage，创建它们的目的便于客户端存储数据。
    • cookie 数据在同源（协议、主机、端口相同）http请求中强制携带，会在浏览器和服务器间双向传递。cookie是 为了标示用户身份而储存在用户本地终端上的数据（通常经过加密）

  • 回答：

    • cookie 由服务器设置，在客户端存储，然后每次发起同源请求时，发送给服务器端。cookie 最多能存储 4 k 数据，它的生存时间由 expires 属性指定，并且 cookie 只能被同源的页面访问共享。

    • sessionStorage 是 h5 提供的一种浏览器本地存储的方法，它借鉴了服务器端 session 的概念，代表的是一次会话中所保存的数据。它一般能够存储 5M 或者更大的数据，它在当前窗口关闭后就失效了，并且 sessionStorage 只能被同一个窗口的同源页面所访问共享。

    • localStorage 也是 h5 提供的一种浏览器本地存储的方法，它一般也能够存储 5M 或者更大的数据。它和 sessionStorage 不同的是，除非手动删除它，否则它不会失效，并且 localStorage 也只能被同源页面所访问共享。

事件机制

事件触发有三个阶段：

  • window 往事件触发处传播，遇到注册的捕获事件会触发
  • 传播到事件触发处时触发注册的事件
  • 从事件触发处往 window 传播，遇到注册的冒泡事件会触发

阻止冒泡：

event.stopPropagation()

事件委托

事件委托本质上是利用了浏览器事件冒泡的机制。

因为事件在冒泡过程中会上传到父节点，并且父节点可以通过事件对象获取到目标节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件，这种方式称为事件代理。

  • 优点：性能优化。

  • 实现：

     ul.addEventListener('click', function(e){
     if(e.target.tagName.toLowerCase() === 'li'){
         fn() // 执行某个函数
     }
 })

浏览器缓存机制

更多：github.com/xiangxingch…

强缓存

  • cache-control：绝对时间（2000s），优先级>expires
  • expires：日期（2020.7.1），可能被客户端修改

弱缓存

  • if-none-match：Etag（请求资源的本地Etag）

    策略：查看请求资源的本地 Etag 与服务端 Etag 是否一致

    • 若一致，则说明期间文件未更改，返回304；

    • 若不一致，则说明期间文件有更改，返回200和新文件；

  • last-modified / if-modified-since：日期（2008.1.1）

    策略：初次请求文件后，服务器返回 last-modified 代表文件上次的更改时间。下次客户端发送请求时，在 if-modified-since 字段填入 last-modified 的值，查看从指定日期之后是否有过更新：

    • 若有更新，则说明期间文件有更改，返回200和新文件；

    • 若未更新，则说明期间文件未更改，返回304；

完整缓存机制

查强缓存 => 查若缓存 => 请求新文件

经典面试题

从输入URL到展示页面，发生了什么？

这是一道没有标答的题目，想要及格不难，但想要答出满分答案是非常考研理解深度和广度的。
在这里推荐下我的博客嘻嘻：juejin.cn/post/691709…
相信看完你会有所收获

下期预告

怎么能少了JavaScript篇呢！
由于JS可写的内容过多，单独拆出一篇文字来讲，请继续关注哦~

avatar
文章
阅读
粉丝