一個Web站點是否吸引人當然是由它的內部決定，但不管這個站點有多迷人，只要它的加載速度足夠長，就能完全讓訪客忽視掉這些別具一格的內容。這個觀點并不新穎，如今越來越多的開發者也注意到這一點，甚至也成為前端工程師必備的技能。聽著像是有些復雜，如果攤開這些影響加載速度的問題細致分析，對多數具備基本html知識的站長來說，掌握它們也并不是一件困難的事。
我們不妨這樣來考慮問題，一個頁面的加載究竟向服務端請求了哪些數據？不外乎HTML文檔、js腳本、css樣式、多媒體文件這幾樣，少數包括字體與其他插件，對于這些數據我們也不陌生，只需要弄清加載它們用的是什么方式然后再根據實際需要進行調整就能達到優化加載速度的目的。除此之外，一些服務器的選擇與配置也可能屬于我們優化的范疇，以此為基礎，我們展開下面的討論。
wittsay.cc的優化評分
我用自己的博客wittsay.cc給大家做了一個簡單的分析，現在可以看到幾乎都是滿分，其實在幾天前博客的加載還需要4-5秒，甚至還會出現卡死，我在并沒有削減頁面元素數量的情況下進行了優化，從而達到現在的效果。這里有一項提示將javascript放在外部得分不高(CSS得分項也是受此影響)，這是因為我使用了一種異步加載js的方法優化速度，也叫做非阻塞加載javascript，影響到這項的評分。不用擔心，非阻塞加載也很簡單我后面會逐一講到。
服務器。無論站點本身的代碼有多么優雅敏捷，采用了多少優化技術，服務器不夠好仍舊會成為站點加載速度的后腿。當然我并不是說一個小小的博客或企業站要選用多大的帶寬內存服務器，實際上夠用就好，市場上的服務器多數都能夠滿足個人站長的需求，在這上面吃虧的可能是一些香港或國外服務器。我自己也用過一些香港與國外的服務器，不管價格如何都不能與國內服務器的速度相提并論，而且相對來說穩定性也較差，如果一定要選用非備案服務器我還是推薦linode日本節點，相比于其他國外服務器它足夠的快，當然它也有不少缺點：雖然是vps，但價格甚至超過了一些國內的云服務器，而且近來22端口被封的太多，也難以保證穩定性。
域名解析。說實話在意DNS解析速度的都是一些大站點，個人站長很難在這上面有什么特殊要求，當然如果你是完美主義什么都要做到最好，還是可以百度一些目前的DNS排名作為參考。目前第一是近期被騰訊收購的DNSpod（wittsay.cc也在使用它）。
壓縮。Gzip壓縮一般自帶于服務器中，幾乎所有的web站點都開啟，這里主要介紹的是html、js、css還有圖片壓縮。也許你會說我有錢服務器空間大用都用不完，這也要壓縮？其實這和服務器本身的空間并沒有多少關系，瀏覽器在解析網頁時需要將各項數據從服務端請求下載，然后加以渲染，如果這些文件太多太大勢必會影響造成下載時間過長，對于用戶的感受就是漫長的等待。Html/js/css壓縮工具百度就可以找到，可以在不改變其代碼效果的同時進行壓縮，甚至也有一些在線網頁可以壓縮它們。Png/jpg我建議使用minipng這樣一款軟件，當然如果你習慣在線壓縮問題也不大。
請求次數。上面剛剛說到，如果瀏覽器對服務端請求下載數據過多過大就會影響用戶體驗，過大可以通過壓縮來解決，那么過多呢？就像我在文章開篇所說的，一個頁面請求的數據無外乎是html/js/css等等文件，想要縮小整個頁面的請求數量我們要做的無非就是將它們中間一些不常改變的進行合并。特別是一些js與css文件，將它們寫在外部的同時進行一些簡單的合并能夠有效的改善加載慢的問題。關于圖片，我還是推薦使用CSS Sprites技術，也就是將眾多頁面元素圖片合并在一起，然后通過位置來取用它們，這樣在頁面實際加載時僅僅只用向服務端請求一張圖片。CSS Sprites算不上是一種技術，只是CSS中的一個小小的知識點，只要花上5分鐘看一下教程相信大家都能掌握。
掃碼二維碼 獲取免費視頻學習資料
- 本文固定鏈接: http://www.wangchenghua.com/post/4565/
- 轉載請注明：轉載必須在正文中標注并保留原文鏈接
- 掃碼： 掃上方二維碼獲取免費視頻資料
查 看2022高級編程視頻教程免費獲取