當(dāng)前位置：首頁 > 前端技术 > HTML >内容正文

HTML

浏览器渲染阻塞与优化-详解推迟加载、异步加载。

發(fā)布時間：2024/9/20 HTML 34 豆豆

生活随笔收集整理的這篇文章主要介紹了浏览器渲染阻塞与优化-详解推迟加载、异步加载。小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

我認(rèn)為一個前端工程師是否優(yōu)秀，很大程度上取決于對前端性能上優(yōu)化的功力。所以性能優(yōu)化對前端真的很重要！！！ 本文介紹了什么是阻塞、為什么會阻塞？阻塞優(yōu)化常用的5種方式以及他們的注意事項。 瀏覽器渲染阻塞與優(yōu)化 ? ? ?什么是阻塞？在頁面中我們通常會引用外部文件，而瀏覽器在解析HTML頁面是從上到下依次解析、渲染，如果<head>中引用了一個a.js文件，而這個文件很大或者有問題，需要2秒加載，那么瀏覽器會停止渲染頁面(此時是白屏顯示，就是頁面啥都沒有)，2秒后加載完成才會繼續(xù)渲染，這個就是阻塞。 ? ? ?為什么會阻塞？ ? ? ?? ? ?因為瀏覽器不知道a.js中執(zhí)行了哪些腳本，會對頁面造成什么影響，所以瀏覽器會等js文件下載并執(zhí)行完成后才繼續(xù)渲染，如果這個時間過長，會白屏。 CSS文件也一樣，因為CSS文件會對DOM的樣式，布局，色彩，效果產(chǎn)生影響，所以瀏覽器會等CSS文件下載并執(zhí)行完成后繼續(xù)。為了頁面的性能，要避免阻塞。 ?阻塞優(yōu)化-推遲加載、異步加載。 ? ? ? ? ??推遲加載(延遲加載) 如果頁面初始的渲染并不依賴于js或者CSS可以用推遲加載，就是最后在加載js和css，把引用外部文件的代碼寫在最后。比如一些按鈕的點擊事件，比如輪播圖動畫的腳本也可以放在最后。原理：因為瀏覽器默認(rèn)是同步加載(這是為了避免重復(fù)觸發(fā)“回流”和“重繪”)，此時瀏覽器會從上到下逐條代碼的加載、解析、渲染、執(zhí)行。 1 <html>2 <head>3 </head>4 <body>5 xxxxxxxxxxxxxxx6 <h1>推遲加載</h1>7 <script type="text/javascript" src="a.js"></script>8 <link href="a.css" rel="stylesheet" />9 </body> 10 </html> ? ? ? ? ?defer延遲加載： 　　　　在文檔解析完成開始執(zhí)行，并且在DOMContentLoaded事件之前執(zhí)行完成，會按照他們在文檔出現(xiàn)的順序去下載解析。效果和把script放在文檔最后</body>之前是一樣的。 ? ? ? ? ? 注：defer最好用在引用外部文件中使用，用了defer不要使用document.write()方法;使用defer時最好不要請求樣式信息，因為樣式表可能尚未加載，瀏覽器會禁止該腳本等待樣式表加載完成，相當(dāng)于樣式表阻塞腳本執(zhí)行。 ?????? ? 異步加載(非阻塞加載) ? ? ? ??? 注：a.js文件中的代碼如下，這樣就會造成阻塞，因為如果我不點擊確定，就無法繼續(xù)渲染。 1 alert("已暫停加載") 2 alert("開始加載") ? ? ? ? ? ? 1)async異步加載：就是告訴瀏覽器不必等到加載完外部文件，可以邊渲染邊下載，什么時候下載完成什么時候執(zhí)行。用法就是“async“ 1 <script type="text/javascript" src="a.js" async></script> ? ? ? ? ? ? ? ?注：實際測試中IE10+才支持，火狐，谷歌，Microsoft支持；用了async不要使用document.write()方法;使用async時最好不要請求樣式信息，原因和defer一樣。 　　　　　　注2：async 在w3school中介紹是IE9就能支持，而IE9也是號稱能支持，但是實際是不能完全支持的。 ? ? ? ? ? ? 2)script dom element法：這個方法是用js動態(tài)創(chuàng)建一個script元素添加在document中。 ? ? ? ? ? ? ? ? ???注:支持全部瀏覽器(因為IE低版本IE10- 是單線程，所以要修改a.js才能顯示正確的效果) 1 setTimeout("alert('異步加載成功')",2000) //測試IE時候a.js文件要修改 1 <script type="text/javascript">2 (function() {3 var s = document.createElement('script');4 s.type = 'text/javascript';5 s.async = true; //這句可以刪除，但是效果不變。6 s.src = 'js/a.js';7 var x = document.getElementsByTagName('script')[0];8 x.parentNode.insertBefore(s, x);9 })(); 10 </script> 注意：這種方法會阻止onload事件，比如下面的代碼，會等到a.js中的彈出框彈出后再執(zhí)行。 1 <script type="text/javascript"> 2 window.onload=function(){ 3 document.getElementById('div').innerHTML="onload完成" 4 } 5 </script>
6 //寫在html中 ? ? ? ? ? ?? 3)onload時異步加載：這個和script dom element法差不多但是他不是同時執(zhí)行js和html，他是等html的文件，圖片之類的、頁面所有的資源全部加載完成后再下載執(zhí)行js，這樣的方法可以避免阻塞onload事件的觸發(fā)。(兼容所有瀏覽器) 1 (function() {2 function async_load(){3 var s = document.createElement('script');4 s.type = 'text/javascript';5 s.async = true;6 s.src = 'js/yibujiaz.js';7 var x = document.getElementsByTagName('script')[0];8 x.parentNode.insertBefore(s, x);9 } 10 if (window.attachEvent) 11 window.attachEvent('onload', async_load); 12 else 13 window.addEventListener('load', async_load, false); 14 })(); ? ? ? ? ? 注：DOMContentLoaded與onload事件不同，DOMContentLoaded是頁面解析完成，頁面的dom元素可以使用，但是頁面的圖片、視頻等資源可能還沒加載完成 　　我上面介紹的優(yōu)化方式是常用的，除此之外還有其他的，比如異步加載還有AJAX異步加載，body onload異步加載等，這些用的比較少，有興趣的工程師可以去查查相關(guān)資料。(如果你在博客園查基本上只要看一篇文章就好了，其他的基本上都說一樣的，改都不會改；其實全網(wǎng)都差不多，都說互相轉(zhuǎn)載復(fù)制的)。 ?a.js全部代碼 1 // setTimeout("alert('異步加載成功')",2000) 2 // alert("已暫停加載") 3 // alert("開始加載") HTML全部代碼 <!DOCTYPE html> <html> <head><meta charset="utf-8"><title>異步加載</title> <script type="text/javascript">(function() {var s = document.createElement('script');s.type = 'text/javascript';s.src = 'js/yibujiaz.js';var x = document.getElementsByTagName('script')[0];x.parentNode.insertBefore(s, x);})(); </script> <style type="text/css">div{width:200px;height:200px;background-color: blue;margin:0 auto;}</style> </head> <body><div id="div"></div> </body> </html>

總結(jié)

以上是生活随笔為你收集整理的浏览器渲染阻塞与优化-详解推迟加载、异步加载。的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。