网页加载慢的要素 (网页加载慢的解决方法)

本文目录导航：

• 网页加载慢的要素？
• 为什么手机美团太卡
• 教你如何权衡一个网页的性能

网页加载慢的要素？

1. 阅读器关上网页不时加载的要素在咱们平时经常使用阅读器阅读网页时，有时会遇到网页加载过慢的状况，甚至有时会出现不时加载不进去的状况。

这种状况下，咱们须要了解一下网页加载的要素和或许存在的疑问。

首先，网页加载缓慢或许不时加载的疑问，可以有很多要素，例如：网络衔接不畅或许断网了；网页消息量大，须要较长的加载时期；设施性能低，不可极速加载网页；网页存在疑问或许代码有误；阅读器缓存或许插件疑问等等。

2. 如何处置阅读器关上网页不时加载的疑问为了处置阅读器关上网页不时加载的疑问，咱们须要依据疑问的要素启动有针对性的处置。

假设是网络衔接的疑问，咱们可以审核网络衔接能否疏通，或许尝试从新衔接网络；假设是设施性能的疑问，咱们可以更新设施配件或许装置愈加轻量级的阅读器；假设是网页代码的疑问，咱们可以尝试咨询网页设计者或许网站治理员处置疑问。

此外，咱们还可以尝试启动以下操作：肃清阅读器缓存；禁用局部不用要的插件或许裁减；更新阅读器或许改换不同的阅读器；经常使用愈加安保、轻量级的阅读器外壳等等。

3. 如何放慢网页加载速度除了处置阅读器关上网页不时加载的疑问外，咱们还可以尝试优化网页加载速度，提高阅读体验。

以下是一些放慢网页加载速度的方法：经常使用内容散发网络（CDN）；减小图像、CSS、JavaScript 文件的大小；经常使用提前加载和懒加载技术；优化网页代码和数据库性能；开启阅读器缓存等等。

4. 经常使用阅读器内置工具优化网页加载速度咱们还可以应用阅读器内置的开发者工具来监测和优化网页加载速度。

例如，Google Chrome 阅读器的开发者工具中，有一个 Network（网络）面板，可以用来监测加载的资源，包括文件大小、加载时期等等。

此外，开发者工具中还有一些其余有用的性能，例如：检查、编辑 CSS 和 JavaScript 代码；剖析网页性能；审核页面元素的规划和属性等等。

5. 论断在咱们平时经常使用阅读器阅读网页时，会遇到网页加载缓慢或许不时加载的疑问，或许会影响咱们的阅读体验。

为了处置这个疑问，咱们须要了解疑问的要素，并依据要素启动有针对性的处置。

此外，咱们还可以尝试启动优化，例如放慢网页加载速度、经常使用阅读器内置工具等等。

经过这些操作，咱们可以提高阅读体验，愈加有效地阅读网页。

为什么手机美团太卡

手机美团运转卡顿的要素有多种。

一、手机美团运转卡顿的要素

1. 网络疑问：手机美团运转卡顿或许是由于网络衔接不佳。

尤其是在网络信号不稳固或许数据传输速度较慢的地域，经常使用美团时会出现加载缓慢、页面卡顿等疑问。

2. 运行优化疑问：手机美团作为一款罕用的运行软件，假设其外部代码或程序存在优化疑问，也或许造成运转卡顿。

这或许是由于软件更新不齐全或许存在某些bug造成的。

3. 手机性能疑问：手机自身的性能也会影响美团的运转速度。

假设手机性能较低，或许同时运转多个运行，造成内存和处置器资源弛缓，那么美团就或许出现卡顿现象。

4. 主机负载疑问：在高峰期，如外卖点餐、电影购票等少量用户同时操作的状况下，美团的主机或许会接受较大负载，进而造成照应缓慢或卡顿。

二、详细解释

1. 网络疑问的详细体现：在网络信号不稳固的状况下，用户在经常使用手机美团时或许会遇到图片加载缓慢、页面跳转卡顿等疑问。

此外，假设经常使用Wi-Fi或移动数据网络的速度自身较慢，也会影响美团的流利运转。

2. 运行优化的影响要素：美团作为一款大型的运行软件，其外部代码和程序的优化状况会间接影响用户的经常使用体验。

假设软件更新不齐全或许存在bug，或许造成程序运转不流利，体现为页面卡顿、照应缓慢等。

3. 手机性能与资源调配：手机自身的性能和性能也是影响美团运转速度的关键要素。

假设手机内存无余、处置器性能较低，或许同时运转多个运行造成资源调配弛缓，那么美团的运转就会遭到影响。

4. 主机负载的思考：特别是在一些高峰时段，少量用户同时操作美团，主机的负载会清楚参与。

假设主机负载过大，或许造成照应速度降低，甚至出现持久的卡顿现象。

