亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

vivo 悟空活動中臺 - H5 活動加載優化

發布時間:2020-08-08 21:10:55 來源:ITPUB博客 閱讀:303 作者:vivo互聯網技術 欄目:web開發

本文首發于 vivo互聯網技術 微信公眾號 
鏈接: https://mp.weixin.qq.com/s/6gtVR0nVNcZvREjwftZgzA
作者:悟空中臺研發團隊

一、背景

通過之前悟空活動中臺系列文章,大家對微組件、動態布局等技術方案有了一定的了解。本篇我們帶大家了解下悟空H5專題性能優化之路。

在移動互聯網時代,H5頁面加載體驗至關重要。消費者行為和觀念也會受到頁面加載時間的產生顯著影響,最明顯的就是我們現在很難去等待一個頁面加載超過三秒的頁面,尤其是年輕人。專注性能測試的SOASTA公司曾發表過結論:移動端加載每耗時1秒, 影響轉化率最高可達 20%。

在營銷中臺業務快速發展過程中,悟空始終把網站響應速度和用戶體驗放在第一位,通過技術創新,不斷尋找最優加載方案,取得了很好的效果。下面我們就一起來探索下。

二、優化歷程

每談到性能優化,前端er就能聯想到一道經典面試題:從輸入URL到頁面加載,瀏覽器都執行了什么?

體驗優化的歷程和這道題一樣,需要系統化梳理、體系化實踐。我們從網絡、資源、渲染、執行層出發,不斷探索加載優化方案。

1、網絡層優化

(1)DNS 處理:增加 dns-prefetch

瀏覽器對網站第一次的域名 DNS 解析查找流程依次為:瀏覽器緩存 >> 系統緩存 >> 路由器緩存 >> ISP DNS 緩存 >> 遞歸搜索。

移動端環境下,DNS 請求帶寬非常小,但延遲很高。針對該問題,我們采取預讀取DNS方案,該方案能顯著降低延遲,平均加載時長可減少1秒左右。

為幫助瀏覽器對某些域名進行預解析,我們對上線活動 html 文檔中新增 dns-prefetch標簽。加入該標簽后,瀏覽器解析步驟如下:

第一步:用 meta 信息來告知瀏覽器,當前頁面要做 DNS 預解析:

vivo 悟空活動中臺 - H5 活動加載優化 vivo 悟空活動中臺 - H5 活動加載優化 vivo 悟空活動中臺 - H5 活動加載優化 vivo 悟空活動中臺 - H5 活動加載優化 vivo 悟空活動中臺 - H5 活動加載優化 vivo 悟空活動中臺 - H5 活動加載優化

四、性能數據收集

1、常用指標

關于指標,業界有非常多的方案和數據:

  • 頁面加載時長
  • 首屏加載時長
  • Dom Ready 時長
  • Dom Complete 時長
  • 首頁渲染時長
  • 首頁內容渲染時長
  • 首頁有效渲染時長
  • .......

基于活動的特點以及業務常關注點:我們對頁面白屏時間以及首次渲染時長以及一些個性化指標進行了收集,目的是統計活動專題加載時長,尋找優化空間。

2、如何計算

靜態資源的加載速度,可以利用 performance Timing API 取得

function stat() {
  navigator.sendBeacon('/path', analyticsData)
}點擊并拖拽以移動

sendBeacon 發出的是異步請求,請求作為瀏覽器任務執行,與當前頁面脫鉤。因此該方法不會阻塞頁面加載流程,也不會延遲頁面加載。

五、思考與展望

在上述探索的同時,我們同時在進行專題 SSR 、秒開、CSR的方案探索,不斷嘗試提升 H5 體驗的方式,追求卓越。

在筆者看來,性能優化不是一種手段,而是一種意識,開發者在實際開發過程中需要建立意識,在各處細節上去保證用戶體驗。

六、參考文獻

  1. https://developers.google.com/web/fundamentals/performance/http2?hl=zh-cn

  2. https://juejin.im/entry/56ce7d1a1532bc005372a7fa

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

横峰县| 崇仁县| 定西市| 扎赉特旗| 孙吴县| 通河县| 龙州县| 集贤县| 慈利县| 汝州市| 郓城县| 岚皋县| 连山| 襄垣县| 彝良县| 射洪县| 竹溪县| 潍坊市| 宿州市| 抚松县| 罗平县| 凯里市| 高安市| 抚宁县| 株洲市| 咸阳市| 张家口市| 酒泉市| 新宾| 舟山市| 英吉沙县| 东兰县| 乌兰县| 五河县| 高州市| 乌拉特后旗| 东海县| 济宁市| 永靖县| 桂林市| 县级市|