3.面试题

https://blog.csdn.net/weixin_56134381/article/details/116265274

4.对Vue的理解

  • Vue的基本命令
  • Vue-cli脚手架
  • Vue-router
  • Vuex
  • Vue-transition

5.讲述一下计算机网络的七层

应用层、表示层、会话层、传输层、网络层、数据链路层、物理层。

6.HTTPS是什么

HTTPS即加密的HTTP，HTTPS并不是一个新协议，而是HTTP+SSL（TLS）。原本HTTP先和TCP（假定传输层是TCP协议）直接通信，而加了SSL后，就变成HTTP先和SSL通信，再由SSL和TCP通信，相当于SSL被嵌在了HTTP和TCP之间

7.介绍几种常见的状态码2XX系列：代表请求已成功被服务器接收、理解、并接受。

  • 200状态码：表示请求已成功，请求所希望的响应头或数据体将随此响应返回
    • from memory cache / disk cache 都是直接读取客户端的缓存，无需再次请求服务器，一般在Apache或者Nginx里面配置，以Nginx为例
      • location ~ ..(gif|jpg|jpeg|png|bmp|swf)${expires 30d;}location ~ ..(js|css)?${expires 12h;}
      • memorty cache是从内存中读取缓存，浏览器关闭则会消失
      • disk cache 是缓存在硬盘上，浏览器关闭后仍然存在
    • 禁止 200 ok(from disk cache)的方法是 在ajax请求上带上参数cache:false

201状态码：表示请求成功并且服务器创建了新的资源，且其 URI 已经随Location 头信息返回。 3XX系列：代表需要客户端采取进一步的操作才能完成请求，这些状态码用来重定向，后续的请求地址（重定向目标）在本次响应的 Location 域中指明。 301状态码：被请求的资源已永久移动到新位置。服务器返回此响应（对 GET 或 HEAD 请求的响应）时，会自动将请求者转到新位置。 302状态码：请求的资源临时从不同的URI响应请求，但请求者应继续使用原有位置来进行以后的请求。

  • 304状态码：自从上次请求后，请求的网页未修改过。服务器返回此响应时，不会返回网页内容。
    • 304 Not Modify 不会从服务器端获取数据，而是直接使用第一次200 ok时获得的数据

4XX系列：表示请求错误。代表了客户端看起来可能发生了错误，妨碍了服务器的处理。 401状态码：请求要求身份验证。 对于需要登录的网页，服务器可能返回此响应。 403状态码：服务器已经理解请求，但是拒绝执行它。与401响应不同的是，身份验证并不能提供任何帮助，而且这个请求也不应该被重复提交。 404状态码：请求失败，请求所希望得到的资源未被在服务器上发现。 5xx系列：代表了服务器在处理请求的过程中有错误或者异常状态发生，也有可能是服务器意识到以当前的软硬件资源无法完成对请求的处理。 500状态码：服务器遇到了一个未曾预料的状况，导致了它无法完成对请求的处理。 503状态码：由于临时的服务器维护或者过载，服务器当前无法处理请求。

8.hash和history模式的区别

  • 语法结构不同，hash#不会重新请求资源
  • 部署方式不同(history部署需要添加try_files)
  • SEO hash不友好。
  • 路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面
  • history模式跳转，利用的是history.pushState/replaceState/back/forward/go
  • hash模式跳转，利用的是window.location.hash

9.Vue dev模式下为什么不需要配置history fallback

webpack-dev-server中配置了historyApiFallback，通过rewrites属性设定了fallback到index.html的逻辑

10.我们没有定义router-link和router-view，为什么代码里能直接使用

app.use(router)时调用vue-router插件，会判断router这个对象是否有install方法，然后其中主要做了三件事

  • 定义 router-view和router-link组件
  • 在vue实例上挂载了$router和$route属性
  • 通过provide特性向组件透传了currentRoutes等属性

11.vue-router如何实现路由匹配

  • createRouter时通过createRouterMatcher生成Matcher对象，确定了每个路由对应的正则表达式
  • 路由跳转时会调用push方法，该方法会调用一个resolve方法，该方法中会将当前页面路由和正则表达式进行匹配，并获得匹配到的路由。

12. vue-router如何实现组件动态渲染

  • 通过 inject获取currentRoute
  • 通过currentRoute中的Matcher获取需要渲染的组件
  • 通过Vue3的h方法动态渲染组件

13.浏览器对象BOM都有哪些

  • window
  • History
  • Navigator\Screen
  • Cookie
  • XMLHttpRequest
  • Storage
  • Location
  • ArrayBuffer
  • Blob
  • File
  • FormData

14.前端优化相关

  • 路由懒加载
  • 路由模式改为history模式
  • 图片大小优化
  • css/js/图片放到一个请求中

17.Proxy 和Object.defineProperty的区别

Proxy: 拦截器，可以拦截对象上的一个操作，通过new方式创建，第一个参数为被拦截对象，第二个参数是对象操作的描述。 Object.defineProperty只能监听到属性的读写，而Proxy还可以监听属性的删除、方法的调用等。

18. Reflect

  • Reflect内部封装了一系列对象的底层操作，一共13个。
  • Reflect的静态方法和Proxy描述中的方法完全一致，也就是说Reflect成员方法就是Proxy处理对象的默认实现。
  • Reflect最大的用途是提供了一套操作Object的API，判断一个对象是否存在一个属性可以用in，但是！不够优雅，可以使用Reflect.has(obj,name)，删除一个属性可以使用delete，还可以使用Reflect.deleteProperty(obj,name)，获取所有属性可以使用Object.keys,也可以使用Reflect.ownKeys(obj),我们更推荐使用Reflect来操作对象，因为他是未来。