web前端性能优化，这几点让你的代码质量变高

导语：
你是否有过自己的api请求很慢，每次都要加载很久，首屏加载空白页面几秒钟，图片加载慢等等情况，这时候你就需要对自己的web项目进行优化。

1，减少HTTP请求次数，合理使用http缓存

减少http的主要办法是合并CSS、合并javascript、合并图片。只要http请求次数减少，web的性能就会较大的提升。

2，使用代码压缩

现在wepack等工具，都能够通过npm run built，将代码压缩成一个文件，极大的减少了web应用的大小，使得页面打开的速度变快，甚至提高50%。

3，使用浏览器缓存

使用浏览器缓存，将一些文件，CSS、javascript、logo、图标这些静态资源缓存着，用到的时候，直接从缓存里面拿。

4，CSS放在页面最上部，javascript放在页面最下面

因为JavaScript是单线程语言，而且跟页面渲染公用一个线程，JavaScript在执行的过程中，会阻塞，导致页面不能够渲染。所以我们要把css放在上面，先让页面渲染出来，在对JavaScript执行。

5，使用服务端渲染

服务端在返回 html 之前，在特定的区域，符号里用数据填充，就是执行了JavaScript这些代码，然后再给客户端，客户端只负责解析 HTML，不用再去执行JavaScript，就可以对页面渲染完成 。这种一般是对首屏进行处理，减少首屏事件。

6，减少DOM的操作

减少对dom的操作，尽量使用innerHTML，来改变页面的数据。

7，需要的时候在引入

const Recommend = () => import(/* webpackChunkName: "recommend" */ 'components/recommend/recommend')
const Singer = () => import(/* webpackChunkName:'singer' */ 'components/singer/singer')
const Rank = () => import(/* webpackChunkName:'rank' */ 'components/rank/rank')
const Search = () => import(/* webpackChunkName:'search' */ 'components/search/search')
const SingerDetail = () => import(/* webpackChunkName:'singer' */ 'components/singer-detail/singer-detail')
const Disc = () => import(/* webpackChunkName:'disc' */ 'components/disc/disc')
const TopList = () => import(/* webpackChunkName:'toplist' */ 'components/top-list/top-list')
const UserCenter = () => import(/* webpackChunkName:'user' */ 'components/user-center/user-center')

这样子写，就能够提高首屏速度，在需要的时候再import，能够提高性能。

补充：

微信搜索【web小馆】，回复全栈博客项目，即可获取项目源码和后续的实战文章教程。每天用最简单朴实的语言，潜移默化的提升你的计算机基础知识和前端技术。小米粥，一个专注的web全栈工程师，我们下期再见！