一，本文分为两部分
- 普通项目优化
- vue项目优化
- 防止XSS与XSRF（安全性）
二，普通项目优化:
- 页面加载阶段
- 页面渲染阶段
一、 页面加载
- 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
- 使用day.js替代moment.js：day.js属于轻量的处理时间和日期的JavaScript库
二、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增加验证流程，比如输入密码，指纹，短信验证码，人脸识别等。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
