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

在这里插入图片描述
node后台

©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页