- N +

頁面性能優化的五種辦法

頁面性能優化的五種辦法 大部分用戶希望網頁能在 2 秒之內就完成加載。事實上,加載時間每多 1 秒,你就會流失 7% 的用戶。如果加載需要太長時間,他們就會放棄訪問。以下是我總結性能優化常見的辦法:一、資源壓縮與合并主要包括這些方面:html 壓縮、css 壓縮、js 的壓縮和混亂和文件合并。 資源壓縮可以從文件中去掉多余的字符,比如回車、空格。1.html 壓縮html代碼壓縮就是壓縮這些在文本文件中有意義,但是在HTML中不顯示的字符,包括空格,制表符,換行符等,還有一些其他意義的字符,如HTML注釋也可以被壓縮。如何進行html壓縮:1.使用在線網站進行壓縮(開發過程中一般不用)2.nodejs 提供了 html-minifier 工具3.后端模板引擎渲染壓縮2.css 代碼壓縮:css 代碼壓縮簡單來說就是無效代碼刪除和 css 語義合并如何進行 css 壓縮:1.使用在線網站進行壓縮(開發過程中一般不用)2.使用 html-minifier 工具3.使用 clean-css 對 css 壓縮3.js 的壓縮和混亂js的壓縮和混亂主要包括以下這幾部分:1.無效字符的刪除2.剔除注釋3.代碼語義的縮減和優化4.代碼保護(代碼邏輯變得混亂,降低代碼的可讀性,這點很重要)如何進行 js 的壓縮和混亂1.使用在線網站進行壓縮(開發過程中一般不用)2.使用 html-minifier 工具3.使用 uglifyjs2 對 js 進行壓縮其實 css 壓縮與 js 的壓縮和混亂比 html 壓縮收益要大得多,通過 css 壓縮和js 壓縮帶來流量的減少,會非常明顯。所以 css 壓縮與 js 的壓縮和混亂必須要有!4.文件合并不合并請求有以下缺點:文件與文件之間有插入的上行請求,增加了 N-1 個網絡延遲,受丟包問題影響更嚴重,keep-alive 方式可能會出現狀況,經過代理服務器時可能會被斷開,也就是說不能一直保持 keep-alive 的狀態壓縮合并 css 和 js 可以減少網站 http 請求的次數,但合并文件可能會帶來問題: 首屏渲染和緩存失效問題。那該如何處理這問題呢?—— 公共庫合并和不同頁面的合并。如何進行文件合并1.使用在線網站進行文件合并2.使用 nodejs 實現文件合并( gulp、fis3 )二、非核心代碼異步加載的方式1、異步加載的方式異步加載的三種方式—— async 和 defer、動態腳本創建① async 方式async 屬性是 HTML5 新增屬性,需要 Chrome、FireFox、IE9+ 瀏覽器支持async 屬性規定一旦腳本可用,則會異步執行async 屬性僅適用于外部腳本② defer 方式兼容所有瀏覽器defer 屬性規定是否對腳本執行進行延遲,直到頁面加載為止如果是多個腳本,該方法可以確保所有設置了 defer 屬性的腳本按順序執行如果腳本不會改變文檔的內容,可將 defer 屬性加入到 script 標簽中,以便加快處理文檔的速度③ 動態創建 script 標簽 在還沒定義 defer 和 async 前,異步加載的方式是動態創建 script,通過 window.onload 方法確保頁面加載完畢再將 script 標簽插入到 DOM 中。
返回列表
上一篇:怎么樣讓網站能排名穩定
下一篇:高級搜索指令對于網站優化SEO有什么作用