成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

用純 DOM 的方式結(jié)合 Puppeteer 自動生成網(wǎng)頁骨架屏

BlackHole1 / 2659人閱讀

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

??骨架屏是在頁面數(shù)據(jù)尚未加載完成前先給用戶展示出頁面的大致結(jié)構(gòu)，直到請求數(shù)據(jù)返回后再顯示真正的頁面內(nèi)容；隨著單頁應(yīng)用（ SPA ）的越來越流行，單頁應(yīng)用的用戶體驗(yàn)也越來越得到前端開發(fā)者的關(guān)注；為了優(yōu)化用戶體驗(yàn)，在數(shù)據(jù)到達(dá)用戶之前，往往會在頁面上加上 loading 的效果，而現(xiàn)在，越來越多的場景傾向于使用頁面的骨架替代單一的 loading 效果；

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

提高效率，節(jié)約多帶帶編寫骨架屏代碼的時(shí)間

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

可以優(yōu)化用戶體驗(yàn)，在頁面數(shù)據(jù)尚未加載完成前先給用戶展示出頁面的大致結(jié)構(gòu)，配合動畫效果，給用戶一種平滑切換的感覺

常見的方案：

手動編寫骨架屏代碼

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

餓了么內(nèi)部的生成骨架頁面的工具page-skeleton-webpack-plugin

..

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

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

生成的骨架屏節(jié)點(diǎn)是基于頁面本身的結(jié)構(gòu)和 CSS，存在嵌套比較深的情況，體積不會太小

只支持 history 模式.

我們的方案是：用純 DOM 的方式結(jié)合 Puppeteer 自動生成網(wǎng)頁骨架屏

編寫操作 DOM 的 Javascript 腳本

遍歷可見區(qū)域可見的 DOM 節(jié)點(diǎn)，包括：非隱藏元素、寬高大于 0 的元素、非透明元素、內(nèi)容不是空格的元素、位于瀏覽窗口可見區(qū)域內(nèi)的元素

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

對于符合生成條件的區(qū)域，一視同仁，生成相應(yīng)區(qū)域的顏色塊

“一視同仁”即對于符合條件的區(qū)域，不區(qū)分具體元素，不用考慮結(jié)構(gòu)層級，不考慮樣式，統(tǒng)一生成 div 的顏色塊

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

對于頁面結(jié)構(gòu)比較復(fù)雜或者大圖片比較多的頁面，會出現(xiàn)不盡如人意的地方，我們通過 includeElement(node, draw)和 init 兩個(gè)鉤子函數(shù)來支持自定義的微調(diào)

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

    const createSkeletonHTML = require("DrawPageStructure/evalDOM")

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

??直接在瀏覽器端運(yùn)行，在控制臺打印當(dāng)前頁面骨架屏節(jié)點(diǎn)，復(fù)制添加到應(yīng)用頁面，但是該方式不夠自動化，我們該讓骨架屏自動生成并添加到應(yīng)用頁面

Puppeteer

Puppeteer 是谷歌官方出品的一個(gè)可以控制 headless Chrome 的 Node 庫?？梢酝ㄟ^ Puppeteer 的提供的 api 直接控制 Chrome 模擬大部分用戶操作來進(jìn)行 UI Test 或者作為爬蟲訪問頁面來收集數(shù)據(jù)。

Puppeteer 提供運(yùn)行環(huán)境和導(dǎo)出方式

使用 puppeteer 運(yùn)行需要生成骨架屏的頁面

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

將自動生成的骨架屏 DOM 片段插入到應(yīng)用頁面的入口節(jié)點(diǎn)

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

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

小結(jié)

核心在于 DOM 操作，puppeteer 僅提供運(yùn)行環(huán)境和導(dǎo)出方式

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

不受項(xiàng)目和框架的限制，vue 和 react 等項(xiàng)目零修改即可復(fù)用

生成色塊的單位為百分比，不同設(shè)備自適應(yīng)

不需要 css-tree 來提取樣式，不依賴頁面本身的布局結(jié)構(gòu)，生成扁平的 DOM 節(jié)點(diǎn)體積特別小

支持自定義生成方式與導(dǎo)出方式

還有很多細(xì)節(jié)優(yōu)化中，歡迎感興趣的小伙伴一起加入！

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

歡迎 star ！，歡迎提 PR ！

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/98301.html

相關(guān)文章

  • 摩拜前端周刊第8期

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

    lykops 評論0 收藏0

  • 前端骨架屏方案小結(jié)

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

    IntMain 評論0 收藏0

  • 前端骨架屏方案小結(jié)

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

    TerryCai 評論0 收藏0

  • 前端骨架屏方案小結(jié)

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

    MasonEast 評論0 收藏0

  • 小程序構(gòu)建骨架屏的探索

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

    shiweifu 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<