前端项目优化（一）

一，本文分为两部分

• 普通项目优化
• vue项目优化
• 防止XSS与XSRF（安全性）

二，普通项目优化:

• 页面加载阶段
• 页面渲染阶段

1、 页面加载

1. dns预解析
2. 使用cdn
3. 静态资源的压缩与合并
4. 减小https请求
5. 异步加载defer，async
6. 服务端渲染ssr
7. 多使用内存和缓存

2、 页面渲染

1. css放前面，js放后面
2. 减小dom查询，屡次使用的保存为变量
3. 减小dom操做，统一经过dom片断操做
4. 事件函数的节流和防抖
5. 图片懒加载
6. 尽早进行操做，domcontentload与load

3、vue项目优化：

• 代码层面优化
• webpack层面优化
• web层面优化

1、代码层面优化

1. Object.freeze(data);对于一些查询类的页面，调取接口回来后的数据可不进行数据劫持
2. v-if和v-for不要在一块儿使用。v-if的条件经过函数来处理
3. v-for中加上key，对于虚拟dom树查找提升性能
4. computed和watch注意区分使用场景。前者是有缓存的。后者是监听到数据变化后的回调无缓存
5. created中发起请求，mounted钩子中表明页面dom加载完成能够进行dom操做。
6. 长列表性能优化，只渲染可视区域的列表
7. 长表格性能优化，经过canvers来绘制表格
8. 合理使用$nextTick去操做dom，适用于更新了数据立刻就要操做dom的场景
9. 操做dom不要使用js原生的方式来操做。用vue提供的三种方式来操做 好比，ref、自定义指令el、事件中的话用e.target获取dom
10. 尽可能不要在前端进行大量的数据处理
11. 合理使用keep-alive来缓存页面数据，跳过created,mounted钩子，他有本身特定的钩子activted等
12. 路由懒加载经过import配合箭头函数，还有其余的方式require
13. 组件懒加载，异步加载
14. 尽可能少用float，能够用flex布局
15. 频繁切换的使用v-show，不频繁的使用v-if
16. 不要在模板中写过多的样式
17. 服务端渲染ssr，优化seo，与首屏白屏问题。
18. 经过addEventListenr添加的事件，须要自行销毁
19. 把组件中的css提取成单独的文件
20. 少使用闭包与递归，递归可作尾递归的优化
21. 使用字体图标或者svg来代替传统的Png等格式的图片
22. 在Js中避免“嵌套循环”和“死循环”
23. 尽量的使用事件委托来处理事件的绑定，针对老项目jq

2、webpack层面优化

1. 去除无用代码treeShaking.
   
2. babel编译es6到es5的时候，会有多余代码产生
3. 减少app.js的体积，提取公共代码
4. 减小vendor.js的体积，经过按需引入第三方库，或者有些资源能够经过script标签引入
5. 代码切割，有一些组件不必都打包到一块儿。
6. 使用chunck
7. 使用SouceMap，来还原线上代码，更方便的去定位线上问题
8. 构建结果，经过可视化插件，进行分析
9. webpack对图片进行压缩等处理，
10. 图片可使用webp，优雅降级处理
11. 编译优化
12. 模板预编译，使用vue-template-loader，把模板编译成渲染函数。

3、web层面优化

1. 浏览器缓存的使用
2. 开启gzip压缩
3. CDN的使用，减小路由转发的次数，就近访问资源
4. 使用chrome的性能分析工具，查找性能瓶颈
5. dns预解析
6. 静态资源的压缩与合并
7. 减小https请求
8. 异步加载defer，async
9. 静态资源和服务不要放在同一台机器上。多个域名去并行加载解析

4、安全性

基本后端来作，防注入等

@两种

1. XSS跨站请求攻击，

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

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

@解决方案：

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

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