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

向右看齐 2022-12-11 05:26 128阅读 0赞

导语：  
你是否有过自己的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/

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

## 更多内容及面试题查看小程序 ##

![在这里插入图片描述][20200928181725844.jpg_pic_center]

[20200928181725844.jpg_pic_center]: /images/20221123/df9c199980824d56854c47a37c87709d.png