1. web開發從前端能通過哪些方式提供網頁的載入速度
一、使用良好的結構
可擴展 HTML (XHTML) 具有許多優勢，但是其缺點也很明顯。XHTML 可能使您的頁面更加符合標准，但是它大量使用標記（強制性的 <start> 和 <end> 標記），這意味著瀏覽器要下載更多代碼。所以，事情都有兩面性，嘗試在您的網頁中使用較少的 XHTML 代碼，以減小頁面大小。如果您確實不得不使用 XHTML，試著盡可能對它進行優化。
二、不要使布局超載
堅持簡約原則：少即是多。頁面中充斥著各種類型的圖像、視頻、廣告等，這大大違背實用性原則。
三、不要使用圖像來表示文本
使用圖像表示文本的最常見示例就是在導航欄中。美觀的按鈕更加具有吸引力，但是它們的載入速度很慢。此外，圖像仍然不能由搜索引擎直接索引，因此，使用圖像進行導航不利於搜索引擎優化（search engine optimization，SEO）。當無需圖像就可以通過大量 CSS 技巧創建漂亮的按鈕時，絕不使用圖像來表示文本。
四、檢查cookie使用情況
設置一個較早的 expire 日期或者根本不設置 expire 日期，會縮短響應時間。要在 PHP 語言中設置 cookie 的 expire 日期，使用以下代碼：
<?php
$expire = 2592000 + time();
// Add 30 day』s to the current time
setcookie(userid, 「123rrw3」, $expire);
?>
這段代碼設置 cookie userid，並將 expire 日期設置為自當前日期之後 30 天。
五、不要包含不必要的 JavaScript 代碼，盡可能將其外部化
應該明智地使用 JavaScript（僅在真正必要時才使用）並優化腳本的大小和速度。縮短 JavaScript 下載時間的另一種方式是使用外部文件，而不是包含腳本內聯。這種方法也適用於 CSS，因為瀏覽器會緩存外部化的文本，而（在 HTML 頁面自身中）以內聯方式編碼的 CSS 或 JavaScript 每次都會隨 HTML 一起載入。
六、盡可能避免使用表格
表格被用作網頁的主要構建塊，但是作為頁面布局元素，使用表格現在被認為是糟糕的做法。有時候，您必須使用表格（並且它們被認為是顯示表格數據的出色實踐）。如果是這樣，明確地指定表格單元格、行和列的寬度和高度，否則，瀏覽器必須執行許多操作來計算如何顯示它們，這會降低頁面載入速度。
七、刪除任何不必要的元素
可能這是所有技巧中最顯而易見的一個，但是它也是最容易忘記的一個技巧。如果您真正需要在網頁上放置許多內容，考慮將網頁分為 2 個、3 個或更多的獨立頁面。
八、一些優化網頁的技巧
可以使用許多方法來優化您的網頁，包括壓縮 JavaScript 文件，使用超文本傳輸協議（Hypertext Transfer Protocol，HTTP）壓縮，以及設置圖像大小。
九、壓縮和縮小 JavaScript 文件
您可以使用 GNU zip (gzip) 來完成此任務，因為許多瀏覽器都支持這種壓縮演算法。另一種替代方法是縮小文件。這種方法刪除代碼中所有不必要的字元，比如製表符（tab）、新行和空格。它刪除代碼中的注釋和空白，進一步縮小文件大小。外部和內部樣式表都可以縮小。兩種最流行的縮小工具是 JSMin 和 YUI Compressor。
十、使用 HTTP 壓縮，並始終使用小寫的 div 和類名
可以使用 HTTP 壓縮來減少伺服器與瀏覽器之間的通信量。可以在 Apache 中配置 HTTP 壓縮（.htaccess 文件），或者可以將其包含到頁面中（對於 PHP，可以使用一個 HTTP_ACCEPT_ENCODING 選項）。但是請注意：不是所有瀏覽器都支持壓縮。即使是支持壓縮的瀏覽器，壓縮和解壓縮都會加重處理器的負載。要在 Apache 中啟用地毯式（blanket）壓縮（即壓縮所有文本和 HTML），使用以下命令：
AddOutputFilterByType DEFLATE text/html text/plain text/xml
另外，考慮一下您想要壓縮的內容。圖像、音樂和視頻在創建時已經進行了壓縮，因此您可以將壓縮對象限制為 HTML、CSS 和 JavaScript 文件。另一種減少壓縮工作的技巧是使用小寫形式的 <div> 元素和類名。由於大小寫敏感性，並且使用的是無損壓縮，<header> 與 <Header> 不同，它們被壓縮為兩個不同的標記。
十一、設置圖像大小
與表格單元格、行和列一樣，當您未明確設置圖像大小時，瀏覽器需要執行計算來顯示圖像，這會降低處理速度。
十二、將 CSS 圖像映射用於裝飾功能
使用圖像映射代替多個圖像，這是另一種縮短載入時間的方式，因為同時下載圖像的各個獨立部分能夠加快整個頁面的下載進度。或者，您可以使用某種名為 CSS sprites 的工具。CSS sprites 可幫助減少 HTTP 請求的數量。一個圖像可以包含裝飾或布置頁面所需的所有圖像元素。您使用 CSS 來選擇（通過調用某些位置和維度）用於特定元素的映射。
十三、盡可能延遲腳本載入
一種提升頁面下載速度的潛在方式是將腳本放在頁面的底部，使頁面載入更迅速。通常，瀏覽器只能（從同一個域）下載不超過兩個並行對象，如果一個對象是一段 JavaScript 代碼，那麼在該腳本下載完之前，其他頁面組件的下載將會暫停。如果將 JavaScript 代碼放在頁面底部，（在大多數情況下）它將在最後下載，這時所有其他組件都已下載完。
十四、按需載入 JavaScript 文件
要按需載入 JavaScript，使用 import() 函數。
import() 函數：
function $import(src){
var scriptElem = document.createElement('script');
scriptElem.setAttribute('src',src);
scriptElem.setAttribute('type','text/javascript');
document.getElementsByTagName('head')[0].appendChild(scriptElem);
}
// import with a random query parameter to avoid caching
function $importNoCache(src){
var ms = new Date().getTime().toString();
var seed = "?" + ms;
$import(src + seed);
}
十五、驗證函數載入
也可以驗證一個函數是否被載入，如果沒有，載入 JavaScript 文件。
驗證函數是否被載入：
if (myfunction){
// The function has been loaded
}
else{ // Function has not been loaded yet, so load the javascript.
$import('http://www.yourfastsite.com/myfile.js');
}
注意：可以使用 defer 屬性，但不是所有瀏覽器（包括 Firefox）都支持它。
十六、優化 CSS 文件
如果經過適當優化和維護，CSS 文件不一定很大。例如，具有很多獨立類的 CSS 文件會影響下載速度。與 JavaScript 文件一樣，您需要優化 CSS 文件，使其包含所需的所有內容，同時保持合理的大小。另外，使用外部文件代替內聯定義來適應瀏覽器的緩存機制。
十七、使用內容分布網路
內容分布網路（Content-distribution network，CDN）是另一種縮短下載時間的好方法。當您將靜態圖像放在 Internet 上的許多伺服器上時，用戶能夠從離他們最近的伺服器下載這些圖像。此外，大多數 CDN 都在快速伺服器上運行，因此無論伺服器的載入速度如何，其響應速度都比小型的超載伺服器快。
十八、對資產使用多個域來增加連接
CDN 的另一個優勢是它們是獨立的域。因為您的瀏覽器將並發連接的數量限制到一個單一的域，因此無論何時載入一個頁面，都很容易占滿所有線程。因此，到其他資產的連接被延遲了。然而，您的瀏覽器能夠打開新線程或到其他域的連接，這樣，從另一個域載入的任何資產都可以與其他所有資產同時載入。
十九、在合適的時候使用 Google Gears
使用 Google Gears（參見 參考資料）是避免用戶反復下載同一內容的另一種好方法。Gears 允許用戶離線訪問 Web 應用程序，但是也允許將頁面元素持久化到用戶的計算機上。因此，頻繁載入但未進行更新的內容可以存儲在 Gears 資料庫中，該資料庫是一個 SQLite3 關系資料庫管理系統。對同一內容的所有 next 請求都可以從資料庫（而不是伺服器）直接載入。
二十、使用 PNG 格式的圖像
Graphic Interchange Format (GIF) 和 Joint Photographic Experts Group (JPEG) 圖像格式都已過時了：Portable Network Graphic (PNG) 是未來流行的格式。當然，您可以說 GIF 和 JPEG 已經消亡，或者 PNG 沒有任何缺陷，但是所有事物都有各自的優缺點，PNG 以最佳的文件大小提供了出色的質量。因此，如果進行選擇的話，應該盡可能使用 PNG 圖像。
二十一、保持 Ajax 調用簡短、准確
當統稱為 Asynchronous JavaScript + XML (Ajax) 的技術在兩年前出現時，這些技術為處理頁面請求和響應提供了一種革命性方法。然而，撥號用戶可能從來沒機會體驗其真正的優勢，因為在許多情形下，Ajax 需要在瀏覽器與伺服器之間大量通信。因此，如果您能夠保持 Ajax 調用簡短和准確，可以避免用戶花費無止盡的時間來等待元素刷新或響應。
二十二、進行一次較大的 Ajax 調用並在本地處理客戶機數據
如果不能進行簡短的 Ajax 調用，或者如果這些調用不能提供期望的結果，可以考慮一種替代方法：進行一次大的 Ajax 調用來獲取所需的一切內容，然後讓客戶機在本地處理數據。通過這種方式，客戶機只需等待一次（獲取傳入的數據），但是在此之後（當瀏覽器與伺服器之間沒有必要通信時），處理速度將更快。當然，還有大量 Ajax 優化技術，本教程無法一一列出。
二十三、在沙箱中測試代碼
還有一個經常被遺忘的常用技巧。盡管清醒的 Web 開發人員通常會在啟動應用程序之前對其進行測試，但是有時候測試會使他們不那麼重視維護任務，或者新功能添加得太快，並且未經過充分考慮或測試。結果，餘下的腳本減緩了應用程序的速度。如果您添加一項新功能，可以首先在沙箱里（完全脫離了應用程序的其餘部分）進行測試，查看它作為單個函數的行為。通過這種方式，您可以反復檢查，並分析性能和響應時間，無需考慮 Web 應用程序的其餘部分。然後，當新功能的行為符合預期時，可以將其引入到應用程序的其餘部分中，運行其他測試，保證功能本身的行為符合預期。
二十四、分析站點代碼
在許多場景中，自我反省是一個不錯的建議。幸運的是，在開發過程中，我們可以使用工具來幫助反省，並盡可能客觀地進行實踐。像 JSLint（參見 參考資源）這樣的工具的價值是無法衡量的，盡管其站點宣稱它 「可能令您備受挫折」，因為它向您提供了所有的潛在代碼缺陷，這些缺陷不但使調試更加困難，而且可能導致更長的響應時間。
二十五、檢查孤立的文件和丟失的圖像
檢查孤立的文件和丟失的圖像是一種明智之舉。大部分 Web 開發人員都會檢查錯誤的文件引用，但是這里仍然需要說明一下。丟失的文件容易引起各種問題，因為它們會導致 「The image/page cannot be displayed」 之類的錯誤消息。但是在網頁速度優化方面，它們具有更大的缺陷：當瀏覽器尋找丟失的或孤立的文件時，它會消耗資源，這不可避免地會導致頁面處理速度變慢。因此，請檢查孤立或丟失的文件，包括拼寫錯誤的文件名。
2. 前端如何提升網頁載入速度，載入速度提升有什麼好處
提升網頁載入速度有兩方面
減小網頁文件大小（外接javascript壓縮，少用圖片等等）。不過現在網速一般都挺快，一個網頁不過幾十KB，絲毫感覺不出來，不過出於精簡原則，還是寫的簡潔緊湊比較好
不要用鏈接慢的外源腳本等等（比如用jquery庫，你下載下來引用比較好，你要是引用谷歌的jquery，而谷歌又被牆了，就會連不上導致網頁一直載入。。。）
3. 如何優化頁面載入速度
1.伺服器響應時間
即使網站已經格外優化，但是除非伺服器響應時間非常快，否則就不會有什麼大的效果。當涉及到提高網站的速度，伺服器響應時間起著重要的作用。下面是一些提高伺服器響應時間的小貼士。
有獨立的伺服器，而不是選擇共享/託管伺服器。
提高Web伺服器的質量。
移除不必要的插件，只有那些必要的插件，才需要一直保持啟用狀態。
2.瀏覽器緩存
瀏覽器緩存可以減少HTTP請求，從而反過來提高網站的載入速度。下面就是如何利用瀏覽器緩存的代碼示例：
Java代碼ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"注意：如果過期時間與文件掛鉤，而此時文件中的內容需要更改的話，那必須先重命名文件，以便瀏覽器可以獲取新添加的代碼。
3.gzip壓縮
gzip壓縮是一個壓縮實用程序，我們可以用它來快速載入網站。它的工作原理是在發送HTML和CSS文件到互聯網瀏覽器之前，先壓縮文件大小。允許mod_defalte模塊啟用Gzip壓縮，下面是如何使用它的代碼示例：
Java代碼# Compress HTML, CSS, JavaScript, Text, XML
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
# Remove browser bugs (only needed for really old browsers)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent4.非同步腳本
還有一個可以提高網站頁面速度的超棒選擇就是非同步載入腳本。如此一來網頁負載就並不必依賴於這些非同步腳本，網站訪問者也不再需要不得不按捺下性子，等待所有的腳本載入完之後才能呈現頁面。在非同步模式中，腳本是在後台下載的。通常，我們會將第三方腳本作為非同步腳本，因為下載這些腳本時常會讓網站速度變得非常慢。
Css代碼5.內容分發網路(CDN)
內容分發網路(CDN)是位於不同地理位置的伺服器組成的網路。每個伺服器都擁有所有網站的文件副本。要是有網站訪問者請求文件和網頁時，就可以直接從就近的網站伺服器發送過來(也可以是從負載最小的伺服器)。
6.優化JavaScript、HTML和CSS
優化JavaScript和CSS也可以提高一個網站的網頁速度，而且這個方法非常簡單。優化JavaScript、HTML和CSS就是刪除所有不必要的空格和注釋，從而減小文件大小。下面是一些最小化JavaScript和CSS的流行工具，非常有用。
CSS Minifier
Avivo
HTML Compressor
7.置於頂部的樣式表和底部的腳本
將樣式表放在頂部有助網站的迅速載入，因為這樣可以使得網頁漸進式呈現。一般地，所有的互聯網瀏覽器都支持在給定時間內並行下載兩個組件(圖像、樣式和腳本)。但是通常而言，霸道的腳本會在並行下載時會阻止其他的下載，直到腳本下載完畢。
8.避免阻塞型的JavaScript和CSS
在瀏覽器呈現網頁之前，它首先需要通過解析HTML標記語言來構建一個DOM樹。在此過程中，如果遇到了腳本，此過程就會中止，轉而先執行腳本，完了才會繼續原先的活動。因此建議避免阻塞型的JavaScript，尤其是外部腳本。
阻塞型JavaScript還會導致網站的延遲。所以不妨推遲載入那些不重要的JavaScript，或者採用非同步載入的方式。另一種選擇是將這些HTML代碼內嵌到網站上，同時需要確保CSS的優化。
9.JavaScript的延遲解析
為了載入網頁，瀏覽器必須解析所有的
4. 如何加快HTML頁面載入速度
1、頁面精簡：去掉html頁面不必要的空格、注釋，盡量將script和css寫在外部文件中。
可以借用第三方工具對頁面進行加速。
2、減少文件數量減少頁面上引用的文件數量可以減少HTTP連接數許多JavaScript、CSS文件可以合並最好合並，人家財幫子都把自己的JavaScript.functions和Prototype.js合並到一個base.js文件里去了
3、減少外部域名文件的引用
4、優化頁面元素載入順序例如：首先載入頁面最初顯示的內容和與之相關的JavaScript和CSS，不需要的圖片文件放到後面載入，或者引用延遲載入的js
5、減少頁面中inline和JavaScript的數量
6、不要在table標簽中嵌套table標簽，不過現在基本上都用div+css了，HTML5也出來了。
7、檢查頁面是否有js錯誤，或者空引用（檢查頁面有沒有502錯誤），有沒有js文件的重復載入
5. 如何優化前端文件資源以提供頁面載入速度和響應速度
應該是跟普通網頁一樣的
提高網站速度的關鍵在於以下幾點：
1、縮小Javascript和CSS文件
2、減少HTTP請求
3、建議圖片、CSS和Javascript時間可設置為一個月
4、合並CSS引用圖片
5、只載入<head>部分的基本腳本
6、對圖像不失品質的情況下盡量壓縮
7、開啟gzip進行數據壓縮
6. 如何優化前端頁面體驗和訪問速度
1.優化圖片
這個絕對是顯而易見的，可以看到圖片占據的頁面內容分量最重。在現代網頁設計中，圖片絕對占據了大部分的內容。你需要針對你的頁面重新定義圖片大小。這能夠有效地幫助你減少頁面大小。而且，這里有很多的功能能夠幫助你針對圖片減肥，例如，Smush.it和TinyPNG
在photoshop中保存web所用格式圖片時候適當的進行壓縮。或者採用圖片延遲載入技術
2.壓縮CSS和Javascript代碼
有效地壓縮CSS和javascript代碼能夠有效地減少頁面大小，你可以刪除空格優化代碼。當然，壓縮代碼對於代碼閱讀不是非常有用，但是一般作為產品環境來說，我們通過這種方式可以有效地減少頁面載入時間。css&js壓縮工具
3.避免使用@import
@import CSS語法允許你載入其它的CSS文件。有時間非常有幫助，但是它並不是和主文件一起下載的，所以可能會增加頁面載入時間。建議使用link標簽，這樣會更加高效。
4.減少HTTP請求次數
減少HTTP請求次數可以幫助你有效的增加網站載入速度。你可以使用如下方式：
a.融合文件
將不同的樣式表css合成一個文件可以減少http請求的次數。同樣對於javascript來說也適用。
b.使用CSS sprites
使用sprites可以幫助你把多個圖片文件放置到一個文件里，這樣可以減少圖片下載的次數。
5.javascript引用位置
例如：javascript的引用和cnzz的統計放到在代碼中放到body之後。
7. 前端頁面載入緩慢，有什麼解決辦法
得先分析你收到的所有頁面，並統計可重用模塊（什麼頁頭頁腳、輸入框、搜索等等）
根據分析出來的模塊寫樣式，這里建議再弄個樣式展示頁，不單只給自己看，接手項目的同事也能看！
製作簡單的UI邏輯及編寫一下控制項，例如AJAX圖片上傳控制項這類的，然後弄到樣式展示頁上。
一般經過上面三步大概要化兩天多一點的時間，這樣做的目的是為了梳理好你需要做的工作，從而你就清楚需要哪些工具及哪些工具能更快幫助你解決問題。
當你熟練以上三步之後，你會發覺TM的3個頁面我一天就幹完了，因為都一個鳥樣！
PS：如果你頁面交互操作較多建議使用vuejs這個來處理動態變化，推薦原因是入門快有中文文檔使用非常方便特別是表單的數據綁定簡直爽飛了！
8. Jsp中有大量js和css，如何提高頁面載入速度
載入速度不必刻意強求，真正項目尤其是前端開發講究的是可讀性，如真的項目寫好後可以考慮壓縮css和js代碼，css帶走方向的復合屬性如邊框，外邊距，補白等最好用一個屬性代替，順序為上，右，下，左。表格盡量少用。
9. 如何處理前端頁面首次載入慢的問題
這是一個ajax請求，幾秒鍾的延遲時間屬於正常范圍，它是非同步運行的，對頁面的載入速度不會造成直接影響。從圖片中可看出，它的載入時間為138ms，不算長啊，後面的4.84s是它等待伺服器返回數據的時間，在這段時間里，頁面的其他元素是繼續載入的，不會受影響。所以這個4.84s是不算在首頁載入時間內的。就好比一個體育賽事直播的網頁，它的比分一般都是通過ajax非同步方式定時刷新的，而這個刷新的時間並不算在頁面的載入時間內，因為這時候頁面早就載入完畢了。
當然，這個4.84s的時間長短，是由多種因素造成的，比如電腦性能、網路狀態等，但最大的影響因素通常都是後台資料庫的查詢速度，通過優化可以大大縮短這個查詢時間。