整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
言
目前，教學(xué)、教研各種內(nèi)容線(xiàn)上沉淀、展示豐富多彩，但線(xiàn)上內(nèi)容“線(xiàn)下化”能力不足或過(guò)分依賴(lài)人力，比如，線(xiàn)上練習(xí)題組卷后以PDF形式分發(fā)給學(xué)生，家長(zhǎng)希望將考試、練習(xí)題目打印后，學(xué)生帶到學(xué)校去做（高中生使用手機(jī)等電子設(shè)備的時(shí)間有限），線(xiàn)上各類(lèi)分析報(bào)告以PDF形式分享給學(xué)生/家長(zhǎng)等。
從業(yè)務(wù)方面看，不同業(yè)務(wù)線(xiàn)的多個(gè)業(yè)務(wù)場(chǎng)景都有輸出PDF的訴求，如果各業(yè)務(wù)線(xiàn)自己設(shè)計(jì)、實(shí)現(xiàn)符合自身業(yè)務(wù)場(chǎng)景的具體方案，除調(diào)研、開(kāi)發(fā)工作量較大之外，還會(huì)有重復(fù)調(diào)研，踩坑的情況。
從技術(shù)角度看，線(xiàn)上內(nèi)容轉(zhuǎn)PDF的內(nèi)容源頭來(lái)自于H5富文本內(nèi)容，業(yè)界內(nèi)以此為基礎(chǔ)的PDF生成方案多種多樣，也各有優(yōu)劣，比如：
方案對(duì)比-表格-1
因此，我們綜合了各種PDF生成方案并總結(jié)了在探索講義生成PDF過(guò)程中的經(jīng)驗(yàn)，抽象出了一套通用的，可復(fù)用的能力供各業(yè)務(wù)線(xiàn)快速利用，基本方案和優(yōu)劣如下：
最終方案-表格-2
目 標(biāo)
旨在提供一套以H5為載體的PDF通用生成方案，這套方案有如下特點(diǎn)：
這套方案可分為兩個(gè)核心部分，頁(yè)面展示側(cè) - Medusa，PDF生成側(cè) - Hydra
頁(yè)面展示側(cè) - Medusa
我們頁(yè)面展示側(cè)的通用能力——Medusa，是基于Paged.js的二次封裝，并以NPM包形式提供給業(yè)務(wù)方使用。Medusa可對(duì)任何HTML進(jìn)行分頁(yè)、并根據(jù)配置添加頁(yè)眉、頁(yè)腳等，最終將處理后的HTML渲染到頁(yè)面中。Medusa封裝并簡(jiǎn)化了對(duì)PDF格式的配置，可覆蓋絕大多數(shù)業(yè)務(wù)場(chǎng)景，使得各業(yè)務(wù)場(chǎng)景將更多精力投入其自身業(yè)務(wù)邏輯的開(kāi)發(fā)。
之所以選擇Pagedjs為基礎(chǔ)開(kāi)發(fā)我們自己的SDK，是因?yàn)樗悄壳拔覀兡苷业降奈ㄒ?/span>開(kāi)源的、具有HTML內(nèi)容分頁(yè)，樣式處理的前端庫(kù)，同時(shí)我們也在講義中經(jīng)過(guò)了長(zhǎng)期的摸索與沉淀。
接下來(lái)將詳細(xì)介紹Paged.js原理、Medusa支持的功能與使用方法。
一 Paged.js是如何工作的
Paged.js包含了 3 個(gè)大模塊
這里將主要介紹 Previewer 和 Chunker，因?yàn)槲覀兊亩伍_(kāi)發(fā)和維護(hù)不涉及到Polisher。
Previewer
Previewer 的工作非常簡(jiǎn)單，但我們會(huì)主要利用它封裝我們的Medusa，初始化一個(gè)Previewer對(duì)象，Previewer初始化了Chunker和Polisher對(duì)象：
Medusa-代碼-1
再調(diào)用Previewer的preview()方法，preview()方法做了兩件事：
Medusa-代碼-2
當(dāng)chunker.flow結(jié)束，即可在瀏覽器看到整個(gè)頁(yè)面處理完之后的樣子。
Chunker
首先，Chunker解析、預(yù)處理需要分頁(yè)的HTML，為其添加一些必要的屬性
Medusa-代碼-3
然后創(chuàng)建容納所有頁(yè)(pages)的容器，并掛載到renderTo容器下(默認(rèn)Body)，以備組織后續(xù)的所有頁(yè)：
Medusa-代碼-4
接著，chunker創(chuàng)建了一個(gè)page模版，以便增加頁(yè)面使用：
Medusa-代碼-5
其中，TEMPLATE是Pagedjs內(nèi)部創(chuàng)建頁(yè)面時(shí)所使用的基礎(chǔ)模版。
Medusa-代碼-6
接下來(lái)，chunker進(jìn)入了渲染+分頁(yè)過(guò)程（這個(gè)過(guò)程我們不會(huì)在二次開(kāi)發(fā)中做修改，但需要了解其基本思路以便在出問(wèn)題時(shí)能有解決思路），這個(gè)過(guò)程在循環(huán)一個(gè)迭代器（*layout），迭代器一直在做3件事：
原則：
尋找overflow時(shí)會(huì)將盡可能多的內(nèi)容節(jié)點(diǎn)插入內(nèi)容區(qū)域，這里，“盡可能多”分為幾種情況，比如：
步驟：
Pagedjs遵循了如下步驟去尋找overflow：
兩個(gè)前置條件：
i. 從需要處理的內(nèi)容第一個(gè)節(jié)點(diǎn)開(kāi)始，判斷是否 node.left >= contentArea.right || node.top >= contentArea.bottom
Medusa-代碼-7
ii.如果不滿(mǎn)足，則判斷 node.right <= contentArea.right && node.bottom <= contentArea.bottom
Medusa-代碼-8
iii.如果不滿(mǎn)足，那說(shuō)明有子節(jié)點(diǎn)overflow了，則繼續(xù)深入其子節(jié)點(diǎn)查找即可。
3.使用模版添加新的頁(yè)面，并從BreakToken處繼續(xù)上述動(dòng)作。
二 Medusa支持的功能及使用方法
基于Paged.js，Medusa支持了如下功能，并為業(yè)務(wù)方提供了更加簡(jiǎn)潔、定制化的配置。
下方是調(diào)用Medusa的代碼示例：
Medusa-代碼-9
1.1 動(dòng)態(tài)頁(yè)面分頁(yè)能力
Medusa核心功能，可將連續(xù)的HTML頁(yè)面轉(zhuǎn)化成一頁(yè)頁(yè)P(yáng)DF樣式的HTML。
1.2 單頁(yè)模版配置 -> 生成能力
通過(guò)Grid布局，Paged.js將一個(gè)單頁(yè)模版分為多個(gè)區(qū)域，整體分為2個(gè)大的部分：
業(yè)務(wù)方通過(guò)簡(jiǎn)單的配置，即可還原UI設(shè)計(jì)稿中的PDF樣式，例子如下圖：
1.2.1 base
頁(yè)面基礎(chǔ)配置是對(duì)每頁(yè)的。支持紙型或頁(yè)面寬高、內(nèi)容區(qū)域margin、padding、背景及水印的設(shè)置。
在封裝Medusa時(shí)，Medusa將讀取傳入的頁(yè)面模版配置、靜態(tài)頁(yè)內(nèi)容配置，并將樣式上的配置解析并轉(zhuǎn)化為Previewer可理解的樣式內(nèi)容，比如頁(yè)面寬高的設(shè)置：
Medusa-代碼-10
將被轉(zhuǎn)化為：
Medusa-代碼-11
1.2.2 surround
2. 目前支持3種類(lèi)型的surround item:
example:
Medusa-代碼-12
1.3 前/后置靜態(tài)頁(yè)面
業(yè)務(wù)方可通過(guò)如下方式配置靜態(tài)頁(yè)面的具體內(nèi)容：
Medusa-代碼-13
其中，傳入的React JSX Element將會(huì)被這樣處理：
Medusa-代碼-14
處理完成后，將HTML String拼接到頁(yè)面模版中，再插入分頁(yè)后內(nèi)容的前后。
PDF生成側(cè) - Hydra：
頁(yè)面展示側(cè)為PDF生成做好了頁(yè)面的準(zhǔn)備，對(duì)于PDF生成側(cè)，需要做的工作就更純粹了，業(yè)務(wù)方除了請(qǐng)求生成PDF，定期檢查PDF生成的進(jìn)度，無(wú)需做任何額外工作。
1.整體流程：
PDF生成是CPU和內(nèi)存密集型的，由于頁(yè)面內(nèi)容的不確定性，也意味著頁(yè)面渲染時(shí)間與生成PDF的時(shí)間都是不確定的，因此整體PDF生成的鏈路被設(shè)計(jì)成是異步的，如下圖：
整體流程上，業(yè)務(wù)方在請(qǐng)求生成PDF時(shí)，會(huì)先在后端做一條記錄，后端再將任務(wù)發(fā)送給Node服務(wù)，即Hydra；
在生成PDF時(shí)， 第 1 步是做頁(yè)面上的準(zhǔn)備，一個(gè)生成任務(wù)可能有多個(gè)URL頁(yè)面需要生成PDF，所以我們預(yù)先啟動(dòng)對(duì)應(yīng)URL數(shù)量的PPTR Page，頁(yè)面都啟動(dòng)完成后，進(jìn)入下一步；
第 2 步：渲染頁(yè)面，這個(gè)過(guò)程中，如果請(qǐng)求是包含多個(gè)URL的，這些頁(yè)面會(huì)同步渲染，在所有頁(yè)面渲染完成后，進(jìn)入下一步。
第 2.5 步，如果是需要生成連續(xù)頁(yè)碼的一整個(gè)PDF，還會(huì)做額外的一個(gè)動(dòng)作：頁(yè)碼矯正，通過(guò)頁(yè)碼矯正，可以將同步渲染的每個(gè)頁(yè)面，按照其之前頁(yè)面的頁(yè)碼數(shù)修正，以保證整體PDF的頁(yè)碼的連貫。
第 3 步，通過(guò)PPTR Page的能力將頁(yè)面轉(zhuǎn)換為PDF buffer，如有必要，再將生成的PDF buffer拼接到一起生成一整個(gè)PDF，或者將每個(gè)PDF buffer都生成一個(gè)PDF，壓縮成zip文件。
第 4 步，文件上傳OSS，最終返回OSS CDN鏈接。
2.請(qǐng)求生成PDF：
業(yè)務(wù)側(cè)請(qǐng)求將對(duì)應(yīng)頁(yè)面生成PDF的時(shí)，只需傳入如下字段：
Hydra-代碼-1
3.PDF生成過(guò)程：
正如在整體流程中所述，PDF生成側(cè)，我們借助 PPTR 的能力打開(kāi)頁(yè)面并生成PDF流。
在頁(yè)面調(diào)用 Medusa 分頁(yè)、組裝能力時(shí)，所有內(nèi)容分頁(yè)組裝完成后會(huì)向body中插入了一個(gè)額外的DOM以標(biāo)識(shí)該頁(yè)面處理完成：
Hydra-代碼-2
這是為了 Hydra 感知頁(yè)面渲染完成所做的準(zhǔn)備，當(dāng)生成服務(wù)的 PPTR 等到該DOM出現(xiàn)時(shí)，則表示頁(yè)面成功渲染并處理完成了：
Hydra-代碼-3
此后，在上面已經(jīng)提到過(guò)，對(duì)于需要將多個(gè)頁(yè)面生成的PDF拼接成一個(gè)PDF的情況，在生成PDF之前需要做一個(gè)重要的動(dòng)作，即頁(yè)碼矯正，原因如下：
并且我們不希望頁(yè)面的處理是串行的，因?yàn)榇袆?shì)必導(dǎo)致速度較慢，生成時(shí)間長(zhǎng)。
這個(gè)問(wèn)題的解決方案如下：
1. 對(duì)于每個(gè)頁(yè)面都啟用一個(gè)page，并同時(shí)處理
2. 每個(gè)頁(yè)面處理完成后（pdfLastDOM出現(xiàn)），通過(guò)Page.$eval()來(lái)統(tǒng)計(jì)頁(yè)數(shù)并記錄:
Hydra-代碼-4
3. 計(jì)算出頁(yè)面中分頁(yè)之后每一個(gè)頁(yè)面的起始頁(yè)碼，以及所有頁(yè)面的頁(yè)碼總和
4. 再修改頁(yè)碼容器樣式的 counterReset 值即可，其后續(xù)頁(yè)碼可自遞增。
Hydra-代碼-5
5. 之后，再通過(guò) Medusa 在頁(yè)面window對(duì)象中Polyfill的相關(guān)配置，比如需要生成的PDF的單頁(yè)寬、高以生成PDF流。
Hydra-代碼-6
6. 最后如有必要，通過(guò)pdf-lib拼接這些 pdfBuffer 即可。
Hydra-代碼-7
7. PDF生成完成后，上傳OSS并返回URL鏈接
4.性能、穩(wěn)定性保證：
在整體方案落地前，我們對(duì)服務(wù)進(jìn)行了多次性能測(cè)試：
以下載題目為例，在4個(gè)容器，每個(gè)容器 3C 12G 的配置下的并行處理能力如下：
對(duì)于 20 道題目，每個(gè)PDF生成任務(wù)在 15 頁(yè)左右，平均 1 分鐘內(nèi)能完成 280 個(gè)任務(wù)的處理。
對(duì)于 40 道題目，每個(gè)PDF生成任務(wù)在 30 頁(yè)左右，平均 1 分鐘內(nèi)能完成 105 個(gè)任務(wù)的處理。
對(duì)于 60 到題目，每個(gè)PDF生成任務(wù)在 40 頁(yè)左右，平均 1 分鐘內(nèi)能完成 54 個(gè)任務(wù)的處理。
同時(shí)，根據(jù) Hydra 服務(wù)的整體的處理能力，后端通過(guò)任務(wù)隊(duì)列的形式幫助我們保證服務(wù)不被瞬間的突刺流量擊垮。
已接入/正在接入的相關(guān)業(yè)務(wù)線(xiàn)及場(chǎng)景：
目前，公司有 5 大業(yè)務(wù)線(xiàn)，8 個(gè)場(chǎng)景已經(jīng)完全接入我們的能力用于 H5 轉(zhuǎn) PDF，如下是錯(cuò)題本、內(nèi)容資料庫(kù)接入后生成的PDF樣例：
錯(cuò)題本：
內(nèi)容資料庫(kù)試卷：
未來(lái)展望
目前整體的PDF生成方案已經(jīng)能夠滿(mǎn)足大多數(shù)場(chǎng)景和內(nèi)容，但依然有可改進(jìn)空間。
HTML的流式布局要求我們必須手動(dòng)的對(duì)內(nèi)容分頁(yè)，才能添加頁(yè)眉，頁(yè)腳等（即Mdusa做的工作），正因?yàn)槿绱耍谔幚韽?fù)雜的內(nèi)容時(shí)，可能會(huì)出現(xiàn)一些問(wèn)題：比如，遇到復(fù)雜表格時(shí)，由于表格可能會(huì)有多種多樣的行、列合并，同時(shí)表格單元格內(nèi)的內(nèi)容也可以多種多樣，在分頁(yè)過(guò)程中，Medusa內(nèi)部的PagedJS并不能完美的處理對(duì)于長(zhǎng)、且復(fù)雜的表格的分割，因此可能遇到分割后表格單元格缺失、錯(cuò)亂或?qū)捀咤e(cuò)誤的問(wèn)題，這些問(wèn)題在講義中體現(xiàn)較明顯。
我們?nèi)栽诔掷m(xù)關(guān)注與研究復(fù)雜DOM內(nèi)容的分割問(wèn)題，會(huì)嘗試加以?xún)?yōu)化和改進(jìn)PagedJS的能力，同時(shí)，我們也以另外一種思路設(shè)計(jì)了自己的DOM分頁(yè)器方案，但經(jīng)過(guò)評(píng)估，由于實(shí)現(xiàn)比較復(fù)雜，成本較高，暫時(shí)沒(méi)有投入開(kāi)發(fā)資源。
不過(guò)，我們相信，未來(lái)我們一定能以更完美的方式分割DOM以生成更高質(zhì)量的PDF。
作者:高源、陳欣博
來(lái)源:微信公眾號(hào):高途技術(shù)
出處:https://mp.weixin.qq.com/s/c_N7jdNklrNFKR_Cub2Tgg
需2行代碼，就能實(shí)現(xiàn)上圖中的優(yōu)化效果，讓JS文件的加載耗時(shí)從1.4秒減少到0.4秒，大幅減少951ms（-67%），代碼實(shí)現(xiàn)也非常簡(jiǎn)單方便，一起學(xué)起來(lái)吧~
資源優(yōu)先級(jí)提示是瀏覽器平臺(tái)為控制資源加載時(shí)機(jī)而設(shè)計(jì)的一系列API，主要包括：
用于提示瀏覽器在CPU和網(wǎng)絡(luò)帶寬空閑時(shí)，預(yù)先下載指定URL的JS，圖片等各類(lèi)資源，存儲(chǔ)到瀏覽器本地緩存中，從而減少該資源文件后續(xù)加載的耗時(shí)，優(yōu)化用戶(hù)體驗(yàn)。
具體使用方式是將link標(biāo)簽的rel屬性設(shè)為prefetch，并將href屬性設(shè)為目標(biāo)資源URL，例如 <link rel="prefetch" href="https://github.com/JuniorTour/juniortour.js" />。
該標(biāo)簽插入DOM后，將觸發(fā)一次href屬性值對(duì)應(yīng)URL的請(qǐng)求，并將響應(yīng)保存到本地的prefetch cache中，同時(shí)不會(huì)解析、運(yùn)行該資源。
可以預(yù)取回的資源有很多：JS、CSS、各種格式的圖片、各種格式的音頻、WASM文件、字體文件、甚至HTML文檔本身都可實(shí)施 prefetch，預(yù)先緩存。
命中預(yù)取回緩存的請(qǐng)求，在開(kāi)發(fā)者工具中的Network標(biāo)簽中的Size列，會(huì)有獨(dú)特的(prefetch cache)標(biāo)記：
crossorigin屬性是瀏覽器同源策略的一部分，用于對(duì)link、script、img等元素指定是否允許以跨域資源共享模式加載目標(biāo)資源。
默認(rèn)情況下，JS腳本、圖片等部分靜態(tài)資源不受同源策略的限制，可以從任何跨域域名加載第三方JS文件、圖片文件。
這樣的規(guī)則有明顯的安全風(fēng)險(xiǎn)，例如：
第三方JS文件可以訪(fǎng)問(wèn)第一方網(wǎng)站的錯(cuò)誤上下文，從而獲取內(nèi)部信息。
第三方JS文件、圖片文件的源服務(wù)器可以在請(qǐng)求過(guò)程中通過(guò)SSL握手驗(yàn)證、cookies等手段獲取用戶(hù)信息。
為了緩解這些安全風(fēng)險(xiǎn)，瀏覽器引入了可用于script、img和link標(biāo)簽的crossorigin屬性，對(duì)于這些標(biāo)簽加載的資源：
沒(méi)有crossorigin屬性，就無(wú)法獲取JavaScript的錯(cuò)誤上下文。
將crossorigin設(shè)置為"anonymous"，可以訪(fǎng)問(wèn)JavaScript的錯(cuò)誤上下文，但在請(qǐng)求過(guò)程中的SSL握手階段不會(huì)攜帶cookies或其他用戶(hù)憑據(jù)。
將crossorigin設(shè)置為"use-credentials"，既可以訪(fǎng)問(wèn)JavaScript的錯(cuò)誤上下文，也可以在請(qǐng)求過(guò)程中的SSL握手階段時(shí)攜帶cookies或用戶(hù)憑據(jù)。
此外，Chrome瀏覽器的HTTP緩存以及相應(yīng)的Prefetch、Preconnect資源優(yōu)先級(jí)提示也會(huì)受到crossorigin屬性的影響。
對(duì)于跨域資源，則其資源優(yōu)先級(jí)提示也需要設(shè)置為跨域，即crossorigin="anonymous"，例如：<link rel="prefetch" href="https://github.com/JuniorTour/juniortour.js" crossorigin="anonymous" />
資源是否跨域，可以依據(jù)瀏覽器自動(dòng)附帶的Sec-Fetch-Mode請(qǐng)求頭判斷：
值為no-cors，表示當(dāng)前資源加載的模式并非跨域資源共享模式。其對(duì)應(yīng)的資源優(yōu)先級(jí)提示不需要設(shè)置為跨域crossorigin="anonymous"。
值為cors，表示當(dāng)前資源加載的模式是跨域資源共享模式。其對(duì)應(yīng)的資源優(yōu)先級(jí)提示需要設(shè)置為跨域crossorigin="anonymous"。
與預(yù)取回不同，預(yù)加載用于提高當(dāng)前頁(yè)面中資源加載的優(yōu)先級(jí)，確保關(guān)鍵資源優(yōu)先加載完成。
預(yù)加載最常見(jiàn)的用法是用于字體文件，減少因字體加載較慢導(dǎo)致的文字字體閃爍變化。例如：<link rel="preload" as="font" href="/main.woff" />
應(yīng)用了preload提示的資源，通常會(huì)以較高的優(yōu)先級(jí)率先在網(wǎng)頁(yè)中加載，例如下圖中的nato-sans.woff2請(qǐng)求，Priority列的值為High，加載順序僅次于Document本身。
as屬性是必填屬性，是link標(biāo)簽帶有rel="preload"屬性時(shí)，確定不同類(lèi)型資源優(yōu)先級(jí)的依據(jù)。
用于提前與目標(biāo)域名握手，完成DNS尋址，并建立TCP和TLS鏈接。
具體使用方式是將link標(biāo)簽的rel屬性設(shè)為preconnect，并將href屬性設(shè)為目標(biāo)域名，例如 <link rel="preconnect" href="https://github.com" />。
優(yōu)化效果是通過(guò)提前完成DNS尋址、建立TCP鏈接和完成TLS握手，從而減少后續(xù)訪(fǎng)問(wèn)目標(biāo)域名時(shí)的連接耗時(shí)，改善用戶(hù)體驗(yàn)。
注意！強(qiáng)烈建議只對(duì)重要域名進(jìn)行Preconnect優(yōu)化，數(shù)量不要超過(guò) 6 個(gè)。
因?yàn)镻reconnect生效后，會(huì)與目標(biāo)域名的保持至少10秒鐘的網(wǎng)絡(luò)連接，占用設(shè)備的網(wǎng)絡(luò)和內(nèi)存資源，甚至阻礙其他資源的加載。
與上文的預(yù)取回Prefetch不同，DNS預(yù)取回用于對(duì)目標(biāo)域名提前進(jìn)行DNS尋址，取回并緩存域名對(duì)應(yīng)的IP地址，而非像預(yù)取回Prefetch那樣緩存文件資源。
具體使用方式是將link標(biāo)簽的rel屬性設(shè)為dns-prefetch，并將href屬性值設(shè)為目標(biāo)域名，例如 <link rel="dns-prefetch" href="https://github.com" />。
優(yōu)化效果是通過(guò)提前解析出目標(biāo)域名的IP地址，從而減少后續(xù)從目標(biāo)域名加載資源的耗時(shí)，加快頁(yè)面加載速度，改善用戶(hù)體驗(yàn)。
通常來(lái)說(shuō)，解析DNS的耗時(shí)往往有幾十甚至幾百毫秒，對(duì)資源加載耗時(shí)有直接影響。
DNS預(yù)取回的能力與預(yù)連接Preconnect有所重合，以往因?yàn)閐ns-prefetch的瀏覽器兼容性略好于preconnect，往往兩者一同使用。 但近年來(lái)，IE被廢棄，用戶(hù)大都已更新到現(xiàn)代瀏覽器，兼容性不再重要，單獨(dú)使用preconnect即可替代dns-prefetch。
例如，我們的靜態(tài)資源部署在域名為static.zhihu.com的CDN上，那么添加如下2行HTML代碼：
<link rel="preconnect" href="static.zhihu.com" />
<link rel="dns-prefetch" href="static.zhihu.com" />就能觀察到CDN上的JS、CSS等資源加載耗時(shí)大幅減少，產(chǎn)生了顯著的優(yōu)化效果：
在2022年初，Chrome 102 新增了fetch-priority屬性，可用來(lái)更精細(xì)地控制資源加載的優(yōu)先級(jí)，目前仍處于實(shí)驗(yàn)階段，未來(lái)可能會(huì)更加完善，示例如下：
<img src="important.jpg" fetchpriority="high">
<img src="small-avatar.jpg" fetchpriority="low">
<script src="low-priority.js" fetchpriority="low"></script>
// 只對(duì) preload link 標(biāo)簽生效
<link href="main.css" rel="preload" as="image" fetchpriority="high"> 筆者基于多年實(shí)踐，制作了一套方便實(shí)用的資源優(yōu)先級(jí)提示生成工具，目前已發(fā)布為 NPM 包：resource-hint-generator，支持根據(jù)構(gòu)建產(chǎn)物，自動(dòng)生成資源優(yōu)先級(jí)提示標(biāo)記。
下面我們以本書(shū)配套的fe-optimization-demo項(xiàng)目為例，演示如何接入該庫(kù)，為我們的前端項(xiàng)目方便快捷地增加各類(lèi)資源優(yōu)先級(jí)提示。
npm install resource-hint-generator --save-dev并新建配置文件resource-hint-generator-config.js到項(xiàng)目根目錄：
// resource-hint-generator-config.js
module.exports = {
resourcePath: `./dist`,
projectRootPath: __dirname,
resourceHintFileName: `resource-hint.js`,
includeFileTestFunc: (fileName) => {
return /(main.*js)|(main.*css)/g.test(fileName);
},
crossOriginValue: '',
publicPath: 'https://github.com/JuniorTour',
preconnectDomains: ['https://preconnect-example.com'],
};主要參數(shù)說(shuō)明：
例如，我們的前端項(xiàng)目通過(guò)調(diào)用 npm run build 運(yùn)行打包構(gòu)建，那只需要在這條命令中追加運(yùn)行resource-hint-generator的邏輯即可實(shí)現(xiàn)我們的目標(biāo)。
// package.json
"scripts": {
"generate-resource-hint": "resource-hint-generator",
"build": "cross-env NODE_ENV=production webpack && npm run generate-resource-hint",
}測(cè)試運(yùn)行構(gòu)建后，如果在打包產(chǎn)物文件夾（./dist）中找到了生成的resource-hint.js文件，并且其中包含我們配置的 prefetch，preconnect目標(biāo)數(shù)據(jù)，就說(shuō)明配置完成了。
推薦在登錄頁(yè)，活動(dòng)頁(yè)，官網(wǎng)首頁(yè)等前端項(xiàng)目外頁(yè)面提前加載運(yùn)行resource-hint.js ，從而在項(xiàng)目加載時(shí)，充分利用這些提前加載的緩存。
優(yōu)化上線(xiàn)前，在本地開(kāi)發(fā)環(huán)境或設(shè)法直接到生產(chǎn)環(huán)境驗(yàn)證優(yōu)化效果必不可少。
各類(lèi)資源優(yōu)先級(jí)提示是否生效，可以通過(guò)開(kāi)發(fā)者工具中的網(wǎng)絡(luò) Network 面板判斷。我們主要使用 優(yōu)先級(jí)列（Priority），體積列（Size）和 加載時(shí)間序標(biāo)簽頁(yè)（Timing）判斷。
基于前文介紹的優(yōu)化效果，我們可以通過(guò)對(duì)比2類(lèi)監(jiān)控指標(biāo)在優(yōu)化前后的變化來(lái)評(píng)估優(yōu)化效果：
JS,CSS等各類(lèi)靜態(tài)資源更快的加載，更多的命中本地緩存，可以顯著減少頁(yè)面渲染耗時(shí)，預(yù)期也能改善我們?cè)诘谝徽陆榻B的web-vitals首次內(nèi)容繪制FCP，最大內(nèi)容繪制LCP2項(xiàng)用戶(hù)體驗(yàn)指標(biāo)。
收集優(yōu)化前后生產(chǎn)環(huán)境中用戶(hù)資源請(qǐng)求是否命中緩存，也可以更直接地判斷優(yōu)化效果。
我們可以基于Performance API的entry.duration屬性來(lái)實(shí)現(xiàn)緩存命中率指標(biāo)，示例：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Report CacheHit metric</title>
<link
rel="prefetch"
href="https://static.zhihu.com/heifetz/6116.216a26f4.7e059bd26c25b9e701c1.css"
/>
</head>
<body>
<script>
// 上報(bào)數(shù)據(jù)到 Grafana
function report(name, label) {
// ...
}
// 檢查資源加載是否命中緩存
function checkResourceCacheHit() {
// 獲取頁(yè)面加載性能信息
const perfEntries = performance.getEntriesByType('resource');
for (const entry of perfEntries) {
// 判斷資源的加載時(shí)間是否小于50毫秒
// 50ms 來(lái)自于經(jīng)驗(yàn)總結(jié)，可以根據(jù)實(shí)際情況調(diào)整
let hitCache = entry.duration < 50;
report('cacheHiteRate', hitCache);
}
}
setTimeout(() => {
checkResourceCacheHit();
}, 3000);
</script>
</body>
</html>將收集到的數(shù)據(jù)上報(bào)到Grafana后，加以格式化，我們就可以做出如下圖的緩存命中率可視化圖表：
首先，記錄優(yōu)化前狀態(tài)：在優(yōu)化上線(xiàn)前提前上線(xiàn)監(jiān)控指標(biāo)，并收集一段時(shí)間的指標(biāo)數(shù)據(jù)。建議上線(xiàn)前持續(xù)觀察7至15天，從而盡量避免來(lái)自生產(chǎn)環(huán)境用戶(hù)的指標(biāo)數(shù)據(jù)受到工作日和節(jié)假日影響所產(chǎn)生的異常波動(dòng)。
其次，優(yōu)化上線(xiàn)后間隔幾天多次觀察，并在優(yōu)化上線(xiàn)后1至3個(gè)月后回歸優(yōu)化效果，確保效果穩(wěn)定。
如果資源優(yōu)先級(jí)提示這一優(yōu)化生效，我們應(yīng)該能觀察到 FCP 和 LCP 有明顯的改善，例如下圖：
觀察FCP的評(píng)分百分比可視化圖，在4月30日優(yōu)化上線(xiàn)后，評(píng)分為優(yōu)的用戶(hù)占比從優(yōu)化前的約50%，顯著提升到了90%。
再觀察一段時(shí)間這一指標(biāo)，如果評(píng)分優(yōu)的占比都能穩(wěn)定在90%，那我們就有理由判定資源優(yōu)先級(jí)優(yōu)化顯著地提升了用戶(hù)體驗(yàn)！
同樣的，我們也可以觀察緩存命中率指標(biāo)來(lái)判斷優(yōu)化效果，例如下圖：
觀察上述緩存命中率可視化圖，在4月30日優(yōu)化上線(xiàn)后，緩存命中率從優(yōu)化前的約40%，顯著提升到了70%，同樣可以佐證我們的優(yōu)化產(chǎn)生了顯著的正向收益。
原文鏈接：https://juejin.cn/post/7274889579076108348
reamweaver的CSS面板分類(lèi)
type(類(lèi)型)
background(背景)
block(區(qū)塊)
box(方框) 或盒子意思
border(邊框)
list(列表)
positioning(定位)
extensions(擴(kuò)展)
共八個(gè)部分
1. type(類(lèi)型)
type面板主要是對(duì)文字的字體，大小，顏色，效果等基本樣式進(jìn)行設(shè)置。
注意：屬性名帶*號(hào)的是指樣式效果不能在編輯文檔時(shí)顯示，要用瀏覽器打開(kāi)才能看到效果。
(1)font-family：設(shè)置字體系列。什么叫字體系列呢?是指對(duì)文字設(shè)定幾個(gè)字體，當(dāng)遇到第一個(gè)字體不能顯示的文字時(shí)會(huì)自動(dòng)用系列中的第二個(gè)
字體或后面的字體顯示。
注意:一般英文字體我們用"Verdana, Arial, Helvetica, sans-serif"這個(gè)系列比較好看。如果不用這些字體系列，你就需要自己編輯字體系列，
也可以直接手動(dòng)在下拉框里寫(xiě)字體名，字體之間用逗號(hào)隔開(kāi)。中文網(wǎng)頁(yè)默認(rèn)字體是宋體, 一般就空著不要選取任何字體。
默認(rèn)值： not specified(取決于瀏覽器,系統(tǒng)默認(rèn)的字體, 如: 微軟雅黑)
注意：
1.如果有漢字, 那么我們要加引號(hào)
2.如果有多個(gè)英文字母組成的單詞, 我們也要加引號(hào); "microsoft yahei" 中間用空格隔開(kāi)
3.font-family:"黑體","宋體","華文隸書(shū)"; 首先找黑體, 沒(méi)有黑體找宋體...
為了避免在CSS中使用 font 或 font-family 設(shè)置中文字體時(shí)亂碼, 可以使用 Unicode 編碼來(lái)表示字體。
/* 示例:使用Unicode字體編碼設(shè)置字體為"微軟雅黑" */
font-family: "\5FAE\8F6F\96C5\9ED1";(2)font-size：定義文字的大小。你可以通過(guò)選取數(shù)字和度量單位來(lái)選擇具體的字體大小，或者你也可以選擇一個(gè)相對(duì)的字體大小。
最好使用pixels作為單位，這樣不會(huì)在瀏覽器中文本變形。一般字體用比較標(biāo)準(zhǔn)的12px或14px, 默認(rèn)值為16px。
注意：CSS中長(zhǎng)度的單位分絕對(duì)長(zhǎng)度單位和相對(duì)長(zhǎng)度單位:
絕對(duì)長(zhǎng)度單位有：
pt：磅(point)
mm、cn、in、pc：(毫米、厘米、英寸、活字)根據(jù)顯示的實(shí)際尺寸來(lái)確定長(zhǎng)度。
此類(lèi)單位不隨顯示器的分辨率改變而改變。
相對(duì)長(zhǎng)度單位有：
px：(像素)根據(jù)顯示器的分辨率來(lái)確定長(zhǎng)度。
em：當(dāng)前文本的尺寸。例如：{font-size:2em}是指文字大小為原來(lái)的2倍。
比如自身font-size: 30px; 那么此時(shí)1em=30px;
ex：當(dāng)前字母"x"的高度，一般為字體尺寸的一半。
%：是以當(dāng)前文本的百分比定義尺寸。例如：{ font-size:300%}是指文字大小為原來(lái)的3倍。
small、large：表示比當(dāng)前小一個(gè)級(jí)別或大一個(gè)級(jí)別的尺寸。
默認(rèn)值：medium(標(biāo)準(zhǔn)大小)
(3)font-style：定義字體樣式為normal、italic、oblique。默認(rèn)設(shè)置為normal。
注意： italic 斜體 oblique 歪斜體 italic和oblique實(shí)際效果是一樣的。
默認(rèn)值:normal
(4)line-height：設(shè)置文本所在行的行高。默認(rèn)為normal。可以是行內(nèi)元素、行內(nèi)塊元素, 通常與height設(shè)置的高度值相同, 可以做到垂直居中的作用。
你也可以自己鍵入一個(gè)精確的數(shù)值并選取一個(gè)計(jì)量單位。
比較直觀的寫(xiě)法用百分比, 例如140%是指行高等于文字大小的1.4倍。
最常用的方法: line-height:1.5em; /*行間距,相對(duì)數(shù)值,1.5倍行距,*/ 可有效的避免文字發(fā)生重疊
默認(rèn)值： normal
(5)text-decoration：在文本中添加underline(下劃線(xiàn))、overline(上劃線(xiàn))、line-through(中劃線(xiàn))、blink(閃爍效果)。
這些效果可以同時(shí)存在，將效果前的復(fù)選框選定即可。
注意：鏈接的默認(rèn)設(shè)置是underline，我們可以通過(guò)選none去除下劃線(xiàn)。blink(閃爍效果)只在mozilla瀏覽器里可以看到, IE、opera不支持
默認(rèn)值： none
(6)font-weight：給字體指定粗體字的磅值。
normal 默認(rèn)值。定義標(biāo)準(zhǔn)的字符。
bold 定義粗體字符。
bolder 定義更粗的字符。
lighter 定義更細(xì)的字符。
100
200
300
400
500
600
700
800
900
inherit 規(guī)定應(yīng)該從父元素繼承字體的粗細(xì)。
定義由粗到細(xì)的字符。400 等同于 normal, 而 700 等同于 bold。
默認(rèn)值: normal
(7)font-variant：允許你選取字體的變種, 選small-caps(小型大寫(xiě)字母)時(shí), 此樣式區(qū)域內(nèi)所有字母大寫(xiě)。
normal表示正常的字體, 為默認(rèn)值；
默認(rèn)值: normal
(8)text-transform：將選區(qū)中每個(gè)單詞的第一個(gè)字母轉(zhuǎn)為大寫(xiě), 或者令單詞全部大寫(xiě)或全部小寫(xiě)。
參數(shù)：capitalize(單詞首字母大寫(xiě))、uppercase(轉(zhuǎn)換成大寫(xiě))、lowercase(轉(zhuǎn)換成小寫(xiě))、none(不轉(zhuǎn)換)。
默認(rèn)值：none
(9)color：定義文字顏色。包括對(duì)表單輸入的文字顏色。
CSS中顏色的值有三種表示方法：
#RRGGBB格式，是由紅綠藍(lán)三種顏色的值組合，每種顏色的值為"00 – FF"的兩位十六進(jìn)制正整數(shù)。
例如：#FF0000表示紅色，#FFFF00表示黃色。
rgb(R,G,B)格式, RGB為三色的值, 取0~255, 例如：rgb(255,0,0)表示紅色, rgb(255,255,0)表示黃色。
用顏色名稱(chēng)。CSS可以使用已經(jīng)定義好的顏色名稱(chēng)。例如：red表示紅色, yellow表示黃色。
顏色值的縮寫(xiě):
p{color:#000000} 可以縮寫(xiě)為：p{color:#000}
p{color:#336699} 可以縮寫(xiě)為：p{color:#369}
默認(rèn)值： not specified
color: transparent; 透明色
rgba() 解釋: rgba(紅0-255, 綠0-255, 藍(lán)0-255, 透明度0-1)
注意: 如果文字的顏色通過(guò)單獨(dú)的類(lèi)選擇去設(shè)置沒(méi)有改變顏色, 則應(yīng)該通過(guò)組合選擇器(.header .top .topR .blue)去設(shè)置, 改變它的優(yōu)先級(jí)。
2. background(背景)
background面板主要是對(duì)元素的背景進(jìn)行設(shè)置，包括背景顏色、背景圖象、背景圖象的控制。
一般是對(duì)body(頁(yè)面)、table(表格)、div(區(qū)域)的設(shè)置。
(1)background-color：設(shè)置元素的背景色。包括對(duì)input表單輸入框的背景顏色;
默認(rèn)值: transparent(背景顏色為透明)
rgba() 解釋: rgba(紅0-255, 綠0-255, 藍(lán)0-255, 透明度0-1) 一般用于背景色
(2)background-image：設(shè)置元素的背景圖像。
默認(rèn)值:none
CSS3支持多重背景圖,只要加上一個(gè)url指定圖片路徑,并用逗號(hào)(,)將兩組url分隔就可以了
background-image:url(a.jpg),url(b.jpg);base64使用
background-image: url("data:image/png;base64,iVBORw0KGgo=...");(3)background-repeat：確定背景圖像是否以及如何重復(fù)。
repeat 默認(rèn)值。背景圖像將在垂直方向和水平方向重復(fù)。
repeat-x 背景圖像將在水平方向重復(fù)。
repeat-y 背景圖像將在垂直方向重復(fù)。
no-repeat 背景圖像將僅顯示一次。
inherit 規(guī)定應(yīng)該從父元素繼承background-repeat屬性的設(shè)置。
注意：如果定義的元素的body，可以控制頁(yè)面背景是否重復(fù)。
默認(rèn)值: repeat
(4)background-attachment：固定背景圖像或者跟隨內(nèi)容滾動(dòng)。
參數(shù)fixed表示固定背景(不隨屏幕滾動(dòng)而滾動(dòng)，決定背景圖像是否要固定在原來(lái)的位置), scroll表示跟隨內(nèi)容滾動(dòng)的背景。
注意：如果定義的元素的body, 可以使頁(yè)面背景固定。
默認(rèn)值: scroll
(5)background-position(X)：指定背景圖像的水平位置。
可以指定為left(左邊), center(居中)，right(右邊)；
也可以指定數(shù)值，如20px是指背景距離左邊20象素。
background-position(Y)：指定背景圖像的垂直位置。
可以指定為top(頂部), center(居中), bottom(底部)；也可以指定數(shù)值。
background-position屬性值:
left top
center top
right top
left center
center center
right center
left bottom
center bottom
right bottom
如果您僅規(guī)定了一個(gè)關(guān)鍵詞，那么第二個(gè)值將是"center"。
注意:采用英文單詞的水平位置和垂直位置的屬性值可以調(diào)換
x% y% 第一個(gè)值是水平位置，第二個(gè)值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您僅規(guī)定了一個(gè)值，另一個(gè)值將是 50%。
xpos ypos 第一個(gè)值是水平位置，第二個(gè)值是垂直位置。左上角是 0 0。單位是像素 (0px 0px) 或任何其他的 CSS 單位。
如果您僅規(guī)定了一個(gè)值，另一個(gè)值將是50%。
您可以混合使用 % 和 position 值。
默認(rèn)值：0% 0%
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
