在方案上中我介紹了一些常見的網(wǎng)站加載速度優(yōu)化方案，今天看了一下幾個(gè)帖子的回復(fù)，有人說只要在頁面不放上大圖片就OK，看起來這句話是理所當(dāng)然的，其實(shí)并非如此，圖片對于整體頁面加載速度的影響是有區(qū)分的，大家看看下面一張圖：
這是我的博客中幾張img圖片加載情況，可以看到雖然延遲了onload的時(shí)間，但是絲毫不影響domcontentloaded事件發(fā)生，這是因?yàn)闉g覽器一般只對css中的圖片進(jìn)行阻塞，只有在css文件（包括background-image）全部加載完才會開始解析頁面，html中的img對此影響并不是特別的大，僅僅只是縮小圖片就認(rèn)為降低了頁面的加載速度并不是一個(gè)合理的說法，希望能對前面留言的朋友有幫助。接著上次說到的幾個(gè)加載速度優(yōu)化方法，我們再來看看剩下的幾點(diǎn)：
方法一
document.write(“外部js加載字符串”);//需要在dom結(jié)構(gòu)渲染完畢之前讀取到document.write，這也就是很多教程不推薦大家頻繁的使用document.write的原因之一
方法二
function loadScript(url, callback){ var script = document.createElement_x("script")//創(chuàng)建一個(gè)節(jié)點(diǎn) script.type = "text/javascript";//設(shè)置屬性 if (script.readyState){ //IE script.onreadystatechange = function(){ if (script.readyState == "loaded" || script.readyState == "complete"){ script.onreadystatechange = null; callback(); } }; } else { //Others script.onload = function(){ callback(); }; } script.src = url; document.body.appendChild(script);//添加新節(jié)點(diǎn) }
這是目前使用廣發(fā)的添加節(jié)點(diǎn)法，除了一個(gè)判斷ie之外沒有什么新東西，如果要做的更好，甚至可以先判斷時(shí)間再進(jìn)行執(zhí)行函數(shù)。除此之外還有不少其他非阻塞加載方法，例如根據(jù)時(shí)間詢問事件的可用性然后加載，defer加載等等，涉及篇幅就不逐一講解。
動手開始寫優(yōu)化網(wǎng)站加載速度這樣一篇文章時(shí)我完全沒有想到要寫這么多，只是想到哪就寫到哪，后來發(fā)現(xiàn)關(guān)于這方面的技術(shù)實(shí)在太多，如果事無巨細(xì)每個(gè)都拿出來細(xì)講那就肯定不是上下兩篇，估計(jì)得用一二三四來命名。如果有關(guān)于網(wǎng)站任何的疑問也可以來我的博客留言。
掃碼二維碼 獲取免費(fèi)視頻學(xué)習(xí)資料
- 本文固定鏈接: http://www.wangchenghua.com/post/4566/
- 轉(zhuǎn)載請注明：轉(zhuǎn)載必須在正文中標(biāo)注并保留原文鏈接
- 掃碼： 掃上方二維碼獲取免費(fèi)視頻資料