用純 DOM 的方式結合 Puppeteer 自動生成網頁骨架屏

BlackHole1 發布于2019-08-23 12:19 / 2647人閱讀

摘要：可以通過的提供的直接控制模擬大部分用戶操作來進行或者作為爬蟲訪問頁面來收集數據。

??骨架屏是在頁面數據尚未加載完成前先給用戶展示出頁面的大致結構，直到請求數據返回后再顯示真正的頁面內容；隨著單頁應用（ SPA ）的越來越流行，單頁應用的用戶體驗也越來越得到前端開發者的關注；為了優化用戶體驗，在數據到達用戶之前，往往會在頁面上加上 loading 的效果，而現在，越來越多的場景傾向于使用頁面的骨架替代單一的 loading 效果；

為什么需要自動生成骨架屏？

提高效率，節約多帶帶編寫骨架屏代碼的時間

替換原來單一的 loading 圖片效果

可以優化用戶體驗，在頁面數據尚未加載完成前先給用戶展示出頁面的大致結構，配合動畫效果，給用戶一種平滑切換的感覺

常見的方案：

手動編寫骨架屏代碼

通過預渲染手動書寫的代碼生成相應的骨架屏，比如：vue-skeleton-webpack-plugin

餓了么內部的生成骨架頁面的工具page-skeleton-webpack-plugin

a. 前兩者的前提都是需要開發者自己編寫骨架屏代碼
b. 餓了么的做的比較強大了，還有 UI 界面專門調整骨架屏

對于復雜的頁面也會有不盡如人意的地方

生成的骨架屏節點是基于頁面本身的結構和 CSS，存在嵌套比較深的情況，體積不會太小

只支持 history 模式.

我們的方案是：用純 DOM 的方式結合 Puppeteer 自動生成網頁骨架屏

編寫操作 DOM 的 Javascript 腳本

遍歷可見區域可見的 DOM 節點，包括：非隱藏元素、寬高大于 0 的元素、非透明元素、內容不是空格的元素、位于瀏覽窗口可見區域內的元素

針對（背景）圖片、文字、表單項、音頻視頻等區域，算出其所占區域的寬、高、距離視口的絕對距離等信息

對于符合生成條件的區域，一視同仁，生成相應區域的顏色塊

“一視同仁”即對于符合條件的區域，不區分具體元素，不用考慮結構層級，不考慮樣式，統一生成 div 的顏色塊

該腳本的運行環境決定了獲取到的元素尺寸與相關距離單位不可控，可能需要做轉換，比如用的 rem、em、vh 等；我們采用比較簡單的方式，不取 style 的尺寸相關的值，而是通過 getBoundingClientRect 獲取寬、高、距離視口距離的絕對值，與當前設備的寬高，計算出相應的百分比作為顏色塊的單位，這樣來適配不同設備

對于頁面結構比較復雜或者大圖片比較多的頁面，會出現不盡如人意的地方，我們通過 includeElement(node, draw)和 init 兩個鉤子函數來支持自定義的微調

以上就能夠直接跑在瀏覽器生成骨架屏代碼了，手動添加到應用頁面

    const createSkeletonHTML = require("DrawPageStructure/evalDOM")

    createSkeletonHTML({
        // ...
        background: "red",
        animation: "opacity 1s linear infinite;"
    }).then(skeletonHTML => {
        console.log(skeletonHTML)
    }).catch(e => {
        console.error(e)
    })

??直接在瀏覽器端運行，在控制臺打印當前頁面骨架屏節點，復制添加到應用頁面，但是該方式不夠自動化，我們該讓骨架屏自動生成并添加到應用頁面

Puppeteer

Puppeteer 是谷歌官方出品的一個可以控制 headless Chrome 的 Node 庫。可以通過 Puppeteer 的提供的 api 直接控制 Chrome 模擬大部分用戶操作來進行 UI Test 或者作為爬蟲訪問頁面來收集數據。

Puppeteer 提供運行環境和導出方式

使用 puppeteer 運行需要生成骨架屏的頁面

將之前編寫的 Javascript 腳本通過 puppeteer 提前注入到該頁面，這樣即可運行該腳本，并生成骨架屏所需的 DOM 節點

將自動生成的骨架屏 DOM 片段插入到應用頁面的入口節點

