整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
為了不再被疑似涉嫌低俗，我只能給大家提供這種圖片了，耐得住寂寞才能學(xué)有所成！吸引人的東西未必珍貴。
昨天我們學(xué)習(xí)了《HTML表單元素初識(shí)1——零基礎(chǔ)自學(xué)網(wǎng)頁制作》（目錄在結(jié)尾），大家通過學(xué)習(xí)對(duì)HTML頁面中的表單元素的基本寫法已經(jīng)非常熟悉了。同時(shí)也學(xué)會(huì)了通過變換<input/>標(biāo)簽中的type屬性的值為表單賦予不同的功能，例如輸入文本和建立多選表單。期間，對(duì)name與value這兩個(gè)屬性的作用與特點(diǎn)進(jìn)行了闡釋。今天我們繼續(xù)學(xué)習(xí)新的表單內(nèi)容。
建立單選表單：單選表單把<input/>標(biāo)簽的type屬性修改為"radio"（收音機(jī)），為什么單選表單使用"收音機(jī)"這個(gè)詞呢？其實(shí)道理很簡(jiǎn)單，收音機(jī)調(diào)頻旋鈕是對(duì)應(yīng)角度對(duì)應(yīng)相應(yīng)調(diào)頻，不可能一個(gè)角度對(duì)應(yīng)兩個(gè)調(diào)頻，所以選這個(gè)就不能選其他的表單中的type屬性使用"radio"這個(gè)詞表示，是不是很形象。
示例代碼如下：
<form>
最高學(xué)歷：<br>
<input type = "radio" name = "education" value = "highSchool"/>高中
<input type = "radio" name = "education" value = "bachelor"/>本科
<input type = "radio" name = "education" value = "master"/>碩士
<input type = "radio" name = "education" value = "doctor"/>博士
<br>
<input type = "submit" value = "submit"/>
</form>因?yàn)槊鑼懙氖亲罡邔W(xué)歷，一般人最高學(xué)歷只有一個(gè)，不可能又是學(xué)士又是博士，因此使用單選表單。
向服務(wù)器提交時(shí)，name叫做"education"（教育），value對(duì)應(yīng)不同層次。
頁面效果如下：
大家可以點(diǎn)點(diǎn)試試，每次只能有一個(gè)被選中。如圖：
綜合練習(xí)：到這為止，我們把之前零散的代碼拼湊一下看看效果吧！
<!DOCTYPE HTML>
<html>
<head>
<title>表單 </title>
</head>
<body>
<form>
會(huì)員名稱：
<input type = "text" placeholder = "請(qǐng)輸入英文或漢語拼音" name="memberName"/><br>
會(huì)員密碼：
<input type = "text" placeholder = "請(qǐng)輸入英文字母、特殊符號(hào)、數(shù)字" name="passWord"/><br>
確認(rèn)密碼：
<input type = "text" name="confirmPassWord"/><br>
<input type = "submit" value = "提交"/><br>
</form>
<hr>
<form>
興趣愛好：
<br>
<input type = "checkbox" name = "hobby" value = "reading"/>讀書
<input type = "checkbox" name = "hobby" value = "film"/>電影
<input type = "checkbox" name = "hobby" value = "painting"/>繪畫
<input type = "checkbox" name = "hobby" value = "music"/>音樂
<br>
最高學(xué)歷：<br>
<input type = "radio" name = "education" value = "highSchool"/>高中
<input type = "radio" name = "education" value = "bachelor"/>本科
<input type = "radio" name = "education" value = "master"/>碩士
<input type = "radio" name = "education" value = "doctor"/>博士
<br>
<input type = "submit" value = "submit"/>
</form>
</body>
</html>頁面效果如下：
密碼輸入：我們?cè)谑褂蒙鲜霰韱屋斎朊艽a時(shí)發(fā)現(xiàn)，密碼時(shí)實(shí)時(shí)顯示在輸入框中，這一點(diǎn)是不安全的，如圖：
如何讓密碼隱藏呢？其實(shí)看過上一篇中type屬性列表的小伙伴肯定猜到了，把type從"text"改為password。示例代碼如下：
會(huì)員密碼：
<input type = "password" placeholder = "請(qǐng)輸入英文字母、特殊符號(hào)、數(shù)字" name="passWord"/><br>
確認(rèn)密碼：
<input type = "password" name="confirmPassWord"/><br>頁面效果如下：
上傳文件：使用type="file"可以上傳文件！
示例代碼如下：寫在"submit"的上面即可。
<input type = "file"/><br><input type = "submit" value = "submit"/>頁面效果如下：
點(diǎn)擊"瀏覽"看下效果：
神奇！
使用圖片制作按鈕：將type="image"即可，代碼如下：
<input type = "image" src = "img/示例圖片/submit.jpg"/><br>頁面效果如下：用一個(gè)src導(dǎo)入圖片即可。
示例圖片：路徑自行設(shè)置即可！
為表單設(shè)置一個(gè)重置按鈕：如果用戶打算重置表單內(nèi)容后從新填寫，我們可以給他這樣一個(gè)按鈕：
<input type="reset" /><br>頁面如圖所示：
大家要注意的是這個(gè)"重置"按鈕的作用范圍僅僅是它所在的<form></form>標(biāo)簽之間！
舉個(gè)例子，如圖：
下面我們點(diǎn)擊"重置"后效果如下：
form1中的內(nèi)容沒有被清空，"重置"按鈕所在的form2內(nèi)容被清空了！
type屬性值講解我們到此結(jié)束了，hidden值這里先不給大家介紹，以后有機(jī)會(huì)再細(xì)說。
button值以后在JavaScript部分還會(huì)細(xì)說，這里也先略過。
除了<input/>外，還有其他一些標(biāo)簽，例如<select>或<textarea>等有趣且實(shí)用的標(biāo)簽，我們明天再學(xué)習(xí)吧！
今天的內(nèi)容先到這里。希望大家看完之后可以寫寫代碼進(jìn)行實(shí)操。代碼這種東西即使再簡(jiǎn)單，寫過和沒寫過的體會(huì)也是不一樣的。這個(gè)部分的代碼使用"文本編輯器"就可以實(shí)踐。具體操作請(qǐng)?jiān)斠姟丁贰?/p>
碎片化的知識(shí)其實(shí)對(duì)人并沒有多大作用，但是我們的時(shí)間在現(xiàn)代化的生活節(jié)奏中被撕地越來越碎，因此我希望大家可以利用碎片時(shí)間來學(xué)習(xí)完整的知識(shí)，所以，以短篇的形式，每天20分鐘左右，通過積少成多的辦法為大家提供零基礎(chǔ)頁面制作的教程體系是我的主要目的。希望大家學(xué)有所成！
喜歡我的教程的小伙伴請(qǐng)關(guān)注我，點(diǎn)贊也會(huì)讓我充滿動(dòng)力！
喜歡的小伙伴請(qǐng)關(guān)注和轉(zhuǎn)發(fā)，閱讀中遇到任何問題請(qǐng)給我留言，如有疏漏或錯(cuò)誤歡迎大家斧正，不勝感激！
HTML序章（學(xué)習(xí)目的、對(duì)象、基本概念）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML是什么？——零基礎(chǔ)自學(xué)網(wǎng)頁制作
第一個(gè)HTML頁面如何寫？——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML頁面中head標(biāo)簽有啥用？——零基礎(chǔ)自學(xué)網(wǎng)頁制作
初識(shí)meta標(biāo)簽與SEO——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML中的元素使用方法1——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML中的元素使用方法2——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML元素中的屬性1——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML元素中的屬性2（路徑詳解）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
使用HTML添加表格1（基本元素）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
使用HTML添加表格2（表格頭部與腳部）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
使用HTML添加表格3（間距與顏色）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
使用HTML添加表格4（行顏色與表格嵌套）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
16進(jìn)制顏色表示與RGB色彩模型——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML中的塊級(jí)元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作
初識(shí)HTML中的<div>塊元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作
在HTML頁面中嵌入其他頁面的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作
封閉在家學(xué)網(wǎng)頁制作！為頁面嵌入PDF文件——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML表單元素初識(shí)1——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML表單元素初識(shí)2——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML表單3（下拉列表、多行文字輸入）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML表單4（form的action、method屬性）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML列表制作講解——零基礎(chǔ)自學(xué)網(wǎng)頁制作
為HTML頁面添加視頻、音頻的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作
音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML中使用<a>標(biāo)簽實(shí)現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學(xué)網(wǎng)頁制作
言
目前，教學(xué)、教研各種內(nèi)容線上沉淀、展示豐富多彩，但線上內(nèi)容“線下化”能力不足或過分依賴人力，比如，線上練習(xí)題組卷后以PDF形式分發(fā)給學(xué)生，家長(zhǎng)希望將考試、練習(xí)題目打印后，學(xué)生帶到學(xué)校去做（高中生使用手機(jī)等電子設(shè)備的時(shí)間有限），線上各類分析報(bào)告以PDF形式分享給學(xué)生/家長(zhǎng)等。
從業(yè)務(wù)方面看，不同業(yè)務(wù)線的多個(gè)業(yè)務(wù)場(chǎng)景都有輸出PDF的訴求，如果各業(yè)務(wù)線自己設(shè)計(jì)、實(shí)現(xiàn)符合自身業(yè)務(wù)場(chǎng)景的具體方案，除調(diào)研、開發(fā)工作量較大之外，還會(huì)有重復(fù)調(diào)研，踩坑的情況。
從技術(shù)角度看，線上內(nèi)容轉(zhuǎn)PDF的內(nèi)容源頭來自于H5富文本內(nèi)容，業(yè)界內(nèi)以此為基礎(chǔ)的PDF生成方案多種多樣，也各有優(yōu)劣，比如：
方案對(duì)比-表格-1
因此，我們綜合了各種PDF生成方案并總結(jié)了在探索講義生成PDF過程中的經(jīng)驗(yàn)，抽象出了一套通用的，可復(fù)用的能力供各業(yè)務(wù)線快速利用，基本方案和優(yōu)劣如下：
最終方案-表格-2
目 標(biāo)
旨在提供一套以H5為載體的PDF通用生成方案，這套方案有如下特點(diǎn)：
這套方案可分為兩個(gè)核心部分，頁面展示側(cè) - Medusa，PDF生成側(cè) - Hydra
頁面展示側(cè) - Medusa
我們頁面展示側(cè)的通用能力——Medusa，是基于Paged.js的二次封裝，并以NPM包形式提供給業(yè)務(wù)方使用。Medusa可對(duì)任何HTML進(jìn)行分頁、并根據(jù)配置添加頁眉、頁腳等，最終將處理后的HTML渲染到頁面中。Medusa封裝并簡(jiǎn)化了對(duì)PDF格式的配置，可覆蓋絕大多數(shù)業(yè)務(wù)場(chǎng)景，使得各業(yè)務(wù)場(chǎng)景將更多精力投入其自身業(yè)務(wù)邏輯的開發(fā)。
之所以選擇Pagedjs為基礎(chǔ)開發(fā)我們自己的SDK，是因?yàn)樗悄壳拔覀兡苷业降奈ㄒ?/span>開源的、具有HTML內(nèi)容分頁，樣式處理的前端庫，同時(shí)我們也在講義中經(jīng)過了長(zhǎng)期的摸索與沉淀。
接下來將詳細(xì)介紹Paged.js原理、Medusa支持的功能與使用方法。
一 Paged.js是如何工作的
Paged.js包含了 3 個(gè)大模塊
這里將主要介紹 Previewer 和 Chunker，因?yàn)槲覀兊亩伍_發(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è)頁面處理完之后的樣子。
Chunker
首先，Chunker解析、預(yù)處理需要分頁的HTML，為其添加一些必要的屬性
Medusa-代碼-3
然后創(chuàng)建容納所有頁(pages)的容器，并掛載到renderTo容器下(默認(rèn)Body)，以備組織后續(xù)的所有頁：
Medusa-代碼-4
接著，chunker創(chuàng)建了一個(gè)page模版，以便增加頁面使用：
Medusa-代碼-5
其中，TEMPLATE是Pagedjs內(nèi)部創(chuàng)建頁面時(shí)所使用的基礎(chǔ)模版。
Medusa-代碼-6
接下來，chunker進(jìn)入了渲染+分頁過程（這個(gè)過程我們不會(huì)在二次開發(fā)中做修改，但需要了解其基本思路以便在出問題時(shí)能有解決思路），這個(gè)過程在循環(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)開始，判斷是否 node.left >= contentArea.right || node.top >= contentArea.bottom
Medusa-代碼-7
ii.如果不滿足，則判斷 node.right <= contentArea.right && node.bottom <= contentArea.bottom
Medusa-代碼-8
iii.如果不滿足，那說明有子節(jié)點(diǎn)overflow了，則繼續(xù)深入其子節(jié)點(diǎn)查找即可。
3.使用模版添加新的頁面，并從BreakToken處繼續(xù)上述動(dòng)作。
二 Medusa支持的功能及使用方法
基于Paged.js，Medusa支持了如下功能，并為業(yè)務(wù)方提供了更加簡(jiǎn)潔、定制化的配置。
下方是調(diào)用Medusa的代碼示例：
Medusa-代碼-9
1.1 動(dòng)態(tài)頁面分頁能力
Medusa核心功能，可將連續(xù)的HTML頁面轉(zhuǎn)化成一頁頁P(yáng)DF樣式的HTML。
1.2 單頁模版配置 -> 生成能力
通過Grid布局，Paged.js將一個(gè)單頁模版分為多個(gè)區(qū)域，整體分為2個(gè)大的部分：
業(yè)務(wù)方通過簡(jiǎn)單的配置，即可還原UI設(shè)計(jì)稿中的PDF樣式，例子如下圖：
1.2.1 base
頁面基礎(chǔ)配置是對(duì)每頁的。支持紙型或頁面寬高、內(nèi)容區(qū)域margin、padding、背景及水印的設(shè)置。
在封裝Medusa時(shí)，Medusa將讀取傳入的頁面模版配置、靜態(tài)頁內(nèi)容配置，并將樣式上的配置解析并轉(zhuǎn)化為Previewer可理解的樣式內(nèi)容，比如頁面寬高的設(shè)置：
Medusa-代碼-10
將被轉(zhuǎn)化為：
Medusa-代碼-11
1.2.2 surround
2. 目前支持3種類型的surround item:
example:
Medusa-代碼-12
1.3 前/后置靜態(tài)頁面
業(yè)務(wù)方可通過如下方式配置靜態(tài)頁面的具體內(nèi)容：
Medusa-代碼-13
其中，傳入的React JSX Element將會(huì)被這樣處理：
Medusa-代碼-14
處理完成后，將HTML String拼接到頁面模版中，再插入分頁后內(nèi)容的前后。
PDF生成側(cè) - Hydra：
頁面展示側(cè)為PDF生成做好了頁面的準(zhǔn)備，對(duì)于PDF生成側(cè)，需要做的工作就更純粹了，業(yè)務(wù)方除了請(qǐng)求生成PDF，定期檢查PDF生成的進(jìn)度，無需做任何額外工作。
1.整體流程：
PDF生成是CPU和內(nèi)存密集型的，由于頁面內(nèi)容的不確定性，也意味著頁面渲染時(shí)間與生成PDF的時(shí)間都是不確定的，因此整體PDF生成的鏈路被設(shè)計(jì)成是異步的，如下圖：
整體流程上，業(yè)務(wù)方在請(qǐng)求生成PDF時(shí)，會(huì)先在后端做一條記錄，后端再將任務(wù)發(fā)送給Node服務(wù)，即Hydra；
在生成PDF時(shí)， 第 1 步是做頁面上的準(zhǔn)備，一個(gè)生成任務(wù)可能有多個(gè)URL頁面需要生成PDF，所以我們預(yù)先啟動(dòng)對(duì)應(yīng)URL數(shù)量的PPTR Page，頁面都啟動(dòng)完成后，進(jìn)入下一步；
第 2 步：渲染頁面，這個(gè)過程中，如果請(qǐng)求是包含多個(gè)URL的，這些頁面會(huì)同步渲染，在所有頁面渲染完成后，進(jìn)入下一步。
第 2.5 步，如果是需要生成連續(xù)頁碼的一整個(gè)PDF，還會(huì)做額外的一個(gè)動(dòng)作：頁碼矯正，通過頁碼矯正，可以將同步渲染的每個(gè)頁面，按照其之前頁面的頁碼數(shù)修正，以保證整體PDF的頁碼的連貫。
第 3 步，通過PPTR Page的能力將頁面轉(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)頁面生成PDF的時(shí)，只需傳入如下字段：
Hydra-代碼-1
3.PDF生成過程：
正如在整體流程中所述，PDF生成側(cè)，我們借助 PPTR 的能力打開頁面并生成PDF流。
在頁面調(diào)用 Medusa 分頁、組裝能力時(shí)，所有內(nèi)容分頁組裝完成后會(huì)向body中插入了一個(gè)額外的DOM以標(biāo)識(shí)該頁面處理完成：
Hydra-代碼-2
這是為了 Hydra 感知頁面渲染完成所做的準(zhǔn)備，當(dāng)生成服務(wù)的 PPTR 等到該DOM出現(xiàn)時(shí)，則表示頁面成功渲染并處理完成了：
Hydra-代碼-3
此后，在上面已經(jīng)提到過，對(duì)于需要將多個(gè)頁面生成的PDF拼接成一個(gè)PDF的情況，在生成PDF之前需要做一個(gè)重要的動(dòng)作，即頁碼矯正，原因如下：
并且我們不希望頁面的處理是串行的，因?yàn)榇袆?shì)必導(dǎo)致速度較慢，生成時(shí)間長(zhǎng)。
這個(gè)問題的解決方案如下：
1. 對(duì)于每個(gè)頁面都啟用一個(gè)page，并同時(shí)處理
2. 每個(gè)頁面處理完成后（pdfLastDOM出現(xiàn)），通過Page.$eval()來統(tǒng)計(jì)頁數(shù)并記錄:
Hydra-代碼-4
3. 計(jì)算出頁面中分頁之后每一個(gè)頁面的起始頁碼，以及所有頁面的頁碼總和
4. 再修改頁碼容器樣式的 counterReset 值即可，其后續(xù)頁碼可自遞增。
Hydra-代碼-5
5. 之后，再通過 Medusa 在頁面window對(duì)象中Polyfill的相關(guān)配置，比如需要生成的PDF的單頁寬、高以生成PDF流。
Hydra-代碼-6
6. 最后如有必要，通過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 頁左右，平均 1 分鐘內(nèi)能完成 280 個(gè)任務(wù)的處理。
對(duì)于 40 道題目，每個(gè)PDF生成任務(wù)在 30 頁左右，平均 1 分鐘內(nèi)能完成 105 個(gè)任務(wù)的處理。
對(duì)于 60 到題目，每個(gè)PDF生成任務(wù)在 40 頁左右，平均 1 分鐘內(nèi)能完成 54 個(gè)任務(wù)的處理。
同時(shí)，根據(jù) Hydra 服務(wù)的整體的處理能力，后端通過任務(wù)隊(duì)列的形式幫助我們保證服務(wù)不被瞬間的突刺流量擊垮。
已接入/正在接入的相關(guān)業(yè)務(wù)線及場(chǎng)景：
目前，公司有 5 大業(yè)務(wù)線，8 個(gè)場(chǎng)景已經(jīng)完全接入我們的能力用于 H5 轉(zhuǎn) PDF，如下是錯(cuò)題本、內(nèi)容資料庫接入后生成的PDF樣例：
錯(cuò)題本：
內(nèi)容資料庫試卷：
未來展望
目前整體的PDF生成方案已經(jīng)能夠滿足大多數(shù)場(chǎng)景和內(nèi)容，但依然有可改進(jìn)空間。
HTML的流式布局要求我們必須手動(dòng)的對(duì)內(nèi)容分頁，才能添加頁眉，頁腳等（即Mdusa做的工作），正因?yàn)槿绱耍谔幚韽?fù)雜的內(nèi)容時(shí)，可能會(huì)出現(xiàn)一些問題：比如，遇到復(fù)雜表格時(shí)，由于表格可能會(huì)有多種多樣的行、列合并，同時(shí)表格單元格內(nèi)的內(nèi)容也可以多種多樣，在分頁過程中，Medusa內(nèi)部的PagedJS并不能完美的處理對(duì)于長(zhǎng)、且復(fù)雜的表格的分割，因此可能遇到分割后表格單元格缺失、錯(cuò)亂或?qū)捀咤e(cuò)誤的問題，這些問題在講義中體現(xiàn)較明顯。
我們?nèi)栽诔掷m(xù)關(guān)注與研究復(fù)雜DOM內(nèi)容的分割問題，會(huì)嘗試加以優(yōu)化和改進(jìn)PagedJS的能力，同時(shí)，我們也以另外一種思路設(shè)計(jì)了自己的DOM分頁器方案，但經(jīng)過評(píng)估，由于實(shí)現(xiàn)比較復(fù)雜，成本較高，暫時(shí)沒有投入開發(fā)資源。
不過，我們相信，未來我們一定能以更完美的方式分割DOM以生成更高質(zhì)量的PDF。
作者:高源、陳欣博
來源:微信公眾號(hào):高途技術(shù)
出處:https://mp.weixin.qq.com/s/c_N7jdNklrNFKR_Cub2Tgg
延伸提問 怎樣處理 移動(dòng)端 1px 被 渲染成 2px 問題
局部處理
全局處理
1 禁?使? iframe （阻塞??檔 onload 事件）
2 禁?使? gif 圖?實(shí)現(xiàn) loading 效果（降低 CPU 消耗，提升渲染性能）
3 使? CSS3 代碼代替 JS 動(dòng)畫（盡可能避免重繪重排以及回流）
4 對(duì)于?些?圖標(biāo)，可以使?base64位編碼，以減少?絡(luò)請(qǐng)求。但不建議?圖使?，?較耗 費(fèi) CPU
?圖標(biāo)優(yōu)勢(shì)在于 (減少 HTTP 請(qǐng)求 /避免?件跨域 /修改及時(shí)?效 )
5 ??頭部的會(huì)阻塞??（因?yàn)?Renderer進(jìn)程中 JS 線程和渲染線程是互斥的）
6 ??中空的 href 和 src 會(huì)阻塞??其他資源的加載 (阻塞下載進(jìn)程)
7 ?? gzip ， CDN 托管， data 緩存 ，圖?服務(wù)器
8 前端模板 JS+數(shù)據(jù)，減少由于 HTML 標(biāo)簽導(dǎo)致的帶寬浪費(fèi)，前端?變量保存AJAX請(qǐng)求結(jié) 果，每次操作本地變量，不?請(qǐng)求，減少請(qǐng)求次數(shù)
9 ? innerHTML 代替 DOM 操作，減少 DOM 操作次數(shù)，優(yōu)化 javascript 性能
10 當(dāng)需要設(shè)置的樣式很多時(shí)設(shè)置 className ?不是直接操作 style
11 少?全局變量、緩存 DOM 節(jié)點(diǎn)查找的結(jié)果。減少 IO 讀取操作
12 圖?預(yù)加載，將樣式表放在頂部，將腳本放在底部 加上時(shí)間戳
13 對(duì)普通的?站有?個(gè)統(tǒng)?的思路，就是盡量向前端優(yōu)化、減少數(shù)據(jù)庫操作、減少磁盤 IO
IE : trident 內(nèi)核
Firefox ： gecko 內(nèi)核
<head lang=”en”>
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
