您当前的位置:首页 > 电脑百科 > 站长技术 > 网站

一文解答web性能优化

时间:2022-07-30 10:49:01  来源:  作者:程序那点事

前言

无论是前端还是后端,性能优化其实是每一个开发都无法避开的大山。另一方面,这种开放式的提问深受面试官的青睐,能够快速地区分求职者的水平。

网上的答案层出不穷,似乎都只是简单罗列了几个具体的方案,却没有系统的归纳。为了能够系统地归纳这个问题,我问了几个前端大佬,反复斟酌了一下他们的答案。

总的来说,我认为web性能优化的方向可以归纳为两个:1、优化资源加载的时间;2、优化代码层级的性能。

资源加载优化

我们都知道在浏览器打开一个页面的时候,需要加载各种不同的静态资源,这个时候如果加载的时间太长,就会给用户带来极差的冲浪体验。

既然要提高资源加载的效率,那解决的方案自然就是优化资源体积、减少对资源的请求数和提高响应速度。

1、优化资源体积

1)压缩

我们可以通过webpack的插件压缩代码文件大小,比如cssMinimizerWebpackPlugin、
htmlMinimizerWebpackPlugin等。

图片也可以通过降低图片质量、iconfont图标取代图片图标和采用更小体积的文件格式来达到减小体积的目标。

另外,服务配置中开启Gzip,压缩传输时的资源大小。

2)按需引入

除了压缩文件,还可以通过webpack地Tree shaking,按需引入代码,也能够有效地减少代码包的大小。

方法肯定不止上面这些,这里就不一一列举。

2、减少请求频率

1)合并CSS、JS文件,减少连接数。

2)合理地使用缓存,有些资源更新的频率比较低,可以通过缓存有效缓解请求压力。

3)使用懒加载,避免一次性加载所有的资源。

3、提高请求效率

1)使用CDN(内容分发网络)

简单来说就是在多个地方部署服务器,让用户从最近的服务器获取资源。

2)使用HTTP2。

相较于HTTP1,HTTP2的解析速度更快,多路复用的特性使得它仅仅用一个TCP连接就可以传输所有的数据,使得请求的效率大大提升。

代码层级的优化

代码层级的优化,也可以叫做运行时性能优化,这更多的是在我们写代码时要注意的点。

1)尽量规避不必要的重排和重绘

因为JS引擎线程和GUI渲染线程两者只能有一个在工作,所以重排和重绘是极其消耗性能的,所以尽可能地要避免这两个操作。

常见的例子就是Vue和React的虚拟dom。

还有个比较容易忽略的场景,就是当父组件更新时,子组件也会跟着更新,这样就导致了多余的渲染,在React中,useMemo和useCallback搭配使用,能有效解决该问题。

2)防抖和节流

这就很基本了,举个例子吧,比如一般搜索框都会有模糊搜索的功能,大量的change事件会导致超高频率的http请求。

方法肯定还有很多,我一时也想不起来了。毕竟能力和见识都还很有限,大家可以在评论区补充一下。

写在最后

突然想着这样去归纳,是因为觉得每次被问起这个问题的时候,脑子里都是一片浑浊,想到什么说什么。但是分成两个方向去思考后,觉得清晰了不少,相信这么说也能够令面试官信服。

来源:
https://mdnice.com/writing/f85f1c66998e4bb8b59b493cc8864f29



Tags:web性能   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
前言无论是前端还是后端,性能优化其实是每一个开发都无法避开的大山。另一方面,这种开放式的提问深受面试官的青睐,能够快速地区分求职者的水平。网上的答案层出不穷,似乎都只是...【详细内容】
2022-07-30  Tags: web性能  点击:(0)  评论:(0)  加入收藏
每个前端网站都有可能引入很多的图片来达到酷炫或者展示的效果,有人会问?为什么非要用图片,因为有些技术上达不到的效果展示,只能用图片来代替,比如淘宝天猫京东这些商城的酷炫的...【详细内容】
2019-12-12  Tags: web性能  点击:(156)  评论:(0)  加入收藏
▌简易百科推荐
前言无论是前端还是后端,性能优化其实是每一个开发都无法避开的大山。另一方面,这种开放式的提问深受面试官的青睐,能够快速地区分求职者的水平。网上的答案层出不穷,似乎都只是...【详细内容】
2022-07-30  程序那点事    Tags:web性能   点击:(0)  评论:(0)  加入收藏
遇到网页加载慢,selenium运行效率降低,可以通过修改页面加载策略提升自动化效率。selenium加载很慢通过URL导航到新页面时,默认情况下,Selenium将等待文档完全被加载才会执行下...【详细内容】
2022-07-30  VT漫步    Tags:Selenium   点击:(0)  评论:(0)  加入收藏
网站加密证书一般指网站HTTPS加密证书,HTTPS加密证书的作用是加密网站客户端到服务器端的传输数据,如用户名密码等,保障他们的安全,避免被黑客窃取和篡改,所以支付网站,银行网站,电...【详细内容】
2022-07-26  云端修行    Tags:HTTPS   点击:(8)  评论:(0)  加入收藏
在很多阿里双11高并发场景经常提到QPS、TPS、RT、吞吐量等指标,这些高并发高性能指标都是什么含义?如何来计算?下面我一一详解@mikechen系统吞度量 系统吞吐量指的是系统在单...【详细内容】
2022-07-24  mikechen的互联网架构    Tags:QPS   点击:(12)  评论:(0)  加入收藏
随着网络的普及,大多数人都是喜欢在手机端搜索他们想要的东西,但手机端也有弊端,比如更新速度快,架构规划、设计表现形式、及交互体验甚至是阅读体验等都无法满足访客日益增长的...【详细内容】
2022-07-22  百仑科技    Tags:手机站   点击:(15)  评论:(0)  加入收藏
拿到的证书分两个文件,一个是xxx.crt,一个是xxx.key,分别对应公钥和私钥。 1.假设我们的nginx安装目录是:/etc/nginx/,在目录下创建一个新目录,姑且命名为cert,把两个证书文件扔到...【详细内容】
2022-07-22  马克-1949    Tags:https域名   点击:(14)  评论:(0)  加入收藏
1、用户需求客户的WEB网站后台目前只有一台服务器存在单点的问题,但暂时没有打算要做成冗余的方式。在与应用开发团沟通的过程中,应用开发提到如果网站宕机,不想让用户看到该页...【详细内容】
2022-07-20  超级作家小新    Tags:提示页面   点击:(12)  评论:(0)  加入收藏
 在外贸建站时,很多企业网站不知道该如何如何评判,也不知道该如何做一个好的外贸网站。下面云程网络就来为大家具体介绍一下,外贸网站搭建时不可忽略的四点问题。 一、对谷歌...【详细内容】
2022-07-20  云程网络    Tags:海外建站   点击:(10)  评论:(0)  加入收藏
场景:在许多跨国业务中,我们可能会遇到这样一种需求, 不同国家需要使用不同的域名进行访问,而如果不是访问的对应国别域名。会强制跳转到指定后缀的域名下,例如,美国用户访问主域...【详细内容】
2022-07-19  blueic1115    Tags:geoIP模块   点击:(13)  评论:(0)  加入收藏
添加新页面可以为您的网站带来新的流量和访问者,并且当它们在搜索结果中排名良好时,它们最有效地实现了这一目标。但是,为了让您的内容出现在搜索结果中,需要对其进行索引。这意...【详细内容】
2022-07-19  听石头讲谷歌    Tags:外贸独立站   点击:(14)  评论:(0)  加入收藏
站内最新
站内热门
站内头条