資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學如何編寫快速載入的HTML頁面？
我們可以透過多種方式最佳化我們的web應用程式，使我們的網頁載入速度更快，效率更高，這不僅可以減少web伺服器的負載，還可以提高網站的SEO排名。
讓我們討論一下最佳化網頁的不同方法，並透過示例來理解它們。
方法一：儘可能最小化檔案大小
檔案大小應儘可能最小化。這可以透過去除檔案中的不必要空格、刪除不必要的註釋和/或用外部樣式表文件和指令碼替換所有內聯樣式和指令碼實現。有很多線上工具可以幫助你實現這種最小化，例如HTML Tidy等。
讓我們討論一下下面的示例方法：
不良實踐
示例
<!DOCTYPE html>
<html lang="en">
<head>
<title>How to author fast-loading HTML pages?</title>
</head>
<body>
<!-- comment here -->
<h3>
How to author fast-loading HTML pages?
</h3>
</body>
</html>
良好實踐
示例
<!DOCTYPE html> <html lang="en"> <head> <title>How to author fast-loading HTML pages?</title> </head> <body> <h3>How to author fast-loading HTML pages?</h3> </body> </html>
方法二：減少使用的外部檔案數量
在我們的web應用程式中使用外部檔案意味著建立許多外部HTTP連線，因此需要等待其各自的請求-響應週期完成才能看到結果。
減少此類連線將有助於我們減少頁面載入的等待時間，並將減少HTTP請求的整體瀑布時間。我們可以實現這一點的一種方法是隻使用單個外部影像，而不是使用多個影像，然後將該影像用於我們所有不同的影像需求。我們可以調整單個影像並相應地定位它，以便只有影像的所需部分可見，其餘部分隱藏。
方法三：延遲載入影像資源
預設情況下，影像在web瀏覽器中是同步載入的。即使影像在螢幕上不可見，也會先獲取影像。我們可以透過延遲載入影像來避免這種情況，這意味著只有當影像在視口中可見時才載入影像。我們可以透過使用“img”HTML標籤的“loading”屬性並將其賦值為“lazy”來實現這一點。
不良實踐
示例
<!DOCTYPE html> <html lang="en"> <head> <title>How to author fast-loading HTML pages?</title> </head> <body> <h3>How to author fast-loading HTML pages?</h3> <img src="https://tutorialspoint.tw/static/images/logo-color.png" /> </body> </html>
良好實踐
示例
<!DOCTYPE html> <html lang="en"> <head> <title>How to author fast-loading HTML pages?</title> </head> <body> <h3>How to author fast-loading HTML pages?</h3> <img src="https://tutorialspoint.tw/static/images/logo-color.png" loading="lazy" /> </body> </html>
方法四：延遲或非同步載入外部指令碼
預設情況下，外部指令碼以阻塞方式載入，這意味著它們會阻塞程式碼的進一步執行，直到外部指令碼載入並獲取。我們可以透過非同步載入它們來避免這種情況，即並行載入它們，並且不阻塞程式碼的進一步執行，或者以延遲的方式載入它們，即只有在網頁載入完成後才載入它們。我們可以使用“async”和“defer”屬性來實現相同的效果。
不良實踐
示例
<!DOCTYPE html> <html lang="en"> <head> <title>How to author fast-loading HTML pages?</title> <script src="test.js"></script> </head> <body> <h3>How to author fast-loading HTML pages?</h3> </body> </html>
良好實踐
示例
<!DOCTYPE html> <html lang="en"> <head> <title>How to author fast-loading HTML pages?</title> <script src="test.js" defer></script> </head> <body> <h3>How to author fast-loading HTML pages?</h3> </body> </html>
方法五：顯式設定影像和表格的大小
顯式設定影像和表格的大小可以幫助瀏覽器快速載入它們，而無需重新調整內容。我們可以透過在影像中使用“height”和“width”屬性，在表格的情況下使用“table-layout”屬性來實現這一點。
不良實踐
示例
<!DOCTYPE html> <html lang="en"> <head> <title>How to author fast-loading HTML pages?</title> </head> <body> <h3>How to author fast-loading HTML pages?</h3> <img src="https://tutorialspoint.tw/static/images/logo-color.png" /> </body> </html>
良好實踐
示例
<!DOCTYPE html> <html lang="en"> <head> <title>How to author fast-loading HTML pages?</title> </head> <body> <h3>How to author fast-loading HTML pages?</h3> <img src="https://tutorialspoint.tw/static/images/logo-color.png" /> </body> </html>
方法六：如果可能，使用CDN
CDN代表內容分發網路，是一種以高效方式提供資源的有用工具。它們遍佈全球各地，可以幫助減少伺服器和客戶端之間的物理距離。距離的減少意味著資源載入更快，頁面載入時間減少。
結論
在本文中，我們瞭解到可以使用不同的方法編寫快速載入的HTML頁面。在第一種方法中，我們瞭解到我們應該透過刪除不必要的空格來最小化檔案大小；在第二種方法中，我們瞭解到我們應該減少對web應用程式中外部檔案資源的依賴；在第三種方法中，我們瞭解到我們應該延遲載入影像資源，以便除非在視口中，否則不會載入它們；在第四種方法中，我們學習了非同步或延遲載入外部指令碼；在第五種方法中，我們學習了設定影像和表格的大小；最後，我們學習了儘可能使用CDN來載入外部指令碼。
173 次瀏覽
