导语:
你是否有过自己的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,能够提高性能。
更多内容及面试题查看小程序
WX搜索 【MST题库】小程序查看