【干貨】1.5W+字的全鏈路前端性能優(yōu)化送給你
通常來講前端性能優(yōu)化是指從用戶開始訪問我們的網(wǎng)站到整個(gè)頁面完整的展現(xiàn)出來的過程中，通過各種優(yōu)化策略和優(yōu)化方法讓頁面加載的更快，讓用戶的操作響應(yīng)更及時(shí)，給用戶更好的使用體驗(yàn)。
這里我們介紹的是前端性能優(yōu)化知識(shí)的解決方案，從靜態(tài)資源優(yōu)化開始入手，從表象深入體系化的講解頁面渲染架構(gòu)，掌握高效的技術(shù)方案。
本文并非細(xì)節(jié)的講述如何實(shí)現(xiàn)性能優(yōu)化，而是從各個(gè)方面介紹性能優(yōu)化的方式方法，并且不僅限于H5，因?yàn)楫?dāng)今的前端也不僅僅只有H5。
圖片資源優(yōu)化
圖片格式介紹
jpeg: 一種針對(duì)彩色照片而廣泛使用的有損壓縮圖形格式。是一種柵格圖形，常用文件擴(kuò)展名為jpg，jpeg，jpe。在互聯(lián)網(wǎng)上常被應(yīng)用于存儲(chǔ)和傳輸照片。不適合線條圖形和文字，圖標(biāo)圖形，因?yàn)樗膲嚎s算法不支持這些類型的圖形，并且不支持透明度。常用于色彩豐富的照片，彩色圖大焦點(diǎn)圖banner等結(jié)構(gòu)不規(guī)則的圖形。
png: 便攜式網(wǎng)絡(luò)圖形，是一種無損壓縮的位圖圖形格式，支持索引、灰度、RGB三種顏色，以及Alpha通道等特性。他最初的設(shè)計(jì)是為了代替GIF,能夠支持半透明和透明特性，最高支持24位彩色圖形和8位灰度圖像。不過由于是無損壓縮所以文件體積太大。比較適合純色，透明，線條繪圖，圖標(biāo)以及顏色較少的需要半透明的圖片。
GIF: 位圖圖形文件格式，8位色重現(xiàn)真彩色的圖像，采用LZW壓縮算法進(jìn)行編碼。支持256色，僅支持完全透明和完全不透明，可以支持動(dòng)圖，不過每個(gè)像素只有8比特，不適合存儲(chǔ)彩色圖片。常用與動(dòng)畫和圖標(biāo)。
webp: 是一種現(xiàn)代圖像格式，可以提供無損壓縮和有損壓縮兩種?？梢酝瑫r(shí)辦證一定程序上的圖像質(zhì)量和較小的體積，可以插入多幀，實(shí)現(xiàn)動(dòng)畫效果。支持透明度。采用8位壓縮算法，無損的webp比png小26%，有損的webp比jpeg小25-34%，比gif有更好的動(dòng)畫。不過最多可以處理256色，不適合彩色圖片。常用于圖形和半透明圖像。
圖片優(yōu)化
對(duì)于png圖片來說，可以使用jdf-png-native進(jìn)行壓縮, 他是node-pngquant-native工具的封裝包，這個(gè)工具跨平臺(tái)，壓縮比高，而且壓縮png24也非常的好。
const?pngquant?=?require('jdf-png-native');
const?fs?=?require('fs');
fs.readFile('./in.png',?(err,?buffer)?=>?{
????if?(err)?{
????????throw?err;
????}
????const?resBuffer?=?pngquant.option({}).compress(buffer);
????fs.writeFile('./out.png',?resBuffer),?{
????????flags:?'wb'
????},?()?=>?{})
})
復(fù)制代碼
壓縮jpg可以使用jpegtran這個(gè)工具，他也是一個(gè)node工具。使用方法比較簡(jiǎn)單，直接使用命令即可。大概壓縮10%的占比。
jpegtran -copy node -optimize-outfile out.jpg in.jpg
復(fù)制代碼
對(duì)于gif文件來說可以使用gifsicle工具，他是通過改變每幀比例，減小gif文件大小，同時(shí)可以使用透明來達(dá)到更小的文件體積。是一個(gè)公認(rèn)的解決方案?？梢匀?code style="margin-right: 2px;margin-left: 2px;padding: 2px 4px;max-width: 100%;border-radius: 4px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(145, 109, 213);font-weight: bolder;background-image: none;box-sizing: border-box !important;overflow-wrap: break-word !important;">http://www.lcdf.org/gifsicle/中去安裝。使用方式同樣也是命令行方式。
gifsicle --optimize=3 --crop-transparency -o out.gif in.gif
復(fù)制代碼
這里的優(yōu)化級(jí)別不要小于2，1的話代表不壓縮。壓縮后基本不失幀。
還有一種壓縮方式是圖片可以根據(jù)網(wǎng)絡(luò)環(huán)境來展示不同尺寸和像素的圖片，通過在url后綴加不同參數(shù)來實(shí)現(xiàn)。比如下面的地址, 430可以修改為800來獲得不同體積的圖片。
https://img.alicdn.com/imgextra/i1/2616970884/O1CN01x6HnoK1IOuj5IosXO_!!2616970884.jpg_430x430q90.jpg
響應(yīng)式圖片
響應(yīng)式圖片是我們可以在用戶不同的窗口大小還有設(shè)備像素的情況下來展示不同大小的圖片，可以用以下三種方式來實(shí)現(xiàn), 第一種是可以使用js來綁定事件檢測(cè)窗口大小，以此來設(shè)置圖片的大小。第二種方式就是css的媒體查詢。
@media?screen?and?(max-width:?640)?{
????my_image?{?width:?640px;?}
}
復(fù)制代碼
第三種可以使用html5的srcset來設(shè)置，他會(huì)根據(jù)設(shè)備的像素比來自動(dòng)選擇需要的圖片。而且不支持srcset的瀏覽器也可以正常展示src的屬性。
<img?
??srcset="img-320w.jpg,?img-640w.jpg?2x,?img-960w.jpg?3x"?
??src="img-960w.jpg"?
??alt="img"?
/>
復(fù)制代碼
逐步加載圖片的方式
其實(shí)就是延遲加載，在真實(shí)的圖片加載出來之前，可以使用一張公共的圖片，一般是公司的logo，先將布局撐起來，然后再換成真實(shí)的圖片。
lqip這個(gè)工具可以將真實(shí)的圖片虛化，轉(zhuǎn)換為很小的base64編碼。這樣我們可以先使用base64加載虛化的圖片。
npm?install?lqip
復(fù)制代碼
const?lqip?=?require('lqip');
const?file?=?'./in.png';
//?image
lqip,base64(file).then(res?=>?{
????console.log(res);?//?輸出base64
})
//?color
lqip.paletter(file).then(res?=>?{
????console.log(res);?//?圖片顏色值
})
復(fù)制代碼
也可以使用低質(zhì)量圖片占位符, 他是基于SVG的圖像占位符實(shí)現(xiàn)的。
npm?install?sqip
復(fù)制代碼
const?sqip?=?require('sqip');
const?result?=?sqip({
????filename:?'./in.png',
????numberOfPrimitives:?10?//?效果值
});
console.log(result.final_svg);?//?輸出svg格式
復(fù)制代碼
相比lqip來說sqip效果會(huì)好很多，而且可以設(shè)置不同的大小。
其他方式
可以使用web font來代替圖片，比如說小圖標(biāo)等業(yè)務(wù)小圖片。
也可以用dataurl的方式，也就是前面的base64的方式來代替圖片，這樣用戶就不需要發(fā)送http請(qǐng)求了。
也可以采用雪碧圖將多個(gè)小圖片合成一個(gè)大圖，這樣也會(huì)節(jié)省很多的圖片請(qǐng)求。
圖片服務(wù)器自動(dòng)優(yōu)化
圖片服務(wù)器優(yōu)化是指可以在圖片url連接上增加不同特殊參數(shù)，讓服務(wù)器自動(dòng)生成不同格式，大小，質(zhì)量的圖片。
比如說可以對(duì)圖片做一些裁剪，裁剪成我們需要的圖片，也可以支持不同格式的轉(zhuǎn)換，比如說jpg，gif，png，webp等也可以設(shè)置圖片的壓縮比。
也可以對(duì)圖片添加一些水印，高斯模糊，重心處理等還可以增加一些AI的能力，比如說用戶上傳的圖片是否涉黃。還可以通過智能摳圖，智能排版，智能配色智能合成等功能完善圖片。
HTML的優(yōu)化方法
精簡(jiǎn)html代碼
可以減少html的嵌套也就是層級(jí)關(guān)系盡量減小，也可以減小DOM節(jié)點(diǎn)數(shù)也就是盡量壓縮優(yōu)化DOM的節(jié)點(diǎn)數(shù), 讓瀏覽器渲染的DOM節(jié)點(diǎn)數(shù)最少。
減少一些無語義的代碼，比如說空標(biāo)簽清浮動(dòng)那種代碼能不用最好不要用。
建議連接中刪除http或者h(yuǎn)ttps，因?yàn)橐话沔溄拥膮f(xié)議頭和頁面的協(xié)議頭都是一致的，寫他們多了4-5個(gè)字符其實(shí)是沒有什么意義的。而且可以減少代碼體積。
也可以刪除多余的空格，換行符，縮進(jìn)和不必要的注釋，一般會(huì)用壓縮工具來處理這個(gè)過程?？梢允÷砸恍?biāo)簽和屬性。使用相對(duì)路徑的url，最大范圍的減少字節(jié)數(shù)。
文件位置
css文件鏈接盡量放在頁面頭部，css加載不會(huì)阻塞DOM Tree解析，但是會(huì)阻塞DOM Tree渲染，也會(huì)阻塞后面js執(zhí)行。也就是說DOM Tree在渲染前就要解析好CSS，從而減少瀏覽器重排文檔的次數(shù)。而且css放在頁面底部會(huì)導(dǎo)致頁面白屏?xí)r間變長(zhǎng)。
js文件一般放在頁面底部，這是防止js的加載和解析阻塞頁面元素的正常渲染。
用戶體驗(yàn)
設(shè)置favicon.ico, 如果不設(shè)置控制臺(tái)會(huì)報(bào)錯(cuò)，而且用戶訪問的時(shí)候地址欄也是空的，不利于品牌記憶。
增加首屏必要的css和js，一般頁面需要在等待所有的依賴加載完成才會(huì)展示，這樣就會(huì)導(dǎo)致頁面存在空白。永祥用戶體驗(yàn)，可以增加背景圖或者loading或者骨架屏，比空白頁好很多。
CSS優(yōu)化細(xì)則
提升css渲染性能
謹(jǐn)慎使用一些expensive的屬性，比如nth-child偽類或者position:fixed定位，因?yàn)檫@些比較消耗瀏覽器的渲染性能。
盡量減少一些樣式層級(jí)的級(jí)數(shù)，比如，div ul li span i { color: red}, 其實(shí)我們可以給i標(biāo)簽設(shè)置class，直接書寫樣式。
避免使用占用過多cpu和內(nèi)存的屬性，比如text-indent不要設(shè)置太大的值。
盡量避免使用耗電量大的屬性，比較占用GPU, 比如transfrom是，transitions, opacity.
合適的使用css選擇器, 盡量避免使用通配符，避免使用css表達(dá)式。color: expression((new Date()).getHours() % 2 ? "#fff" : "#000")。
避免類正則的屬性選擇器。*=， |=， ^=, $=，使用外鏈的css，可以單獨(dú)形成文件放在cdn，使用緩存形式加載。避免使用@import因?yàn)樗募虞d會(huì)阻塞進(jìn)程，需要加載完畢才會(huì)向下執(zhí)行。
精簡(jiǎn)css代碼，使用縮寫的語句，比如margin-top可以寫在margin中，再者如果值為0能刪除就刪除，刪除不必要的單位值，刪除過多的分號(hào)，刪除空格和注釋。盡量減小樣式表的體積。其實(shí)這些都可以使用壓縮工具來處理，會(huì)方便很多。
合理使用web fonts
可以將字體文件部署到cdn上，加快用戶端的加載速度，也可以將字體以base64的形式保存在css中，并通過localStorage進(jìn)行緩存。一些谷歌字體庫應(yīng)該使用國(guó)內(nèi)托管服務(wù)不要直接使用源地址。
css動(dòng)畫優(yōu)化
避免同時(shí)動(dòng)畫，也就是說用戶訪問的屏幕區(qū)間里面不要有過多的動(dòng)畫，動(dòng)畫太多會(huì)干擾用戶正常瀏覽網(wǎng)站，而且動(dòng)畫多也影響瀏覽器的性能。
延遲動(dòng)畫的初始化，可以讓其它c(diǎn)ss先渲染，讓動(dòng)畫延遲，比如說0.5或1。
可以借助svg去展示動(dòng)畫，樣式放在css里面控制。
JavaScript優(yōu)化
首先我們是當(dāng)需要的時(shí)候才去優(yōu)化，不是為了優(yōu)化而優(yōu)化，一般的優(yōu)化是在某一個(gè)時(shí)間點(diǎn)進(jìn)行的，而且優(yōu)化也需要考慮可維護(hù)性這是要結(jié)合團(tuán)隊(duì)的研發(fā)水平和代碼的規(guī)范。
提升js文件的加載性能
這個(gè)基本每個(gè)人都知道，就是css文件放在head標(biāo)簽中，js文件放在body結(jié)尾的地方。這個(gè)是js的加載不要影響html的渲染。
變量和函數(shù)方面的優(yōu)化
盡量使用id選擇器，因?yàn)閕d選擇器在查詢效果上效率最快。
避免使用eval，這個(gè)方法比較消耗能行。
js函數(shù)盡可能保持簡(jiǎn)潔，不要把太多內(nèi)容寫在一個(gè)函數(shù)中。也建議使用事件的節(jié)流函數(shù)。事件委托等等。
js動(dòng)畫
盡量避免添加大量的js動(dòng)畫，css3動(dòng)畫和canvas動(dòng)畫都比js動(dòng)畫性能好。
使用requestAnimationFrame來代替setTimeout和setInterval，因?yàn)閞equestAnimationFrame可以在正確的時(shí)間進(jìn)行渲染，setTimout和setInterval無法保證渲染時(shí)機(jī)。不要在定時(shí)器里面綁定事件。
使用邏輯緩存
緩存dom對(duì)象，也就是用一個(gè)變量來存儲(chǔ)dom對(duì)象，不要每次使用都查詢。
緩存列表長(zhǎng)度，也就是說用變量存儲(chǔ)dom元素的個(gè)數(shù)，而不是每次都重新計(jì)算。
比如百度M站，會(huì)把頁面的css和js放在本地存儲(chǔ)里面，這樣后面再加載的時(shí)候就直接從本地存儲(chǔ)里面取，實(shí)現(xiàn)秒考的效果。不過本地存儲(chǔ)空間有限，要謹(jǐn)慎使用。
減少頁面回流和重繪
css
避免過多的樣式嵌套，最好可以快速的定位到元素。
避免使用css表達(dá)式，css表達(dá)式會(huì)在css繪制的過程中都會(huì)執(zhí)行，會(huì)增加重排和回流的次數(shù)。
可以使用絕對(duì)定位讓動(dòng)畫元素脫離文檔流。
避免使用table布局他會(huì)引起瀏覽器的多次重繪，也不要使用float布局。
圖片最好設(shè)置好設(shè)置width和height，這樣圖片在加載之后布局就可以確定了。
簡(jiǎn)化瀏覽器不必要額任務(wù)，使用viewport設(shè)置屏幕縮放級(jí)別。
避免頻繁設(shè)置樣式，將多個(gè)樣式操作合并修改,一次性的更新。
js
為了減少回流發(fā)生次數(shù)，應(yīng)該避免頻繁操作DOM，可以合并多次對(duì)DOM的修改，一次性批量處理。
控制繪制過程和繪制區(qū)域，繪制過程開銷比較大的屬性設(shè)置應(yīng)當(dāng)避免使用。
簡(jiǎn)化DOM操作
眾所周知，頁面交互卡頓和流暢度很大一部分原因就是頁面有大量DOM元素，想想一下，從一個(gè)上萬節(jié)點(diǎn)的DOM樹上，使用querySelectorAll或getElementByTagName方法查找某一個(gè)節(jié)點(diǎn)，是非常耗時(shí)的，另外元素綁定事件時(shí)，事件冒泡和事件捕獲的執(zhí)行也會(huì)相對(duì)耗時(shí)。所以一般我們應(yīng)該合理的不熟業(yè)務(wù)邏輯，DOM節(jié)點(diǎn)過多時(shí)應(yīng)該延遲即將呈現(xiàn)的DOM內(nèi)容。
對(duì)DOM的操作最好統(tǒng)一處理后再統(tǒng)一插入到DOM Tree中。可以使用fragment對(duì)DOM和樣式設(shè)置好再統(tǒng)一放到頁面中去。
目前比較流行的框架，比如Angular，React和Vue都是使用虛擬DOM技術(shù)，通過diff算法簡(jiǎn)化和減少DOM操作。
靜態(tài)文件壓縮工具
html-minifier: 壓縮html clean-css: css的壓縮工具 uglify-js: js文件的壓縮工具
瀏覽器渲染過程
首先瀏覽器會(huì)解析HTML生成DOM Tree，然后解析CSS生成CSSOM Tree。接著JS會(huì)通過DOM Api和 CSSOM Api來操作DOM Tree和CSS Rule Tree 將DOM Tree 和 CSSOM Tree合成一顆渲染樹Render Tree。
根據(jù)生成的渲染樹進(jìn)行回流，以計(jì)算每個(gè)節(jié)點(diǎn)的幾何信息，包括位置，大小，樣式等等。然后根據(jù)渲染樹和回流得到的幾何信息，得到每個(gè)節(jié)點(diǎn)上的絕對(duì)像素。
最后將像素發(fā)送給圖片處理器也就是GPU進(jìn)行頁面展示。
前端頁面渲染可以分為服務(wù)端渲染和客戶端渲染。服務(wù)端渲染有傳統(tǒng)的后端同步渲染，同構(gòu)直出比如php，java, .net或者大家熟悉的node。
客戶端渲染也就是js渲染，前后端分離，單頁面應(yīng)用。react, vue, ios,安卓，hybird app，flutter等。
懶加載，預(yù)加載，預(yù)渲染
懶加載也叫延遲加載，指的是長(zhǎng)網(wǎng)頁中延遲加載特定元素，可以是圖片也可以是js和css。懶加載的好處是可以減少當(dāng)前屏無效資源的加載。
一般我們會(huì)把img標(biāo)簽的src屬性設(shè)置為空字符串，真實(shí)的圖片地址放在data-lazy中，當(dāng)頁面scroll到對(duì)應(yīng)的位置時(shí)再通過DOM操作將src的值替換為data-lazy的值。
預(yù)加載是讓瀏覽器預(yù)先加載某些資源，同樣也是圖片，js或者css，這些資源是在將來才會(huì)被使用的。
簡(jiǎn)單來說就是講所需要的資源提前加載到瀏覽器本地，后面在需要的時(shí)候可以直接從瀏覽器的緩存中獲取，而不用再重新開始加載。好處是減少用戶后續(xù)加載資源等待的時(shí)間。
可以使用new Image的方式也可以使用標(biāo)簽的方式preload，prefetch， preconnect
<link?rel="preload"?href="src/style.css"?/>
<link?rel="prefetc"?href="src/image.png"?/>
<link?rel="dns-prefetch"?href="https://my.com"?/>?
<link?rel="preconnect"?href="https://my.com"?/>?
復(fù)制代碼
另一種預(yù)加載組件的方式就是提前渲染它，在頁面中渲染組件，但是并不在頁面中展示，也就是渲染好后先隱藏起來，用的時(shí)候再直接展示。可以使用prerender將https://my.com頁面先提前渲染好。
<link?rel="prerender"?href="https://my.com"?/>
復(fù)制代碼
接口服務(wù)調(diào)用優(yōu)化
1.接口合并，指一個(gè)頁面的眾多的業(yè)務(wù)接口和依賴的第三方接口統(tǒng)一使用一個(gè)部署在集群的接口統(tǒng)一調(diào)用，以減少頁面接口請(qǐng)求數(shù)。
2.接口上CDN，主要基于接口性能考慮，我們可以把不需要實(shí)時(shí)更新的接口同步至CDN，接口內(nèi)容變更自動(dòng)同步CDN。
3.接口域名上CDN可以增強(qiáng)可用性和穩(wěn)定性。
4.接口降級(jí)，這個(gè)基于大促備戰(zhàn)考慮，核心進(jìn)行降級(jí)用基礎(chǔ)接口進(jìn)行業(yè)務(wù)實(shí)現(xiàn)，比如千人千面的推薦接口，在大促時(shí)間點(diǎn)可以直接運(yùn)營(yíng)編輯的數(shù)據(jù)，另外接口萬一無法訪問，使用預(yù)設(shè)好的墊底備份數(shù)據(jù)。
5.接口監(jiān)控，監(jiān)控接口的成功率不是常說的服務(wù)器TP99，而是和用戶實(shí)際情況一直的成功和失敗監(jiān)控，比如弱網(wǎng)，超時(shí)，網(wǎng)絡(luò)異常，網(wǎng)絡(luò)切換等情況。排查出來問題需要聯(lián)合后端，運(yùn)維，網(wǎng)絡(luò)崗位人員一并解決。
接口緩存優(yōu)化
1.ajax/fetch緩存，前端請(qǐng)求的時(shí)候帶上cache，依賴瀏覽器本身的機(jī)制來請(qǐng)求接口，這個(gè)比較適用于不會(huì)經(jīng)常變更的數(shù)據(jù)。
2.本地緩存，異步接口數(shù)據(jù)優(yōu)先使用本地localStorage中緩存的數(shù)據(jù)?？梢宰尫?wù)端返回?cái)?shù)據(jù)的時(shí)候再給一個(gè)md5值，然后將md5值和數(shù)據(jù)綁定存在本地，再次請(qǐng)求的時(shí)候?qū)Ρ冗@個(gè)md5值，如果相同就不要再請(qǐng)求獲取數(shù)據(jù)的接口了，如果不同就請(qǐng)求更新。
webview
原生的webview對(duì)于IOS來說有兩種，一種是UIWebView，他從IOS2開始就作為App內(nèi)展示web內(nèi)容的容易，而且排版布局能力比較強(qiáng)。
不過UIWebView也有很多的問題，比如說內(nèi)存泄漏，運(yùn)行期間會(huì)有極高的內(nèi)存峰值，Touch Delay延遲300毫秒。js運(yùn)行性能不高，在2018年的ios12以后就不再維護(hù)了。
WKWebView是蘋果在WWDC 2014上推出的新一代WebView組件，WKWebView的內(nèi)存開銷比UIWebView要小很多，而且在性能，穩(wěn)定性，內(nèi)存占用方面都有很大提升?？梢詫?shí)現(xiàn)60fps的滾動(dòng)刷新率，自身就支持了右滑返回手勢(shì)，支持更多的HTML屬性。內(nèi)存占用是UIWebView的1/4 ~ 1/3, 加載速度比UIWebView提升了一倍左右。大幅度提升了js執(zhí)行速度。允許js的Nitro庫的使用，UIWebView是不允許的?？梢院蚸s直接互調(diào)函數(shù)，不需要使用jsbridge來協(xié)助。
當(dāng)然WKWebView不支持頁面緩存，需要自己注入cookie，而UIWebView是自動(dòng)注入cookie的。他也無法發(fā)送POST參數(shù)。
對(duì)于安卓來說存在webkit for webview 和 chromium for webview。
webkit是一個(gè)開源項(xiàng)目，前身是khtml和kjs，專注于網(wǎng)頁內(nèi)容的展示，做了一流的頁面渲染引擎，他不是瀏覽器而且也不想成為瀏覽器，這個(gè)項(xiàng)目包含兩個(gè)部分，第一個(gè)部分是WebCore, 其中包括對(duì)html，css很多w3c規(guī)范的實(shí)現(xiàn)，第二部分就是狹義上的webkit主要是各個(gè)平臺(tái)的移植并提供相應(yīng)的接口。也就是webview和類似于webview，這樣的接口提供操作和顯示網(wǎng)頁的能力。
目前使用WK的主流瀏覽器或者webview包括chrome，safari, 安卓平臺(tái)以及眾多的移動(dòng)瀏覽器。
chromium是基于webkit之上的一個(gè)瀏覽器項(xiàng)目，由谷歌來發(fā)起，這個(gè)項(xiàng)目發(fā)展的還是比較迅速的，他對(duì)新特性的支持還是比較好的，比如webgl，css3，h5等等，在性能方向也非常不錯(cuò)chrome一般選擇穩(wěn)定的chromium作為基礎(chǔ)。
| Webkit for Webview | Chromium from Webview | 備注 | |
|---|---|---|---|
| 版本 | Android4.4以下 | Android4.4以上 | -- |
| JS解釋器 | WebCore JavaScript | V8 | -- |
| H5 | 278 | 434 | -- |
| 遠(yuǎn)程調(diào)試 | 不支持 | 支持 | Android4.4及以上支持 |
| 內(nèi)存占用 | 小 | 大 | 相差20-30M |
| WebAudio | 不支持 | 支持 | Android 5.0及以上支持 |
| WebGL | 不支持 | 支持 | Android 5.0及以上支持 |
| WebRTC | 不支持 | 支持 | Android 5.0及以上支持 |
安卓第三方內(nèi)核，主要是安卓的版本較多，對(duì)WebView二次封裝產(chǎn)生的，這里主要說下X5內(nèi)核。
他的速度是比較快的相比系統(tǒng)WebView的網(wǎng)頁打開速度有30%的提升，在流量方面使用云端優(yōu)化技術(shù)節(jié)省20%以上。安全問題可在24小時(shí)內(nèi)修復(fù)。更穩(wěn)定經(jīng)過億級(jí)用戶的使用考研，CRASHE(崩潰)率低于0.15%。沒有系統(tǒng)內(nèi)核的碎片化問題，更小的兼容性問題，支持夜間模式，適屏排版，字體設(shè)置等瀏覽器增強(qiáng)功能。在H5和ES6上有更完整的支持，集成了強(qiáng)大的視頻播放器，支持視頻格式遠(yuǎn)多于系統(tǒng)的WebView，視頻和文件的格式支持X5內(nèi)核多于系統(tǒng)內(nèi)核，自帶防劫持。
一般webview選型，IOS建議使用WKWebView, 安卓建議使用X5。
WebView性能優(yōu)化
當(dāng)App首次打開時(shí)，默認(rèn)是不初始化瀏覽器內(nèi)核的，當(dāng)創(chuàng)建WebView實(shí)例的時(shí)候，才會(huì)啟動(dòng)瀏覽器內(nèi)核，打開事件需要70-700毫秒，并創(chuàng)建webview的基礎(chǔ)框架。
可以使用全局的Webview對(duì)延遲的毫秒進(jìn)行優(yōu)化，就是在客戶端啟動(dòng)的時(shí)候，就初始化一個(gè)全局的WebView待用，當(dāng)用戶訪問Webview的時(shí)候直接使用這個(gè)WebView加載對(duì)應(yīng)網(wǎng)頁。
這樣會(huì)減少首次打開WebView的時(shí)間，缺點(diǎn)是會(huì)有一些額外的內(nèi)存消耗。
導(dǎo)航欄可以預(yù)加載，以前是在webview加載完成之后進(jìn)行初始化，可以改為和webview并行一起加載。
對(duì)于登錄來說H5頁面上接口每次查詢Cookie中是否有登錄態(tài)，無登錄態(tài)H5跳轉(zhuǎn)統(tǒng)一登錄頁，App登錄成功寫入Cookie?？梢愿臑镃ookie統(tǒng)一在Webview中設(shè)置cookie。也就是初始化Webview的時(shí)候判斷是否登錄，如果登錄了就打開H5頁面，如果沒登錄就自動(dòng)跳轉(zhuǎn)登錄頁面。
webview加載頁面的url盡量前置，不要放在最后，可以和業(yè)務(wù)邏輯并行處理，總而言之減少頁面的白屏?xí)r間，讓用戶最快的看到頁面。
提升滾動(dòng)條的使用體驗(yàn)，原本是使用系統(tǒng)自帶的滾動(dòng)條的進(jìn)度值，可以自己模擬滾動(dòng)條的加載過程，讓用戶感覺頁面加載變快了。也就是初始快速的加載到60%以上，給用戶感覺加載很快的感覺。其實(shí)真實(shí)速度并沒有變...
js-sdk優(yōu)化，也就是oc和js通信的一個(gè)方式。一般jssdk有三種方式實(shí)現(xiàn)，第一種就是常見的scheme的方式，就是我們?cè)趆5頁面里面定義一些特殊的鏈接，拿到這個(gè)scheme之后原生攔截。然后把需要的回調(diào)函數(shù)和參數(shù)進(jìn)行攔截，但這樣有個(gè)問題，url一般是256個(gè)字符，有長(zhǎng)度的限制不能無限的傳遞。
第二種是iframe的形式，通過后臺(tái)啟一個(gè)頁面進(jìn)行攔截取iframe的變更拿到j(luò)s的方法給oc實(shí)現(xiàn)通信，iframe是依賴jssdk.js文件的，需要sdk文件作為橋梁實(shí)現(xiàn)通信目的。
第三種是webkit的方式，他是一種直接調(diào)用的方式，無需依賴任何的sdk文件。
瀏覽器緩存策略
| 緩存機(jī)制 | 優(yōu)勢(shì) | 適用場(chǎng)景 | Android 開關(guān) | IOS開關(guān) |
|---|---|---|---|---|
| 瀏覽器緩存機(jī)制 | HTTP協(xié)議層支持 | 靜態(tài)文件的緩存 | 瀏覽器負(fù)責(zé) | 瀏覽器負(fù)責(zé) |
| Web Storage | 較大的存儲(chǔ)空間，使用簡(jiǎn)單 | 臨時(shí)，簡(jiǎn)單數(shù)據(jù)的緩存，瀏覽器上的LocalStorage、SessionStorage | webSettings.setDomStorageEnabled(true) | 默認(rèn)開啟無關(guān)閉 |
| Web SQL Database | 存儲(chǔ)，管理復(fù)雜結(jié)構(gòu)數(shù)據(jù) | 建議用IndexDB 替代 | webSettings.setDatabaseEnabled(true) | 默認(rèn)開啟無關(guān)閉 |
| Application Cache | 方便構(gòu)建離線App | 離線App,靜態(tài)文件緩存 | webSettings.setAppCacheEnabled(true) | 默認(rèn)開啟無關(guān)閉 |
| IndexDB | 存儲(chǔ)任何類型數(shù)據(jù)，使用簡(jiǎn)單，支持索引 | 結(jié)構(gòu)，關(guān)系復(fù)雜的數(shù)據(jù)存儲(chǔ) | webSettings.setJavaScriptEnabled(true) | 默認(rèn)開啟無關(guān)閉 |
H5離線化的實(shí)現(xiàn)方式
全局離線包，包含公共的資源，可供多個(gè)應(yīng)用共同使用。
還可以有私有化的離線包，只可以被某個(gè)應(yīng)用單獨(dú)使用。
離線包的工作原理:
首先會(huì)加載一個(gè)全局的包就是一些基礎(chǔ)的文件，加載之后會(huì)把包釋放放在內(nèi)存里，接著會(huì)做一個(gè)檢測(cè)，查看本地是否安裝，如果已經(jīng)安裝就釋放到內(nèi)存，如果沒有安裝就觸發(fā)離線包的下載，就是我們做好的包放在服務(wù)器中，然后從服務(wù)器獲取過來，在下載之前會(huì)進(jìn)行一個(gè)本地和線上版本的對(duì)比，版本不一致的話就會(huì)下載最新的包，如果一致就取本地的就可以了。
最終這個(gè)包會(huì)解壓釋放在內(nèi)存里面，當(dāng)webview在加載url的時(shí)候會(huì)直接從內(nèi)存里面讀取，如果能讀取到就加載內(nèi)存中的頁面數(shù)據(jù)進(jìn)行展示，假設(shè)讀取不到也就是說本地沒有這個(gè)業(yè)務(wù)就會(huì)使用線上的url地址讓頁面加載就可以了。因?yàn)槲覀円话悴粫?huì)把所有的業(yè)務(wù)都做成離線化的形式，假設(shè)webview查詢的到就用離線化，查詢不到就用墊底的線上url展示。無論本地離線包加載失敗還是沒有這個(gè)離線包，都使用線上url來墊底。
離線包的下載一包情況下如果用戶處于移動(dòng)網(wǎng)絡(luò)狀態(tài)下，不會(huì)在后臺(tái)下載離線包，如果當(dāng)前用戶點(diǎn)擊app，離線包沒有下載好，用戶就要等待離線包下載好才能用?？梢圆扇ifi靜默下載的方案。
從服務(wù)器請(qǐng)求的離線包信息存儲(chǔ)到本地?cái)?shù)據(jù)庫的過程中，離線包信息包括離線包的下載地址，離線包版本號(hào)，加密簽名信息等，安裝離線包其實(shí)就是將離線包從下載目錄拷貝到手機(jī)安裝目錄。
一些大廠的離線包方案比如美團(tuán)的LsLoader通用移動(dòng)端WebApp離線化方案，騰訊的Alloykit手Q離線包，阿里的極致Hybrid航旅離線包再加速。原理基本上都是一致的，細(xì)節(jié)上可以做些參考。
混合開發(fā)介紹
1.RN React Native是基于React語法的, 希望實(shí)現(xiàn)的是一套代碼可以在各個(gè)端使用。他的優(yōu)勢(shì)很明顯，代碼是可以共享的無論是IOS還是安卓還是H5,性能方面幾乎也與Native相同。并且提供了非常流暢的動(dòng)畫，因?yàn)樗阡秩局按a就已經(jīng)轉(zhuǎn)換為了原生視圖。
調(diào)試時(shí)無需每次代碼變更都編譯打包，可即時(shí)查看更小效果，極大提高了開發(fā)人力。
支持熱更新，不需要每次發(fā)版都發(fā)布應(yīng)用到商店，發(fā)版時(shí)間可以自由控制，安卓和ios同時(shí)發(fā)版。
一共分成四層實(shí)現(xiàn)，最下面是native的原生層也就是OC和Java，在這之上是UI渲染器，圖片處理，網(wǎng)絡(luò)通信，和一些工具庫，再向上是C++: JSCore，Bridge也就是js的運(yùn)行環(huán)境和js和native的橋接。最上面才是js層也就是js的一些組件。
RN的jsx文件通過JSBridge會(huì)針對(duì)不同平臺(tái)打包成不同的格式，比如IOS的.m文件，安卓的.xml文件，以及H5的.html文件。
為什么會(huì)有RN其實(shí)是因?yàn)閼?yīng)用商店發(fā)版的問題，每一次發(fā)版都需要審核，可能審核不通過，而且安卓可能要發(fā)布多個(gè)商店，還有兩端研發(fā)不同步的問題，也就是安卓和ios相同的業(yè)務(wù)需要開發(fā)兩遍。
如果你公司的技術(shù)是React全家桶，那還是建議選用RN的。
小程序
小程序的愿景是觸手可及，用戶掃一掃或者搜索下就可以打開應(yīng)用，不需要安裝太多應(yīng)用。
向程序相比App，開發(fā)門檻更低，優(yōu)于H5接近Native的體驗(yàn)，可以使用相機(jī)，位置，網(wǎng)絡(luò)，存儲(chǔ)等豐富的原生能力。支持頂部下拉，搜索，掃碼等入口，簡(jiǎn)單方便，用完即走，不需要像App那樣下載，直接打開支持熱更新。
小程序出現(xiàn)的行業(yè)背景，對(duì)于App大廠來說需要流量變現(xiàn)，比如微信，他是沒辦法變現(xiàn)的，所以可以使用小程序生態(tài)將第三方引入進(jìn)來，形成了一個(gè)小型的應(yīng)用市場(chǎng)。對(duì)于企業(yè)應(yīng)用來說，移動(dòng)流量枯竭，獲客比較困難，可以降低獲客成本和開發(fā)成本，業(yè)務(wù)上提供更多的試錯(cuò)機(jī)會(huì)。
平臺(tái)類產(chǎn)品如果輸出給商家端，相比多個(gè)app的方式，比較推薦使用小程序。
Flutter
號(hào)稱編寫一次可以部署到各個(gè)終端，web, android，ios，mac，linux，windows，fuchsia os。
底層使用Skia圖形引擎，圖形性能媲美原生應(yīng)用，界面更像一個(gè)全屏應(yīng)用程序或2D游戲，速度比較快，使用本機(jī)ARM二進(jìn)制文件，做到提前編譯，不需要JVM，也就是java虛擬機(jī)。
底層實(shí)現(xiàn)
flutter在2017年5月份出現(xiàn)，生態(tài)不夠豐富，學(xué)習(xí)曲線相對(duì)較高，但是他的性能較好，如果考慮性能，團(tuán)隊(duì)人員足夠的話建議選擇fluttr。
CDN
CDN是內(nèi)容分發(fā)網(wǎng)絡(luò)，利用每一臺(tái)最靠近用戶的服務(wù)器，更快更可靠的將文件發(fā)送給用戶。以加快訪問速度。
CDN的有點(diǎn)很明顯，因?yàn)闀?huì)給用戶指派較近，較順暢的服務(wù)器節(jié)點(diǎn)，所以速度會(huì)比較快，服務(wù)器放在不同地點(diǎn)，減少了互聯(lián)的流量，也降低了快帶成本，當(dāng)某個(gè)服務(wù)器故障時(shí)，自動(dòng)調(diào)用臨近地區(qū)的服務(wù)器。
回源是指瀏覽器訪問CDN上靜態(tài)文件時(shí)，文件緩存過期，直接穿透CDN而訪問源站機(jī)器的行為。這是CDN的一個(gè)策略。
CDN的緩存分為三級(jí)，瀏覽器本地緩存也就是header頭配置的緩存，CDN邊緣節(jié)點(diǎn)緩存，CDN源站緩，一般是三級(jí)，也可能業(yè)務(wù)比較少就采用兩級(jí)緩存，瀏覽器緩存和CDN源站緩存。
緩存時(shí)間設(shè)置過短的話，CDN邊緣節(jié)點(diǎn)緩存經(jīng)常失效，導(dǎo)致頻繁回源，增大了源站負(fù)載，訪問速度也會(huì)變慢，緩存時(shí)間設(shè)置的過長(zhǎng)，文件更新慢，用戶本地緩存不能及時(shí)更新，所以一般是結(jié)合業(yè)務(wù)情況而定。
一般不同資源類型緩存時(shí)間設(shè)置不用，html一般3分鐘左右，js，css可以10分鐘，一天，一個(gè)月，看變更情況。
現(xiàn)在一般我們文件的命名都會(huì)以hash串的形式，如果文件有變更生成的文件名就會(huì)有變更，否則還是之前的名字，這樣我們緩存的時(shí)間就可以設(shè)置的長(zhǎng)一些。
CDN可以灰度發(fā)布，也就是在部分地區(qū)部分運(yùn)營(yíng)商優(yōu)先發(fā)布靜態(tài)資源，驗(yàn)證通過后再進(jìn)行全量發(fā)布。具體實(shí)施可以從域名方面下手，設(shè)置特殊VIP解析到要灰度的城市或者運(yùn)行商。也可以調(diào)整源站機(jī)器，給灰度的城市或者運(yùn)營(yíng)商配置單獨(dú)的源站機(jī)器。
一般在活動(dòng)期間比如說大促，需要增加機(jī)房寬帶，增加運(yùn)營(yíng)商流量，增大CDN緩存時(shí)間等等。
DNS
DNS是將網(wǎng)站域名和地址互相映射的一個(gè)分布式數(shù)據(jù)庫，我們?cè)L問一個(gè)網(wǎng)站首先會(huì)通過DNS將域名匹配為ip地址，然后再通過ip地址去訪問對(duì)應(yīng)的服務(wù)器。
客戶端里面有一個(gè)http dns, 客戶端直接訪問http的接口，可以獲取業(yè)務(wù)在域名訪問系統(tǒng)中配置的最優(yōu)ip，基于容災(zāi)的考慮，app內(nèi)是需要保留使用運(yùn)營(yíng)商DNS解析方式的，客戶端再獲取到ip后會(huì)直接向ip中發(fā)送業(yè)務(wù)請(qǐng)求。
比如一個(gè)http請(qǐng)求，在header中會(huì)指定host字段，向ip發(fā)送標(biāo)準(zhǔn)的http請(qǐng)求就可以了，總的來說采用http-dns來解析域名能繞過三四級(jí)運(yùn)營(yíng)商接續(xù)域名出現(xiàn)的一些問題，在http-dns返回的正確ip之后是直接使用ip去發(fā)送http請(qǐng)求的，只需要關(guān)注通信內(nèi)容的安全就可以了。
安卓系統(tǒng)可以采用okhttp模塊，他支持http2,http2可以在一個(gè)鏈接上一次性發(fā)送多個(gè)請(qǐng)求，支持gzip，也支持響應(yīng)緩存避免網(wǎng)絡(luò)重復(fù)請(qǐng)求，如果服務(wù)器配置了多個(gè)ip地址，當(dāng)?shù)谝粋€(gè)ip鏈接失敗的時(shí)候，okhttp會(huì)自動(dòng)嘗試下一個(gè)ip地址。
ios沒有現(xiàn)成的模塊，我們可以在app啟動(dòng)時(shí)，緩存所有可能要用到的域名ip比如接口，網(wǎng)關(guān)，同時(shí)異步處理，客戶端無需得到緩存結(jié)果。如果cache中有此域名的圓環(huán)，直接返回緩存的ip，如果緩存中沒有此域名，則重新向httpdns server進(jìn)行申請(qǐng)然后緩存下來。
H5的做法一般是設(shè)置多個(gè)域名，因?yàn)闉g覽器對(duì)并發(fā)數(shù)是有限制的，一個(gè)域名一般最大連接數(shù)是6，所以我們可以將用戶訪問的一些api接口作為一個(gè)域名，頁面中的樣式和資源可以設(shè)置成一個(gè)域名，圖片也可以單獨(dú)設(shè)置成一個(gè)域名，甚至多個(gè)域名，來打破瀏覽器的這種限制。
http優(yōu)化
http的優(yōu)化主要就是減少請(qǐng)求數(shù)，這可能是我們?nèi)粘９ぷ髦薪?jīng)常遇到的，也是大家耳熟能詳?shù)摹?/p>
圖片可以使用雪碧圖，dataurl, webfont。
可以考慮將業(yè)務(wù)中的js或者css合并，不要切割的太小。如果不想合并成一個(gè)可以使用Combo的方式讓服務(wù)去返回，可以在url上通過參數(shù)的形式告訴服務(wù)加載那些資源。
接口也可以合并，不要拆分的太細(xì)，可以讓服務(wù)去合并，不經(jīng)常變化的接口和資源也可以存儲(chǔ)在LocalSrorage，有變化就更新，沒有變化就從本地取。
有些時(shí)候我們的某個(gè)頁面會(huì)出現(xiàn)問題，或者打開白屏，但是接口沒有問題，頁面也沒有問題，資源也是可以訪問通的，這個(gè)時(shí)候可能就是cookie太大了，已經(jīng)超出了原本可控的范圍，我們都知道cookie是會(huì)隨著頁面間的跳轉(zhuǎn)攜帶的，這就肯能導(dǎo)致頁面無法訪問，這種問題不常見，但實(shí)際工作中確實(shí)會(huì)遇到。
可以在頁面中設(shè)置cookie白名單，意思就是定期檢查我們的cookie，如果是需要的就保留，不需要的就刪除，定期整理。cookie控制可以減小頁面間傳輸?shù)拇笮?，也可以?duì)cookie進(jìn)行有效的管理。
服務(wù)器緩存配置
當(dāng)一個(gè)文件被瀏覽器加載的時(shí)候我們實(shí)際上是不知道這個(gè)文件是否是過期的，所以瀏覽器和服務(wù)器之間存在一種約定，通過header頭的配置，確定文件是否過期。
一般在響應(yīng)頭中包含一個(gè)expires的頭信息，他的值為日期+時(shí)間，表示在此時(shí)間之后，響應(yīng)過期，如果數(shù)值為0，表示資源已經(jīng)過期。
當(dāng)然如果響應(yīng)頭中包含Cache-Control, 設(shè)置了max-age或者s-max-age指令，那么就會(huì)忽略expires，而取Cache-Control。
Cache-Control通過制定的指令來實(shí)現(xiàn)緩存機(jī)制，緩存指令是單向的，這意味著在請(qǐng)求中設(shè)置的指令不一定被包含在響應(yīng)中。他的語法比較簡(jiǎn)單，Cache-Control: max-age=秒設(shè)置緩存存儲(chǔ)的最大周期，超過這個(gè)時(shí)間緩存被認(rèn)為過期。
ETag是資源版本的標(biāo)識(shí)符，可以讓緩存更搞笑，并節(jié)省帶寬，因?yàn)槿绻麅?nèi)容沒有改變，Web服務(wù)器不需要發(fā)送完整的響應(yīng)，如果發(fā)生了改變，使用ETag有助于防止資源的同時(shí)更新相互覆蓋。
ETag類似于指紋，也可能被某些服務(wù)器用于跟蹤，比較ETag能快速確定資源是否變更，但也可能被跟蹤服務(wù)器永久存留。
ETag: "5c6cccc123-1d45"
復(fù)制代碼
Last-Modified是一個(gè)響應(yīng)收不，其中資源包含源頭服務(wù)器認(rèn)定的資源做出修改的日期和時(shí)間。他常被用作一個(gè)驗(yàn)證器來判斷接收到的或者存儲(chǔ)的資源是否一致。由于精度比ETag要低，所以這是一個(gè)備用機(jī)制，包含有if-Modified-Since或If-Unmodified-Since首部的條件請(qǐng)求會(huì)使用這個(gè)字段。
Date是通用的首部，其中包含了報(bào)文創(chuàng)建的日期和時(shí)間。
Gzip壓縮
可以對(duì)文本進(jìn)行壓縮，一般是html，css，js，對(duì)于非文本不會(huì)壓縮，比如說圖片資源，壓縮比率可以達(dá)到50%-70%
本地測(cè)試開啟https
這個(gè)內(nèi)容不應(yīng)該寫在這，但是實(shí)在不知道寫在哪了。
https這里就不過多介紹了，畢竟不是這篇該有的內(nèi)容。
瀏覽器目前基本上已經(jīng)默認(rèn)開啟了https，所以為了SEO我們也建議使用https，而且https也更加安全。
如果是對(duì)外的網(wǎng)站我們需要和經(jīng)銷商購(gòu)買ssl證書，可以在gogetssl，ssls.com,sslmate.com中去購(gòu)買，當(dāng)然這些證書是有時(shí)效的。
如果本地測(cè)試的話，也可以在本地安裝一個(gè)測(cè)試證書，我們可以通過mkcert來實(shí)現(xiàn)。首先需要安裝它。
brew install mkcert
復(fù)制代碼
安裝根證書
mkcert ---install
復(fù)制代碼
生成本地簽名，給123.com
mkcert 123.com
復(fù)制代碼
這樣就生成了一對(duì)證書，我們可以將這對(duì)證書配置在nginx里面，具體配置方法可參考我之前寫的nginx文章。
http2
http2是http的第二版，簡(jiǎn)稱h2或h2c，它采用二進(jìn)制傳輸數(shù)據(jù)，多路復(fù)用，允許通過一個(gè)鏈接發(fā)起多個(gè)請(qǐng)求，所以一般使用h2雪碧圖就沒什么用了，他超出了瀏覽器限制最大連接數(shù)的局限，對(duì)header頭進(jìn)行壓縮從而降低傳輸體積，支持服務(wù)端推送(server push)，可以從服務(wù)端將數(shù)據(jù)推送給客戶端。
開啟HTTP2可以降低服務(wù)器壓力，提升網(wǎng)站訪問速度，而且可以更好的保護(hù)網(wǎng)站安全因?yàn)樗菑?qiáng)制使用https的。
開啟http2其實(shí)也很簡(jiǎn)單，我們需要重新編譯nginx，并且開啟http_ssl_module和http_v2_module
cd nginx-xxx
./configure --with-http_ssl_module --with-http_v2_module
make && make install
復(fù)制代碼
同樣這里可以參照之前我寫的nginx文章，其實(shí)就是在listen 443端口后添加http2標(biāo)識(shí)。
server {
listen 443 ssl http2;
}
復(fù)制代碼
前端的研發(fā)流程
首先是技術(shù)選型，包括頁面渲染技術(shù)和混合式開發(fā)技術(shù)，然后是項(xiàng)目的初始化，包括React，Vue，Angular，依賴模塊引入，一般會(huì)存在一個(gè)私有的NPM，接著開始本地開發(fā)，方便前端調(diào)試和看到效果，項(xiàng)目聯(lián)調(diào)，產(chǎn)品和設(shè)計(jì)師對(duì)效果進(jìn)行確認(rèn)，最后項(xiàng)目整體部署上線。
項(xiàng)目開始之前前后端會(huì)指定一些數(shù)據(jù)接口，有了接口文檔前后端就可以并行開發(fā)，前端開發(fā)頁面和交互，后端開發(fā)業(yè)務(wù)邏輯。都開發(fā)完后前后端開始進(jìn)行聯(lián)調(diào)，最后發(fā)布上線。
自動(dòng)化測(cè)試
UI自動(dòng)化，上手比較簡(jiǎn)單，不過穩(wěn)定性較差，常用的工具有appium，他是一個(gè)開源的工具用于自動(dòng)化ios手機(jī)，安卓手機(jī)還有windows桌面的一個(gè)測(cè)試工具，robot framework 是基于python可擴(kuò)展的關(guān)鍵字測(cè)試框架用于端到端，驗(yàn)收測(cè)試以及測(cè)試驅(qū)動(dòng)開發(fā)，可用于測(cè)試分布式異構(gòu)應(yīng)用程序包括可以驗(yàn)證涉及多種技術(shù)的接口，selenium用于web應(yīng)用程序測(cè)試工具可以直接運(yùn)行在瀏覽器上，可以和用戶的真正操作是一樣的，支持ie, 火狐，谷歌，歐朋等常用瀏覽器，主要用來測(cè)試瀏覽器的兼容性。airtest支持自動(dòng)化的腳本錄制一鍵回收，輕而易舉就能實(shí)現(xiàn)自動(dòng)化測(cè)試流程，還是比較常用的。
接口自動(dòng)化，使用穩(wěn)定，性價(jià)比非常高，工具有java + restassured，是java實(shí)現(xiàn)的，輕量級(jí)的可以通過編寫代碼向客戶端發(fā)送請(qǐng)求并且驗(yàn)證返回結(jié)果。python + requests主要對(duì)pthon接口進(jìn)行測(cè)試, JMeter用于對(duì)軟件做壓力測(cè)試，HttpRunner只需要一份腳本就可以實(shí)現(xiàn)自動(dòng)化測(cè)試性能測(cè)試，線上監(jiān)控，持續(xù)集成等多種測(cè)試的需求。
單元測(cè)試，性價(jià)比極高，一般由開發(fā)完成，但是有一些單元測(cè)試框架，Junit5，pytest, unittest。
作者：隱冬?
鏈接：https://juejin.cn/post/6911512163249029134
來源：掘金
專注分享當(dāng)下最實(shí)用的前端技術(shù)。關(guān)注前端達(dá)人，與達(dá)人一起學(xué)習(xí)進(jìn)步！
長(zhǎng)按關(guān)注"前端達(dá)人"
