整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
作為一個內容類應用，看新聞讀資訊一直是頭條用戶的核心需求，頁面的打開速度直接關系到用戶使用頭條的核心體驗，在頭條中，為了更多的承載足夠豐富的樣式和邏輯下保持多端體驗的統一，詳情頁的內容我們是通過 WebView 來承載的，但 WebView 本身的性能相比 Native 來說比較差，因此，技術團隊一直致力于優化詳情頁的加載速度。
經過不斷的優化，目前中詳情頁在線上的打開體驗，從肉眼上基本已經感知不到加載過程。在接下來這篇文章里，我們會逐步拆解和介紹我們對詳情頁加載優化的思路和實踐。
先讓我們來看看優化前后的效果吧~
詳情頁加載體驗優化前
詳情頁加載體驗優化后
當我們開始著手優化頁面加載速度之前，我們需要明確一個問題，怎樣才是用戶真正體驗到的頁面加載時間。
首先我們可以看下面這個公式：
頁面加載時間 = 頁面加載完成時間 - 頁面開始加載時間
頁面開始加載時間很好確定，當用戶點擊了 Feed 上的卡片，我們就可以認為頁面開始加載了。
問題是怎么定義頁面加載完成了呢？從客戶端的角度上看，無論是 iOS 還是 Android，WebView 都提供了一個 loadFinsih 的回調，但在實際應用中我們發現，loadFinish 回調并不能反應用戶的真實體驗。
一般來說，WebView 渲染需要經過下面幾個步驟
而 loadFinish 實際上是在頁面加載完畢階段，而 DOM 構建完成時頁面結構就已經基本渲染完成，所以從用戶真實體驗的角度出發，我們以 DOM 結構構建完成（即 domReady）的時間點作為頁面加載完成時間點。
在詳情頁瀏覽過程中，除了頁面加載速度之外，還有一個特別影響用戶體驗的問題，就是頁面的白屏，也是早期的時候用戶反饋比較多的問題，但有很多場景都可能導致詳情頁發生白屏，比如說網絡異常，WebView 異常等等，需要從用戶體驗的角度出發去檢測用戶發生白屏的情況。
目前可以想到最直觀的方案就是對 WebView 進行截圖，遍歷截圖的像素點的顏色值，如果非白屏顏色的顏色點超過一定的閾值，就可以認為不是白屏，目前需要考慮的是這個方案的性能問題和檢測時機。
iOS 中提供了 WebView 快照的接口獲取當前 WebView 渲染的內容，底層采用異步回調的實現方式，API 耗時 10ms 左右，用戶基本無感知。
- (void)takeSnapshotWithConfiguration:(nullable WKSnapshotConfiguration *)snapshotConfiguration completionHandler:(void (^)(UIImage * _Nullable snapshotImage, NSError * _Nullable error))completionHandler API_AVAILABLE(ios(11.0));
Android 中系統提供的獲取視圖內容的接口為 getDrawingCache，API 耗時在 40ms 左右，性能損耗也不是特別大。
除了截圖的性能損耗，像素點檢測也是白屏檢測中比較耗時的場景，經過實驗，我們把 WebView 截圖的圖片進行縮小到原圖的 1/6，遍歷檢測圖片的像素點，當非白色的像素點大于 5% 的時候我們就認為是非白屏的情況，可以相對高效檢測準確得出詳情頁是否發生了白屏。
確定好口徑之后，我們還有需要明確的一個問題是，什么指標可以反映用戶刷頭條時的真實體驗。
最早的時候，我們用的是詳情頁頁面的頁面平均加載時長，也就是頁面加載時長的總和/頁面 pv，在開始的時候這個指標也的確可以明確我們的加載速度。
后來隨著詳情頁的加載優化逐漸的深入，會發現平均加載時長雖然也可以反映詳情頁加載速度，但是因為詳情頁的 pv 比較高，如果使用平均加載速度化很多用戶體驗問題就被平均掉了，并不能反映用戶的真實情況，后面我們又調整了口徑，將指標調整為所有用戶進入詳情頁的 80 分位值，比如說，假如頭條詳情頁加載速度 80 分位值是 1 秒，那么就說明 80% 的情況下用戶進入詳情頁都能在 1s 內加載完成，當然經過我們的不斷優化，詳情頁加載的 80 分位值已經能夠達到 0.3s 以內，也就是說，80% 的情況下用戶都能夠在 0.3s 內完成頁面加載。
80分位優化數據對比
再后來我們又發現，在頭條詳情頁的量級下面，即使是 80 分位的數據也不能反應許多長尾用戶的真實情況，也為了更極致的追求詳情頁的加載性能，我們最后將詳情頁的性能口徑調整到 95 分位。到目前在我們的努力下，詳情頁的加載速度 95 分位也優化了將近 80% 。
我們究竟做了什么呢，接下來會慢慢介紹一下。
如前所述，圖文詳情頁是通過 WebView 來承載的，而 WebView 承載頁面最簡單的做法就是直接通過 URL 去加載一個線上頁面。那么先來一道簡單的面試題，當用戶從瀏覽器輸入一個 URL 到頁面展現發生了什么呢？
之前已經介紹過頁面的渲染流程了，現在我們再簡單看看用戶從點擊到看到頁面內容需要經歷如下幾個階段：
WebView 加載流程
可以看到，通過線上頁面加載用戶每次進入詳情頁都要通過多次網絡加載，極容易受網絡波動的影響，這種情況下，也無法保證頁面加載的時長和成功率，極大的影響了用戶體驗。
于是在頭條中，我們將新聞中標題和正文內容進行拆分，把頭條詳情頁的公共樣式 CSS 和 邏輯 JS 都抽離出來，形成一個獨立而完備的詳情頁模板，這樣我們就可以把模板直接內置在客戶端中。
同時我們會與前端約定好的 JS 腳本，通過接口將正文內容數據注入頁面完成詳情頁的頁面展示，通過該這種方式我們可以將接口放到客戶端上進行請求。
這樣用戶進入詳情頁的時候只需要本地加載模板，而且加載模板的時候也可以同時并行請求詳情頁數據，再將數據注入進模板中。
那么用戶點擊到看到頁面內容只需要經歷下面的階段：
模板拆分
如上圖所示，我們只需要通過一次網絡加載就可以完成頁面渲染。
還能不能更快一點呢？當然能！
為了提高頁面的加載速度，客戶端通過一定的策略去預加載新聞數據，這樣在理想狀態下用戶進入頁面時看到頁面時就可以直接使用緩存的數據，用戶在看新聞的時候可以實現完全離線化，避免受到網絡的影響。
本地加載
完全脫離了網絡加載之后，還能再快一點呢？當然還是可以的！
當全流程離線化之后，頁面加載的瓶頸就變成了本地模板的加載時間，所以我們接下來要做的就是優化模板加載時間。
對于模板來說，我們做了兩件事情
通過上面優化，我們就已經將模板加載時間大大優化了，但是還能不能更給力呢？還是可以的。
對于客戶端來說，當模板跟數據分離之后，由于每次用戶點擊的時候加載的都是同一個模板，所以實際上，我們并不需要在用戶進入頁面的時候才去創建 WebView 以及加載模板，我們只需要在合適的時機在后臺創建 WebView，并且提前預熱加載模板，當用戶點擊進入頁面的時候就能使用已經加載好模板的 WebView，直接將詳情頁的內容數據通過 JS 注入到頁面中，前端收到數據后進行頁面渲染即可。
此時用戶進入詳情頁實際就不再需要重新加載模板了，路徑就變成了：
模板預熱
可以看下，通過本地測試的模板預熱和數據預取的優化效果，還是比較明顯的，基本上已經達到了上面的截圖中的驗證效果。
本地測試數據
當我們拆分完模板和數據之后，數據上優化已經比較明顯，但我們說過，除了驗證數據，我們還需要看線上用戶的真實體驗數據，從 95 分位上看實際數據優化卻不是很明顯，所以我們從數據上觀察，用戶預熱模板的命中率只有 53%，還有進一步的提升空間。
模板預熱率
為了盡可能的提高頁面的加載速度，我們希望用戶每次進入詳情頁的時候都能夠使用預熱好模板的 WebView，一般情況下，我們都會使用模板預創建池的手段來優化用戶進入詳情頁時的預熱模板命中率。
但其實在很多情況下，WebView 的創建是一個性能開銷比較大的操作，如果我們使用預創建池的方案，那么就會在后臺頻繁創建 WebView，這樣對用戶在 Feed 場景的瀏覽體驗也會有一定的影響。
而且假如用戶頻繁且快速進出詳情頁時，實際場景中用戶也很容易遇到無法命中預熱模板的場景。
這個時候為了優化用戶的體驗，如前文所述，我們每次使用的時候都是同一個模板，所以我們使用完當前 WebView 之后，只需要在用戶退出頁面的時候把正文數據清空，這樣進入下一個頁面的時候就能夠繼續復用這個 WebView 重新注入數據即可。
通過這個手段，我們既避免了頻繁在后臺預創建 WebView 對用戶刷 Feed 體驗的影響，把用戶進入頁面時候的預熱模板命中率從 53% 提升到 92%，優化了用戶體驗。
預熱模板命中率
說完我們在模板 WebView 方面的優化之后，再介紹一下我們在內容請求上的優化。
由于頭條詳情頁請求有以下特點
所以我們將詳情頁內容數據分為靜態和動態兩部分，將正文內容、標題、作者欄等用戶主要消費的又基本不變的內容托管到了 CDN 上。
CDN 的全稱是 Content Delivery Network，即內容分發網絡。其目的是通過在現有的 Internet 中增加一層新的網絡架構，將網站的內容發布到最接近用戶的網絡“邊緣”，使用戶可以就近取得所需的內容，提高用戶訪問網站的響應速度。CDN 有別于鏡像，因為它比鏡像更智能，或者可以做這樣一個比喻：CDN=更智能的鏡像+緩存+流量導流。因而，CDN 可以明顯提高 Internet 網絡中信息流動的效率。從技術上全面解決由于網絡帶寬小、用戶訪問量大、網點分布不均等問題，提高用戶訪問網站的響應速度。
托管到 CDN 之后，全國各地的用戶可以直接從最佳節點就獲取到詳情頁數據，也大大節省了帶寬成本。
1. 多域名備份
為了防止某個 CDN 出現故障，導致服務雪崩，服務端會下發多個 CDN 鏈接，當用戶訪問當前 CDN 節點的出異常時，可以快速自動切換到下個 CDN 節點。
2. 快速超時
一般的超時策略，客戶端在請求時，會遍歷請求 CDN 1、2、3。如果這些 CDN 都請求失敗，則整個網絡請求算作失敗。
但這個方案的問題是，假設請求 CDN 的超時時間是 15s。如果 CDN 1 出現故障，則需要等待 15s 才能切換到 CDN 2 上，這對于詳情頁的加載時間來說是不可接受，如果用戶網絡突然變差，則需要等待 45s 才能返回失敗展示錯誤頁。
基于此我們設計了詳情頁請求的快速動態超時策略
幾個 case：
可以看到，通過多域名備份和快速超時的策略，即使用戶在網絡或者服務異常的情況下，也能快速恢復或者讓用戶能感知到自身網絡問題。
當我們在模板層和網絡層優化到極致的時候，限制我們的就是 WebView 的渲染速度了！
正常來講，正常的內容數據可能是類似 JSON 等數據，客戶端獲取到數據之后，將數據注入給前端，前端還需要將 JSON 數據跟模板進行組裝，拼上 HTML 標簽等模板了之后再呈現到 WebView 渲染，導致前端渲染上耗時也比較久。
為了提高用戶的首屏效率，我們在服務端就會把所有的詳情頁正文的 HTML 數據組裝好，通過將服務端直出內容注入到頁面中時，可以直接給 WebView 進行渲染，對于其他動態下發的內容（比如相關搜索），前端再進行二次異步處理，提升用戶效率。
一般來說，我們正文中所有內容都是通過 WebView 渲染，經過上述的優化之后，文章的文字部分渲染效率已經很高了，但是實際場景中，很多文章會包含比較多的圖片和視頻場景。
在實際場景中，WebView 渲染非文字內容會存在以下問題：
所以在詳情頁中，我們會將圖片和視頻等非文字內容通過原生組件的方式放在客戶端進行渲染，既可以提高渲染效率，也可以減少不必要的流量消耗。
原生化渲染還有一個好處，圖片越來越成為文章體驗的重要部分，對于多圖文章，我們在 Feed 頁面也可以智能加載詳情頁需要的圖片，增加用戶的文章首屏體驗。
講完了性能優化，最后再分享一下我們對詳情頁白屏率的一些優化，其實很多用戶反饋白屏問題大部分都可能是由于網絡等問題導致頁面加載時間過長，導致用戶從體驗上觀感是白屏了，這部分通過上面分享的性能優化手段已經能夠解決，所以下面只是簡單介紹下一些非網絡原因的白屏問題。
我們通過白屏檢測和上報之后的數據分析之后發現，非網絡原因導致的詳情頁的白屏問題大體是 WebView 加載的問題。
在 iOS 中，我們使用的是系統提供的 WKWebView，WKWebView 是運行在一個獨立進程中的組件，所以當 WKWebView 上占用內存過大時，WKWebView 所在的 WebContent Process 會被系統 kill 掉，反映在用戶體驗上就是發生了白屏。
根據網上的做法，我們可以在 WKWebView 提供的回調 webViewWebContentProcessDidTerminate 函數中通過 reload 方法重新加載當前頁面恢復，但是這種情況只適用于通過 loadRequest 加載的請求，在詳情頁中，由于使用了模板化的 WebView 中，重新 reload 只能重新 reload 模板，并不能正常恢復整個詳情頁，需要客戶端重新加載模板之后再重新注入數據。
另外由于我們有預熱模板的邏輯，所以可能在進入詳情頁的時候使用的 WKWebView 就已經崩潰，在調用 JS 注入數據時會直接返回失敗，失敗時，我們會嘗試重新加載模板。但后來實際操作中發現一個問題，如果直接調用數據注入的方法，等待系統 WebView 返回失敗的回調耗時比較久，所以后續也調整了數據注入的接口，我們提前在注入的腳本中判斷是否存在數據注入的接口，如果不存在，就說明模板存在問題，直接重試即可。
而在 Android 中，我們采用的是自研內核 WebView，也會遇到一些奇奇怪怪的坑。
當然不管是 iOS 和 Android， WebView 加載的邏輯都比較復雜，有時候怎么重試也無法成功，這個時候我們會直接降級到加載線上的詳情頁，優先保證用戶的體驗。
限于篇幅原因，我們還做了很多其他事情，包括請求精簡，push 文章預拉取，數據注入的方式優化等等，也做了很多其他的方向的探索，這里不做展開，希望有機會能再分享給大家。
最后總結一下我們在優化詳情頁打開速度之后的一些想法
Android Camera 內存問題剖析
字節跳動自研線上引流回放系統的架構演進
iOS大解密：玄之又玄的KVO
Android '秒' 級編譯速度優化
技術團隊不僅致力于在業務上不斷深耕挖掘，在技術上也一直在追求極致的用戶體驗。
如果你也向往在一個億級 DAU 業務里成長，也期待在技術上有突飛猛進的提升，歡迎你加入我們。
無論你是 iOS/Android/前端/后端，我們在深圳/北京/廣州等你來，一起做更有挑戰的事！簡歷投遞郵箱： tech@bytedance.com ；郵件標題：姓名-工作年限-頭條技術團隊。
歡迎關注字節跳動技術團隊
題：頭條HTML提取失敗的背后：挑戰、創新與數據獲取的新紀元
在數字化浪潮的洶涌推動下，信息的獲取與利用已不僅僅是技術的較量，更是策略與智慧的碰撞。當我們在嘗試從各大平臺，如頭條，提取HTML內容時遭遇失敗，這不僅僅是一個簡單的技術難題，更是對當前數據生態、技術局限以及未來發展方向的一次深刻反思。本文將從這一現象出發，探討其背后的深層次原因，提出應對策略，并展望數據獲取領域的新紀元。
一、現象透視：HTML提取失敗的深層含義
在表面看來，HTML提取失敗似乎只是一個技術障礙，實則不然。它映射出的是當前網絡環境日益復雜、數據保護意識增強的現實。隨著《數據安全法》、《個人信息保護法》等法律法規的出臺，數據的合規性、安全性成為不可逾越的紅線。同時，各大平臺為了保護用戶隱私、維護數據主權，也在不斷升級防護措施，這使得傳統的數據抓取手段面臨前所未有的挑戰。
二、挑戰與反思：技術、法律與倫理的多重考驗
技術挑戰：隨著網絡技術的發展，平臺反爬蟲技術日益成熟，傳統的HTTP請求、解析HTML等技術手段已難以滿足需求。如何在不違反法律法規的前提下，有效、高效地獲取所需數據，成為亟待解決的問題。
法律風險：數據抓取行為極易觸及法律紅線，如侵犯著作權、非法獲取個人信息等。因此，在進行數據抓取前，必須深入研究相關法律法規，確保操作合法合規。
倫理考量：數據的價值在于流動與共享，但這一過程必須建立在尊重用戶隱私、維護數據主權的基礎上。因此，在追求數據價值的同時，必須堅守倫理底線，避免數據濫用。
三、應對策略：創新驅動，多維發展
技術創新：加大研發投入，探索新的數據抓取技術，如基于人工智能的模擬用戶行為、深度學習等技術手段，以提高數據抓取的效率和準確性。同時，加強跨領域合作，引入計算機科學、法律、倫理等多學科知識，形成合力解決難題。
合規建設：建立健全數據抓取與使用的合規體系，明確數據抓取的范圍、目的、方式及安全保護措施。加強員工培訓，提高員工對法律法規的認識和遵守意識。
倫理引導：樹立正確的數據觀和倫理觀，引導企業和個人在數據抓取和使用過程中遵守道德規范，尊重用戶隱私和數據主權。通過社會輿論、行業自律等方式，形成良好的數據生態環境。
四、未來展望：數據獲取的新紀元
隨著技術的不斷進步和法律法規的日益完善，數據獲取領域將迎來新的發展機遇。未來，我們將看到更加智能化、高效化、合規化的數據抓取工具的出現，它們將能夠在保障用戶隱私和數據安全的前提下，滿足各類用戶對數據的需求。同時，隨著區塊鏈、分布式賬本等新技術的發展，數據的溯源、驗證和共享將更加便捷和透明，為數據經濟的發展提供強有力的支撐。
總之，頭條HTML提取失敗雖是一個具體的技術難題，但它卻引發了我們對數據獲取領域的深刻反思。在未來的發展中，我們必須堅持創新驅動、合規建設和倫理引導相結合的原則，共同推動數據獲取領域向更加健康、可持續的方向發展。
數字迷霧中：頭條HTML提取的挫敗與深思
在今日這個數據洪流不息的時代，每一秒都有無數信息如潮水般涌來，我們如同站在信息的海岸邊，試圖捕捉那些對我們有價值的浪花。然而，當我們的手伸向“頭條”這片信息海洋，試圖提取其HTML內容的珍珠時，卻遭遇了前所未有的挫敗。這不僅僅是一次簡單的技術挑戰，更是一次對數字時代信息獲取方式的深刻反思。
一、迷霧中的探索：技術挑戰與規則迷宮
在嘗試揭開頭條HTML內容的神秘面紗時，我們遭遇了前所未有的阻礙。這不禁讓人思考，是技術的瓶頸限制了我們的探索，還是隱藏在背后的規則迷宮讓我們迷失了方向？
從技術層面剖析，HTML內容的提取本應是爬蟲技術的拿手好戲，它們如同網絡世界的探險家，穿梭于各個網站之間，搜集著寶貴的數據。然而，隨著反爬蟲技術的日益精進，這些探險家們不得不面對更加復雜多變的挑戰。頭條，作為信息領域的巨擘，其反爬蟲機制無疑也是行業內的佼佼者。我們的嘗試，或許正是撞上了這堵由技術構建的堅固城墻。
但另一方面，我們也不能忽視規則的力量。在這個信息即財富的時代，各大平臺對于自身內容的保護意識日益增強。頭條等平臺通過設置嚴格的規則體系，來確保內容的合法使用和傳播。我們的失敗，或許正是因為沒有遵循這些規則，而觸動了平臺的敏感神經。
二、挫敗后的覺醒：尊重與合作的新視角
面對這次挫敗，我們不應僅僅停留在沮喪和懊惱之中，而應從中汲取教訓，開啟新的視角。首先，我們要深刻認識到尊重規則的重要性。在這個法治社會，任何行為都應在法律和規則的框架內進行。對于平臺的內容，我們更應保持敬畏之心，遵循其使用規則，避免觸碰法律的紅線。
其次，我們要積極尋求與平臺的合作機會。在信息共享的時代背景下，合作已成為不可逆轉的趨勢。我們可以嘗試與頭條等平臺建立聯系，共同探討數據共享和使用的可能性。通過合法合規的途徑獲取數據，不僅能夠保障數據的真實性和可靠性，還能夠為雙方帶來更多的合作機會和共贏的可能。
三、展望未來：技術革新與規則進化的交響曲
雖然這次挫敗讓我們暫時停下了腳步，但我們也應看到前方的希望。隨著技術的不斷進步和規則的日益完善，我們有理由相信未來的信息獲取將更加便捷和高效。
在技術層面，我們可以期待更加智能和先進的爬蟲技術的出現。這些技術將能夠更好地應對各種反爬蟲措施的挑戰，為我們提供更加全面和準確的數據支持。同時，隨著人工智能技術的不斷發展，我們或許還能夠開發出更加智能化的信息分析工具，幫助我們更好地理解和利用這些數據。
在規則層面，我們可以預見各大平臺將不斷完善自己的規則體系。這些規則將更加明確和具體地規定內容的使用方式和限制條件，為數據的合法共享和使用提供更好的保障。同時，隨著人們對數據隱私和版權的重視程度不斷提高，我們也應積極參與相關規則的制定和完善工作，為構建一個更加健康、有序的信息環境。
這次頭條HTML提取的挫敗經歷雖然讓我們暫時受挫，但也為我們提供了寶貴的反思和成長機會。我們不僅要看到技術的局限性和規則的約束性，更要從中汲取教訓、總結經驗、尋找新的出路。在未來的道路上，我們將以更加開放的心態和敏銳的洞察力去迎接挑戰、把握機遇、創造更加美好的未來。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
