【前端优化 & Vue项目优化】 如何避免浏览器卡顿，实现性能优化cdn？

提示：前端查漏补缺，仅代表个人观点。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、前言

前端可主要从以下七种类别进行优化处理：

• 网络加载类
• 页面渲染类
• CSS优化类
• JavaScript执行类
• 缓存类
• 图片类
• 架构协议类

---

二、前端优化方法

1. 减少请求，压缩文件

通过构建工具(webpack、gulp等)尽可能合并静态资源图片、JavaScript或CSS代码为一个文件并进行压缩，减少http网络请求资源的次数和大小，以缩短页面首次访问的用户等待时间;

2. CSS和JavaScript管理

• 内联首屏关键CSS: 较大的css代码并不合适内联（初始拥塞窗口、没有缓存），而其余代码则采取外部引用方式
• 异步加载CSS
• 合理使用选择器:不要嵌套使用过多复杂选择器，最好不要三层以上;
• 将css文件放在head头部 这样页面可以优先下载css并完成渲染
• 避免使用