【学员分享】谈谈校招那些事儿

  文章来源：川农谭同学

  前言：由于大家的技术掌握情况和技术栈的不同，所以我接下来分享的东西大部分是基础性的内容，现在前后端分离方案，我们更经常与网络打交道，所以接下来重点谈下HTTP小部分基础内容，包括校招需要注意的事项：

  1. Node 服务

  2. 前端基础框架

  3. 前后端协同方案

  4. 构建部署，doker,jenkins

  5. WEB安全

  6. 前端工程化:CommonJS,Webpack

  7. 浏览器：跨域和原理（浏览器解析）

  8. 数据可视化

  9. HTTP

  Post和Get的区别

  在技术上说：

  Get 请求能缓存，Post 不能

  Post 相对 Get 安全一点点，因为Get 请求都包含在 URL 里，且会被浏览器保存历史纪录，Post 不会，但是在非HTTPS协议下抓包的情况下都是一样的。

  Post 可以通过 request body来传输比 Get 更多的数据，Get 没有这个技术

  URL有长度限制，会影响 Get 请求，但是这个长度限制是浏览器规定的，不是 RFC 规定的

  Post 支持更多的编码类型且不对数据类型限制

  常见状态码

  2XX 成功

  3XX 重定向

  4XX 客户端错误

  5XX 服务器错误

  浏览器缓存

  浏览器缓存，也就是客户端缓存

  浏览器缓存分为强缓存和协商缓存：

  1）浏览器在加载资源时，先根据这个资源的一些http header判断它是否命中强缓存，强缓存如果命中，浏览器直接从自己的缓存中读取资源，不会发请求到服务器。比如某个css文件，如果浏览器在加载它所在的网页时，这个css文件的缓存配置命中了强缓存，浏览器就直接从缓存中加载这个css，连请求都不会发送到网页所在服务器；

  2）当强缓存没有命中的时候，浏览器一定会发送一个请求到服务器，通过服务器端依据资源的另外一些http header验证这个资源是否命中协商缓存，如果协商缓存命中，服务器会将这个请求返回，但是不会返回这个资源的数据，而是告诉客户端可以直接从缓存中加载这个资源，于是浏览器就又会从自己的缓存中去加载这个资源；

  3）强缓存与协商缓存的共同点是：如果命中，都是从客户端缓存中加载资源，而不是从服务器加载资源数据；区别是：强缓存不发请求到服务器，协商缓存会发请求到服务器。

  4）当协商缓存也没有命中的时候，浏览器直接从服务器加载资源数据。

  注意：第一次请求时没有缓存，所以浏览器缓存主要针对的是第一次之后的请求。

  第一次请求：

      后续请求：

       2.强缓存的原理

  当浏览器对某个资源的请求命中了强缓存时，返回的http状态为200，在chrome的开发者工具的network里面size会显示为from cache，比如京东的首页里就有很多静态资源配置了强缓存，用chrome打开几次，再用f12查看network，可以看到有不少请求就是从缓存中加载的：

  强缓存是前端性能优化最有力的工具之一，对于有大量静态资源的网页，一定要利用强缓存，提高响应速度。通常的做法是，为这些静态资源全部配置一个超时时间超长的Expires或Cache-Control，这样用户在访问网页时，只会在第一次加载时从服务器请求静态资源，其它时候只要缓存没有失效并且用户没有强制刷新的条件下都会从自己的缓存中加载，比如前面提到过的京东首页缓存的资源，它的缓存过期时间都设置到了2026年：

  强缓存还有一点需要注意的是，通常都是针对静态资源使用，动态资源需要慎用

  所以有些小伙伴在开发WEB应用时，自己明明修改了代码，却发现没生效，这种情况很可能是因为缓存的原因，此时可以Ctrl+F5强制刷新

  协商缓存的原理

  当浏览器对某个资源的请求没有命中强缓存，就会发一个请求到服务器，验证协商缓存是否命中，如果协商缓存命中，请求响应返回的http状态为304并且会显示一个Not Modified的字符串，比如你打开京东的首页，按f12打开开发者工具，再按f5刷新页面，查看network，可以看到有不少请求就是命中了协商缓存的：

  关于缓存的东西还有很多，这里就不一一赘述，跟上面一样，有兴趣自行搜索（强烈建议下来一点要认真理解）

  前端路由：

  后端有后端路由，根据路由返回特定的网页，代表者是传统的mvc模式，模板引擎+node。前端也有前端的路由，我们用三大框架做SSR的时候，总是和路由离不开关系。主要有两种方法：基于哈希路由、基于history

  1.哈希路由

  #后面的内容是网页位置标识符，一般是锚点或id属性