为了改善手机美团的运转卡顿疑问，倡导优化手机网络环境、更新运行软件、优化手机性能或选用在非高峰时段经常使用美团。

教你如何权衡一个网页的性能

    领有一个良好用户体验的网页关于前端开发同窗来说是一件必定做，继续做的一件事情，其中首屏的渲染尤为关键，由于用户与网页发生的交互就是从首屏开局的。

接上去将引见网页性能的几个目的以及如何计算和度量这些目的，经过监控和优化这些性能数据来继续优化网页，以提高用户体验。

NavigationTimingAPI：

    咱们先来看一组API，NavigationTimingAPI提供了用来权衡一个网站性能的数据目的。

相比于咱们传统的基础手腕经常使用这组API可以失掉更有用、更准确的数据还可以做更多的数据统计。

NavigationTimingAPI的兼容性也是相当的不错，兼容咱们如今罕用的阅读器，包括让人厌恶的IE9+。

完整的兼容性表见链接：

资源加载环节：

当咱们的一个资源动员访问（navigationStart）后到资源成功加载（loadEventEnd）教训如下环节：

①首先就是当资源须要重定向的时刻会进入redirect阶段，不须要重定向将会跳过这个阶段；

②接着就会审核资源能否有HTTP缓存的存在，当资源没有缓存的状况下回进入下一步；

③DNS寻址的环节；

④TPC协定握手建设通讯；

⑤动员恳求；

⑥照应资源；

⑦对照应的内容启动处置，如：对DOM资源加载并解析；

⑧最后一步成功资源加载。

上方这张图将是对这个环节的规范形容，也是一道前端经典面试题的规范答案，你懂得~

    上图是W3C第一版的NavigationTiming的处置模型(Level1)，从以后阅读器窗口卸载旧页面到加载成功新页面，整个环节一共分为9个阶段：

揭示卸载旧文档

重定向/卸载

运行缓存

DNS解析

TCP握手

HTTP恳求处置

HTTP照应处置

DOM处置

文档装载成功

    Level1的规范从2012年底进入候选倡导阶段经常使用已将近10年之久，也算成功了其历史使命，往年的3月20(2022年3月10日)正式进入Level2的规范(WorkingDraft?)，Level2相比拟Level1精度更高。

Level2处置模型如下：

Level2将整个环节划分为了11个阶段，各阶段目的明细：

序号目的解释1navigationStart表示从上一个文档卸载完结时的unix时期戳，假设没有上一个文档，这个值将和fetchStart相等。2unloadEventStart表示前一个网页（与以后页面同域）unload的时期戳，假设无前一个网页unload或许前一个网页与以后页面不同域，则值为0。3unloadEventEnd前往前一个页面unload时期绑定的回掉函数口头终了的时期戳。4redirectStart第一个HTTP重定向出现时的时期。有跳转且是同域名内的重定向才算，否则值为0。5redirectEnd最后一个HTTP重定向成功时的时期。有跳转且是同域名外部的重定向才算，否则值为0。6fetchStart阅读器预备好经常使用HTTP恳求抓取文档的时期，这出当初审核本地缓存之前。7domainLookupStartdomainLookupEndDNS域名查问开局/完结的时期，假设经常使用了本地缓存（即无DNS查问)或耐久衔接，则与fetchStart值相等。8connectStartHTTP(TCP)开局/从新建设衔接的时期，假设是耐久衔接，则与fetchStart值相等9connectEndHTTP(TCP)成功建设衔接的时期（成功握手），假设是耐久接，则与fetchStart值相等。10secureConnectionStartHTTPS衔接开局的时期，假设不是安保衔接，则值为0。11requestStartHTTP恳求读取实在文档开局的时期（成功建设衔接），包括从本地读取缓存。12responseStartHTTP开局接纳照应的时期（失掉到第一个字节），包括从本地读取缓存。13responseEndHTTP照应所有接纳成功的时期（失掉到最后一个字节），包括本地读取缓存。14domLoading开局解析渲染DOM树的时期，此时变为loading,并将抛出readystatechange关系事情。15domlnteractive成功解析DOM树的时期，变为interactive,并将抛出readystatechange关系事情，留意只是DOM树解析成功，这时刻并没有开局加载网页内的资源。16domContentLoadedEventStartDOM解析成功后，网页内资源加载开局的时期，在DOMContentLoaded事情抛出前出现。17domContentLoadedEventEndDOM解析成功后，网页内资源加载成功的时期（如JS脚本加载口头终了)18domCompleteDOM树解析成功，且资源也预备就绪的时期，变为complete,并将抛出readystatechange关系事情。19loadEventStartload事情发送给文档，也即load回调函数开局口头的时期。20loadEventEndload事情的回调函数口头终了的时期。计算页面加载的总时长：

    NavigationTimingAPI为window下挂的Performance对象参与了timing和navigation属性，经过可以失掉PerformanceTiming接口，咱们可以经常使用接口外面提供的loadEventEnd减去navigationStart失掉页面加载总的时长。

