前端性能优化
- 网络优化
- 页面渲染优化
JS优化- 图片优化
webpack打包优化React优化Vue优化
二. h5新特性
新增选择器 document.querySelector、document.querySelectorAll
拖拽释放(Drag and drop) API
媒体播放的 video 和 audio
本地存储 localStorage 和 sessionStorage
离线应用 manifest
桌面通知 Notifications
语意化标签 article、footer、header、nav、section
增强表单控件 calendar、date、time、email、url、search
地理位置 Geolocation
多任务 webworker
全双工通信协议 websocket
历史管理 history
跨域资源共享(CORS) Access-Control-Allow-Origin
页面可见性改变事件 visibilitychange
跨窗口通信 PostMessage
Form Data 对象
绘画 canvas
es6新特性
let const
字符串、数组、对象的方法扩展
symbol、set、map新的数据类型和数据结构
proxy代理拦截
异步解决方案：promise、generate，async、await
class类
module模块
前端安全问题
CSRF攻击
如何防御CSRF攻击
1. 验证Token：浏览器请求服务器时，服务器返回一个token，每个请求都需要同时带上token和cookie才会被认为是合法请求
2. 验证Referer：通过验证请求头的Referer来验证来源站点，但请求头很容易伪造
3. 设置SameSite：设置cookie的SameSite，可以让cookie不随跨域请求发出，但浏览器兼容不一
XSS攻击
如何防御XSS攻击
1. 输入检查：对输入内容中的script，iframe等标签进行转义或者过滤
2. 设置httpOnly：很多XSS攻击目标都是窃取用户cookie伪造身份认证，设置此属性可防止JS获取cookie
3. 开启CSP，即开启白名单，可阻止白名单以外的资源加载和运行
首屏加载优化方案
Vue-Router路由懒加载（利用Webpack的代码切割）
使用CDN加速，将通用的库从vendor进行抽离
Nginx的gzip压缩
Vue异步组件
服务端渲染SSR
如果使用了一些UI库，采用按需加载
Webpack开启gzip压缩
如果首屏为登录页，可以做成多入口
图片懒加载减少占用网络带宽
页面使用骨架屏
利用好script标签的async和defer这两个属性。功能独立且不要求马上执行的js文件，可以加入async属性。
如果是优先级低且没有依赖的js，可以加入defer属性。
vue3 新特性，区别vue2
Performance：性能比vue2.x块1.2～2倍
Tree shaking support：支持按需编译，体积更小
Composition API：组合API，类似React Hooks
Custom Renderer API：暴露了自定义渲染API
Fragment，Teleport（Protal），Suspense：新增三个组件
Better TypeScript support：更好的支持ts
1 . 数据响应式 原理重新实现 ( ES6 的 proxy 替代了 ES5 的 Object.defineProperty) 解决了对象、数组更新后的检测, 大大优化了响应式监听的性能 原来检测对象属性的变化, 需要一个个对属性递归监听, proxy 可以直接对整个对象劫持
2 . 虚拟 DOM - 新算法 (更快 更小)
3 . 提供了 composition api, 可以更好的逻辑复用
4 . template 模板可以有多个根元素
5 . 源码用 typescript 重写, 有更好的 类型推导 (类型检测更为严格, 更稳定)
v-for key的作用
key属性可以避免数据混乱的情况出现 （如果元素中包含了有临时数据的元素，如果不用key就会产生数据混乱）
key是给每一个vnode的唯一id，也是diff的一种优化策略，可以根据key，更准确， 更快的找到对应的vnode节点
vue中列表循环需要加:key='唯一标识'，唯一标识尽量是id，目的是为了高效地更新虚拟DOM key主要用于dom diff算法，diff算法为同级比较，比较当前标签上的key还有他当前的标签名，如果key和标签名都一样时只移动，不会重新创建元素和删除元素
没有key地时候默认使用就地复用策略。如果数据的顺序被改变，vue不是移动DOM元素来匹配数据项的改变，而是简单复用原来位置的每个元素，在进行比较时发现标签一样值不一样时，就会复用之前的位置，将新值直接放到该位置，以此类推，最后多出一个就会把最后一个删除掉。
尽量不要使用索引值index作key值，一定要用唯一标识的值，如id等。因为若用数组索引index为key，当向数组中指定位置插入一个新元素后，因为这时候会重新更新index索引，对应着后面的虚拟DOM的key值全部更新了，这个时候还是会做不必要的更新，就像没有加key一样，因此index虽然能够解决key不冲突的问题，但是并不能解决复用的情况。如果是静态数据，用索引号index做key值是没有问题的。
没有的话可以拼接 new Date()
v-if与v-for为什么不建议一起使用
v-for的优先级比v-if的优先级高，所以如果嵌套使用的话，每次v-for都会执行一次v-if，造成重复计算的问题，会影响性能
浏览器输入url后发生了什么
- DNS解析
- 发起TCP连接
- 发送HTTP请求
- 服务器处理请求并返回HTTP报文
- 浏览器解析渲染页面
- 连接结束
Vite 和 Webpack 区别
Vite 优势
vite 开发服务器启动速度比 webpack 快 webpack 会先打包，然后启动开发服务器，请求服务器时直接给予打包结果。
vite 在启动开发服务器时不需要打包，也就意味着不需要分析模块的依赖、不需要编译，因此启动速度非常快。当浏览器请求某个模块时，再根据需要对模块内容进行编译。
这种按需动态编译的方式，极大的缩减了编译时间，项目越复杂、模块越多，vite的优势越明显。
由于现代浏览器本身就支持ES Module，会自动向依赖的Module发出请求。
vite充分利用这一点，将开发环境下的模块文件，就作为浏览器要执行的文件，而不是像webpack那样进行打包合并。
vite 热更新比 webpack 快 在 HMR 方面，当改动了一个模块后，vite仅需让浏览器重新请求该模块即可，不像webpack那样需要把该模块的相关依赖模块全部编译一次，效率更高。
vite 使用esbuild(Go 编写) 预构建依赖，比 webpack 的 nodejs，快 10-100 倍。
Vite 劣势
生态不及webpack，加载器、插件不够丰富 打包到生产环境时，vite使用传统的 rollup（也可以自己手动安装webpack来）进行打包 项目的开发浏览器要支持 ES Module，而且不能识别 CommonJS 语法
vuex 和 pinia
Pinia的优点
1. 更加轻量级：相比 Vuex，Pinia 更加轻量级，因为它不需要使用 Vuex 的一些复杂的概念，如模块和 getter。
2. 更加简单易用：Pinia 的 API 设计更加简单易用，因为它使用了 Vue.js 3 的新特性，如 Composition API。
3. 更加灵活：Pinia 提供了更加灵活的状态管理方式，因为它支持多个 store 实例，而 Vuex 只支持一个 store 实例。
Vuex 的优点
1. 更加成熟：Vuex 是一个比较成熟的状态管理库，它已经被广泛使用和测试。
2. 更加稳定：Vuex 的稳定性也比 Pinia 更高，因为它已经经过了多个版本的迭代和改进。
3. 更加强大：Vuex 提供了一些高级功能，如中间件和插件，使得它可以处理更加复杂的状态管理需求。
