開課吧web全棧架構(gòu)師第12期課件50性能優(yōu)化

性能優(yōu)化2性能優(yōu)化2--代碼執(zhí)知識(shí)雅虎性能Performance節(jié)流防抖重繪回v-ifvsv-無狀態(tài)組 redux+長(zhǎng)列表react-Web算盡盡量減少HTTP請(qǐng)求個(gè)數(shù)——須權(quán)衡使用CDN（內(nèi)容分發(fā)網(wǎng)絡(luò)）為文件頭指定Expires或Cache-Control，使內(nèi)容具有緩存性。避免空的src和href使用gzip把把CSS把JS避免使用CSS將CSS和JS放到外部文件中減少DNS查找次數(shù)精簡(jiǎn)CSS和剔除重復(fù)的JS和配置使AJAX可緩存使用GET來完成AJAX請(qǐng)求減少DOM元素個(gè)數(shù) 盡量減少iframe避免減少減少DOM 代替優(yōu)化CSS不要在HTML中縮放圖像——性能 挖掘瓶頸—火焰重定向耗時(shí)：redirectEndDNS查詢耗時(shí)：LookupEnd-LookupStartTCP耗時(shí)：connectEnd-connectStart解析dom樹耗時(shí) plete-domInresponseStartDOMready時(shí)間：domContentLoadedEventEnd-onload時(shí)間：loadEventEnd-navigationStart，也即是onload命令npmnpminstall-glighthouse/--滾動(dòng)，隔一段時(shí)間只觸發(fā)一次第一個(gè)人說了算在時(shí)間////func是用戶傳入需要防抖//wait是等待時(shí)constthrottle=(func,wait=50)=>上一次執(zhí)行該函數(shù)的時(shí)間letlastTime=0return(...args)=>{//當(dāng)前時(shí)letnow=+new//將當(dāng)前時(shí)間和上一次執(zhí)行函數(shù)//如果差值大于設(shè)置的等待時(shí)if(now-lastTime>{lastTime=nowfunc.apply(this,args)}}}throttle(()=>{console.log(},1輸入，完成后再統(tǒng)一發(fā)送請(qǐng)求，最后一個(gè)人說了 只認(rèn)最后一////func是用戶傳入需要防抖//wait是等待時(shí)constdebounce=(func,wait=50)=>緩存一個(gè)定時(shí)?idlettimer=0//這里返回的函數(shù)是每次用戶實(shí)際調(diào)//如果已經(jīng)設(shè)定過定時(shí)?了就清空上一次的定時(shí)//開始一個(gè)新的定時(shí)?，延遲執(zhí)行用returnfunction(...args)if(timer)clearTimeout(timer)timer=setTimeout(()=>{func.apply(this,},}}<!DOCTYPE<!DOCTYPE<html<metacharset="UTF-<metaname="viewport"content="width=device-width,initial-<metahttp- patible"<div 回流：當(dāng)我們對(duì)DOM的修改了DOM幾何尺寸的變化（比如修改元素的寬、高或隱藏元素等）時(shí)，瀏覽?需要重新計(jì)算元素的幾何屬性（其他元素的幾何屬性和位置也會(huì)因此受到影響），然后再將計(jì)算的結(jié)果繪制出來。這個(gè)過程就是回流（也叫重排）重繪：當(dāng)我們對(duì)DM的修改導(dǎo)致了樣式的變化、卻并未影響其幾何屬性（比如修改了顏色或背景色）時(shí)，瀏覽?不需重新計(jì)算元素的幾何屬性、直接為該元素繪制新的樣式（跳過了上圖所示的回流環(huán)節(jié)）由此我們可以看出，重繪不一定導(dǎo)致回流，回流一定會(huì)導(dǎo)致重繪classo?fserWidth和1.Fragment緩存//constimgs=.ge//constviewHeight=window.innerHeight//num用于統(tǒng)計(jì)當(dāng)前顯示到了哪一張，避免每次都從第一張開始檢查是否露letnum=0functionlazyload(){for(leti=num;i<imgs.length;i++)//用可視區(qū)域高度減去元素頂部距離可視區(qū)letdistance=viewHeight-imgs[i].getBounding//如果可視區(qū)域高度大于等于元素頂部距離可視區(qū)域頂部的高度，說明if(distance>=0//給元素寫入真實(shí)的srcimgs[i].src=imgs[i].getAttribute('data-//前i張已經(jīng)加載完畢，下次從第i+1張開始檢查是否露num=i+}}}//window.addEventListener('scroll',lazyload,其實(shí)我們只要做好異步組件，vue本身已經(jīng)足夠快樂，但fvsv-初始性能VS和渲染無關(guān)的數(shù)據(jù)，不要放在data修改數(shù)據(jù)的當(dāng)下，視圖不會(huì)立刻更新，而是等同一循環(huán)中的所有數(shù)據(jù)變化完成之后，再統(tǒng)一進(jìn)行視圖更新this.$nextTick(function()this.$nextTick(function()//DOM 不要隨便<Component{...props無狀態(tài)組 redux+性能開支，需要對(duì)selector函數(shù)做緩存。推薦使用reactjs/reselect,緩存的部分實(shí)現(xiàn)代碼如下。長(zhǎng)列表react-{return<divkey={item.id}<div<imgsrc={item.image}alt=""<div}如果有1000個(gè) 只渲染20個(gè)，鼠標(biāo)滾動(dòng)的時(shí)候，新節(jié)點(diǎn)替換老節(jié)點(diǎn)importimport{List}from"react-<div//改constlistHeight=constrowHeight=50;constrowWidth=<divrowCount={this.list.length}/>renderRow({index,key,style}){return(<divkey={key}style={style}<div<imgsrc={this.list[index].image}alt=""<div}Web瀏覽?在這一步瀏覽?執(zhí)行了所有的加載解析邏輯，在解析HTML的過程中發(fā)出了頁(yè)面渲染所需的各種外部資源請(qǐng)求。瀏覽?將識(shí)別并加載所有的CSS樣式信息與DOM樹合并，最終生成頁(yè)面render樹:beforeDOM樹中）在這一步中瀏覽?會(huì)根據(jù)我們的DM代碼結(jié)果，把每一個(gè)頁(yè)面圖層轉(zhuǎn)換為像素，并對(duì)所有的文件進(jìn)行。最后一步瀏覽?會(huì)合并合各個(gè)圖層，將數(shù)據(jù)由CPU輸出給GPU最終繪制在屏幕上。（復(fù)雜的視圖層會(huì)給這個(gè)階段的GPU計(jì)算帶來一些壓力，在實(shí)際應(yīng)用中為了優(yōu)化動(dòng)畫性能，我們有時(shí)會(huì)手動(dòng)區(qū)渲染過程說白了，首先是基于HTML構(gòu)建一個(gè)DM樹，這棵DOM樹與CSS解釋?解析出的CSSM相結(jié)合，就有了布局渲染樹。最后