const evalDOM = require("../evalDOM");

await page.goto(url, {waitUntil: "networkidle0"});
const skeletonHTML = await page.evaluate.call(page, evalDOM, ...args);

小結

核心在于 DOM 操作，puppeteer 僅提供運行環境和導出方式

只要能訪問的頁面都能生成，history 與 hash 模式無限制

不受項目和框架的限制，vue 和 react 等項目零修改即可復用

生成色塊的單位為百分比，不同設備自適應

不需要 css-tree 來提取樣式，不依賴頁面本身的布局結構，生成扁平的 DOM 節點體積特別小

支持自定義生成方式與導出方式

還有很多細節優化中，歡迎感興趣的小伙伴一起加入！

詳細代碼和使用方式請移步： https://github.com/famanoder/...

歡迎 star ！，歡迎提 PR ！

GPU云服務器云服務器動態生成dom html生成dom樹生成快捷方式 topic生成方式正則

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/98301.html

摩拜前端周刊第8期

摘要：地址前端詞典提高幸福感的個技巧推薦文章介紹了個更加簡潔優雅的使用技巧。這些技巧確實在實際開發中十分常用，作者總結的很好，特別是針對降級問題又學到了一個新思路。值得奮戰在一線的攻城獅們閱讀學習。Ladies and 鄉親們，摩拜前端周刊起航啦～摩拜前端團隊會收集每周前端優秀文章，每周五發布至掘金平臺，歡迎關注我們～過個沒什么了不起的一天，耀眼一些，你有資格 Top 榜「中高級前端」...

lykops 2019-05-23 17:35 評論0 收藏0
前端骨架屏方案小結

摘要：常用于文章列表動態列表頁等相對比較規則的列表頁面。很多項目中都有應用餓了么版本知乎等網站中都有應用。歡迎討論，點個贊再走吧骨架屏最近在項目不時有用到骨架屏的需求,所以抽時間對骨架屏的方案作了一下調研,骨架屏的實踐已經有很多了,也有很多人對自己的方案作了介紹.在這里按照個人的理解做了一個匯總和分類,分享給大家. 關于骨架屏(簡介) 骨架屏就是在頁面數據尚未加載前先給用戶展示出頁面的大...

IntMain 2019-08-29 16:58 評論0 收藏0
前端骨架屏方案小結

摘要：常用于文章列表動態列表頁等相對比較規則的列表頁面。很多項目中都有應用餓了么版本知乎等網站中都有應用。歡迎討論，點個贊再走吧骨架屏最近在項目不時有用到骨架屏的需求,所以抽時間對骨架屏的方案作了一下調研,骨架屏的實踐已經有很多了,也有很多人對自己的方案作了介紹.在這里按照個人的理解做了一個匯總和分類,分享給大家. 關于骨架屏(簡介) 骨架屏就是在頁面數據尚未加載前先給用戶展示出頁面的大...

TerryCai 2019-08-02 11:42 評論0 收藏0
前端骨架屏方案小結

摘要：常用于文章列表動態列表頁等相對比較規則的列表頁面。很多項目中都有應用餓了么版本知乎等網站中都有應用。歡迎討論，點個贊再走吧骨架屏最近在項目不時有用到骨架屏的需求,所以抽時間對骨架屏的方案作了一下調研,骨架屏的實踐已經有很多了,也有很多人對自己的方案作了介紹.在這里按照個人的理解做了一個匯總和分類,分享給大家. 關于骨架屏(簡介) 骨架屏就是在頁面數據尚未加載前先給用戶展示出頁面的大...

MasonEast 2019-08-23 12:22 評論0 收藏0
小程序構建骨架屏的探索

摘要：第二套方案，一定程度上改善了第一套方案帶來的維護成本增加的缺點，主要還是使用工具預渲染頁面，獲取到節點和樣式，保留頁面結構，覆蓋樣式，生成灰色塊蓋在原有文本圖片或者是等節點上面，最后將生成的和打包出來，就是一個帶有骨架屏的頁面。首屏一般情況下，在首屏數據未拿到之前，為了提升用戶的體驗，會在頁面上展示一個loading的圖層，類似下面這個showImg(https://segment...

shiweifu 2019-08-23 10:39 評論0 收藏0