整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
何提升Web頁面的性能，很多開發人員從多個方面來下手如JavaScript、圖像優化、服務器配置，文件壓縮或是調整CSS。
很顯然HTML 已經達到了一個瓶頸，盡管它是開發Web 界面必備的核心語言。HTML頁面的負載也是越來越重。大多數頁面平均需要40K的空間,像一些大型網站會包含數以千計的HTML 元素，頁面Size會更大。
如何有效的降低HTML 代碼的復雜度和頁面元素的數量，本文主要解決了這個問題，從多個方面介紹了如何編寫簡練，清晰的HTML 代碼，能夠使得頁面加載更為迅速，且能在多種設備中運行良好。
在設計和開發過程中需要遵循以下原則：
HTML,CSS 和JavaScript三者的關系
HTML 是用于調整頁面結構和內容的標記語言。HTML 不能用于修飾樣式內容，也不能在頭標簽中輸入文本內容，使代碼變得冗長和復雜，相反使用CSS 來修飾布局元素和外觀比較合適。HTML元素默認的外觀是由瀏覽器默認的樣式表定義的，如在Chrome中h1標簽元素會渲染成32px的Times 粗體。
三條通用設計規則：
文檔結構方面也可以做優化，如下：
<!DOCTYPE html> <html> <head> <title>Recipes: pesto</title> </head> <body> <h1>Pesto</h1> <p>Pesto is good!</p> </body> </html>
<head> <title>My pesto recipe</title> <link rel="stylesheet" href="/css/global.css"> <link rel="stylesheet" href="css/local.css"> </head>
使用這兩種方法，瀏覽器會在解析HTML代碼之前將CSS信息準備好。因此有助于提升頁面加載性能。
在頁面底部body結束標簽之前輸入JavaScript代碼，這樣有助于提升頁面加載的速度，因為瀏覽器在解析JavaScript代碼之前將頁面加載完成，使用JavaScript會對頁面元素產生積極的影響。
<body> ... <script src="/js/global.js"> <script src="js/local.js"> </body>
使用Defer和async屬性，腳本元素具有async 屬性無法保證會按順序執行。
可在JavaScript代碼中添加Handlers。千萬別加到HTML內聯代碼中，比如下面的代碼則容易導致錯誤且不易于維護：
index.html:
<head> ... <script src="js/local.js"> </head> <body onload="init()"> ... <button onclick="handleFoo()">Foo</button> ... </body>
下面的寫法比較好：
index.html:
<head> ... </head> <body> ... <button id="foo">Foo</button> ... <script src="js/local.js"> </body>
js/local.js:
init();
var fooButton =
document.querySelector('#foo');
fooButton.onclick = handleFoo();
驗證
優化網頁的一種方法就是瀏覽器可處理非法的HTML 代碼。合法的HTML代碼很容易調試，且占內存少，耗費資源少，易于解析和渲染運行起來更快。非法的HTML代碼讓實現響應式設計變得異常艱難。
當使用模板時，合法的HTML代碼顯得異常重要，經常會發生模板單獨運行良好，當與其他模塊集成時就報各種各樣的錯誤，因此一定要保證HTML代碼的質量，可采取以下措施：
代碼格式
格式一致性使得HTML代碼易于閱讀，理解，優化，調試。
語義標記
語義指意義相關的事物，HTML 可從頁面內容中看出語義：元素和屬性的命名一定程度上表達了內容的角色和功能。HTML5 引入了新的語義元素，如<header>，<footer>及<nav>。
選擇合適的元素來編寫代碼可保證代碼的易讀性：
例如：
<div>Name: <input type="text" id="name"></div>
換種寫法會更好：
1: <div> 2: <label for="name">Name:</label><input type="text" id="name"> 3: </div>
布局
要提高HTML代碼的性能，要遵循HTML 代碼以實現功能和為目標，而不是樣式。
CSS
雖然本文講解的是如何優化HTML，下面介紹了一些使用css的基本技能：
以上就是本文介紹的優化HTML代碼的技巧，一個高質量高性能的網站，往往取決于對細節的處理，因此我們在日常開發中，能夠考慮到用戶體驗，后期維護等方面，則會產生更高效的開發。
個經常被忽視的網站性能瓶頸發生在處理級聯樣式表和隨后在網頁的文檔對象模型中應用 CSS 選擇器。為了加快網頁的渲染速度并改善最終用戶體驗，請考慮以下五個 CSS 性能優化技巧。
1. 使用內聯樣式
如果給定樣式僅用于單個特定頁面元素（例如圖像滑塊或輪播）并且該組件僅用于站點中的少數頁面，請使用內聯樣式而不是通用加載的 CSS 文件。這不僅會減少外部樣式表的大小，還會減少在不使用該組件的頁面上發生的 CSS 選擇器評估的數量。
2. 使用特定的樣式
不要將樣式應用于通用選擇器、后代選擇器和頂級 HTML 元素。這樣做會觸發許多布爾評估。相反，通過選擇更細粒度的元素（例如單個類樣式）來優化 CSS 性能。
3. 使用 WebComponents 優化 CSS
WebComponents 是自包含的，減少了對共享 CSS 和 JavaScript 的需求，WebComponents 框架是一種相對較新的基于標準的方法，用于創建可重用組件，其中 JavaScript 和樣式是自包含和隔離的。當你將組件所需的樣式保留在全局共享的 CSS 文件之外時，你不會看到對站點的其他區域的性能影響，因為未使用的樣式應用程序會不必要地消耗時鐘周期。
4. 拆分你的 CSS 文件
如果你的許多 CSS 文件是針對特定瀏覽器或設備定制的，請將這些樣式分解為多個 CSS 文件。在運行時，僅加載必要的那些。
這個 CSS 性能優化技巧將需要一些客戶端 JavaScript 或服務器端處理來完成，但對用戶的好處將值得付出額外的努力。
例如，如果移動和桌面呈現顯著不同，這可能會在每種設備類型上將文檔對象模型 (DOM) 評估的數量減少 50%。
5. 減小 DOM 的大小
用于拆分 CSS 文件的技巧也可用于減小 DOM 的大小。
另一個 CSS 性能優化技巧類似于將 CSS 文件拆分為多個特定于設備的文件。相反，你還可以縮小網頁本身的大小，減少 HTML 中 DOM 元素的數量，從而加快客戶端渲染速度。
但是，處理 CSS 的問題不僅在于需要應用于頁面的樣式數量，還在于實際頁面上的 DOM 元素數量。許多采用響應式設計的現代網頁會在每個頁面請求上加載 HTML 源代碼，以實現移動和桌面體驗。相反，使用客戶端 JavaScript 甚至服務器端技術來確保不會將多余的 HTML 加載到永遠不會使用它的頁面上。這可以顯著減少 DOM 大小以及頁面需要經過的樣式表評估次數。
樣式表是現代網站開發人員最好的朋友，但它們通常會帶來隱藏的性能成本。遵循這五個 CSS 性能優化建議，減少 CSS 選擇器成為網站性能瓶頸的可能性。想往前端發展的小伙伴建議參加Web前端培訓來學習前端技術，有系統規范的課程，有經驗豐富的專業講師面授指導教學，能在短時間內學有所成。
了解更多
化CSS需要一個多維的方法。雖然手工編寫的代碼可以使用各種技術進行簡化，但是手工檢查框架代碼是低效的。在這些情況下，使用自動化的簡化會產生更好的結果。
下面的步驟將帶我們進入 CSS 優化的世界。并不是每一個都可以直接應用到你的項目中，但是一定要記住它們。
01. 使用簡寫
使用縮寫語句，如下面所示的 margin 聲明，可以從根本上減小 CSS 文件的大小。在 google 上搜索 CSS Shorthand 可以找到許多其他的速記形式。
p { margin-top: 1px;
margin-right: 2px;
margin-bottom: 3px;
margin-left: 4px; }
p { margin: 1px 2px 3px 4px; }
02. 查找并刪除未使用的 CSS
刪除不必要的部分 CSS，j顯然會加快網頁的加載速度。谷歌的Chrome瀏覽器有這種開箱即用的功能。只需轉到查看>開發人員>開發人員工具，并在最近的版本中打開Sources選項卡，然后打開命令菜單。然后，選擇Show Coverage，在Coverage analysis窗口中高亮顯示當前頁面上未使用的代碼，讓您大開眼界。
03. 以更便捷的方式做到這一點
在逐行分析中導航并不一定便捷，使用谷歌瀏覽器的 Audits 就可以快速幫我們分析，使用方式，打開開發者工具，點擊 Audits 欄位，點擊 Run audits 后就開始分析結果。
04. 注意這些問題
加載外部樣式表需要花費時間，這是由于延遲造成的——因此，可以把最關鍵的代碼位放在 head 中。但是，請確保不要做得過火，記住，執行維護任務的人員也必須讀取代碼。
<html>
<head>
<style>
.blue{color:blue;}
</style>
</head>
<body>
<p class="blue">
Hello, world!
</p>
06.允許反并行解析
@import 將 CSS 樣式方便添加代碼中。遺憾的是，這些好處并不是沒有代價的:由于 @import 可以嵌套，因此無法并行解析它們。更并行的方法是使用一系列 <link> 標記，瀏覽器可以立即獲取這些標記。
@import url("a.css");
@import url("b.css");
@import url("c.css");
<link rel="stylesheet" href="a.css">
<link rel="stylesheet" href="b.css">
<link rel="stylesheet" href="c.css">
07. 用 CSS 替換圖片
幾年前，一套半透明的 png 在網站上創建半透明效果是司空見慣的?，F在，CSS過 濾器提供了一種節省資源的替代方法。例如，以下這個代碼片段可以確保所討論的圖片顯示為其自身的灰度版本。
img {
-webkit-filter: grayscale(100%);
/* old safari */
filter: grayscale(100%);
}
08.使用顏色快捷方式
常識告訴我們，六位數的顏色描述符是表達顏色最有效的方式。事實并非如此——在某些情況下，速記描述或顏色名稱可以更短。
target { background-color: #ffffff; }
target { background: #fff; }
09. 刪除不必要的零和單位
CSS 支持多種單位和數字格式。它們是一個值得感謝的優化目標——可以刪除尾隨和跟隨的零，如下面的代碼片段所示。此外，請記住，零始終是零，添加維度不會為包含的信息附帶價值。
padding: 0.2em;
margin: 20.0em;
avalue: 0px;
padding: .2em;
margin: 20em;
avalue: 0;
10. 消除過多分號
這種優化需要謹慎，因為它會影響代碼的更改。CSS的規范允許省略屬性組中的最后一個分號。由于這種優化方法所節省的成本很小，所以我們主要針對那些正在開發自動優化的程序員說明這一點。
p {. . . font-size: 1.33em}
11.使用紋理圖集
由于協議開銷的原因，加載多個小圖片的效率很低。CSS 精靈將一系列小圖片組合成一個大的PNG 文件，然后通過 CSS 規則將其分解。TexturePacker （https://www.codeandweb.com/texturepacker）等程序大大簡化了創建過程。
.download {
width:80px;
height:31px;
background-position: -160px -160px
}
.download:hover {
width:80px;
height:32px;
background-position: -80px -160px
}
12. 省略 px
提高性能的一個簡單方法是使用CSS標準的一個特性。為 0 的數值默認單位是 px—— 刪除 px 可以為每個數字節省兩個字節。
h2 {padding:0px; margin:0px;}
h2 {padding:0; margin:0}
13. 避免需要性能要求的屬性
分析表明，一些標簽比其他標簽更昂貴。以下這些解析會影響性能—如果在沒有必要的情況，盡量不要使用它們。
border-radius
box-shadow
transform
filter
:nth-child
position: fixed;
14. 刪除空格
空格——考慮制表符、回車符和空格——使代碼更容易閱讀，但從解析器的角度看，它沒有什么用處。在發布前刪除它們，更好的方法是將此任務委托給 shell 腳本或類似的工具。
15. 刪除注釋
注釋對編譯器也沒有任何作用。創建一個自定義解析器，以便在發布之前刪除它們。這不僅節省了帶寬，而且還確保攻擊者和克隆者更難理解手頭代碼背后的思想。
16. 使用自動壓縮
Yahoo 的用戶體驗團隊創建了一個處理許多壓縮任務的應用程序。它以 JAR 文件的形式發布，可在此處獲得（http://yui.github.io/yuicompressor/），并且可以使用所選的JVM運行。
java -jar yuicompressor-x.y.z.jar
Usage: java -jar yuicompressor-x.y.z.jar
[options] [input file]
Global Options
-h, --help Displays this
information
--type <js|css> Specifies the
type of the input file
17. 在 NPM 運行它
如果你希望將產品集成到 Node.JS 中，請訪問 npmjs.com/package/yuicompressor。維護不良的存儲庫包含一組包裝器文件和JavaScript API。
var compressor = require('yuicompressor');
compressor.compress('/path/to/
file or String of JS', {
//Compressor Options:
charset: 'utf8',
type: 'js',
18. 保持 Sass 的檢查
雖然 CSS 選擇器的性能不像幾年前那么重要(請參閱參考資料)，但是像 Sass 這樣的框架有時會產生非常復雜的代，不時查看輸出文件，并考慮優化結果的方法。
什么是Sass？(https://www.creativebloq.com/web-design/what-is-sass-111517618)
19. 設置緩存
有句老話說，最快的文件永遠不會通過網絡發送。讓瀏覽器緩存請求有效地實現這一點。遺憾的是，緩存頭的設置必須在服務器上進行。充分上面講的的兩個 Chrome 工具，它們提供了一種快速分析更改結果的方法。
20. 打破緩存
設計人員通常不喜歡緩存，因為他們擔心瀏覽器會緩存上次的樣式表。解決這個問題的一個簡單方法是包含帶有文件名的標記。遺憾的是，由于一些代理拒絕緩存具有“動態”路徑的文件，此步驟所附帶的代碼中概述的方案并不適用于所有地方。
<Link rel="stylesheet" href="style.css?v=1.2.3">
21. 不要忘記基礎知識
優化CSS只是游戲的一部分。如果你的服務器不使用 HTTP/2 和 gzip 壓縮，那么在數據傳輸期間會損失很多時間。幸運的是，解決這兩個問題通常很簡單。我們的示例顯示了對常用Apache 服務器的一些調整。如果您發現自己在一個不同的系統上，只需參考服務器文檔即可。
pico /etc/httpd/conf/httpd.conf
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/css
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
