事件委托
事件委托（也叫事件代理）利用了事件冒泡，把監聽函式系結在父容器上，在觸發DOM上的某個事件時，會產生一個事件物件event，這個物件中包含著所有與事件有關的資訊，
使用事件委托的優點：
a.減少DOM操作，使事件處理時間減少，
b.減少記憶體空間的使用，提升性能，
簡單例子：
let myUl = document. getElementByld("my-ul");
myUl.addEventListener('click',function(e){
if(e.target.tagName == "LI"){
//如果點擊的目標的標簽名為LI
alert(e.target.innerText)
}
})
函式防抖與節流
可見文章：https://blog.csdn.net/qq_32442973/article/details/118739927
webp
WebP是Google推出的一種同時提供有損壓縮與無損壓縮的圖片檔案格式，派生自影像編碼格式VP8,支持透明圖層和多圖片動圖，
WebP可對網頁圖片有效進行壓縮而不影響圖片清晰度，從而節省帶寬，提高圖片下載速度，在質量相同的情況下，WebP格式影像的體積要比JPEG格式影像小40%，比PNG檔案小26%，
Google提供了 WebP檔案解碼器(libvpx)和 命令列工具(webpconv)，用于JEPG、png等格式圖片與WebP格式之間的轉換，WebP目前支持Chrome內核、Edgel8+、Safari 14+、Android的WebView等
瀏覽器，不支持ie，
方法一：前端js判斷加載
對瀏覽器進行判斷是否支持WebP，先加載一張base64的WebP格式，根據寬高來判斷是否支持，如果支持則加載默認的WebP格式的圖片，如果不支持則把img標簽里的圖片后綴換成常規的jpg或png即可，
function checkWebp(callback) {
var img = new Image();
img.onload = function () {
var result = (img.width>0) && (img.height>0);
callback(result);
};
img.onerror = function () {
callback(false);
};
img.src = 'data:image/webp;base64,UklGRiIAAABXRUJQVIA4IBYPKNKwAQCdASoBAAEADsD+JaQAASFRDFGJ';
}
function showlmage(flag){
var imgs = Array.from(document.querySelectorAll('img'))
imgs.forEach(function(i){
var src = https://www.cnblogs.com/h5hu/archive/2022/04/24/i.attributes['data-src'].value
if(flag){
i.src = https://www.cnblogs.com/h5hu/archive/2022/04/24/src
}else{
src = src.replace(/.webp$/,'.jpg')
}
})
}
checkWebp(showlmage)
方法二：前端picture標簽
如果瀏覽器支持WebP格式，就會加載 a.webp，否則會加載a.jpg，
<picture >
<source type="image/webp" srcset="a.webp">
<img src="https://img.uj5u.com/2022/04/25/308710250702282.jpg">
</picture>
方法三：服務端回應不同格式
支持webp圖片的瀏覽器在向服務器發送請求時，會在請求頭Accept中帶上image/webp，然后服務器根據是否含有這個頭資訊來決定回傳webp或其它格式圖片，很多云服務器和CDN帶有這種WebP自適應功能，
seo優化
seo(Search Engine Optimization)即搜索引擎優化，就是通過總結搜索引擎的運作規則，對網站進行合理的優化以提高網站在搜索引擎的排名， 搜索引擎通過爬蟲(蜘蛛)程式按一定規則抓取收錄你的網頁，分析處理后按關鍵字建立索引，以便為用戶提供快速檢索網頁的服務，seo就是通過挖掘用戶搜索習慣，設 定用戶所搜索的關鍵詞，優化網站定位和布局，填充優質網站內容，使網頁符合爬蟲胃口，獲得搜索引擎信任，在不損害用戶體驗的情況下使網站排名靠在搜索引擎前列，從而提高網站訪問量，
做法：
- 提高頁面加載速度，使用CSS圖示，背景圖片壓縮，使用雪碧圖，減少HTTP請求數等，
- 結構、表現和行為的分離，盡量不要把CSS和js放在同一個頁面，采用外鏈的方式，
- 優化網站分級結構，調整頁面布局，在每個內頁加面包屑導航，頁面內容盡量不要做成flash、視頻，
- 集中網站杈重，可以使用"rel=nofollown"屬性，告訴爬蟲無需抓取此頁，從而將權重分紿其他的鏈接，
- strong、em標簽強調關鍵字，strong標簽在搜索引擎中能夠得到高度的重視，
- 利用a標簽的title屬性，在不影響頁面功能的情況下，盡量紿a標簽加上title屬性，更有利于爬蟲抓取資訊，
- img應使用"alt"屬性加以說明，這個屬性可以在圖片加載不出來的時候顯示在頁面上相關的文字資訊，
- H標簽的使用，自帶權重，放在該最重要的標題上面，
- 精心設定meta標簽，如title， keywords，description等，反映網站的定位，內容與關鍵字要對應，增加關鍵字的密度，
- 增加網站的404頁面，利于提高用戶體驗，主要防止爬蟲丟失，
- 重要內容不要用JS輸出，爬蟲不識別JS代碼里的程式內容，
- 盡量少使用iframe框架，爬蟲一般不會讀取其中的內容，
- 添加外鏈，選擇與網站相關性比較高，整體質量比較好的網站交換友鏈，鞏固穩定關鍵詞排名，
- 填充優質的原創內容，
base64編碼
Base64是一種編碼演算法，使用64個可列印字符（"A-Z，a-z，0-9， +，/"，'='號就是65個）來對任意資料進行編碼，
通常用于將二進制資料（如圖片）轉化為可列印字符，方便存盤和http傳輸，
Base64不是真正的加密演算法，可以被任何人編碼解碼，可以使用base64在線編碼解碼工具，
前端應用：
1.html直接嵌入Base64編碼圖片，避免不必要的外部資源請求，
<img alt="logo" src="data:image/png;base64,iVBORwOKGgoAAAANSUhEUgAAADIA..." />
.bg{
background:url（data:image/png;base64,iVBORwOKGgoAAAANSUhEUgAAADIA...）
}
(不適用色彩豐富的大圖片，其編碼后字串較大，增加html/css體積，影響頁面加載速度)
2.canvas的toDataURL
將canvas畫布內容轉為base64編碼格式后傳遞到后端，后端base64解碼保存，
3.FileReader的readAsDataURL
將上傳的檔案轉為base64格式提交到服務器，如用戶頭像，
字體圖示
字體圖示（ iconfont） 將svg矢量圖示作成字體，采用字體格式來顯示網頁中的的純色圖示，同字體使用一樣，在css中通過@font-face定義，通過color, font-size等改變圖示的顏色，大小等樣式，
uni-app種使用字體圖示
先
https://blog.csdn.net/qq_45018844/article/details/120757230
再
https://blog.csdn.net/qq_45018844/article/details/120827906
普通專案使用字體圖示
https://blog.csdn.net/qq_48386796/article/details/119061059
lazy-load
lazy-load（懶加載）就是按需加載圖片，等圖片出現在瀏覽器當前視窗內再去加載，這樣不用一次性加載全部內容，減少首屏時請求數，緩解瀏覽器和服務器壓力，節省流量，
實作原理：
若在src中填入圖片地址，瀏覽器就可以發起請求，加載一張圖片，要實作懶加載，可以定義一個虛擬src屬性即data-src存放原圖地址，而屬性src填寫
一張低質量的空白占位圖，當頁面滾動時，遍歷圖片判斷是否在可視區域內，如果在則將data-src中真實地址放到src中，實作按需加載，另外頁面滾動是一個觸發頻繁的事件，可以利用防抖或節流函式優化一下，
gzip壓縮
gzip是一種資料壓縮格式，是HTTP協議上的GZIP編碼，
一般用于服務器將靜態檔案壓縮后傳輸到客戶端，可壓縮到原大小的4 0% ,大大節
省網路帶寬，提高訪問速度，
啟 用g z i p需 要 客 戶 端 和 服 務 端 的 共 同 支持，現在主流瀏覽器和常見服務器都是支持gzip的，
gzip作業原理
-
瀏覽器若支持g zip ,請求頭中會設定屬ttaccept-encoding： gzip來標識瀏覽器支
持gzip壓縮， -
服務端配置啟用gzip壓縮，收到請求后決議請求頭，判斷瀏覽器是否支持gzip ,
若支持，回應時對請求的資源進行壓縮并回傳gzip檔案給客戶端，并在http回應頭
中設定content-encoding:gzip,表可甘萃端使用了 gzip的壓縮方式， -
瀏 覽 器 接 收 響 應 后 判 斷 內 容 是 否 被 壓縮，如是則解壓縮，然后顯示頁面內容，
cdn
CDN （ Content Delivery Network,內容分發網路），是一組分布在多個不同地理
位置的WEB服務器（快取服務器），用于有效的向用戶分發內容，
主要原理
就是將源站的靜態資源（圖片視頻、html/css/jss安裝包apk等）快取到位于不同區域的CDN節點服務器上，通常是終端網路提供商的機房，當用戶訪問網站時，會去離用戶距離最近的CDN服務器上獲取，從而避免了網路擁塞，提高了訪問速度，緩解了源站壓力，
具體流程
-
用 戶 輸 入 要 訪 問 的u r l ,瀏 覽 器 通 過 域名決議（本地DNS系統和CDN專用DNS服務器）得到CDN負載均衡設備的IP地址，
-
瀏覽器向CDN負載均衡發出訪問醺黑CDN負載均衡根據用戶IP地址及URL,判斷距離、有無內容、負載情況后回傳用戶所屬區域的最佳cdn快取服務器IP，
-
用戶向cdn快取服務器發起請求，服務器回應用戶請求，
-
如果這臺快取服務器上沒有用戶想要的內容，再由快取服務器向源服務器請求，
-
快取服務器從源服務器得到內容后，一方面在本地進行快取，另一方面將獲取的資料回傳給客戶端，
light-hourse
Lighthouse是Google開源的一個自動化的網站性能測評工具，主要功能是檢測網站的性能，分析網路應用和網頁，收集現代性能指標并給出最佳實踐的建議，
使用
-
Lighthouse已集成到chrome瀏覽器開發者工具中，位于'Audits'面板下，高版本
chrome 直接顯示 lighthouse 項，點擊'Generate report'后生成并展示測評結果，結果包含了性能(Performance),訪問無障礙(Accessibility),最佳實踐(Best Practice),搜索引擎優化(SEO),PWA(Progressive Web App)五個部分， -
或在專案中安裝全域包lighthouse,需要Node 8及以上版本，執行
lighthouse http://www.test.com默認會在當前目錄下生成一個HTM L格測評報告，
Tree Shaking
TreeShaking即掩樹優化意思是從包中洗掉所有引入但沒有被實際用到的代碼 （ 也
稱為死代碼Dead Code ） 來縮減打包后的體積，形象比喻為將‘廢樹葉'搖下來，是DCE（ dead code elimination） 代碼清除技術的一種，
Tree Shaking由來：
當javascript應用體積越來越大時，一個有利 于 減 少 體 積 的 辦 法 是 拆 分 為 不 同 的 可 重用模塊，如CommonJs、AMD、CMD模塊化方案，
隨著模塊化的發展 ，開發人員還想進一步的移除多余的代碼 ， ES6模塊的出現使 其成為可 能 ， 打包工具Rollup團隊率先提出并實作了Tree Shaking, Webpack 2.0版開始接入 ， 至今不少打包工具都支持TreeShaking，
Tree Shaking 原理：
ES6模塊靜態化和靜態分析是Tree shaking的基礎，
靜態分析就是不執行代碼，在編譯時從字面量上對代碼進行分析從而正確判斷到底加載了哪些模塊 ， 再分析程式流 ， 判斷哪些變數未被使用參考，進而洗掉對應代碼，
早先CommonJS是動態require一個模塊 ， 可以嵌套在函式和if陳述句中 ,只有代碼執行后才知道是否需要該模塊 ,很難在譯階段通過靜態分析去做優化，
ES6模塊使用靜態匯入語法import , 且只能作為模塊頂層的陳述句出現，這種靜態化
在編譯階段就可以高度確定模塊間的依賴關系 ， 不依賴代碼的運行結果 ， 所以可以進行可靠的靜態分析，
在webpa ck中由webpa ck通過靜態分析標記出模塊匯出值中哪些沒有被用過 ， 然 后利用插件uglify（代碼壓縮優化工具）進行清除，刪掉這些沒被用到的方法，
在Webpack中使用Tree Shaking：
- 使用ES6模塊語法，Tree Shaking只支持import,不支持require，
- 新 的webpack 4正式版 ， 通過指定package.json 中的 si de Effects 屬性，向compiler提供提示 ， 表明專案中的哪些檔案 是“ pure（純的ES6模塊 ） ， 沒有副 作用的 ” ， 由此可以安全地洗掉檔案中未使用的部分，
- 生產模式配置選項，配置optimization.used Exports 為 true ,啟動標記功能（默認有），
預加載
預加載就是將所有所需的資源提前請求加載到本地，這樣后面在需要用到時就直接
從快取取資源，
如果請求的內容過于龐大，沒有使用預加載的頁面就會長時間的展現為一片空白，使用預加載則可以減少等待的時間，擁有更好的體驗，
前端容災
指因為各種原因后端介面無法提供資料（如介面出錯，依賴庫出現問題，流量高峰掛了，斷電斷網等），前端依然能保證頁面資訊的正常展示，
主要方式是提前將資料存盤在可靠的地方，在需要時能夠高效便捷地獲取到資料展示，通常有：
Localstorage
將資料存到Localstorage,通常介面路徑作為key,回傳資料作為value，若請求介面失敗, 就讀取L o c a l st orage ,將之前的資料取出來展示，并提示錯誤資訊，以緩沖時間，
CDN容災
除了 Localstorage同時也備份一份靜態資料到CDN,在介面請求和Localstorage都沒 有資料的情況下，從CDN獲取備份資料，
Service Worker
可以利用Service Worker離線存盤保個html頁面，
落花有意,紅葉無情轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/463535.html
標籤：其他