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全栈工程师，我们下期再见！