웹 인터페이스 프런트엔드 성능 최적화 설명

이 기사의 내용은 웹 인터페이스 프런트엔드의 성능 최적화에 관한 것입니다. 이는 특정 참고 가치가 있으므로 도움이 필요한 친구에게 도움이 되기를 바랍니다.

지난 Q 웹 성능 최적화의 물결을 이루며 쌓인 작은 경험을 녹음하고 공유해주세요.

먼저 흔히 사용되는 인터페이스 프론트엔드 최적화 계획을 공유해보겠습니다

최적화 전 첫 화면을 여는 데 걸리는 시간은 약 40%였습니다첫 번째 화면을 여는 데 걸리는 시간은 약 25% 증가했습니다

먼저 최적화 결과 사진을 올려보겠습니다

사전
프론트엔드와 백엔드가 분리된 페이지의 경우 일반적인 로딩 방법은 다음과 같습니다.

요청 html 페이지 -> -> CSS js 요청 -> js는 데이터에 따라 페이지를 구성합니다.-> 이미지를 요청합니다.
아래 그림을 볼 수 있습니다.

페이지에 인터페이스 요청이 로드됩니다. 540ms

약 10초에 전송된 인터페이스 데이터가 반환된 다음 페이지가 렌더링되고 이미지가 로드됩니다. 전체 프로세스가 직렬이므로 첫 번째입니다. 전체 페이지의 화면 시간이 상대적으로 깁니다. HTML 페이지가 로드된 후 즉시 첫 번째 화면 데이터를 요청한 다음 CSS js 등의 리소스를 요청할 수 있다면 인터페이스 요청과 CSS js 리소스 요청이 병렬로 이루어지면 첫 번째 화면 시간을 at로 절약할 수 있습니다. 최소한 하나의 요청.

특별한 연습

게시-구독 모델을 사용하세요1: 먼저 XMLHttpRequest 캡슐화를 직접 사용하는 것이 좋습니다.

 // 这里我们是写了一个单独的js库 包含js请求 和 发布订阅的一些东西 然后打包的时候 通过模板打到 
 //<script> </script> 标签内 位置在header 最顶部

2: html 헤드에 <script> // 여기에서 인터페이스를 조정하여 첫 번째 화면 데이터를 로드합니다. 위치는 ajax 라이브러리 아래에만 있습니다. 태그는 js 파일에 http 요청을 보낸 다음 이를 실행해야 하기 때문에 여기서는 태그를 사용하지 않는 것이 좋습니다. 데이터를 요청합니다. <p><pre class="brush:php;toolbar:false"> var prefetchSuccessful = true; try { if( window.ytMessager && window.YtPreRequest){ var params = { itemId: YtPreRequest.getQueryString(&#39;itemId&#39;) }; YtPreRequest.request( { url: &#39;{{ reqConfig }}1.0.2/mall.item.detail.pc/&#39;, data: params, success: function (json) { ytMessager.send(&#39;mall.item.detail.pc&#39;,json); }, error: function () { prefetchSuccessful = false; ytMessager.send(&#39;mall.item.detail.pc.error&#39;); } }) }else{ prefetchSuccessful = false; } }catch (e){ prefetchSuccessful = false; }3: 비즈니스 코드에서 프런트엔드 인터페이스 데이터를 사용할 때 이때는 두 가지 상황이 발생합니다<p><pre class="brush:php;toolbar:false">第一种： 首屏接口已经请求成功了， 业务js代码未加载好。 第二种： 业务js代码已经加载好了，但是 首屏接口数据还没请求成功。 为了兼容第二种情况 我们使用发布订阅模式的写法。 业务js 先判断全局是否有首屏数据 有就直接拿过来渲染页面 ，如果没有则监听一个首屏接口事件， 首屏接口请求成功后会写入一个全局的首屏数据并且触发事件，业务代码被触发后则拿返回的数据渲染页面。<pre class="brush:php;toolbar:false"> /** ** 如果已经请求好了数据 直接渲染 否则监听事件回调中渲染 */ if(window.ytMessager && prefetchSuccessful){ ytMessager.on(&#39;mall.item.detail.pc&#39;,(json)=>{ this.renderData(json); // 渲染页面 },true); ytMessager.on(&#39;mall.item.detail.pc.error&#39;,()=>{ this.getPageData(); // 异常补救 },true) }else{ this.getPageData(); // 异常补救 }<p>최적화 후 <p><strong><br/><p style="text-align: center;"><img src="/static/imghwm/default1.png" data-src="https://img.php.cn//upload/image/975/417/299/1540629942468838.png?x-oss-process=image/resize,p_40" class="lazy" title="1540629942468838.png" alt="웹 인터페이스 프런트엔드 성능 최적화 설명"/><span class="img-wrap">인터페이스는 페이지가 로드될 때 요청을 보냅니다. 100ms 이상. 비즈니스 코드가 실행되기 전에 이미 데이터가 존재합니다<p></script>

위 내용은 웹 인터페이스 프런트엔드 성능 최적화 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!