网站的seo方案,创艺装饰公司,电商网站设计思维导图,中小企业建网站注意前端面试题库 #xff08;面试必备#xff09; 推荐#xff1a;★★★★★
地址#xff1a;前端面试题库
性能优化
一、性能指标
要在 Chrome 中查看性能指标#xff0c;可以按照以下步骤操作#xff1a;
打开 Chrome 浏览器#xff0c;并访问你想要测试…前端面试题库 面试必备 推荐★★★★★
地址前端面试题库
性能优化
一、性能指标
要在 Chrome 中查看性能指标可以按照以下步骤操作
打开 Chrome 浏览器并访问你想要测试的网页。使用快捷键 F12 或右键点击页面并选择 “检查”打开开发者工具。在开发者工具中切换到 “Performance”性能选项卡。点击开始录制按钮即红色的圆点按钮。开始加载页面。等待页面加载完成然后停止录制点击红色的圆点按钮或按下快捷键 Ctrl E。在性能分析结果中你会看到一些性能指标图表。在 “Timings”时间图表中你可以找到各个性能指标的时间点。
常规指标
DCLDOMContentLoaded 事件LOnload 事件FP - First Paint首次绘制浏览器开始将像素绘制到屏幕上的时间点。FCP - First Contentful Paint首次内容绘制表示浏览器在加载页面时第一次绘制了一部分页面内容文本、图像等的时间点。它标志着用户可见的内容开始出现在屏幕上的时间。FMP - First Meaningful Paint首次有意义绘制指⻚面关键元素渲染时间。这个概念并没有标准化定义因为关键元素可以由开发者自行定义——究竟什么是“有意义”的内容只有开发者或者产品经理自己了解。TTI - Time To Interactive用户可以与页面进行交互的时间点。一般来讲我们认为是 domready 的时间因为我们通常会在这时候绑定事件操作。如果⻚面中涉及交互的脚本没有下载完成那么当然没有到达所谓的用户可交互时间。那么如何定义 domready 时间呢TTFB - Time To First Byte发出⻚面请求到接收到应答数据第一个字节所花费的毫秒数。
Chrome 最新指标
LCP - Largest Contentful Paint最大内容绘制衡量⻚面的加载体验它表示视口内可⻅的最大内容元素的渲染时间。相比 FCP这个指标可以更加真实地反映具体内容加载速度。比如如果⻚面渲染前有一个 loading 动画那么 FCP 可能会以 loading 动画出现的时间为准而 LCP 定义了 loading 动画加载后真实渲染出内容的时间。FID - First Input Delay首次输入延迟衡量可交互性它表示用户和⻚面进行首次交互操作所花费的时间。它比 TTITime To Interactive更加提前这个阶段虽然⻚面已经显示出部分内容但并不能完全具备可交互性对于用户的响应可能会有较大的延迟。CLS - Cumulative Layout Shift积累布局位移是一个衡量页面布局稳定性的性能指标它衡量页面上元素在加载过程中发生的意外布局变化的总和。CLS 反映了用户在浏览页面时会遇到的突然、意外的元素移动导致用户难以准确点击操作或浏览内容。CLS 的值通常为在加载期间发生布局变化的元素面积的百分比范围是从 0 到 1。CLS 值越接近 0表示页面布局越稳定用户体验越好。如果 CLS 值较高则可能需要优化页面布局例如确定元素的固定尺寸、合理设置图片和广告的尺寸等。通过监测 CLS可以改进页面的布局稳定性提高用户体验和满意度。
总下载时间
⻚面所有资源加载完成所需要的时间。一般可以统计 window.onload 时间这样可以统计出同步加载的资源全部加载完的耗时。如果⻚面中存在较多异步渲染也可以将异步渲染全部完成的时间作为总下载时间。
DOMContentLoaded 与 load 事件的区别
DOMContentLoaded 指的是文档中 DOM 结构加载完毕的时间也就是说 HTML 结构已经完整。但是我们知道页面可能包含了图片特殊字体视频音频等资源这些资源由网络请求获取DOM 结构加载完毕时由于这些资源往往额外的网络请求这些资源可能还有没有请求或者渲染完成。而当页面上所有资源加载完成后load 时间见才会被触发。因此在时间线上load 事件往往会落后于 DOMContentLoaded 事件。
关于 DOMContentLoaded 和 domReady
我们简单说一下浏览器是从上到下从左到右一个个字符串读入大致可以认为两个同名的开标签和闭标签就是一个 DOM有的是没有闭标签这时候就忽略掉两个标签之间的内容。页面上有许多标签但标签会生成同样多的 DOM因为有的标签下允许存在特定的子标签比如tr 下面一定是 td, th, select 下面一定是 opgrounp, option, 而 option 下面就算你写了 span/span 它都会忽略掉option 只存在文本这就是我们需要自定义下拉框的原因。
我们说过这个顺序是从上到下的有的元素很简单构建的很快但是标签存在 src, href 属性它们会引用外部资源这就要区别对待了。比如说script 标签它一定会等 src 指定的脚本文件加载下来然后全部执行了里面的脚本才会分析下一个标签这种现象叫做堵塞。
堵塞是一种非常致命的现象因为浏览器渲染引擎是单线程的如果头部引入的脚本过多会导致白屏影响用户体验因此雅虎的 20 军规中就有一条提到所有的 script 标签都放到 body 之后。
此外style 标签 与 link 标签它们在加载样式文件时是不会堵塞的但是它们一旦加载好就会立即开始渲染已经构建好的节点元素这可能会引起 reflow 这也影响速度。
另外一个影响 DOM 树构建的是 iframe它也会加载资源虽然不会堵塞 DOM 构建但它由于发出 HTTP 请求而 HTTP 请求时有限的它会与父标签的其它需要加载外部资源的标签产生竞争。我们经常看到一些新闻网上面挂了很多 iframe 广告这些页面一开始加载时就很卡就是就是这个缘故。
此外还有 object 元素用来加载 flash。document.getElementById() 等等这些东西会影响到 DOM 树的构建过程。因此在这时候当我们贸贸然使用 getElementById, getElementsByTagName 获取元素然后操作它们就会很大几率碰到元素为 null 的异常这时候目标元素还有转换为 DOM 节点还只是一个普通的字符串呢
二、如何获取这些指标 通过 performance.timing 获取
performance.timing
字段含义navigationStart加载的起始时间如果没有前一个页面的 unload则与 fetchStart 值相等redirectStart重定向开始时间如果发生了 HTTP 重定向每次重定向都和当前文档同域的话就返回开始重定向的 fetchStart 的值。其他情况则返回 0redirectEnd重定向结束时间如果发生了 HTTP 重定向每次重定向都和当前文档同域的话就返回最后一次重定向接受完数据的时间。其他情况则返回 0fetchStartfetchStart 浏览器发起资源请求时如果有缓存则返回读取缓存的开始时间domainLookupStartDNS 域名开始查询的时间如果本地有缓存或 keep-alive 等则返回 fetchStartdomainLookupEndDNS 域名结束查询的时间如果没有发起 DNS 请求同上connectStartTCP 开始建立连接的时间如果有本地的缓存或 keep-alive 等则与 fetchStart 值相等secureConnectionStarthttps 连接开始的时间如果不是安全连接则为 0connectEndTCP 完成握手的时间如果有本地的缓存或 keep-alive 等则与 connectStart 值相requestStartHTTP 请求读取真实文档的开始时间包括从本地文件读取requestEndHTTP 请求读取真实文档的结束时间包括从本地文件读取responseStart浏览器从服务器收到或从本地缓存读取第一个字节的时间responseEnd浏览器从服务器收到或从本地缓存读取或从本地资源读取最后一个字节的时间unloadEventStart前一个⻚面的 unload 的时间戳如果没有则为 0unloadEventEnd与 unloadEventStart 相对应返回的是 unload 函数执行完成的时间戳domLoading这是当前网⻚ DOM 结构开始解析时的时间戳是整个过程的起始时间浏览器即将开始解析第一批收到的 HTML 文档字节此时 document.readyState 变成 loading并将抛出 readyStateChange 事件domInteractive返回当前网⻚ DOM 结构结束解析、开始加载内嵌资源时时间戳,document.readyState 变成 interactive并将抛出 readyStateChange 事件注意只是 DOM 树解析完成这时候并没有开始加载网⻚内的资源domContentLoadedEventStart网⻚ domContentLoaded 事件开始执行时间domContentLoadedEventEnd网⻚ domContentLoaded 事件执行结束时间domReady 的时间domCompleteDOM 树解析完成且资源也准备就绪的时间document.readyState 变成 complete。并将抛出 readystatechange 事件loadEventStartload 事件发送给文档onLoad 开始执行的时间loadEventEndload onLoad 开执行结束的时间
相关参数计算
字段描述计算方式意义unload前一个⻚面卸载耗时unloadEventEnd - unloadEventStartredirect重定向耗时redirectEnd - redirectStart重定向的时间appCache缓存耗时domainLookupStart - fetchStart读取缓存的时间dnsDNS 解析耗时domainLookupEnd - domainLookupStart可观察域名解析服务是否正常tcpTCP 连接耗时connectEnd - connectStart建立连接的耗时sslSSL 安全连接耗时connectEnd - secureConnectionStart反映数据安全连接建立耗时ttfbTimetoFirstByte(TTFB)网络请求耗时responseStart - requestStartTTFB 是发出⻚面请求到接收到应答数据第一个字节所花费的毫秒数response响应数据传输耗时responseEnd - responseStart观察网络是否正常domDOM 解析耗时domInteractive - responseEnd观察 DOM 结构是否合理是否有 JS 阻塞⻚面解析dclDOMContentLoaded 事件耗时domContentLoadedEventEnd - domContentLoadedEventStart当 HTML 文档被完全加载和解析完成之后DOMContentLoaded 事件被触发无需等待样式表、图像和子框架的完成加载resources资源加载耗时domComplete - domContentLoadedEventEnd可观察文档流是否过大首次渲染耗时首次渲染耗时responseEnd - fetchStart加载文档到看到第一帧非空图像的时间也叫白屏时间首次可交互时间首次可交互时间domInteractive-fetchStartDOM 树解析完成时间此时 document.readyState 为 interactive首包时间耗时首包时间responseStart-domainLookupStartDNS 解析到响应返回给浏览器第一个字节的时间⻚面完全加载时间⻚面完全加载时间loadEventStart-fetchStartonLoadonLoad 事件耗时loadEventEnd - loadEventStart 使用 demo
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle#parent {width: 800px;height: 800px;background-color: antiquewhite;}#child {width: 400px;height: 400px;background-color: aquamarine;}#son {width: 200px;height: 200px;background-color: rgb(121, 216, 11);}.flex-center {display: flex;flex-direction: column;justify-content: center;align-items: center;font-size: large;}/style
/headbodydiv idparent classflex-centerparentdiv idchild classflex-centerchilddiv idson classflex-centersona idlink hrefhttps://www.baidu.com/www.baidu.com/a/div/divscriptconst parent document.getElementById(parent);const child document.getElementById(child);const son document.getElementById(son);const link document.getElementById(link);link.addEventListener(click, (e) {e.preventDefault();})const observer new PerformanceObserver((list) {const preEntires list.getEntries()preEntires.forEach((item) {console.log(item)})})observer.observe({// 想要监听的性能条目entryTypes: [element,event,first-input,largest-contentful-paint,layout-shift,longtask,mark,measure,navigation,paint,resource]})/script
/body/html常见的性能条目
frame帧信息包括每秒的帧数FPS和每帧的时间间隔Frame Interval。navigation页面导航相关的性能数据包括重定向、DNS 查询、TCP 握手、页面加载的时间等。resource资源加载相关的性能数据如图片、样式表、脚本等资源的加载时间和大小。paint绘制相关的性能数据如首次绘制的时间点和绘制区域的尺寸等。mark由 performance.mark() 创建的时间戳标记用于标记代码执行的特定点。measure由 performance.measure() 创建的自定义性能度量用于测量特定代码块的执行时间。longtask表示执行时间超过 50 毫秒的长任务的性能数据。layout-shift布局偏移相关的性能数据用于衡量页面上元素位置发生变化的情况。element与元素相关的性能数据例如测量元素大小和位置的信息。
代码获取首次绘制首次内容绘制最大内容绘制
new PerformanceObserver((entryList, observer) {let entries entryList.getEntries()for (let i 0; i entries.length; i) {if (entries[i].name first-paint) {console.log(FP, entries[i].startTime)}if (entries[i].name first-contentful-paint) {console.log(FCP, entries[i].startTime)}}observer.disconnect()
}).observe({ entryTypes: [paint, largest-contentful-paint] })new PerformanceObserver((entryList, observer) {let entries entryList.getEntries()const lastEntry entries[entries.length - 1]console.log(LCP, lastEntry.startTime)observer.disconnect()
}).observe({ entryTypes: [largest-contentful-paint] })代码获取一些常用指标
setTimeout(() {const {fetchStart,connectStart,connectEnd,requestStart,responseStart,responseEnd,domLoading,domInteractive,domContentLoadedEventStart,domContentLoadedEventEnd,loadEventStart,} performance.timingconst info connectTime(TCP链接耗时): ${connectEnd - connectStart}ttfbTime(获取到第一个字节耗时): ${responseStart - requestStart}responseTime(Response响应耗时): ${responseEnd - responseStart}parseDOMTime(DOM 解析渲染耗时): ${loadEventStart - domLoading}domContentLoaded(事件耗时)${domContentLoadedEventEnd - domContentLoadedEventStart}TimeToInteractive(首次可交互时间)${domInteractive - fetchStart}loadTime完整的加载时间 ${loadEventStart - fetchStart}console.log(info)
}, 2000)// 写在 setTimeout 里面页面完成显示完成再打印延迟执行时间根据实际情况设定三、从什么维度来剖析性能
维度 1I/O(network)维度 在 App cache/HTTP Cache 阶段
强缓存Cache-Control 和 Expires和协商缓存ETag 和 Last-Modified是两种常见的缓存机制用于在客户端和服务器之间优化资源的请求和响应。
强缓存是指客户端直接使用本地缓存的资源而无需向服务器发送请求。主要通过以下两种方式实现 Cache-Control在服务器的响应头部中设置 Cache-Control 指令来控制资源的缓存机制。常用的指令包括 public表示资源可以被任何缓存包括客户端和代理服务器缓存。private表示资源只能被客户端缓存不可被代理服务器缓存。max-age指定资源的有效时间单位为秒。客户端在该时间内可以直接使用本地缓存而无需发送请求。 Expires在服务器的响应头部中设置 Expires 字段来指定资源的过期时间。它是一个具体的时间点表示在该时间点之后客户端不能再使用本地缓存而是需要向服务器发送请求。
协商缓存是指客户端先向服务器发送请求服务器通过对请求的验证来判断是否返回资源的实际内容。主要通过以下两种方式实现
ETag在服务器的响应头部中设置 ETag 字段来标识资源的版本号。客户端可以在后续请求中使用 If-None-Match 头部字段将上次响应中的 ETag 值发送给服务器服务器通过比较资源的 ETag 值判断资源是否发生了变化如果未发生变化则返回 304 状态码告知客户端可以使用缓存的资源。Last-Modified在服务器的响应头部中设置 Last-Modified 字段来表示资源的最后修改时间。客户端可以在后续请求中使用 If-Modified-Since 头部字段将上次响应中的 Last-Modified 时间发送给服务器服务器通过比较资源的最后修改时间判断资源是否发生了变化如果未发生变化则返回 304 状态码告知客户端可以使用缓存的资源。
需要注意的是强缓存是由客户端自身决定是否使用缓存而协商缓存是由服务器来决定是否返回实际内容。通常情况下当资源处于强缓存的有效期内时客户端直接使用本地缓存的资源不会发送请求到服务器而当资源过期或存在其他的缓存验证字段时客户端会发送请求到服务器并进行缓存的验证。两种缓存机制可以结合使用实现更灵活和高效的缓存策略。
有缓存
无缓存
强缓存
没过期
已过期
协商缓存
可用
不可用
HTTP请求
是否有缓存
强缓存或协商缓存?
直接向后端获取数据
页面呈现
缓存是否过期?
不发送请求,读取浏览器缓存
重新向后端获取数据
向后端发送ETag或Last-Modified
后端判断缓存是否可用
返回304
读取浏览器缓存
返回200
后端返回新的数据 缓存中有哪些细节需要注意 304 状态码是好还是不好 如果多意味着我的协商缓存就比较多如果少意味着我的 JS 文件可能存在频繁更新的情况。 直接在浏览器端输入的 http://xxx.xxx.com/index.html该文件是不会被缓存的。 webpack 中的 hash 指纹需要合理的利用去让“该缓存的内容被缓存” 不经常更新的文件改用 contentHash例如公共的样式文件工具类 js 文件。 协商缓存中的 Modified 是根据时间判断精确到秒一秒时间内可能引发很多问题。 如果同时有多个资源在同一秒内发生了修改服务器可能无法准确识别出每个资源的变化导致缓存失效。如果服务器的时间与浏览器的时间存在偏差可能导致资源的修改时间在服务器和浏览器之间不一致进而造成缓存验证不准确。为了避免以上问题通常建议在修改资源的同时将Last-Modified时间向上取整到秒级以增加时间的准确性。此外还可以使用更精确的缓存验证机制如 ETag来解决精度不足的问题以确保资源的缓存验证更为准确和可靠。 在 CDN 下hash 缓存是否能够有比较好的缓存效果 在 CDN 下哈希缓存具有非常好的缓存效果。 哈希缓存是指在文件名中添加一个唯一的哈希值当文件内容发生改变时哈希值也会改变。CDN 会根据文件名来缓存和分发资源因此当哈希值改变时CDN 会将最新的文件缓存并提供给用户。 哈希缓存在 CDN 下可以实现以下优点 强制缓存更新哈希缓存可以强制浏览器或 CDN 节点在文件内容发生变化时获取最新的资源。由于哈希值的改变文件名也会改变这会触发浏览器或 CDN 节点重新请求该资源确保用户获得最新的版本。缓解缓存一致性问题在 CDN 集群中缓存一致性是一个重要的问题。使用哈希缓存可以避免不同 CDN 节点之间的缓存不一致性问题。当文件内容发生变化时哈希值改变文件名也改变这样 CDN 将不再提供旧版本的资源而是提供最新的版本。消除浏览器缓存问题浏览器缓存也是需要考虑的因素。通过哈希缓存浏览器会将每个版本的资源看作是一个新的文件并缓存该版本。这避免了浏览器在引用更新资源时使用旧版本的缓存。总结起来哈希缓存在 CDN 下具有非常好的缓存效果。通过强制缓存更新、解决缓存一致性问题和消除浏览器缓存问题哈希缓存可以确保用户获取到最新的资源版本提高缓存命中率并加快内容传输速度从而提升用户的访问体验。 没有了强缓存的必要字段值浏览器还会走强缓存吗 答案是肯定的。heuristic expiration time/试探性过期时间/启发式缓存/强缓存有效期由 Expires 和 Cache-Control 中的 max-age 来决定的那么如果响应头中不存在这两个字段缓存的有效期怎么计算呢浏览器还会走强缓存吗答案是肯定的这就是我们要现在要了解的 启发式缓存 。当报头中没有用来确定强缓存时间的字段时浏览器会触发启发式缓存缓存有效期计算公式(date - last-modified) * 10%取响应报头中 date 与 last-modified 值之差的百分之十作为缓存时间。启发式缓存比较容易忽略不了解启发式缓存可能会因为这种默认的缓存方式而掉入坑里但一旦你了解了浏览器启发式缓存的机制很多问题都可以得到解决。
TCP 阶段 HTTPHypertext Transfer Protocol是用于在 Web 上进行通信的协议。它的不同版本有不同的特性和改进。以下是 HTTP 各个版本的主要区别 HTTP/1.0 请求-响应模型每个请求只能获得一个响应。无状态每个请求都是相互独立的服务器不会保留之前的请求信息。每个请求建立新的连接每个请求都需要在客户端和服务器之间建立一个新的 TCP 连接。无持久连接每个请求的响应结束后连接会被关闭。每个资源一个请求每个页面元素如图片、样式表、脚本等都需要单独的 HTTP 请求。 HTTP/1.1 持久连接多个请求可以在同一个连接上进行提高效率。管道化Pipeline允许在一个连接上同时发送多个请求减少延迟。Host 头部字段允许在同一台服务器上提供多个域名的不同网站。增加了缓存机制引入了更多的缓存控制头部字段可以更好地利用缓存。引入了分块传输编码Chunked Transfer Encoding允许服务器逐块发送响应有利于大文件的传输。 HTTP/2 多路复用Multiplexing多个请求可以在同一个连接上同时进行提高性能。二进制传输HTTP/2 使用二进制格式传输数据替代了 HTTP/1.x 的文本格式提高了效率和解析速度。头部压缩使用 HPACK 算法对报文头部进行压缩减少了数据传输量。服务器推送Server Push服务器可以主动推送资源给客户端减少了客户端的请求次数。 HTTP/3 基于 QUIC 协议HTTP/3 基于 QUICQuick UDP Internet Connections协议使用 UDP 替代 TCP提供更低的延迟和更好的性能。支持多路复用和头部压缩HTTP/3 也继承了 HTTP/2 的多路复用和头部压缩特性。
这些是 HTTP 协议各个版本的主要区别。随着协议的发展每个版本都试图改进性能、安全性和效率以提供更好的 Web 体验。选择使用哪个版本取决于服务器和客户端的支持情况以及具体的需求。 Keep-Alive 是一种持久连接机制旨在改善 HTTP 协议的性能表现。在传统的 HTTP/1.0 中每个客户端请求都需要与服务器建立一个新的 TCP 连接这样会导致每个请求都要经历 TCP 连接的建立和释放的过程增加了延迟和资源消耗。而使用 Keep-Alive可以重复使用已经建立的 TCP 连接减少了连接的建立和关闭过程。 具体而言Keep-Alive 通过以下方式实现
持久连接在 HTTP 头部中添加 Connection: keep-alive表示客户端希望与服务器端保持持久连接。当服务器端收到这个头部后会在响应中回复相同的头部表示同意持久连接。复用连接客户端发送请求后在服务器端响应结束后TCP 连接并不会立即关闭而是保持打开状态以便进行下一个请求。设置超时时间连接在一段时间内没有新的请求时会自动关闭。
使用 Keep-Alive 可以带来以下优点
减少延迟避免了 TCP 连接的建立和关闭过程因此减少了连接的延迟。减少资源消耗连接的复用减少了服务器端的负担并且降低了网络带宽的占用。提升性能在一个连接上可以发送多个请求实现并行请求减少了网络拥塞和串行请求的影响。
需要注意的是Keep-Alive 并不是默认开启的需要在请求头部明确指定。在 HTTP/1.1 中Keep-Alive 是默认开启的除非明确指定 Connection: close。而在 HTTP/2 和 HTTP/3 中持久连接是默认开启的不再需要单独指定。
使用 Keep-Alive 可以有效改善 HTTP 的性能提高网络请求的效率。然而具体的实现和支持程度可能因服务器和客户端的配置和版本而有所不同。
request 和 response 阶段 首先式静态资源包的体积如何缩到极致 例如 webpack 脚手架中用 uglifyminify 插件对文件进行压缩。它们可以去除代码中的空格、注释、无效的代码并使用各种技术如变量重命名、函数替换等来对文件进行压缩。runtime保证运行时垫片(polyfill)按需加载。Tree shaking摇树优化是指通过静态代码分析的方式剔除掉未被使用的代码以减少最终打包生成的代码的大小。图片格式 根据场景考虑能不能使用体积最小的 webp 格式用 base64 图片体积会变大 1/3 倍不用 base64 多一个 http 请求一般情况大于 64kb 不建议用 base64 首屏加载的内容如何进行分解 code splitting以 vue 项目为例首页是单独的 bundleconst routes [{path: /,name: home,component: () import(/* webpackChunkName: home */ ../views/HomeView.vue),},
]如何在 TCP 请求数量之间权衡 Chrome 同源下最多 6 个并发在 TCP 请求数量之间存在一个权衡tradeoff。增加 TCP 请求的数量可以提高并发性和响应速度但也会增加网络开销和资源消耗。反之减少 TCP 请求的数量可以节省网络资源和降低开销但可能会牺牲一定的并发性和响应速度。下面是一些可以帮助你在 TCP 请求数量方面做出权衡的建议 批量请求对于需要发送多个相似请求的情况可以将其批量处理为一个更少的请求。例如可以使用合适的数据格式如 JSON将多个数据项一次性发送给服务器从而减少请求的数量。长连接和连接池通过使用长连接和连接池可以避免频繁建立和断开 TCP 连接的开销。长连接可以在多个请求之间保持连接状态而连接池可以重用现有连接从而减少连接建立和拆除的开销。并发限制和调整可以根据网络和服务器的容量限制并发请求数量。过多的并发请求可能会导致网络拥塞和服务器负载过重从而影响性能。因此需要找到一个合适的并发请求数量既能满足需求又不会过度压力网络和服务器。缓存和本地存储利用缓存和本地存储减少对服务器的请求。缓存可以在客户端保留数据的副本以便在需要时快速访问。本地存储如浏览器的 localStorage可以将数据存储在客户端避免不必要的请求提高响应速度。延迟加载和懒加载对于大型应用或页面可以延迟加载或懒加载一些资源以减少初始请求的数量。只加载当前所需的资源而不是一次性加载所有资源可以提高初始加载速度并根据需要动态加载其他资源。以上是一些常见的权衡措施可以根据具体的应用场景和需求进行调整。需要综合考虑网络环境、服务器性能、用户体验和应用需求并根据实际情况进行优化和调整。最佳实践是进行基准测试和性能测试以评估不同参数和策略对应用性能的影响并找到最合适的配置。
Processing 阶段/ DOM 加载阶段
一般情况要将样式文件放在 head 内因为样式文件一旦加载好就会立即渲染已经构建好的节点元素如果样式文件放在 body 标签中间引入很容易造成回流/重排。将脚本放在 head 中可能会导致页面加载阻塞因为脚本的下载和执行会阻塞页面的渲染。如果脚本较大或执行时间较长页面加载速度可能会受到影响。放在 body 元素底部为了避免阻塞页面加载可以将 script 标签放在 body 元素的底部即在页面内容后面。这样在页面内容加载完成后再加载和执行脚本不会阻塞页面的初始渲染。除了上述两种常见的放置位置外还可以使用异步加载和延迟加载来优化脚本加载行为。这些技术可以通过 async 和 defer 属性来实现允许脚本的异步或延迟加载以优化页面加载性能。
默认模式download-execute
------parse------ ------parse------defer 模式推迟执行模式download execute
------parse--------------------parse------async 模式异步下载模式download-execute
------parse--------------- ------parse------维度 2渲染维度
如何有效避免频繁操作 DOM
createDocumentFragment添加列表的时候不要每列单独 appendChild而是将所有列先存起来最后在进行 appendChild
回流与重绘
回流reflow和重绘repaint是浏览器在渲染网页时执行的两个关键过程。
回流/重排reflow也称为布局layout是浏览器根据 DOM 树中的元素和 CSS 样式计算每个元素在页面中的几何位置和大小的过程。这是一个相对昂贵的操作需要浏览器重新计算元素的布局并重新绘制受影响的部分。
回流会在以下情况下被触发
添加、删除、修改 DOM 元素修改元素的位置、尺寸包括宽度、高度、边距、填充修改元素的内容文字、图片浏览器窗口的尺寸变化触发 CSS 动画和过渡计算某些属性的值 offsetTop、offsetLeft、offsetWidth、offsetHeight 读取这些属性会触发浏览器计算元素的布局可能引发回流。clientWidth、clientHeight 读取这些属性会获取元素可见区域的宽度和高度不会引起回流。scrollWidth、scrollHeight 读取这些属性会获取元素内容区域的宽度和高度不会引起回流。getComputedStyle() 调用此方法可以获取元素的计算样式由于需要获取实时计算后的样式可能会触发回流。getBoundingClientRect() 调用此方法会获取元素在视口中的位置和尺寸信息这将触发回流。offsetParent 读取这个属性会触发回流。clientTop、clientLeft 读取这些属性会获取元素的内边距的大小不会触发回流。offsetParent 读取这个属性会触发回流。
当回流发生时浏览器会从渲染树的根节点开始递归遍历整个渲染树确定每个元素的几何位置和大小。然后浏览器重新绘制受影响的部分并更新布局。
重绘repaint 是指浏览器根据已计算的元素样式重新绘制页面的过程而不会影响元素的几何位置和大小。重绘是相对较快的操作因为它只需要更新元素的可见样式。
重绘会在以下情况下被触发
修改元素的颜色、背景色、文本颜色等可见样式切换 CSS 类名使用 CSS 伪类:hover、:active等
当重绘发生时浏览器会重新绘制受影响的部分但不会重新计算元素的布局。
回流和重绘的频繁发生会导致性能问题因为它们会占用大量的计算资源。优化网页性能的关键是尽量减少回流和重绘的次数。
为了减少回流和重绘的次数可以采取以下优化策略
避免多次读取上述属性在使用前先缓存起来。将样式修改集中在一次操作中可以使用 CSS 类名的切换来批量修改样式。使用 CSS3 的 transform 属性来进行位移、缩放和旋转它不会引起回流。使用 requestAnimationFrame 方法来进行动画的更新它能够优化性能并避免不必要的回流和重绘。使用文档片段DocumentFragment进行 DOM 操作以减少对实际文档的修改。
CSS 的 transform 属性不会造成回流的主要原因是它对元素进行了一种视觉上的变换而不影响元素在布局上的位置和大小。具体原因如下
硬件加速当应用 transform 属性时浏览器会将该元素视为一个单独的图层并通过硬件加速来处理该图层的变换操作。因为硬件加速是在图层级别进行的不影响其他元素的布局所以不会触发回流。独立图层在某些情况下浏览器会自动将某些元素创建为独立的图层例如使用 3D 变换、透明度动画、嵌套的 CSS 动画等。这些独立的图层也能够享受硬件加速的好处不会引起回流。位置不变transform 属性的变换并不改变元素在文档流中的位置元素的原始位置仍然被保留。因此当元素应用 transform 变换时并不需要改变布局来适应变换后的状态。
需要注意的是虽然 transform 不会引起回流但仍然会触发重绘repaint。因为元素的可见样式发生了变化浏览器需要重新绘制元素来反映变化。但相比于回流重绘的开销要小得多。
因此对于需要对元素进行平移、旋转、缩放等视觉上的变换操作使用 CSS 的 transform 属性是一种推荐的做法可以获得更好的性能和流畅的动画效果同时避免回流的影响。 前端面试题库 面试必备 推荐★★★★★
地址前端面试题库
