前言
随着社会的发展，技术的更新，前端技术也越来越复杂，大项目当中所需插件也越来越多，迭代起来的功能也越来越多，从而导致项目越来越卡，打开越来越慢，所占的内存也越来越大。从而出现一大堆性能上的问题。为了更好的给用户体验，我们不得不花费大把时间去做性能优化。下面我们来一起看看web前端有那些性能可以优化的吧。
- 使用CDN
CDN的全称是Content Delivery Network，即内容分发网络。CDN是构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术。本质上CDN也是一种缓存，如果你的位置离某个CDN节点越近，那么网站响应的速度也就越快。
- 减少请求数与减少外部http协议
网页的加载时间受到http请求速度有关，如果网页挂载很多外部资源，也会受到外部资源的响应速度的影响，特别是一些资源链接在国外的，经过千山万水才把数据带回给你，从而导致网页加载缓慢。然后就是请求数，现在前端各种打包工具，除了可以混淆压缩代码以外，其实还有个很重要的作用就是文件的合并，合并的目的就是为了减少请求数。
- 使用预获取
预获取就是在请求之前获取必要的数据和资源。预获取主要有三大方式：链接预先获取、DNS预先获取、预先渲染。根据你想要使用的预先获取形式，你只需在网站中的链接属性上增加：rel=“prefetch”,rel=“dns-prefetch”，或者 rel=“prerender” 标记。
- 压缩代码
前面提到了合并，其实还有压缩。运用一些前端构建工具来进行压缩代码，压缩代码会将一些多余的空格，换行符等去掉，还会混淆代码，保护自己的代码并减少体积。由于合并混淆之后的代码是很难阅读的，也不好修改的，所有后期维护也变的繁琐起来，要编译源代码，还要再进行压缩混淆。不像之前直接改直接就能用。
- 优化图片
如果一张高清图好几兆是会影响网页的加载速度的，很多时候我们不需要那么清晰，尺寸也不需要那么大。如文章的一些缩略图，120120或8080等都可以。一般只要调整好尺寸，保证好画质就好。格式的话如果不需要半透明，就尽量用jpg。png格式透明效果也是需要消耗大小的。
- 请求方式
由于post请求不能在客户端做缓存，每次请求都要交给服务器处理，也会给服务器压力导致网页的加载问题，所以能用get请求的经量用get
- 代码的优化
没有用到的前端插件，最好都删掉，留着一个src链接只会添加网站的请求数。逻辑代码也要多观察，内存的占用以及加载的流程都要分析。比如：代码中的死循环。
- 服务器压缩
gzip服务器压缩也会减少文件体积，压缩率也是非常的高。最高好像能达到90%，也就是200kb的文件能压缩到20kb。也是非常实用，可提高网页加载速度。但由于服务器做压缩，所以服务器也会占用不少cpu,对服务器也是有损耗的。
- 异步加载
最后再补充一点就是异步加载，如果你的文件过大而且首页加载过程中也没用到这个文件，只有交互过程才用到，如点击按钮进行弹框。这时就可以选择异步加载。最后也可以选择一款好的开发工具guiplan,来可视化制作网页自动生成代码。这样以上出现的大部分问题都可避免掉，从而减少开发成本与维护成本节省时间。