目前已知且常用的網站優化_ZenDei技術網路在線

目前已知且常用的網站優化

-Advertisement-

1、將css放在頁面最上面，將js放在頁面最下麵 css放在頁面最上面可以防止頁面出現白屏、閃跳的現象，即減少頁面的首屏出現時間。js的下載和執行會阻塞Dom樹的構建（嚴謹地說是中斷了Dom樹的更新），所以script標簽放在首屏範圍內的HTML代碼段里會截斷首屏的內容。而且js中可能會對DOM節點 ...

1、將css放在頁面最上面，將js放在頁面最下麵

css放在頁面最上面可以防止頁面出現白屏、閃跳的現象，即減少頁面的首屏出現時間。js的下載和執行會阻塞Dom樹的構建（嚴謹地說是中斷了Dom樹的更新），所以script標簽放在首屏範圍內的HTML代碼段里會截斷首屏的內容。而且js中可能會對DOM節點進行操作，而這時代碼是自上向下進行執行的，這樣會造成js對相應的元素操作不了。所以js放在頁面的最下麵。

2、減少文件體積，去除不必要的空白符、格式符、註釋。

也就是減小文件占用記憶體，更快，更高效餓去載入網頁和腳本。

3、把js和css提取出來放在外部文件中

把js和css文件提取出來放在外部文件的優點是：減少html文件體積，提高了js和css的復用行，提高日後的可維護性。缺點時：增加了http請求。（js和css代碼比較少的時候，可以將js和css寫在頁面上）

4、避免重定向

重定向就是用戶請求的頁面被轉移到了別的地方，瀏覽器向服務請請求一個頁面，伺服器告訴瀏覽器請求的頁面已經被轉移到另外一個頁面，並告知另一個頁面地址，瀏覽器就再發送請求到重定向的地址。這樣會增加伺服器和瀏覽器之間的往返次數，影響網站性能。

5、移除重覆的腳本

6、減少DNS查詢

　　DNS查詢服務指功能變數名稱查找，指將請求的功能變數名稱轉化為對應的IP地址，就如姓名和門牌號的關係。如輸入www.baidu.com DNS系統會將此功能變數名稱轉化為119.75.217.109，然後將IP地址返回給瀏覽器，這個過程會花費一定的時間，影響頁面的載入，所以要儘可能減少DNS查詢。減少DNS查詢的方法有：緩存 DNS查找可以改善頁面性能，大多數瀏覽器有自己的緩存系統，緩存時間又不一致，緩存時間越長，DNS保存的時間越長。　　當客戶端中的 DNS緩存都為空時(瀏覽器和操作系統都為空)， DNS查找的次數和頁面中主機名的數量相同。這其中包括頁面中 URL、圖片、腳本文件、樣式表、Flash對象等包含的主機名。減少主機名的數量可以減少DNS查找次數。　　減少主機名的數量還可以減少頁面中並行下載的數量。減少 DNS查找次數可以節省響應時間，但是減少並行下載卻會增加響應時間。我的指導原則是把這些頁面中的內容分割成至少兩部分但不超過四部分。這種結果就是在減少 DNS查找次數和保持較高程度並行下載兩者之間的權衡了。

8、使用ajax緩存

ajax的get和post方法：只要是瀏覽器的get請求，瀏覽器都會使用緩存，對於同一地址的請求，伺服器會發送304狀態碼到瀏覽器，瀏覽器就會使用緩存中的數據 post的請求每次都會被執行，瀏覽器不會緩存

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

前端入門5-CSS彈性佈局flex

聲明本系列文章內容全部梳理自以下四個來源：《HTML5權威指南》《JavaScript權威指南》 "MDN web docs" "Github:smyhvae/web" 作為一個前端小白，入門跟著這四個來源學習，感謝作者的分享，在其基礎上，通過自己的理解，梳理出的知識點，或許有遺漏，或許有些理 ...
Vue.js-03：第三章 - 事件修飾符的使用

一、前言熟悉了 Vue 的指令系統後，在實際開發中，不可避免的會使用到對於事件的操作，如何處理 DOM 事件流，成為我們必須要掌握的技能。不同於傳統的前端開發，在 Vue 中給我們提供了事件修飾符這一利器，使我們可以便捷的處理 DOM 事件，本章，一起來學習如何使用事件修飾符來實現對於 DOM 事 ...
Dom對象的研究

1.邏輯運算 || && ！ 1||2 5&&4 ！0 || 遇到第一個為true 的數字就終止並返回 && 遇到第一個為false 的值就終止返回false 的值如果沒有false 就返回最後那個數 || 和&& 在一起 && 的優先順序比較高高於|| 2.作用域問題 1. js代碼如何讓執 ...
js 數據類型具體分析

複習點運算符 xxx.sss xxx是對象 sss是屬性和方法。任何數據類型都是擁有屬性和方法的。字元串 String var st=“hello world”.字元串的定義 A. var s="haha"； B var st=new String（“hello”）對象的形式定義1. 屬性 le ...
阻止頁面回退

1.使用場景：系統登錄退出後，跳轉到登錄頁面，登錄頁面點擊瀏覽器後退按鈕，頁面後退到之前登錄的頁面。在退出登錄後，禁止瀏覽器點擊後退按鈕，進行頁面回退； 2.使用場景：系統中嵌入iframe，映入其他頁面。當session失效時，點擊導航後，由於後臺做了登錄攔截，此時iframe中就會嵌入登錄頁 ...
前端學習之HTML（1）

HTML標簽學習 2018-10-31 記錄一下學習的網站 http://www.w3school.com.cn http://www.runoob.com/ 部分代碼例子引用於：http://www.w3school.com.cn ...
起名與選擇器~（總結類、持續更新系列）

廢話沒有，直接幹活一、起名方式：1.元素自身的標簽名； 2.利用 class 屬性自定義名稱； 3.利用 id 屬性自定義名稱。共三種，其中class使用居多。起名規範:不能用漢字起第一個字母不能是特殊符號第一個字母必須是英文字母。 ————————————————————————————— ...
Wavesurfer.js音頻播放器插件的使用教程

Wavesurfer.js是一款基於HTML5 canvas和Web Audio的音頻播放器插件，本文主要記錄它及其視覺效果插件Regions插件的使用方法。 1、創建實例引入插件創建實例對象 options | 參數 | 預設值 | 說明 | | : |: |: | | audioRate | ...