项目优化

一，本文分为两部分
1.普通项目优化
2.vue项目优化
防止XSS与XSRF（安全性）
二，普通项目优化:
1.页面加载阶段
2.页面渲染阶段
一、 页面加载
dns预解析
使用cdn
静态资源的压缩与合并
减少https请求
异步加载defer，async
服务端渲染ssr
多使用内存和缓存
二、 页面渲染
css放前面，js放后面
减少dom查询，多次使用的保存为变量
减少dom操作，统一通过dom片段操作
事件函数的节流和防抖
图片懒加载
尽早进行操作， domcontentload与load
三、vue项目优化：
代码层面优化
webpack层面优化
web层面优化
一、代码层面优化
Object.freeze(data);对于一些查询类的页面，调取接口回来后的数据可以不进行数据劫持
v-if和v-for不要在一起使用。v-if的条件通过函数来处理
v-for中加上key，对于虚拟dom树查找提高性能
computed和watch注意区分使用场景。前者是有缓存的。后者是监听到数据变化后的回调无缓存
created中发起请求，mounted钩子中代表页面dom加载完成可以进行dom操作。
长列表性能优化，只渲染可视区域的列表
长表格性能优化，通过canvers来绘制表格
合理使用$nextTick去操作dom，适用于更新了数据马上就要操作dom的场景
操作dom不要使用js原生的方式来操作。用vue提供的三种方式来操作 比如，ref、自定义指令el、事件中的话用e.target获取dom
尽量不要在前端进行大量的数据处理
合理使用keep-alive来缓存页面数据，跳过created,mounted钩子，他有自己特定的钩子activted等
路由懒加载通过import配合箭头函数，还有其他的方式require
组件懒加载，异步加载
尽量少用float，可以用flex布局
频繁切换的使用v-show，不频繁的使用v-if
不要在模板中写过多的样式
服务端渲染ssr，优化seo，与首屏白屏问题。
通过addEventListenr添加的事件，需要自行销毁
把组件中的css提取成单独的文件
少使用闭包与递归，递归可做尾递归的优化
使用字体图标或者svg来代替传统的Png等格式的图片
在Js中避免“嵌套循环”和“死循环”
尽可能的使用事件委托来处理事件的绑定，针对老项目jq
二、webpack层面优化
去除无用代码treeShaking.
babel编译es6到es5的时候，会有多余代码产生
减小app.js的体积，提取公共代码
减少vendor.js的体积，通过按需引入第三方库，或者有些资源可以通过script标签引入
代码切割，有一些组件没必要都打包到一起。
使用chunck
使用SouceMap，来还原线上代码，更方便的去定位线上问题
构建结果，通过可视化插件，进行分析
webpack对图片进行压缩等处理，
图片可以使用webp，优雅降级处理
编译优化
模板预编译，使用vue-template-loader，把模板编译成渲染函数。
三、web层面优化
浏览器缓存的使用
开启gzip压缩
CDN的使用，减少路由转发的次数，就近访问资源
使用chrome的性能分析工具，查找性能瓶颈
dns预解析
静态资源的压缩与合并
减少https请求
异步加载defer，async
静态资源和服务不要放在同一台机器上。多个域名去并行加载解析
四、安全性
基本后端来做，防注入等

@两种

1. XSS跨站请求攻击，

输入时，插入一段脚本，来获取用户信息的cookie

2. XSRF跨站请求未伪造，比如支付请求成一个图片请求，当然现在都没有这种的

@解决方案：

1.XSS 前端替换关键字，建议后端也替换，如<>的替换，避免脚本的执行

2. XSRF增加验证流程，比如输入密码，指纹，短信验证码，人脸识别等