2022面试准备

149 阅读4分钟

1.性能优化

  • include 和 exclude 指定loader 的作用目录
  • 图片懒加载
  • 路由懒加载 多页面配置(entry)
  • websocket 代替轮询

2.http

缓存
若未过期(注:实际就是返回 304),则缓存才使用本地缓存副本。
请求再次发起 -> 浏览器根据 expires 和 cache-control 判断目标资源是否命中"强缓存" -> 若命中,直接从缓存获取资源,不再与服务器发生通讯。
协商缓存就是强制缓存失效后,浏览器携带缓存标识向服务器发起请求,由服务器根据缓存标识决定是否使用缓存的过程,主要有以下两种情况: 协商缓存生效,返回304 && 协商缓存失效,返回200和请求结果。 如图片资源这些,请求后刷新页面,返回304
加密
非对称加密有两个密钥,一个是公钥,另一个是私钥。一般来说,公钥用来加密,这时密文只能用私钥才能解开。服务端里有私钥可以解密。
服务端公钥A1=>K=>A1加密的K 出现这一问题的核心原因是客户端无法确认收到的公钥是不是真的是服务端发来的。为了解决这个问题,互联网引入了一个公信机构,这就是CA。
2.GET请求会被浏览器主动缓存,POST不会,要手动设置
3.GET请求参数会被完整保留在浏览器历史记录里,POST中的参数不会
4.GET请求在URL中传送的参数是有长度限制的,而POST没有限制
5.GET参数通过URL传递,POST放在Request body中
6.GET参数暴露在地址栏不安全,POST放在报文内部更安全

7.require 和 import

ES6 可以在编译时就完成模块加载,效率要比 CommonJS 模块的加载方式高。

CommonJs模块是运行时加载(只要没有缓存,那么require一次就执行一次),ES6模块是编译时输出接口,所以可以用来确定依赖关系。

  1. require 是在运行时调用,所以 require 理论上可以放在代码的任何地方
  2. import 是在编译时调用,所以必须放在文件开头 vue3通过 new Url()

8.webpack

  • loader 运行在打包文件之前 ,诸如编译、压缩等,最终一起打包到指定的文件中
  • plugins 在整个编译周期都起作用 打包优化、资源管理、环境变量 SourceMap 是一种映射关系,当项目运行后,如果出现错误,我们可以利用 SourceMap 反向定位到源码位置
    eval-cheap-source-map | 一般 | 快(cache) | 编译后 | 有(dataUrl) | | --------------------- | -- | -------- | --- | ----------

html-webpack-plugin 功能:把打包好的文件自动引入到入口文件 index.html 文件中

clean-webpack-plugin

功能:在每次打包时,先删除上次生成的文件

9.canvas

ctx.translate(150, 150); 平移
ctx.rotate 旋转



## 3.安全
xss 脚本注入 登陆后窃取信息,不用innerHtml  
csrf 请求伪造 诱导第三方网站 发送请求 用token
## 4.vue
observe 响应式处理  
compile 解析模板  
watch  沟通桥梁
dep  统一管理

## 5.vuex 插件
-   State:定义了应用状态的数据结构,可以在这里设置默认的初始状态。
-   Getter:允许组件从 Store 中获取数据,mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。
-   Mutation:是唯一更改 store 中状态的方法,且必须是同步函数。
-   Action:用于提交 mutation,而不是直接变更状态,可以包含任意异步操作。
-   Module:允许将单一的 Store 拆分为多个 store 且同时保存在单一的状态树中。

使用mixin beforeCreate 里 子组件从自身父组件中继承 $store 属性 ,都挂载一个 $store 对象 
异步操作只能在action 中执行,是为了防备追踪状态

## 6.路由模式
-   hash: 使用 URL hash 值来作路由。支持所有浏览器,包括不支持 HTML5 History Api 的浏览器;
-   history : 依赖 HTML5 History API 和服务器配置。具体可以查看 HTML5 History 模式;

/ 3.设置背景填充色和边框色
ctx.fillStyle = "rgba(0,0,0,0.4)";
ctx.strokeStyle = "rgba(0,153,255,0.4)";

ctx.restore() 方法用于将画布恢复到最近一次的保存状态
svg - <line> 创建一条直线。

  • <polyline> 创建折线。
  • <rect> 创建矩形。
  • circle 圆形
    SVG 允许我们定义以后需要重复使用的图形元素。 建议把所有需要再次使用的引用元素定义在defs元素里面。这样做可以增加 SVG 内容的易读性和可访问性。 在defs元素中定义的图形元素不会直接呈现
    use 克隆