<!DOCTYPE?html><html?lang=en>??<head>????<meta?charset=UTF-8?/>????<title>页面性能</title>??</head>??<body>????<script>??????//?书签允许的?js?脚本格局：javascript:<code>??????javascript:?(()?=>?{????????const?perfData?=?;????????const?pageLoadTime?=??-?;????????(页面加载耗时：,?pageLoadTime,?ms);??????})();????</script>??</body></html>

&ensp;&ensp;&ensp;&ensp;当你在自己的电脑中运转这段代码的时刻会发现，输入的耗时居然是正数，那是由于本地服务的访问速度是很快了，所以整个页面的加载时期简直为0，咱们可以将外面的JavaScript脚本保留到你的阅读器书签，在随意找一个网站期待加载成功后点击这个书签就可以在控制台输入反常的页面加载的完整时期了。

&ensp;&ensp;&ensp;&ensp;下图就是咱们经过上述脚本失掉到的页面耗时在6789毫秒，那么这个数据能否正确呢？其实阅读器的开发者工具也为咱们统计了这个数据，可以接着看上方的第二张图的右下角。

&ensp;&ensp;&ensp;&ensp;依据前面的资源加载的流程图咱们就可以失掉到恣意一段无心义的时期，比如：资源恳求的耗时咱们就可以经常使用responseEnd减去requestStart失掉，DOM加载的整个时期可以经常使用domComplete减去domLoading失掉等。

如何失掉更准确的数据：

&ensp;&ensp;&ensp;&ensp;前面咱们经常使用的API所提供的数据经过检查均是毫秒级别的，也看失掉API均被标注的弃用的标识。

那么更高精度的数据咱们就须要经常使用一个新的API来失掉，最终失掉一个PerformanceNavigationTiming对象，这个对象提供了纳秒级别的数据统计，咱们一同来口头上方的代码。

