整合營銷服務商

          電腦端+手機端+微信端=數(shù)據同步管理

          免費咨詢熱線:

          HTML表單元素初識2-零基礎自學網頁制作

          單元素屬性2

          為了不再被疑似涉嫌低俗,我只能給大家提供這種圖片了,耐得住寂寞才能學有所成!吸引人的東西未必珍貴。

          昨天我們學習了《HTML表單元素初識1——零基礎自學網頁制作》(目錄在結尾),大家通過學習對HTML頁面中的表單元素的基本寫法已經非常熟悉了。同時也學會了通過變換<input/>標簽中的type屬性的值為表單賦予不同的功能,例如輸入文本和建立多選表單。期間,對name與value這兩個屬性的作用與特點進行了闡釋。今天我們繼續(xù)學習新的表單內容。

          建立單選表單:單選表單把<input/>標簽的type屬性修改為"radio"(收音機),為什么單選表單使用"收音機"這個詞呢?其實道理很簡單,收音機調頻旋鈕是對應角度對應相應調頻,不可能一個角度對應兩個調頻,所以選這個就不能選其他的表單中的type屬性使用"radio"這個詞表示,是不是很形象。

          示例代碼如下:

          <form>
            最高學歷:<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>

          因為描寫的是最高學歷,一般人最高學歷只有一個,不可能又是學士又是博士,因此使用單選表單。

          向服務器提交時,name叫做"education"(教育),value對應不同層次。

          頁面效果如下:

          大家可以點點試試,每次只能有一個被選中。如圖:

          綜合練習:到這為止,我們把之前零散的代碼拼湊一下看看效果吧!

          <!DOCTYPE HTML>
            <html>
            <head> 
            <title>表單 </title>
            </head> 
            <body>
            <form>
            會員名稱:
            <input type = "text" placeholder = "請輸入英文或漢語拼音" name="memberName"/><br>
            會員密碼:
            <input type = "text" placeholder = "請輸入英文字母、特殊符號、數(shù)字" name="passWord"/><br>
            確認密碼:
            <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>
            最高學歷:<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>

          頁面效果如下:

          密碼輸入:我們在使用上述表單輸入密碼時發(fā)現(xiàn),密碼時實時顯示在輸入框中,這一點是不安全的,如圖:

          如何讓密碼隱藏呢?其實看過上一篇中type屬性列表的小伙伴肯定猜到了,把type從"text"改為password。示例代碼如下:

          會員密碼:
          <input type = "password" placeholder = "請輸入英文字母、特殊符號、數(shù)字" name="passWord"/><br>
          確認密碼:
          <input type = "password" name="confirmPassWord"/><br>

          頁面效果如下:

          上傳文件:使用type="file"可以上傳文件!

          示例代碼如下:寫在"submit"的上面即可。

          <input type = "file"/><br><input type = "submit" value = "submit"/>

          頁面效果如下:

          點擊"瀏覽"看下效果:

          神奇!

          使用圖片制作按鈕:將type="image"即可,代碼如下:

          <input type = "image" src = "img/示例圖片/submit.jpg"/><br>

          頁面效果如下:用一個src導入圖片即可。

          示例圖片:路徑自行設置即可!

          為表單設置一個重置按鈕:如果用戶打算重置表單內容后從新填寫,我們可以給他這樣一個按鈕:

          <input type="reset" /><br>

          頁面如圖所示:

          大家要注意的是這個"重置"按鈕的作用范圍僅僅是它所在的<form></form>標簽之間!

          舉個例子,如圖:

          下面我們點擊"重置"后效果如下:

          form1中的內容沒有被清空,"重置"按鈕所在的form2內容被清空了!

          type屬性值講解我們到此結束了,hidden值這里先不給大家介紹,以后有機會再細說。

          button值以后在JavaScript部分還會細說,這里也先略過。

          除了<input/>外,還有其他一些標簽,例如<select>或<textarea>等有趣且實用的標簽,我們明天再學習吧!

          今天的內容先到這里。希望大家看完之后可以寫寫代碼進行實操。代碼這種東西即使再簡單,寫過和沒寫過的體會也是不一樣的。這個部分的代碼使用"文本編輯器"就可以實踐。具體操作請詳見《》。

          碎片化的知識其實對人并沒有多大作用,但是我們的時間在現(xiàn)代化的生活節(jié)奏中被撕地越來越碎,因此我希望大家可以利用碎片時間來學習完整的知識,所以,以短篇的形式,每天20分鐘左右,通過積少成多的辦法為大家提供零基礎頁面制作的教程體系是我的主要目的。希望大家學有所成!

          喜歡我的教程的小伙伴請關注我,點贊也會讓我充滿動力!

          喜歡的小伙伴請關注和轉發(fā),閱讀中遇到任何問題請給我留言,如有疏漏或錯誤歡迎大家斧正,不勝感激!

          HTML完整學習目錄

          HTML序章(學習目的、對象、基本概念)——零基礎自學網頁制作

          HTML是什么?——零基礎自學網頁制作

          第一個HTML頁面如何寫?——零基礎自學網頁制作

          HTML頁面中head標簽有啥用?——零基礎自學網頁制作

          初識meta標簽與SEO——零基礎自學網頁制作

          HTML中的元素使用方法1——零基礎自學網頁制作

          HTML中的元素使用方法2——零基礎自學網頁制作

          HTML元素中的屬性1——零基礎自學網頁制作

          HTML元素中的屬性2(路徑詳解)——零基礎自學網頁制作

          使用HTML添加表格1(基本元素)——零基礎自學網頁制作

          使用HTML添加表格2(表格頭部與腳部)——零基礎自學網頁制作

          使用HTML添加表格3(間距與顏色)——零基礎自學網頁制作

          使用HTML添加表格4(行顏色與表格嵌套)——零基礎自學網頁制作

          16進制顏色表示與RGB色彩模型——零基礎自學網頁制作

          HTML中的塊級元素與內聯(lián)元素——零基礎自學網頁制作

          初識HTML中的<div>塊元素——零基礎自學網頁制作

          在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作

          封閉在家學網頁制作!為頁面嵌入PDF文件——零基礎自學網頁制作

          HTML表單元素初識1——零基礎自學網頁制作

          HTML表單元素初識2——零基礎自學網頁制作

          HTML表單3(下拉列表、多行文字輸入)——零基礎自學網頁制作

          HTML表單4(form的action、method屬性)——零基礎自學網頁制作

          HTML列表制作講解——零基礎自學網頁制作

          為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作

          音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作

          HTML中使用<a>標簽實現(xiàn)文本內鏈接——零基礎自學網頁制作




          目前,教學、教研各種內容線上沉淀、展示豐富多彩,但線上內容“線下化”能力不足或過分依賴人力,比如,線上練習題組卷后以PDF形式分發(fā)給學生,家長希望將考試、練習題目打印后,學生帶到學校去做(高中生使用手機等電子設備的時間有限),線上各類分析報告以PDF形式分享給學生/家長等。


          從業(yè)務方面看,不同業(yè)務線的多個業(yè)務場景都有輸出PDF的訴求,如果各業(yè)務線自己設計、實現(xiàn)符合自身業(yè)務場景的具體方案,除調研、開發(fā)工作量較大之外,還會有重復調研,踩坑的情況。


          從技術角度看,線上內容轉PDF的內容源頭來自于H5富文本內容,業(yè)界內以此為基礎的PDF生成方案多種多樣,也各有優(yōu)劣,比如:


          方案對比-表格-1


          因此,我們綜合了各種PDF生成方案并總結了在探索講義生成PDF過程中的經驗,抽象出了一套通用的,可復用的能力供各業(yè)務線快速利用,基本方案和優(yōu)劣如下:


          最終方案-表格-2


          目 標




          旨在提供一套以H5為載體的PDF通用生成方案,這套方案有如下特點:

          1. 通用性強:能夠處理各類H5頁面,從分頁到生成,做到一套方案,多般兼容。
          2. 擴展性、配置性強:各場景可根據自己的需要自定義頁眉、頁腳、頁碼,水印,背景等配置,做到輸出形式豐富多彩。
          3. 方便易接入:各業(yè)務場景只需關注要展現(xiàn)的內容,無需關注分頁,PDF生成等背后的處理 ,為需要產出PDF的業(yè)務場景提效賦能;整體來看,調研、設計、開發(fā)(+踩坑)一整套 H5 轉 PDF的能力至少需要近 30人/日,我們希望這套通用能力的接入成本控制在 7人/日左右;在很多場景接入后,從實際反饋來看,平均只需要 2-3 人/日就接入了。
          4. 質量高:保證輸出PDF中內容的展示與H5中無異,各種復雜公式的展示也絲毫無差錯。
          5. 性能好:保證 1 分鐘內能處理 100+ 的 20頁左右的PDF生成任務
          6. 穩(wěn)定性高:保證有各種兜底策略妥善處理各類異常,同時能夠通過限流方案應對突發(fā)流量,保證服務穩(wěn)定。


          這套方案可分為兩個核心部分,頁面展示側 - Medusa,PDF生成側 - Hydra


          頁面展示側 - Medusa




          我們頁面展示側的通用能力——Medusa,是基于Paged.js的二次封裝,并以NPM包形式提供給業(yè)務方使用。Medusa可對任何HTML進行分頁、并根據配置添加頁眉、頁腳等,最終將處理后的HTML渲染到頁面中。Medusa封裝并簡化了對PDF格式的配置,可覆蓋絕大多數(shù)業(yè)務場景,使得各業(yè)務場景將更多精力投入其自身業(yè)務邏輯的開發(fā)。


          之所以選擇Pagedjs為基礎開發(fā)我們自己的SDK,是因為它是目前我們能找到的唯一開源的、具有HTML內容分頁,樣式處理的前端庫,同時我們也在講義中經過了長期的摸索與沉淀。


          接下來將詳細介紹Paged.js原理、Medusa支持的功能與使用方法。


          一 Paged.js是如何工作的




          Paged.js包含了 3 個大模塊

          • Chunker(負責HTML內容分頁)
          • Polisher (負責CSS樣式處理)
          • Previewer (負責預覽呈現(xiàn)Chunker和Polisher處理后的內容)

          這里將主要介紹 Previewer 和 Chunker,因為我們的二次開發(fā)和維護不涉及到Polisher。


          Previewer

          Previewer 的工作非常簡單,但我們會主要利用它封裝我們的Medusa,初始化一個Previewer對象,Previewer初始化了Chunker和Polisher對象:


          Medusa-代碼-1


          再調用Previewer的preview()方法,preview()方法做了兩件事:

          1. 通過Polisher處理樣式內容
          2. 通過Chunker處理需要分頁的HTML內容,如果沒有指定需要分頁的HTML,則會處理整個Body的內容

          Medusa-代碼-2


          當chunker.flow結束,即可在瀏覽器看到整個頁面處理完之后的樣子。


          Chunker


          首先,Chunker解析、預處理需要分頁的HTML,為其添加一些必要的屬性


          Medusa-代碼-3


          然后創(chuàng)建容納所有頁(pages)的容器,并掛載到renderTo容器下(默認Body),以備組織后續(xù)的所有頁:



          Medusa-代碼-4


          接著,chunker創(chuàng)建了一個page模版,以便增加頁面使用:


          Medusa-代碼-5


          其中,TEMPLATE是Pagedjs內部創(chuàng)建頁面時所使用的基礎模版。


          Medusa-代碼-6


          接下來,chunker進入了渲染+分頁過程(這個過程我們不會在二次開發(fā)中做修改,但需要了解其基本思路以便在出問題時能有解決思路),這個過程在循環(huán)一個迭代器(*layout),迭代器一直在做3件事:


          1. 將內容添加到模版內容區(qū)域的容器中 -> 渲染。
          2. 探測overflow,找到overflow的offset并創(chuàng)建BreakToken (探測overflow過程中很多處都用到了迭代器,此處為了說明思路,簡化了相關代碼)。


          原則:

          尋找overflow時會將盡可能多的內容節(jié)點插入內容區(qū)域,這里,“盡可能多”分為幾種情況,比如:

          • 沒有剩余節(jié)點需要再添加了
          • 達到了一頁所能承載的最大字符數(shù);剛開始的時候,如果沒有指定每頁的最大字符數(shù),Pagedjs會給一個默認值為 1500 的每頁最大字符用做判斷,在之后會記錄分隔好的每一頁中的字符數(shù),并取最近4頁 (少于4頁取全部)的平均值作為之后分頁的判斷條件,這里,Pagedjs相當于對每一頁中能夠承載的內容做了一個簡單的預測,這個算法對于比較規(guī)律的內容做分頁時還是比較簡單高效的。

          步驟:

          Pagedjs遵循了如下步驟去尋找overflow:

          兩個前置條件:

          • 內容區(qū)域盒子邊界已經確定,下面以contentArea.right 和 contentArea.bottom 分別代指其右邊界和下邊界。
          • 處理過程中每個節(jié)點的邊界可以計算(對于文字節(jié)點,Pagedjs中使用了Range對象為其創(chuàng)建邊界),下面以 node.left、 node.right、node.top 和 node.bottom 分別代指節(jié)點的左、右、上、下邊界。

          i. 從需要處理的內容第一個節(jié)點開始,判斷是否 node.left >= contentArea.right || node.top >= contentArea.bottom


          Medusa-代碼-7


          ii.如果不滿足,則判斷 node.right <= contentArea.right && node.bottom <= contentArea.bottom


          Medusa-代碼-8


          iii.如果不滿足,那說明有子節(jié)點overflow了,則繼續(xù)深入其子節(jié)點查找即可。


          3.使用模版添加新的頁面,并從BreakToken處繼續(xù)上述動作。


          二 Medusa支持的功能及使用方法




          基于Paged.js,Medusa支持了如下功能,并為業(yè)務方提供了更加簡潔、定制化的配置。


          1. 動態(tài)頁面分頁能力
          2. 單頁模版配置 -> 生成能力
          3. 前、后置靜態(tài)頁面生成、與分頁后的動態(tài)頁面拼接能力
          4. 頁面處理成功后,通知PDF生成服務(Hydra)執(zhí)行任務


          下方是調用Medusa的代碼示例:


          Medusa-代碼-9


          1.1 動態(tài)頁面分頁能力

          Medusa核心功能,可將連續(xù)的HTML頁面轉化成一頁頁PDF樣式的HTML。


          1.2 單頁模版配置 -> 生成能力


          通過Grid布局,Paged.js將一個單頁模版分為多個區(qū)域,整體分為2個大的部分:

          1. base 頁面基礎配置:每個PDF紙型、水印,內容區(qū)域的寬高、margin與padding等等
          2. surround 頁面周圍區(qū)域:如頁眉、頁腳等配置


          業(yè)務方通過簡單的配置,即可還原UI設計稿中的PDF樣式,例子如下圖:



          1.2.1 base

          頁面基礎配置是對每頁的。支持紙型或頁面寬高、內容區(qū)域margin、padding、背景及水印的設置。



          在封裝Medusa時,Medusa將讀取傳入的頁面模版配置、靜態(tài)頁內容配置,并將樣式上的配置解析并轉化為Previewer可理解的樣式內容,比如頁面寬高的設置:


          Medusa-代碼-10


          將被轉化為:


          Medusa-代碼-11


          1.2.2 surround


          1. 可以看到圖中的16種不同位置的surround區(qū)域。通過設置position,可將業(yè)務方自定義的元素渲染到對應的位置上。



          2. 目前支持3種類型的surround item:

          • text 文字
          • img 圖片
          • pageNum (動態(tài)獲取)當前頁碼


          example:


          Medusa-代碼-12


          1.3 前/后置靜態(tài)頁面


          業(yè)務方可通過如下方式配置靜態(tài)頁面的具體內容:


          Medusa-代碼-13


          其中,傳入的React JSX Element將會被這樣處理:


          Medusa-代碼-14


          處理完成后,將HTML String拼接到頁面模版中,再插入分頁后內容的前后。


          PDF生成側 - Hydra:




          頁面展示側為PDF生成做好了頁面的準備,對于PDF生成側,需要做的工作就更純粹了,業(yè)務方除了請求生成PDF,定期檢查PDF生成的進度,無需做任何額外工作。


          1.整體流程:

          PDF生成是CPU和內存密集型的,由于頁面內容的不確定性,也意味著頁面渲染時間與生成PDF的時間都是不確定的,因此整體PDF生成的鏈路被設計成是異步的,如下圖:



          整體流程上,業(yè)務方在請求生成PDF時,會先在后端做一條記錄,后端再將任務發(fā)送給Node服務,即Hydra;


          在生成PDF時, 第 1 步是做頁面上的準備,一個生成任務可能有多個URL頁面需要生成PDF,所以我們預先啟動對應URL數(shù)量的PPTR Page,頁面都啟動完成后,進入下一步;


          第 2 步:渲染頁面,這個過程中,如果請求是包含多個URL的,這些頁面會同步渲染,在所有頁面渲染完成后,進入下一步。


          第 2.5 步,如果是需要生成連續(xù)頁碼的一整個PDF,還會做額外的一個動作:頁碼矯正,通過頁碼矯正,可以將同步渲染的每個頁面,按照其之前頁面的頁碼數(shù)修正,以保證整體PDF的頁碼的連貫。


          第 3 步,通過PPTR Page的能力將頁面轉換為PDF buffer,如有必要,再將生成的PDF buffer拼接到一起生成一整個PDF,或者將每個PDF buffer都生成一個PDF,壓縮成zip文件。


          第 4 步,文件上傳OSS,最終返回OSS CDN鏈接。


          2.請求生成PDF:


          業(yè)務側請求將對應頁面生成PDF的時,只需傳入如下字段:


          Hydra-代碼-1


          3.PDF生成過程:


          正如在整體流程中所述,PDF生成側,我們借助 PPTR 的能力打開頁面并生成PDF流。


          在頁面調用 Medusa 分頁、組裝能力時,所有內容分頁組裝完成后會向body中插入了一個額外的DOM以標識該頁面處理完成:


          Hydra-代碼-2


          這是為了 Hydra 感知頁面渲染完成所做的準備,當生成服務的 PPTR 等到該DOM出現(xiàn)時,則表示頁面成功渲染并處理完成了:


          Hydra-代碼-3


          此后,在上面已經提到過,對于需要將多個頁面生成的PDF拼接成一個PDF的情況,在生成PDF之前需要做一個重要的動作,即頁碼矯正,原因如下:


          1. 每個頁面無法感知其他頁面情況的,如:第二個頁面不知道第一個頁面會生成多少頁的PDF。
          2. 它們的頁碼需要是連續(xù)的。


          并且我們不希望頁面的處理是串行的,因為串行勢必導致速度較慢,生成時間長。


          這個問題的解決方案如下:

          1. 對于每個頁面都啟用一個page,并同時處理

          2. 每個頁面處理完成后(pdfLastDOM出現(xiàn)),通過Page.$eval()來統(tǒng)計頁數(shù)并記錄:

          Hydra-代碼-4


          3. 計算出頁面中分頁之后每一個頁面的起始頁碼,以及所有頁面的頁碼總和

          4. 再修改頁碼容器樣式的 counterReset 值即可,其后續(xù)頁碼可自遞增。


          Hydra-代碼-5


          5. 之后,再通過 Medusa 在頁面window對象中Polyfill的相關配置,比如需要生成的PDF的單頁寬、高以生成PDF流。


          Hydra-代碼-6


          6. 最后如有必要,通過pdf-lib拼接這些 pdfBuffer 即可。


          Hydra-代碼-7


          7. PDF生成完成后,上傳OSS并返回URL鏈接


          4.性能、穩(wěn)定性保證:


          在整體方案落地前,我們對服務進行了多次性能測試:


          以下載題目為例,在4個容器,每個容器 3C 12G 的配置下的并行處理能力如下:


          對于 20 道題目,每個PDF生成任務在 15 頁左右,平均 1 分鐘內能完成 280 個任務的處理。

          對于 40 道題目,每個PDF生成任務在 30 頁左右,平均 1 分鐘內能完成 105 個任務的處理。

          對于 60 到題目,每個PDF生成任務在 40 頁左右,平均 1 分鐘內能完成 54 個任務的處理。


          同時,根據 Hydra 服務的整體的處理能力,后端通過任務隊列的形式幫助我們保證服務不被瞬間的突刺流量擊垮。


          已接入/正在接入的相關業(yè)務線及場景:




          目前,公司有 5 大業(yè)務線,8 個場景已經完全接入我們的能力用于 H5 轉 PDF,如下是錯題本、內容資料庫接入后生成的PDF樣例:


          錯題本:




          內容資料庫試卷:




          未來展望




          目前整體的PDF生成方案已經能夠滿足大多數(shù)場景和內容,但依然有可改進空間。


          HTML的流式布局要求我們必須手動的對內容分頁,才能添加頁眉,頁腳等(即Mdusa做的工作),正因為如此,在處理復雜的內容時,可能會出現(xiàn)一些問題:比如,遇到復雜表格時,由于表格可能會有多種多樣的行、列合并,同時表格單元格內的內容也可以多種多樣,在分頁過程中,Medusa內部的PagedJS并不能完美的處理對于長、且復雜的表格的分割,因此可能遇到分割后表格單元格缺失、錯亂或寬高錯誤的問題,這些問題在講義中體現(xiàn)較明顯。


          我們仍在持續(xù)關注與研究復雜DOM內容的分割問題,會嘗試加以優(yōu)化和改進PagedJS的能力,同時,我們也以另外一種思路設計了自己的DOM分頁器方案,但經過評估,由于實現(xiàn)比較復雜,成本較高,暫時沒有投入開發(fā)資源。


          不過,我們相信,未來我們一定能以更完美的方式分割DOM以生成更高質量的PDF。


          作者:高源、陳欣博

          來源:微信公眾號:高途技術

          出處:https://mp.weixin.qq.com/s/c_N7jdNklrNFKR_Cub2Tgg

          1. 如何在??上實現(xiàn)?個圓形的可點擊區(qū)域?

          • svg
          • border-radius
          • js 實現(xiàn) 需要求?個點在不在圓上簡單算法、獲取?標坐標等等

          22. ??驗證碼是?嘛的,是為了解決什么安全問題

          • 區(qū)分?戶是計算機還是?的公共全?動程序。可以防?惡意破解密碼、刷票、論壇灌?
          • 有效防??客對某?個特定注冊?戶?特定程序暴?破解?式進?不斷的登陸嘗試

          23. viewport

          • // width 設置viewport寬度,為?個正整數(shù),或字符串‘device-width’
          • // device-width 設備寬度
          • // height 設置viewport?度,?般設置了寬度,會?動解析出?度,可以不?設置
          • // initial-scale 默認縮放?例(初始縮放?例),為?個數(shù)字,可以帶?數(shù)
          • // minimum-scale 允許?戶最?縮放?例,為?個數(shù)字,可以帶?數(shù)
          • // maximum-scale 允許?戶最?縮放?例,為?個數(shù)字,可以帶?數(shù)
          • // user-scalable 是否允許?動縮放

          延伸提問 怎樣處理 移動端 1px 被 渲染成 2px 問題

          局部處理

          • mate 標簽中的 viewport 屬性 , initial-scale 設置為 1
          • rem 按照設計稿標準?,外加利? transfromescale(0.5) 縮??倍即可

          全局處理

          • mate 標簽中的 viewport 屬性 , initial-scale 設置為 0.5
          • rem 按照設計稿標準?即可

          24. 渲染優(yōu)化

          1 禁?使? iframe (阻塞??檔 onload 事件)

          • iframe 會阻塞主??的 Onload 事件
          • 搜索引擎的檢索程序?法解讀這種??,不利于SEO
          • iframe 和主??共享連接池,?瀏覽器對相同域的連接有限制,所以會影響??的并 ?加載
          • 使? iframe 之前需要考慮這兩個缺點。如果需要使? iframe ,最好是通過javascript
          • 動態(tài)給 iframe 添加 src 屬性值,這樣可以繞開以上兩個問題

          2 禁?使? gif 圖?實現(xiàn) loading 效果(降低 CPU 消耗,提升渲染性能)

          3 使? CSS3 代碼代替 JS 動畫(盡可能避免重繪重排以及回流)

          4 對于?些?圖標,可以使?base64位編碼,以減少?絡請求。但不建議?圖使?,?較耗 費 CPU

          ?圖標優(yōu)勢在于 (減少 HTTP 請求 /避免?件跨域 /修改及時?效 )

          5 ??頭部的會阻塞??(因為 Renderer進程中 JS 線程和渲染線程是互斥的)

          6 ??中空的 hrefsrc 會阻塞??其他資源的加載 (阻塞下載進程)

          7 ?? gzip CDN 托管, data 緩存 ,圖?服務器

          8 前端模板 JS+數(shù)據,減少由于 HTML 標簽導致的帶寬浪費,前端?變量保存AJAX請求結 果,每次操作本地變量,不?請求,減少請求次數(shù)

          9 ? innerHTML 代替 DOM 操作,減少 DOM 操作次數(shù),優(yōu)化 javascript 性能

          10 當需要設置的樣式很多時設置 className ?不是直接操作 style

          11 少?全局變量、緩存 DOM 節(jié)點查找的結果。減少 IO 讀取操作

          12 圖?預加載,將樣式表放在頂部,將腳本放在底部 加上時間戳

          13 對普通的?站有?個統(tǒng)?的思路,就是盡量向前端優(yōu)化、減少數(shù)據庫操作、減少磁盤 IO

          25. meta viewport相關 26 你做的??在哪些流覽器測試過?這些瀏覽器的內核分別是什么?

          IE : trident 內核

          Firefox gecko 內核

          <head lang=”en”>


          主站蜘蛛池模板: 国产成人精品无码一区二区三区| www一区二区www免费| 一区三区三区不卡| 亚洲一区二区三区首页| 国产精品小黄鸭一区二区三区| 无码中文字幕一区二区三区| 免费视频一区二区| 国产av熟女一区二区三区| 一区二区高清在线| 亚洲国产成人久久综合一区77| 无码视频免费一区二三区| 中文字幕日韩丝袜一区| 亚洲一区二区三区高清| 蜜臀Av午夜一区二区三区| 中文字幕乱码一区二区免费| 久久亚洲中文字幕精品一区四| 精品一区精品二区| 一区二区三区中文| 波多野结衣的AV一区二区三区| 亚洲一区二区三区免费| 国产一区二区精品尤物| 本免费AV无码专区一区| 国内精品无码一区二区三区| 99精品国产高清一区二区三区| 成人区精品一区二区不卡| 国产凹凸在线一区二区| 午夜福利一区二区三区在线观看 | 亚洲sm另类一区二区三区| 精品少妇ay一区二区三区| 精品国产一区AV天美传媒| 亚洲AV无码片一区二区三区| 国产麻豆精品一区二区三区| 国产福利一区二区| 亚洲高清成人一区二区三区| 中文字幕人妻丝袜乱一区三区| 亚洲V无码一区二区三区四区观看 亚洲爆乳精品无码一区二区三区 亚洲爆乳无码一区二区三区 | 激情亚洲一区国产精品| 午夜AV内射一区二区三区红桃视| 日韩免费视频一区| 国产无线乱码一区二三区| 亚洲熟妇av一区|