網站構建的黃金守則有哪些

這篇文章主要介紹網站構建的黃金守則有哪些，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

1、盡量減少HTTP請求
當用戶載入你的頁面時候，有80%的時間是用來下載頁面里各個項目，包括圖片、樣式、腳本、FLash等。所以減少HTTP請求就可以提高響應速度。例如：baidu、google，就一個條條在那里......
像大家都知道的合并文件，CSS Sprite等，我想說的是：并不是一味的追求減少請求，而是要權衡這么做之后，對于其他因素的影響。
合并文件：耦合大，無法一眼辨別各個功能模塊。
CSS Sprite：大量整合的圖片對于改版這樣的維護，難度會幾何增長。
　　　　　　另外超大的整合圖片下載完之前，用到它的地方都會不顯示。

2、減少DNS查找次數
每一個獨立域名都會有一個對應的IP地址，也就是說，當你輸入www.baidu.com時候，服務器不會知道你要找的是“baidu”，而是解析成對應的IP地址，然后再訪問。類似你查找電話本一樣，這個解析的過程，瀏覽器就在那傻等著，一般會花費20到120毫秒時間。
DNS查找次數也就是你下載CSS、JS、圖片等所訪問的不同域名的總數，包括子域名。和主域名不同的外域名會消耗更多的時間。
解決辦法：CSS去解決一些圖片樣式，及JS動畫（CSS3的NB地方）。
　　　　　將可移植的外域資源放在子域名下。

3、避免跳轉
跳轉是使用301和302代碼實現的，例如下面的HTTP請求頭中：
　  HTTP/1.1 301 Moved Permanently
      Location: http://example.com/newuri
      Content-Type: text/html
瀏覽器會把用戶指向到Location中指定的URL下，其中如需緩存需要指定Expires或Cache-Control
雖然JS可以實現跳轉，但是為了保證后退按鈕好使，還是老實用3XX狀態碼這種方式。
這一部分好像對純前端沒啥關系或是接觸不太多，但是為了成長成真正NB的前端，早晚這些都得掌握。

4、可緩存AJAX
緩存對于用戶來說的意義大家都懂的，所以ajax里必然少不了緩存的功能。
但我想說的是要根據需求來確定是否緩存。
其中IE自動添加緩存，而chrome卻不是。
下面羅列一下常用清除緩存的辦法：
    在服務器端header("Cache-Control:no-cache,must-revalidate");
    在ajax發送請求前加上xmlhttpObj.setRequestHeader("If-Modified-Since","0");
    在ajax發送請求前加上xmlhttpObj.setRequestHeader("Cache-Control","no-cache");
    再ajax的URL參數后面加上?t="Math.random()";

5、推遲加載內容
網頁的表現和行為要分開，先表現，后行為。所以，第一要務是迅速將頁面呈現出來，然后一些必要的功能交互，再然后是一些動畫或是提升體驗的花哨效果。

6、預加載
預加載的目標：利用異步或是瀏覽器空閑時間，加載即將使用到的內容，達到迅速響應用戶操作的目的。
例如：
頁游中，空閑時間加載下一場景的所需圖片。
頁面中的JS，利用img對象預加載js，然后按需執行。

7、減少DOM元素個數
一個復雜的頁面意味著需要下載更多數據，同時也意味著JavaScript遍歷DOM的效率越慢。
解決辦法：深入理解各個標簽的語義，減少為了布局而大量羅列的DIV。

8、根據域名劃分頁面內容
一個頁面加載的時候會下載很多外部資源，例如CSS、JS、IMG等，然而把他們或按分類，分布在不同的子域名下會提高DNS并行的下載效率。
因為瀏覽器所允許的最多連接數和每個服務器所允許的最大連接數是有一定限制的

9、避免404
HTTP的消耗是巨大，讓它來請求一個響應一個404是完全沒有必要的。
例外，對站點的SEO也不利，有些網站的rabots.txt即使沒有限制，也應該上傳一個空文件，如果沒有，會讓引擎爬蟲記錄下你站點的一個404，從而降低你站點的權重。

以上是“網站構建的黃金守則有哪些”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！