<script>???=?function?()?{????//?PerformanceEntryList????const?entries?=?();????(entries);??};</script>

&ensp;&ensp;&ensp;&ensp;咱们运转上述代码将在控制台失掉上方的数组，其中数组的第一项的type为navigate，这表示咱们是经过在阅读器的地址栏输入URL关上的页面，也可以是经过点击链接、表单提交、脚本初始化，但不包括刷新页面，回退等，type的更多形容见mdn。

&ensp;&ensp;&ensp;&ensp;上图中的name属性在这里也须要说明一下，可以看到数据第一项的name表示这次资源恳求的地址，其余的两个是不凡的标识，其内容取决于PerformanceEntry对象的subtype和，所以特别摘录了mdn上的属性表格，

ValueSubtypeEntryType形容URLPerformanceNavigationTimingframe,navigation文档的地址URLPerformanceNavigationTimingresource恳求资源所解析的URLDOMStringPerformanceMarkmark口头()创立标志时经常使用的称号DOMStringPerformanceMeasuremeasure口头()时经常使用的称号DOMStringPerformancePaintTimingpaintfirst-paintfirst-contentful-paint

&ensp;&ensp;&ensp;&ensp;咱们也可以经过指定EntryType来失掉对应的消息，上方的代码咱们将只会失掉到first-paint和first-contentful-paint两个元素：

<script>???=?function?()?{????const?entries?=?(paint);????(entries);??};</script>经常出现的性能目的：

&ensp;&ensp;&ensp;&ensp;咱们在前面输入PerformanceNavigationTiming对象时就曾经看到了name非first-paint和first-contentful-paint的对象，这两个就是典型的前端性能目的，其次还有几个，咱们用一个表格来看一下：

目的含意FPFirstPaint，初次绘制，指阅读器从开局恳求网站到屏幕渲染第一个像素点的时期。FCPFirstContentfulPaint，初次内容绘制，指阅读器渲染出第一个内容的时期，这个内容可以是文本、图片、背景图、非空白的画布、SVG等，并不包括iframe元素。LCPLargestContentfulPaint，最大内容绘制，指网页被展如今视口中的最大内容的显示时期。FMPFirstMeaningfulPaint，初次有效绘制，指网页渲染出第一个关键内容的时期。区别与FCP，FMP指第一块无心义的内容绘制。如：博客网站的关键内容指的是注释，视频网站的关键内容指的是视频播放器，电商网站的关键内容指的是商品列表或商品概略等。因其计算过于复杂，失掉的结果并不是十分准确，在Lighthouse6.0中用LCP交流了FMP。DCLDOMContentLoaded，指网页中的DOM加载并成功解析后触发此事情，但不包括样式、图像等。Lload，指网页成功了一切的加载包括DOM、样式、图像等外容后触发此事情。

下图是在控制台的性能页签抓取的数据：

实时失掉性能目的：

&ensp;&ensp;&ensp;&ensp;上述的性能目的都存在一个疑问，就是咱们只能失掉在onload口头前的性能数据，之后变动的数据将不可失掉。所以在HTML5中为咱们新增的PerformanceObserver对象，可以经常使用观察者的形式来拿到每次出现变动后的数据，兼容性见下表：

失掉fp和fpc：

实例化PerformanceObserver对象；

在结构函数位置指定处置函数；

调用observe并指定entryTypes使其蕴含paint；

<script>??const?ob?=?new?PerformanceObserver((list)?=>?{????()((entrie)?=>?{??????(entrie：,?entrie);????});??});??({?entryTypes:?[paint]?});</script>

下图输入的消息就是对应的fp和fcp的消息了：

失掉其余资源的性能数据：

调整observe函数中entryTypes使其蕴含resource；

将ob的实例化提到其余脚本口头之前；

<head>??<meta?charset=UTF-8?/>??<title>页面性能</title>??<script>????const?ob?=?new?PerformanceObserver((list)?=>?{??????()((entrie)?=>?{????????(entrie：,?entrie);??????});????});????({?entryTypes:?[resource]?});??</script>??<script?src=./></script></head>

下图输入的消息就蕴含了此脚本加载的性能消息：

失掉脚本运转到特定位置的性能数据：

再次调整observe函数中entryTypes使其蕴含resource；

调用(own);启动打点，own为自定义标志；

<head>??<meta?charset=UTF-8?/>??<title>页面性能</title>??<script>????const?ob?=?new?PerformanceObserver((list)?=>?{??????()((entrie)?=>?{????????(entrie：,?entrie);??????});????});????({?entryTypes:?[mark]?});??</script>??<script?src=./></script>??<script>????(↓↓↓↓↓↓↓↓↓↓↓);????(own);????(↑↑↑↑↑↑↑↑↑↑);??</script></head>

下图输入的消息就蕴含了口头到此标志时的耗时：

计算DOM拔出的时期：

编写一个addDom函数，外部成功一个div拔出到body的完整环节；

在addDom函数的开局和完结位置区分经常使用mark启动打标志；

当咱们触发页面中的adddom按钮的时刻就会接纳到蕴含咱们自定义标志两个PerformanceMark对象，其中蕴含的时期相减就可以失掉DOM拔出的时期了。

内容裁减：

&ensp;&ensp;&ensp;&ensp;W3C规范只是介绍规范，并没有强迫口头的才干。

但在Web规范畛域各阅读器厂商对介绍的规范都很注重，踊跃的照应，但并非一切的规范都能失掉适配。

那么作为一名Web前端的开发人员，咱们在经常使用一些新的API的时刻也要关注这些API目前处于什么样的阶段，兼容性如何，能否牢靠的运转到消费环境。

下图是一份W3C规范制订的流程示用意：

&ensp;&ensp;&ensp;&ensp;一份规范的制订从上班草案提出由群众和会员启动探讨构成最终上班草案后并再次启动探讨及订正，订正终了的最终上班草案将列入候选介绍规范，此时的规范处于稳固形态，可以展开试验性的实施，在继续一段启动的验证和修复后就会进入到倡导介绍规范的阶段，W3C会员将对这份规范启动审阅，假设审阅没有经过将打回到候选规范介绍，更重大的将间接打回到最后的上班草案阶段或彻底移除，审阅经事先W3C总监将发表该规范为W3C介绍规范。

写在最后：

&ensp;&ensp;&ensp;&ensp;在这一篇中咱们引见了几个在网页性能紧关系的几名目的，也引见了从毫秒到纳秒的性能数据失掉的API和经常使用的形式，时期咱们也展示了经过阅读器提供的Performance性能，Chrome阅读器还内置了Lighthouse性能来为咱们的网页性能打分。

咱们理论也可以齐全运行这两个工具，那么在须要定制一些私有的性能监控平台的时刻API就可以施展更大的性能了。

参考资料：

团队引见

&ensp;&ensp;&ensp;&ensp;高灯科技买卖合规前端团队（GFE）,附属于高灯科技(北京)买卖合规业务事业线研发部，是一个富裕热情、充溢发明力、保持技术驱动片面生长的团队,团队平均年龄27岁，有在各自畛域深耕多年的大牛,也有刚刚毕业的小牛,咱们在工程化、编码品质、性能监控、微服务、交互体验等方向踊跃启动探求,谋求技术驱动产品落地的宗旨，打造完善的前端技术体系。

愿景:成为最值得信赖、最有影响力的前端团队

使命:保持客户体验第一,为业务发明更多或许性

文明:敢于承当、深化业务、齐心协力、便捷开明

Github/gfe-team

团队邮箱

原文：