首頁 >web前端 >js教程 >頁面優化方法總結

頁面優化方法總結

php中世界最好的语言原創: 2018-05-24 15:46:391576瀏覽

這次帶給大家頁面優化方法總結，頁面優化的注意事項有哪些，以下就是實戰案例，一起來看一下。

背景目的

讓官網首頁載入速度更快，對使用者的操作回應得更及時，提供使用者更友善的體驗。
減少頁面請求數，減少請求所佔頻寬，節省資源。

最佳化手段

依粒度分為兩類：

頁面層級最佳化（HTTP請求數，資源合併壓縮，資源載入時機等）
程式碼層級最佳化（DOM操作最佳化、CSS選擇符最佳化、HTML結構最佳化）

##特定措施

頁面層級最佳化

頁面層級的最佳化目標基本上就是如何減少HTTP請求數，減少請求資源的體積。每個請求都是有成本的，既包含時間成本也包含資源成本（一個完整的請求都需要經過DNS尋址、與伺服器建立連接、發送資料、等待伺服器回應、接收資料這樣一個「漫長」而又複雜的過程）

1. 靜態資源的合併和壓縮

根據靜態檔案的類型，可以藉助gulp工具將js檔案和css檔案進行合併和壓縮。

例如官網專案裡css檔案有七個，js檔案有十幾二十多個,合併壓縮靜態資源後可以減少http的開銷。

我們將不常改變的資源(例如jquery、各種lib庫、插件等)全部合併壓縮成一個文件，命名為vender.css、vender.js。經常改變上線的文件合併壓縮成一個文件，命名為index.css，index.js,並且加上hash戳，index等文件每次上線內容基本上都是會改變的，那麼gulp自動構建後加上的hash戳也是不一樣的，而vender類型不變，這樣我們就能合理利用瀏覽器的快取機制了。

2. 圖片的處理

使用jq的
lazyload外掛程式實作圖片懶載入。等滾動條滾動到對應的地方再載入所需的圖片資源。
不直接使用設計給的兩倍圖，用css的
devicePixelRatio檢查裝置的像素比，輔助區分視網膜裝置還是非視網膜裝置來決定載入兩倍圖還是原始大小的圖片。
圖片上傳到cdn之前在保證不失真的情況下，用
gulp-imagemin工具壓縮下大小。
將下圖這樣的小圖片全部做成雪碧圖，單色可以考慮用
icon-font來實現。或是直接在頁面寫svg程式碼和轉成base64寫到頁面也行，總之是要減少http的請求數。

3. 首屏載入

#將首屏第一時間呈現給使用者。

具體的做法是除了首屏dom元素之外,將所有的dom元素用一個
template元素進行包裹，等window監聽到load事件後，將剩餘的dom部分全部插到頁面中。（tips：為避免使用者可能還沒等到window的load事件就開始捲動頁面，可以將首屏的範圍擴大。）

4. DNS預讀取

DNS預讀取是一項讓瀏覽器主動去執行網域解析的功能。 DNS請求所需的頻寬非常小，但延遲卻有點高。

以下是引用MDN的一句話：

在某些瀏覽器中這個預先讀取的行為將會與頁面實際內容並行發生（而不是串列）。正因如此，某些高延遲的網域的解析過程才不會卡住資源的載入。

這樣可以極大的加速（尤其是在行動網路環境下）頁面的載入。在某些圖片較多的頁面中，在發起圖片載入請求之前預先把網域解析好將會有至少 5% 的圖片載入速度提升。

具體做法：

head標籤裡加上

<link rel="dns-prefetch" href="https://data.dadaabc.com/">

data.dadaabc.com為靜態資源的域名，如還有其他連結的域名，都一起加進去。

5. 多域名分发静态资源

同域下浏览器能并发的请求有限，为了增加并发，尤其是一些静态资源上，可以使用多个域名。但由于域名DNS解析本身也是耗时的，所以也不是越多越好，chrome最大支持6路并发，所以一般设置2-4个域名较为合适。
具体的做法是：再增加cdn域名来下载静态资源。比如图片全部用img.dadaabc.com/域名,css资源全部用css.dadaabc.com/域名，这些域名最终全部指向同样的cdn服务器。静态资源域名加前缀可以用gulp-rev-replace来实现。

6. 统计代码

统计代码全部放到window的load事件之后执行。为了便于管理统计代码，例如页面加上一些埋点，增加删除统计产品，我们可以借助Google Tag Manager工具来统一管理。
具体做法是：页面只拉取Google Tag Manager提供的gtm代码，该js代码含有全部的统计产品，例如百度、Inspelect等，这些统计产品也都是通过创建script标签来动态插入到页面中的。另外需要注意的是，google提供的gtm代码是在google服务器上的，为了让获取该代码的速度更快，我们可以在自己的服务器上执行crontab定时任务，每分钟获取一次，然后gtm代码直接从自己服务器上获取。

代码级别优化

1. 合理的dom结构

css文件全部放到head里，script文件全部放到body的最底部。
原因：
把样式表移到head里允许页面逐步渲染。
浏览器负责渲染的GUI渲染线程与JS引擎线程是互斥的，当JS引擎执行时GUI线程会被挂起（相当于被冻结了），GUI更新会被保存在一个队列中等到JS引擎空闲时立即被执行。

参考资料：从浏览器多进程到JS单线程，JS运行机制最全面的一次梳理

2. 最小化重排和重绘

多个属性改变一次性写：

举个例子：

var ele = document.getElementById('myp');
ele.style.borderLeft = '1px';
ele.style.borderRight = '2px';
ele.style.padding = '5px';

三个样式属性被改变，每一个都会影响元素的几何结构，虽然大部分现代浏览器都做了优化，只会引起一次重排，但是像上文一样，如果一个及时的属性被请求，那么就会强制刷新队列，而且这段代码四次访问DOM，一个很显然的优化策略就是把它们的操作合成一次，这样只会修改DOM一次：

var ele = document.getElementById('myp');
ele.style.cssText = 'border-left: 1px; border-right: 2px; padding: 5px;';

总结：同一个DOM的多个属性改变可以写在一起（减少DOM访问，同时把强制渲染队列刷新的风险降为0）

fragment元素的应用：

fragment是个轻量级的document对象，它的设计初衷就是为了完成更新和移动节点这样的任务。fragment的一个便利的语法特性是当你附加一个片断到节点时，实际上被添加的是该片断的子节点，而不是片断本身。只触发了一次重排，而且只访问了一次实时的DOM。
例如：

var fragment = document.createDocumentFragment();
var li = document.createElement('li');
li.innerHTML = 'apple';
fragment.appendChild(li);
var li = document.createElement('li');
li.innerHTML = 'watermelon';
fragment.appendChild(li);
document.getElementById('fruit').appendChild(fragment);

3. 函数防抖和函数节流

触发大量回调函数的事件，例如拖拽时的mousemove事件，window对象的resize、scroll事件，文字输入、自动完成的keyup事件等，需要合理使用函数防抖和函数节流机制。具体可以参考我的另外一篇文章函数防抖和函数节流

4. CSS选择器

CSS选择器的解析式其实是从右到左的，例如：

#p1 a {
    color: red
}

如上面的选择器，浏览器必须遍历查找所有的a元素，再去找ID为p1的元素，这样查找的方式显然很低效。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！