A. 如何做好網站前端優化
一. 清理 HTML 文檔
二. 優化 CSS 性能
三.減少外部HTTP請求
四. 壓縮 CSS, JS 和 HTML
五. 使用預先獲取
六. 使用 CDN 和緩存提高速度
七. 壓縮文件
八. 優化你的圖片
九. 使用輕量級框架
十.前端優化 – 總結
進行前端優化似乎需要花費很大的精力，相信這篇應用指南中的一些小技巧能幫你極大改善網站載入速度。網站載入地越快，則用戶體驗越佳。因此, 對前端進行優化能使給你和你的用戶都帶來益處。如果你有任何其他好的優化方法，請在評論區留下您的寶貴建議。
B. html如何對網站的文件和資源進行優化
1. 確保網站信息描述全站統一
2. 清楚網站內部無效重復的信息
3. 讓用戶能迅速准確的在網站查看相關內容
4. 優化內部結構便於搜索引擎的理解和收錄
為了達到以上這幾個效果，我們一般會採取幾種方法：關鍵詞優化，網站頁面優化，內部結構信息優化和如何提高網頁的友好度和用戶體驗效果。
C. Web前端應該從哪些方面來優化網站
前端是龐大的，包括 HTML、 CSS、 Javascript、Image 、Flash等等各種各樣的資源。前端優化是復雜的，針對方方面面的資源都有不同的方式。那麼，前端優化的目的是什麼 ?
1. 從用戶角度而言，優化能夠讓頁面載入得更快、對用戶的操作響應得更及時，能夠給用戶提供更為友好的體驗。
2. 從服務商角度而言，優化能夠減少頁面請求數、或者減小請求所佔帶寬，能夠節省可觀的資源。
總之，恰當的優化不僅能夠改善站點的用戶體驗並且能夠節省相當的資源利用。
前端優化的途徑有很多，按粒度大致可以分為兩類，第一類是頁面級別的優化，例如 HTTP請求數、腳本的無阻塞載入、內聯腳本的位置優化等 ;第二類則是代碼級別的優化，例如 Javascript中的DOM 操作優化、CSS選擇符優化、圖片優化以及 HTML結構優化等等。另外，本著提高投入產出比的目的，後文提到的各種優化策略大致按照投入產出比從大到小的順序排列。
一、頁面級優化
1. 減少 HTTP請求數
這條策略基本上所有前端人都知道，而且也是最重要最有效的。都說要減少 HTTP請求，那請求多了到底會怎麼樣呢 ?首先，每個請求都是有成本的，既包含時間成本也包含資源成本。一個完整的請求都需要經過 DNS定址、與伺服器建立連接、發送數據、等待伺服器響應、接收數據這樣一個 「漫長」 而復雜的過程。時間成本就是用戶需要看到或者 「感受」 到這個資源是必須要等待這個過程結束的，資源上由於每個請求都需要攜帶數據，因此每個請求都需要佔用帶寬。另外，由於瀏覽器進行並發請求的請求數是有上限的 (具體參見此處 )，因此請求數多了以後，瀏覽器需要分批進行請求，因此會增加用戶的等待時間，會給用戶造成站點速度慢這樣一個印象，即使可能用戶能看到的第一屏的資源都已經請求完了，但是瀏覽器的進度條會一直存在。
減少 HTTP請求數的主要途徑包括：
(1). 從設計實現層面簡化頁面
如果你的頁面像網路首頁一樣簡單，那麼接下來的規則基本上都用不著了。保持頁面簡潔、減少資源的使用時最直接的。如果不是這樣，你的頁面需要華麗的皮膚，則繼續閱讀下面的內容。
(2). 合理設置 HTTP緩存
緩存的力量是強大的，恰當的緩存設置可以大大的減少 HTTP請求。以有啊首頁為例，當瀏覽器沒有緩存的時候訪問一共會發出 78個請求，共 600多 K數據 (如圖 1.1)，而當第二次訪問即瀏覽器已緩存之後訪問則僅有 10個請求，共 20多 K數據 (如圖 1.2)。 (這里需要說明的是，如果直接 F5刷新頁面的話效果是不一樣的，這種情況下請求數還是一樣，不過被緩存資源的請求伺服器是 304響應，只有 Header沒有Body ，可以節省帶寬 )
怎樣才算合理設置 ?原則很簡單，能緩存越多越好，能緩存越久越好。例如，很少變化的圖片資源可以直接通過 HTTP Header中的Expires設置一個很長的過期頭 ;變化不頻繁而又可能會變的資源可以使用 Last-Modifed來做請求驗證。盡可能的讓資源能夠在緩存中待得更久。
D. 常見的前端性能優化手段都有哪些都有多大收益
規則01：盡量減少HTTP請求
前端優化的黃金准則指導著前端頁面的優化策略：只有10%-20%的最終用戶響應時間花在接受請求的HTML文檔上，剩下的80%-90%時間花在為HTML文檔所引用的所有組件（圖片、腳本、樣式表等）進行的HTTP請求上。因此，改善響應時間的最簡單途徑就是減少組件的數量，並由此減少HTTP請求的數量。當然很多人就會說，既然這樣，那我們就減少頁面組件的數量不就OK了嗎？那你試試，你會掀起一場性能優化和產品設計之間的大PK。
所以，我們要減少HTTP請求是要平衡性能和設計的。如果找到這個平衡點呢？書中從以下幾個方面做了介紹，我逐一說明：
① 圖片地圖
初看「圖片地圖」四個字，對非專業的前端人員來說一頭霧水，我的第一印象就是這樣的，咱們以京東的移動站點為例，右側用戶和購物車的圖標，正常實現我會選擇如下方式：
<a href=」用戶跳轉頁面URL」>
<div class=」定義用戶icon顯示的樣式表」></div>
</a>
<a href=」購物車跳轉頁面URL」>
<div class=」 定義用戶icon顯示的樣式表」></div>
</a>
這種方式無可厚非的，但是兩張圖片就有兩個HTTP請求，這明顯是增加了頁面中的HTTP請求。那麼我們可以把這兩個HTTP請求變成一個嗎？
答案當然是可以的，這就是圖片地圖：允許在一張圖片上關聯多個URL，而目標URL的選擇取決於用戶單擊了圖片上的哪個位置。
這樣上面京東兩個圖標合並成一張圖片，這樣圖片的HTTP請求就減少了一個。
示例代碼如下：
<img src=合並後的圖片>
<map name=」map1」>
<areashape=」rect」 coords=」0,0,40,40」 href=」用戶跳轉頁面URL」>
<areashape=」rect」 coords=」50,0,90,40」 href=」購物車跳轉頁面URL」>
</map>
不過圖片地圖只支持矩形形狀，其他形狀不支持。
② 請CSS喝「雪碧」（CSS Sprites）CSS Sprites一句話：將多個圖片合並到一張單獨的圖片，這樣就大大減少了頁面中圖片的HTTP請求。
③ 內聯圖片和腳本使用data:URL（Base64編碼）模式直接將圖片包含在Web頁面中而無需進行HTTP請求。但是此種方法存在明顯缺陷：- 不受IE的歡迎；- 圖片太大不宜採用這種方式，因為Base64編碼之後會增加圖片大小，這樣頁面整體的下載量會變大；- 內聯圖片在頁面跳轉的時候不會被緩存。（大圖片可以使用瀏覽器的本地緩存，在首次訪問的時候保存到瀏覽器緩存中，典型的是HTML5的manifest緩存機制以及LocalStorage等）。
④ 樣式表的合並將頁面樣式定義、腳本、頁面本身代碼嚴格區分開，但是樣式表、腳本也不是分割越細越好，因為沒多引用一個樣式表就增加一次HTPP請求，能合並的樣式表盡量合並。一個網站有一個公用樣式表定義，每個頁面只要有一個樣式表就OK啦。
通過以上四個努力之後，你會發現你的網頁響應時間最多能減少一半，這不是作者說大話，也不是我狂吹，我親手用我的移動網站首頁做了一個嘗試，本地測試之後響應時間能減少40%左右。所以減少頁面HTTP請求數量，是一個很重要的原則。遵循此原則可以同時改善首次訪問和後續訪問的響應時間，而每一個網站的首次響應時間會決定用戶之後還來不來的重要原因。
規則02：使用內容發布網路（CDN的使用）
什麼叫內容發布網路（CDN）？它是一組分布在多個不同地理位置的Web伺服器，用於更加有效地向用戶發布內容。主要用於發布頁面靜態資源：圖片、css文件、js文件等。如此，能輕易地提高響應速度。關於CDN的具體詳細原理以及優缺點，各位可以自行詢問度娘或者google。
規則03：添加Expires頭
瀏覽器使用緩存來減少HTTP請求的數據，並減小HTTP響應的大小，使頁面載入更快。Web伺服器使用Expires頭來告訴瀏覽器它可以使用一個組件的當前副本，直到指定的deadline為止。HTTP規范中稱此頭為：在這一時間之後響應被認為失效。個人對這塊表示不想使用，其實就是一句話，把一些css、js、圖片在首次訪問的時候全部緩存到瀏覽器本地，從我做移動網站的過程中發現，其實沒有這么復雜，完全可以使用HTML5提供的本地緩存機制就OK了。關於HTML5本地緩存機制，各位可以查閱相關資料。後續我也會對HTML5的緩存機制進行介紹的。
規則04：壓縮組件（使用Gzip方式）
書中關於壓縮從gzip壓縮方式到如何壓縮講了很多，我想直接跳過，對於做PC網站或者移動網站來說，急需要壓縮的是css文件和js文件，至於如何壓縮，網上有很多在線工具，去挑選一個自己用的順手看的順眼的就好，當然也有人選擇對HTML進行壓縮，這樣也可以。但是實際工作中我沒有這么做。之所謂沒有這么做，是因為我覺得很麻煩。不要鄙視我，畢竟我不是一個真正意義上的前端工程師，哈哈！
規則05：將CSS樣式表放在頂部
如果將css樣式定義放在頁面中或者頁面底部，會出現短暫白屏或者某一區域短暫白板的情況，這和瀏覽器的運營機制有關的，不管頁面如何載入，頁面都是逐步呈現的。所以在每做一個頁面的時候，用Link標簽把每一個樣式表定義放在head中。
規則06：將javascript腳本放在底部
瀏覽器在載入css文件時，頁面逐步呈現會被阻止，直到所有css文件載入完畢，所以要把css文件的引用放到head中去，這樣在載入css文件時不會組織頁面的呈現。但是對於js文件，在使用的時候，它下面所有也頁面內容的呈現都會被阻塞，將腳本放在頁面越靠下的地方，就意味著越多的內容能夠逐步呈現。
規則07：避免使用CSS表達式
CSS表達式是動態玩CSS的一種很強大的方式，但是強大的同時也存在很高的危險性。因為css表達式的頻繁求值會導致css表達式性能低下。如果真想玩css表達式，可以選用只求值一次的表達式或者使用事件處理來改變css的值。
規則08：使用外部javascript和CSS內聯js和css其實比外部文件有更快的響應速度，那為什麼還要用外部呢？因為使用外部的js和css可以讓瀏覽器緩存他們，這樣不僅HTML文檔大小減少，而且不會增加HTTP請求數量。另外，使用外部js和css可以提高組件的可復用性。
規則09：減少DNS查詢
DNS查詢有時間開銷，通常一個瀏覽器查找一個給定主機名的IP地址需要20-120ms。緩存DNS：緩存DNS查詢可以很好地提高網頁性能，一旦緩存了DNS查詢，之後對於相同主機名的請求就無需進行再次的DNS查找，至少短時間內不需要。所以在使用頁面中URL、圖片、js文件、css文件等時，不要使用過多不同的主機名。
規則10：精簡javascript
如何精簡？
其實W3Cfuns已經給大家准備好精簡JS所需的所有工具「前端神器」，這點W3Cfuns為大家做的很不錯，在這個規則里我們就用到「JS壓縮/混淆/美化工具」
最初始的精簡方式：就是移除不必要的字元減小js文件大小，改善載入時間。包括所有的注釋、不必要的空白字元。
高級一點的精簡方式就是：混淆。
它不但會移除不必要的字元，還會改寫代碼，比如函數和變數的名字會被改成很短的字元串，這樣使js代碼更簡練更難閱讀。
但是我一般很少使用混淆，一個現在互聯網時代，代碼沒有必要整的那麼神秘，大可以大家一起share，天下代碼一起抄，只要抄出自己的特色就ok了。
而且一旦使用混淆，對於js代碼的維護和調試都很復雜，因為有時候混淆之後的js代碼完全看不懂。其實實際開發過程中，從文件大小和代碼可復用性來說，不僅僅是js代碼需要精簡，css代碼一樣也很需要精簡。
規則11：避免重定向
重定向的英文是Redirect，用於將用戶從一個URL重新跳轉到另一個URL。
最常見的Redirect就是301和302兩種。
關於重定向的性能影響這里就不說了，自行查閱相關資料吧。
在我們實際開發中避免重定向最簡單也最容易被忽視的一個問題就是，設置URL的時候，最後的「/」，有些人有時候會忽略，其實你少了「/」，這時候的URL就被重定向了，所以在給頁面鏈接加URL的時候切記最後的「/」不可丟。
規則12：刪除重復腳本
重復的js代碼除了有不必要的HTTP請求之外，還會浪費執行js的時間。
將你使用的js代碼模塊化，可以很好地避免這個問題，至於js模塊化如何實現，現在有很多可以使用的開源框架，我用的比較多的是我們公司玉伯的Sea.js。
規則13：配置ETag
Etag（Entity Tag），實體標簽，是Web伺服器和瀏覽器用戶確認緩存組件的有效性的一種機制。寫的很復雜，對我這種非專業的前端開發人員來說，有點過了，關於這個原則有興趣的自己看吧。
規則14：使Ajax可緩存
針對頁面中主動的Ajax請求返回的數據要緩存到本地，當然這個是針對短期內不會變化的數據。如果不確定數據變化周期的話，可以增加一個修改標識的判斷，我正常處理過程中會給一些Ajax請求返回的數據增加一個MD5值的判斷，每次請求會判斷當前MD5是否變化，如果變化了取最新的數據，如果不變化，則不變。
E. 如何進行前端優化
1.減少 HTTP 請求....
2.使用 HTTP2
3.使用服務端渲染
4.靜態資源使用 CDN
5.將 CSS 放在文件頭部，JavaScript 文件放 ...
6.使用字體圖標 iconfont 代替圖片圖標
7.善用緩存，不重復載入相同的資源
8.壓縮文件
9.圖片優化
(1).圖片延遲載入
(2). 響應式圖片
(3). 調整圖片大小
(4). 降低圖片質量
(5). 盡可能利用 CSS3 效果代替圖片
(6). 使用 webp 格式的圖片
10. 通過 webpack 按需載入代碼，提取第三庫代碼，減少 ES6 轉為 ES5 的冗餘代碼
11. 減少重繪重排
12. 使用事件委託
13. 注意程序的局部性
14. if-else 對比 switch
15. 查找表
16. 避免頁面卡頓
17. 使用 requestAnimationFrame 來實現視覺變化
18. 使用 Web Workers
19. 使用位操作
20. 不要覆蓋原生方法
21. 降低 CSS 選擇器的復雜性
(1). 瀏覽器讀取選擇器，遵循的原則是從選擇器的右邊到左邊讀取。
(2). CSS 選擇器優先順序
22. 使用 flexbox 而不是較早的布局模型
23. 使用 transform 和 opacity 屬性更改來實現動畫
24. 合理使用規則，避免過度優化
性能優化主要分為兩類：
載入時優化
運行時優化
F. 如何優化前端文件資源以提供頁面載入速度和響應速度
應該是跟普通網頁一樣的
提高網站速度的關鍵在於以下幾點：
1、縮小Javascript和CSS文件
2、減少HTTP請求
3、建議圖片、CSS和Javascript時間可設置為一個月
4、合並CSS引用圖片
5、只載入<head>部分的基本腳本
6、對圖像不失品質的情況下盡量壓縮
7、開啟gzip進行數據壓縮
G. 如何對前端性能進行優化
前端開發代碼優化、可維護性、瀏覽器兼容性是非常重要的課題。從實際的工程應用角度出發，最常遇見的前端優化問題。前端性能進行優化規則，基本可以涵蓋現在前端大部分的性能優化原則了，很多更加geek和精細優化方法都是從這些原則裡面延伸出來的。
前端性能進行優化都有哪些規則
減少HTTP請求次數
盡量合並圖片、CSS、JS。比如載入一個頁面有5個css文件的話，把這個5個文件合成一個的話，就只需要發出一次http請求，節省網路請求時間，加快頁面的載入。
2. 使用CDN
網站上靜態資源即css、js全都使用cdn分發，包括圖片
3. 避免空的src和href
當link標簽的href屬性為空、script標簽的src屬性為空的時候，瀏覽器渲染的時候會把當前頁面的URL作為它們的屬性值，從而把頁面的內容載入進來作為它們的值。所以要避免犯這樣的疏忽。
4. 為文件頭指定Expires
Exipres是用來設置文件的過期時間的，一般對css、js、圖片資源有效。 他可以使內容具有緩存性，這樣下回再訪問同樣的資源時就通過瀏覽器緩存區讀取，不需要再發出http請求。如下例子：
新浪微博的這個css文件的Expires時間是2016-5-04 09:14:14.
5. 使用gzip壓縮內容
gzip能夠壓縮任何一個文本類型的響應，包括html，xml，json。大大縮小請求返回的數據量。
6. 把CSS放到頂部
網頁上的資源載入時從上網下順序載入的，所以css放在頁面的頂部能夠優先渲染頁面，讓用戶感覺頁面載入很快。
7. 把JS放到底部
載入js時會對後續的資源造成阻塞，必須得等js載入完才去載入後續的文件 ，所以就把js放在頁面底部最後載入。
8. 避免使用CSS表達式
舉個css表達式的例子
font-color: expression( (new Date()).getHours()%3 ? 「#FFFFFF" : 「#AAAAAA" );
這個表達式會持續的在頁面上計算樣式，影響頁面的性能。並且css表達式只被IE支持。
9. 將CSS和JS放到外部文件中
目的是緩存文件，可以參考原則4。 但有時候為了減少請求，也會直接寫到頁面里，需根據PV和IP的比例權衡。
10. 權衡DNS查找次數
減少主機名可以節省響應時間。但同時，需要注意，減少主機會減少頁面中並行下載的數量。
IE瀏覽器在同一時刻只能從同一域名下載兩個文件。當在一個頁面顯示多張圖片時，IE 用戶的圖片下載速度就會受到影響。所以新浪會搞N個二級域名來放圖片。
下面是新浪微博的圖片域名，我們可以看到他有多個域名，這樣可以保證這些不同域名能夠同時去下載圖片，而不用排隊。不過如果當使用的域名過多時，響應時間就會慢，因為不用響應域名時間不一致。
11. 精簡CSS和JS
這里就涉及到css和js的壓縮了。比如下面的新浪的一個css文件，把空格回車全部去掉，減少文件的大小。現在的壓縮工具有很多，基本主流的前端構建工具都能進行css和js文件的壓縮，如grunt，glup等。
12. 避免跳轉
有種現象會比較坑爹，看起來沒什麼差別，其實多次了一次頁面跳轉。比如當URL本該有斜杠（/）卻被忽略掉時。例如，當我們要訪問http:// .com時，實際上返回的是一個包含301代碼的跳轉，它指向的是http:// .com/（注意末尾的斜杠）。在nginx伺服器可以使用rewrite；Apache伺服器中可以使用Alias 或者 mod_rewrite或者the DirectorySlash來避免。
另一種是不用域名之間的跳轉， 比如訪問http:// .com/bbs跳轉到http:// bbs..com/。那麼可以通過使用Alias或者mod_rewirte建立CNAME（保存一個域名和另外一個域名之間關系的DNS記錄）來替代。
13. 刪除重復的JS和CSS
重復調用腳本，除了增加額外的HTTP請求外，多次運算也會浪費時間。在IE和Firefox中不管腳本是否可緩存，它們都存在重復運算JavaScript的問題。
14. 配置ETags
它用來判斷瀏覽器緩存里的元素是否和原來伺服器上的一致。比last-modified date更具有彈性，例如某個文件在1秒內修改了10次，Etag可以綜合Inode(文件的索引節點(inode)數)，MTime(修改時間)和Size來精準的進行判斷，避開UNIX記錄MTime只能精確到秒的問題。 伺服器集群使用，可取後兩個參數。使用ETags減少Web應用帶寬和負載
15. 可緩存的AJAX
非同步請求同樣的造成用戶等待，所以使用ajax請求時，要主動告訴瀏覽器如果該請求有緩存就去請求緩存內容。如下代碼片段, cache:true就是顯式的要求如果當前請求有緩存的話，直接使用緩存
$.ajax({ url : 'url', dataType : "json", cache: true, success : function(son, status){ }
16. 使用GET來完成AJAX請求
當使用XMLHttpRequest時，瀏覽器中的POST方法是一個「兩步走」的過程：首先發送文件頭，然後才發送數據。因此使用GET獲取數據時更加有意義。
17. 減少DOM元素數量
這是一門大學問，這里可以引申出一堆優化的細節。想要具體研究的可以看後面推薦書籍。總之大原則減少DOM數量，就會減少瀏覽器的解析負擔。
18. 避免404
比如外鏈的css、js文件出現問題返回404時，會破壞瀏覽器的並行載入。
19. 減少Cookie的大小
Cookie裡面別塞那麼多東西，因為每個請求都得帶著他跑。
20. 使用無cookie的域
比如CSS、js、圖片等，客戶端請求靜態文件的時候，減少了 Cookie 的反復傳輸對主域名的影響。
21. 不要使用濾鏡
IE獨有屬性AlphaImageLoader用於修正7.0以下版本中顯示PNG圖片的半透明效果。這個濾鏡的問題在於瀏覽器載入圖片時它會終止內容的呈現並且凍結瀏覽器。在每一個元素（不僅僅是圖片）它都會運算一次，增加了內存開支，因此它的問題是多方面的。
完全避免使用AlphaImageLoader的最好方法就是使用PNG8格式來代替，這種格式能在IE中很好地工作。如果你確實需要使用AlphaImageLoader，請使用下劃線_filter又使之對IE7以上版本的用戶無效。
22. 不要在HTML中縮放圖片
比如你需要的圖片尺寸是50* 50
那就不用用一張500*500的大尺寸圖片，影響載入
23. 縮小favicon.ico並緩存
H. web前端網站性能優化怎麼優化引用文件位置
有一些插件需要引用到遠程的圖片、CSS、JS、圖標等，如果遠程的資源連接網速不佳，如國外的某些資源，會造成網頁阻塞，同樣也會造成頁面展示問題，盡量能把引用遠程的資源能本地化。推薦你去三人行慕課上學習，比較全面
I. 前端如何做好網站性能優化
前端開發需要做的就是網站搭建。網站搭建有2個細節需要注意，一是排版，二是鏈接，排版是為了不讓出現亂碼而做細節優化，鏈接是為了優化網頁之間的關系，就好比城鎮建設，每一座城市都要搭建的好，城與城之間的交通也要完善，這樣才有利於城區發展，網站也是一樣，每個網頁的內容和網頁之間的鏈接做好，網站優化也就好做了。