浏览器渲染阻塞与优化-详解推迟加载、异步加载。
生活随笔
收集整理的這篇文章主要介紹了
浏览器渲染阻塞与优化-详解推迟加载、异步加载。
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
我認為一個前端工程師是否優秀，很大程度上取決于對前端性能上優化的功力。所以性能優化對前端真的很重要！！！ 本文介紹了什么是阻塞、為什么會阻塞？阻塞優化常用的5種方式以及他們的注意事項。 瀏覽器渲染阻塞與優化 ? ? ?什么是阻塞？在頁面中我們通常會引用外部文件，而瀏覽器在解析HTML頁面是從上到下依次解析、渲染，如果<head>中引用了一個a.js文件，而這個文件很大或者有問題，需要2秒加載，那么瀏覽器會停止渲染頁面(此時是白屏顯示，就是頁面啥都沒有)，2秒后加載完成才會繼續渲染，這個就是阻塞。 ? ? ?為什么會阻塞？ ? ? ?? ? ?因為瀏覽器不知道a.js中執行了哪些腳本，會對頁面造成什么影響，所以瀏覽器會等js文件下載并執行完成后才繼續渲染，如果這個時間過長，會白屏。 CSS文件也一樣，因為CSS文件會對DOM的樣式，布局，色彩，效果產生影響，所以瀏覽器會等CSS文件下載并執行完成后繼續。 為了頁面的性能，要避免阻塞。 ?阻塞優化-推遲加載、異步加載。 ? ? ? ? ??推遲加載(延遲加載) 如果頁面初始的渲染并不依賴于js或者CSS可以用推遲加載，就是最后在加載js和css，把引用外部文件的代碼寫在最后。比如一些按鈕的點擊事件，比如輪播圖動畫的腳本也可以放在最后。 原理：因為瀏覽器默認是同步加載(這是為了避免重復觸發“回流”和“重繪”)，此時瀏覽器會從上到下逐條代碼的加載、解析、渲染、執行。 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延遲加載： 在文檔解析完成開始執行，并且在DOMContentLoaded事件之前執行完成，會按照他們在文檔出現的順序去下載解析。效果和把script放在文檔最后</body>之前是一樣的。 ? ? ? ? ? 注：defer最好用在引用外部文件中使用，用了defer不要使用document.write()方法;使用defer時最好不要請求樣式信息，因為樣式表可能尚未加載，瀏覽器會禁止該腳本等待樣式表加載完成，相當于樣式表阻塞腳本執行。 ?????? ? 異步加載(非阻塞加載) ? ? ? ??? 注：a.js文件中的代碼如下，這樣就會造成阻塞，因為如果我不點擊確定，就無法繼續渲染。 1 alert("已暫停加載")
2 alert("開始加載")
? ? ? ? ? ? 1)async異步加載：就是告訴瀏覽器不必等到加載完外部文件，可以邊渲染邊下載，什么時候下載完成什么時候執行。用法就是“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動態創建一個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中的彈出框彈出后再執行。 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法差不多但是他不是同時執行js和html，他是等html的文件，圖片之類的、頁面所有的資源全部加載完成后再下載執行js，這樣的方法可以避免阻塞onload事件的觸發。(兼容所有瀏覽器) 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元素可以使用，但是頁面的圖片、視頻等資源可能還沒加載完成 我上面介紹的優化方式是常用的，除此之外還有其他的，比如異步加載還有AJAX異步加載，body onload異步加載等，這些用的比較少，有興趣的工程師可以去查查相關資料。(如果你在博客園查基本上只要看一篇文章就好了，其他的基本上都說一樣的，改都不會改；其實全網都差不多，都說互相轉載復制的)。 ?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" src="js/yibujiaz.js" async></script> --> <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> <!-- <script type="text/javascript"> (function() {function async_load(){var s = document.createElement('script');s.type = 'text/javascript';s.async = true;s.src = 'js/yibujiaz.js';var x = document.getElementsByTagName('script')[0];x.parentNode.insertBefore(s, x);}if (window.attachEvent)window.attachEvent('onload', async_load);elsewindow.addEventListener('load', async_load, false);})(); </script> <script type="text/javascript">window.onload=function(){document.getElementById('div').innerHTML="onload完成"} </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>
6 //寫在html中 ? ? ? ? ? ?? 3)onload時異步加載：這個和script dom element法差不多但是他不是同時執行js和html，他是等html的文件，圖片之類的、頁面所有的資源全部加載完成后再下載執行js，這樣的方法可以避免阻塞onload事件的觸發。(兼容所有瀏覽器) 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元素可以使用，但是頁面的圖片、視頻等資源可能還沒加載完成 我上面介紹的優化方式是常用的，除此之外還有其他的，比如異步加載還有AJAX異步加載，body onload異步加載等，這些用的比較少，有興趣的工程師可以去查查相關資料。(如果你在博客園查基本上只要看一篇文章就好了，其他的基本上都說一樣的，改都不會改；其實全網都差不多，都說互相轉載復制的)。 ?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" src="js/yibujiaz.js" async></script> --> <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> <!-- <script type="text/javascript"> (function() {function async_load(){var s = document.createElement('script');s.type = 'text/javascript';s.async = true;s.src = 'js/yibujiaz.js';var x = document.getElementsByTagName('script')[0];x.parentNode.insertBefore(s, x);}if (window.attachEvent)window.attachEvent('onload', async_load);elsewindow.addEventListener('load', async_load, false);})(); </script> <script type="text/javascript">window.onload=function(){document.getElementById('div').innerHTML="onload完成"} </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>
總結
以上是生活随笔為你收集整理的浏览器渲染阻塞与优化-详解推迟加载、异步加载。的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 如何被蚊子叮咬后处理？
- 下一篇： js文件改变之后浏览器缓存问题怎么解决？