<ol id="hmbbk"></ol>
<em id="hmbbk"><acronym id="hmbbk"><u id="hmbbk"></u></acronym></em>
  • <rp id="hmbbk"></rp>

      <rp id="hmbbk"><acronym id="hmbbk"><input id="hmbbk"></input></acronym></rp>

      <dd id="hmbbk"><noscript id="hmbbk"></noscript></dd>

        杭州PHP培訓
        達內杭州PHP培訓中心

        13175137725

        Web前端性能優化的實用技巧匯總

        • 時間:2021-04-02 13:49
        • 發布:杭州PHP培訓
        • 來源:php職場

        今天小編要跟大家分享的文章是關于Web前端性能優化的實用技巧匯總。javascript在瀏覽器中運行的性能,可以認為是開發者所面臨的最嚴重的可用性問題。這個問題因為javascript的阻塞性而變得復雜,事實上,多數瀏覽器使用單一進程來處理用戶界面和js腳本執行,所以同一時刻只能做一件事。js執行過程耗時越久,瀏覽器等待響應的時間越長。

        Web前端性能優化的實用技巧匯總

        一.提高加載性能

        1.IE8,FF,3.5,Safari 4和Chrome都允許并行下載js文件,當script下載資源時不會阻塞其他script的下載。但是js下載仍然會阻塞其他資源的下載,如圖片。盡管腳本下載不會互相影響,但頁面仍然必須等待所有js代碼下載并執行完才能繼續。因此仍然存在腳本阻塞問題.推薦將所有js文件放在body標簽底部以減少對整個頁面的影響。

        2.減少頁面外鏈腳本文件的數量將會提高頁面性能:

        http請求會帶來額外的開銷,因此下載單個300k的文件將比下載10個30k的文件效率更高。

        3.動態腳本加載技術:

        無論何時啟動下載,文件的下載和執行都不會阻塞頁面其他進程。

        functionlaodScript(url,callback){

        varscript =document.createElement('script');  

         script.type ='text/javascript';


           if(script.readyState){ // ie

               script.onreadystatechange =function(){           

        if(script.readyState =='loaded'|| script.readyState =='complete'){              

         script.onreadystatechange =null;               

        callback()          

         }      

         }   

        }else{//其他瀏覽器       

        script.onload =function(){          

         callback()

              }   

        }   

        script.src = url;   

        document.getElementsByTagName('head')[0].appendChild(script);

        }
        //使用

        loadScript('./a.js',function(){   

        loadScript('./b.js',function(){       

        loadScript('./c.js',function(){           

        console.log('加載完成')       

        })   

        })

        })

        4.無阻塞加載類庫——LABjs,使用方法如下:

        <script src="lab.js"></script>

        //鏈式調用時文件逐個下載,.wait()用來指定文件下載并執行完畢后所調用的函數

        $LAB.script('./a.js')  

         .script('./b.js')  

         .wait(function(){     

         App.init();

        })
        //為了保證執行順序,可以這么做,此時a必定在b前執行

        $LAB.script('./a.js').wait()   

        .script('./b.js')   

        .wait(function(){      

         App.init();

        })

        二.數據存取與JS性能

        1.在js中,數據存儲的位置會對代碼整體性能產生重大影響。數據存儲共有4種方式:字面量,變量,數組項,對象成員。他們有著各自的性能特點。

        2.訪問字面量和局部變量的速度最快,相反,訪問數組和對象相對較慢

        3.由于局部變量存在于作用域鏈的起始位置,因此訪問局部變量的比訪問跨域作用變量更快

        4.嵌套的對象成員會明顯影響性能,應盡量避免

        5.屬性和方法在原型鏈位置越深,訪問他的速度越慢

        6.通常我們可以把需要多次使用的對象成員,數組元素,跨域變量保存在局部變量中來改善js性能

        三. DOM編程

        1.訪問DOM會影響瀏覽器性能,修改DOM則更耗費性能,因為他會導致瀏覽器重新計算頁面的幾何變化。<通常的做法是減少訪問DOM的次數,把運算盡量留在JS這一端。

        注:如過在一個對性能要求比較高的操作中更新一段HTML,推薦使用innerHTML,因為它在絕大多數瀏覽器中運行的都很快。但對于大多數日常操作而言,并沒有太大區別,所以你更應該根據可讀性,穩定性,團隊習慣,代碼風格來綜合決定使用innerHTML還是createElement()

        2. HTML集合優化

        HTML集合包含了DOM節點引用的類數組對象,一直與文檔保持連接,每次你需要最新的信息時,都會重復執行查詢操作,哪怕只是獲取集合里元素的個數。

        ①  優化一——集合轉數組collToArr

        functioncollToArr(coll){   

        for(vari=0, a=[], len=coll.length; i<len; i++){

        a. push(coll[i]);

         }   

        returna

        }

        ② 緩存集合length

        ③ 訪問集合元素時使用局部變量(即將重復的集合訪問緩存到局部變量中,用局部變量來操作)

        3.遍歷DOM

        ① 使用只返回元素節點的API遍歷DOM,因為這些API的執行效率比自己實現的效率更高:

        屬性名

        被替代屬性

        children

        childNodes

        childElementCount

        childNodes.length

        firstElementChild

        firstChild

        lastElementChild

        lastChild

        nextElementSibling

        nextSibling

        previousElementSibling

        previousSibling

         ② 選擇器API——querySelectorAll()

        querySelectorAll()方法使用css選擇器作為參數并返回一個NodeList——包含著匹配節點的類數組對象,該方法不會返回HTML集合,因此返回的節點不會對應實時文檔結構,著也避免了HTML集合引起的性能問題。

        let arr = document.querySelectorAll('div.warning, div.notice > p')

        4.重繪和重排

        瀏覽器在下載完頁面的所有組件——html,js,css,圖片等之后,會解析并生成兩個內部數據結構—— DOM樹,渲染樹.一旦DOM樹和渲染樹構建完成,瀏覽器就開始繪制頁面元素(paint).

        ① 重排發生的條件:

        添加或刪除可見的DOM元素位置變化 元素尺寸改變 內容改變 頁面渲染器初始化 瀏覽器窗口尺寸變化 出現滾動條時會觸發整個頁面的重排 重排必定重繪

        5.渲染樹變化的排列和刷新

        大多數瀏覽器通過隊列化修改并批量執行來優化重排過程,然而獲取布局信息的操作會導致隊列強制刷新。

        offsetTop,offsetWidth...

        scrollTop,scrollHeight...

        clientTop,clientHeight...

        getComputedStyle()

        一些優化建議:將設置樣式的操作和獲取樣式的操作分開:

        //設置樣式

        body.style.color ='red';

        body.style.fontSize ='24px'

        //讀取樣式

        letcolor = body.style.color

        let fontSize = body.style.fontSize

        另外,獲取計算屬性的兼容寫法:

        functiongetComputedStyle(el){   

        varcomputed = (document.body.currentStyle ? el.currentStyle :document.defaultView.getComputedStyle(el,'');   

        returncomputed

        }

        6.最小化重繪和重排

        ①.批量改變樣式

        /*使用cssText */el.style.cssText = 'border-left: 1px; border-right: 2px; padding: 20px';

        ②.批量修改dom的優化方案——使元素脫離文檔流-對其應用多重改變-把元素帶回文檔

        function appendDataToEl(option){

        vartargetEl = option.target || document.body,       

        createEl,       

        data= option.data|| [];   //讓容器脫離文檔流,減少重繪重排   

        vartargetEl_display = targetEl.style.display;   

        targetEl.style.display ='none';
           

        // *****創建文檔片段來優化Dom操作****   

        varfragment = document.createDocumentFragment();   //給元素填充數據   

        for(vari=0, max =data.length; i< max; i++){       

        createEl = document.createElement(option.createEl);       

        for(varitemindata[i]){           

        if(item.toString() ==='text'){               

        createEl.appendChild(document.createTextNode(data[i][item]));               continue;           }          

         if(item.toString() ==='html'){               

        createEl.innerHTML = item,data[i][item];               

        continue;           

        }          

         createEl.setAttribute(item,data[i][item]);       }      

         // ****將填充好的node插入文檔片段****       

        fragment.appendChild(createEl);   }   

        // ****將文檔片段統一插入目標容器****   

        targetEl.appendChild(fragment);   

        //顯示容器,完成數據填充   

        targetEl.style.display = targetEl_display;

        }
        //使用

        varwrap = document.querySelectorAll('.wrap')[0];

        vardata= [  

         {name:'xujaing',text:'選景', title:'xuanfij'},   

        {name:'xujaing',text:'選景', title:'xuanfij'},   

        {name:'xujaing',text:'選景', title:'xuanfij'}];

        appendDataToEl({   

        target: wrap,   

        createEl:'div', 

         data:data

        });

        上面的優化方法使用了文檔片段: 當我們把文檔片段插入到節點中時,實際上被添加的只是該片段的子節點,而不是片段本身。可以使得dom操作更有效率。

        ② .緩存布局信息

        //緩存布局信息

        letcurrent = el.offsetLeft;

        current++;

        el.style.left = current +'px';

        if(current >300){   

        stop();

        }

        ④.慎用:hover

        如果有大量元素使用:hover,那么會降低相應速度,CPU升高

        ⑤.使用事件委托(通過事件冒泡實現)來減少事件處理器的數量,減少內存和處理時間

        functiondelegation(e,selector,callback){   

        e = e ||window.event;   

        vartarget = e.target || e.srcElement;
          if(target.nodeName !== selector || target.className !== selector || target.id !== selector){       

        return;

          }   

        if(typeofe.preventDefault ==='function'){     

         e.preventDefault();       

        e.stopPropagation();

        }else{       

        e.returnValue =false;

        e.cancelBubble =true;   

        }
           callback()}

        四.算法和流程控制

        1.循環中減少屬性查找并反轉(可以提升50%-60%的性能)

        // for循環

        for(vari=item.length; i--){   

        process(item[i]);

        }

        // while循環

        varj = item.length;

        while(j--){   

        process(item[i]);

        }

        2.使用Duff裝置來優化循環(該方法在后面的文章中會詳細介紹)

        3.基于函數的迭代(比基于循環的迭代慢)

        items.forEach(function(value,index,array){   process(value);})

        4.通常情況下switch總比if-else快,但是不是最佳方案

        五.字符串和正則表達式

        1.除了IE外,其他瀏覽器會嘗試為表達式左側的字符串分配更多的內存,然后簡單的將第二個字符串拷貝到他的末尾,如果在一個循環中,基礎字符串位于最左側,就可以避免重復拷貝一個逐漸變大的基礎字符串。2.使用[\s\S]來匹配任意字符串3.去除尾部空白的常用做法:

        if(!String.prototype.trim){   

        String.prototype.trim =function(){       

        returnthis.replace(/^\s+/,'').replace(/\s\s*$/,'')   

        }

        }

        六.快速響應的用戶界面

        1.瀏覽器的UI線程:用于執行javascript和更新用戶界面的進程。

        2.在windows系統中定時器分辨率為15毫秒,因此設置小于15毫秒將會使IE鎖定,延時的最小值建議為25ms.

        3.用延時數組分割耗時任務:

        functionmultistep(steps,args,callback){   

        vartasks = steps.concat();
           setTimeout(function(){       

        vartask = tasks.shift();       

        task.apply(null, args || []);  //調用Apply參數必須是數組
               

        if(tasks.length >0){           

        setTimeout(arguments.callee,25); 

             }else{          

         callback();      

         }   

        },25);

        }

        4.記錄代碼運行時間批處理任務:

        functiontimeProcessArray(items,process,callback){   

        vartodo = item.concat();


           setTimeout(function(){       

        varstart = +newDate();
           do{          

         process(todo.shift());       

        }while(todo.length >0&& (+newDate() - start <50));
               if(todo.length >0){          

         setTimeout(arguments.callee,25); 

             }else{         

         callback(items);   

        }  

         },25)

        }

        5.使用Web Worker:它引入了一個接口,能使代碼運行且不占用瀏覽器UI線程的時間。一個Worker由如下部分組成:

        ① 一個navigator對象,包括appName,appVersion,user Agent和platform.

        ② 一個location對象,只讀。

        ③ 一個self對象,指向全局worker對象

        ④ 一個importScripts()方法,用來加載worker所用到的外部js文件

        ⑤ 所有的ECMAScript對象。如object,Array,Date等

        ⑥XMLHttpRequest構造器

        ⑦setTimeout(),setInterval()

        ⑧ 一個close()方法,它能立刻停止worker運行

        應用場景

        1.編碼/解碼大字符串

        2. 復雜數學運算(包括圖像,視屏處理)

        3. 大數組排序

        // worker.js

        varworker =newWorker('code.js');

        //接收信息

        worker.onmessage =function(event){  

         console.log(event.data);

        }

        //發送數據

        worker.postMessage('hello');
        // code.js
        //導入其他計算代碼

        importScripts('a.js','b.js');
        self.onmessage =function(event){   

        self.postMessage('hello'+ event.data);

        }

        七. ajax優化

        1.向服務器請求數據的五種方式:

        ①XMLHttpRequest

        ②Dynamic script tag insertion動態腳本注入

        ③iframes

        ④Comet(基于http長連接的服務端推送技術)

        ⑤Multipart XHR(允許客戶端只用一個http請求就可以從服務器向客戶端傳送多個資源)

        2.單純向服務端發送數據(beacons方法)——信標

        //唯一缺點是接收到的響應類型是有限的

        varurl ='/req.php';

        varparams = ['step=2','time=123'];
        (newImage()).src = url +'?'+ params.join('&');
        //如果向監聽服務端發送回的數據,可以在onload中實現

        varbeacon =newImage();

        beacon.src = ...;

        beacon.onload =function(){

        ...

        }

        beacon.onerror =function(){  

         ...

        }

        3.ajax性能的一些建議

        緩存數據

        1.在服務端設置Expires頭信息確保瀏覽器緩存多久響應(必須GET請求)

        2.客戶端把獲取到的信息緩存到本地,避免再次請求

        八.編程實踐

        1.避免重復工作

        // 1.延遲加載

        vara = (x,y) =>{   

        if(x >4){      

         a =0;

          }else{    

          a =1;  

         }

        }//需要使用時調用

        a();


        // 2.條件預加載(適用于函數馬上執行并頻繁操作的場景)var b = a > 0 ? '4' : '0';

        2.使用Object/Array字面量

        3.多用原生方法

        九.構建與部署高性能的js應用

        1.js的http壓縮 當Web瀏覽器請求一個資源時,它通常會發送一個Accept-Encoding HTTP頭來告訴Web服務器它支持那種編碼轉換類型。這個信息主要用來壓縮文檔以獲取更快的下載,從而改善用戶體驗。Accept-Encoding可用的值包括:gzip,compress,deflate,identity.如果Web服務器在請求中看到這些信息頭,他會選擇最合適的編碼方式,并通過Content-Encoding HTTP頭通知WEB瀏覽器它的決定。

        2.使用H5離線緩存

        3.使用內容分發網絡CDN

        4.對頁面進行性能分析

        //檢測代碼運行時間

        varTimer = {  

         _data: {},   

        start:function(key){  

            Timer._data[key] =newDate();   

        },  

         stop:function(key){       

        vartime = Timer._data[key];       

        if(time){         

         Timer._data[key] =newDate() - time;

               };       

        console.log(Timer._data[key]);      

         returnTimer._data[key] 

         }

        };

        十.瀏覽器緩存

        1.添加Expires頭

        2.使用cache-control cache-ontrol詳解 瀏覽器緩存機制

        十一.壓縮組件

        1.Web客戶端可以通過http請求中的Accept-Encoding頭來表示對壓縮的支持

        //瀏覽器請求時對http header設置

        Accept-Encoding: gzip

        // Web服務器響應時對http header設置

        Content-Encoding: gzip

        2.壓縮能將響應的數據量減少將近70%,因此可考慮對html,腳本,樣式,圖片進行壓縮

        十二.白屏現象的原因

        瀏覽器(如IE)在樣式表沒有完全下載完成之前不會呈現頁面,導致頁面白屏。如果樣式表放在頁面底部,那么瀏覽器會花費更長的時間下載樣式表,因此會出現白屏,所以最好把樣式表放在head內。白屏是瀏覽器對“無樣式閃爍”的修繕。如果瀏覽器不采用“白屏”機制,將頁面內容逐步顯示(如Firefox),則后加載的樣式表將導致頁面重繪重排,將會承擔頁面閃爍的風險。

        十三. css表達式使用一次性表達式(但最好避免css表達式)

        使用css表達式時執行函數重寫自身

        // css

        p{   

        background-color: expression(altBgcolor(this))

        }

        // js

        functionaltBgcolor(el){   

        el.style.backgroundColor = (newDate()).getHours() %2?"#fff":"#06c";

        }

        十四.減少DNS查找

        DNS緩存和TTL

        1.DNS查找可以被緩存起來以提高性能:DNS信息會留在操作系統的DNS緩存中(Microsoft Windows上的“DNS Client服務”,之后對該主機名的請求無需進行過多的查找
        2.TTL(time to live):該值告訴客戶端可以對記錄緩存多久。建議將TTL值設置為一天
        //客戶端收到DNS記錄的平均TTL只有最大TTL值的一半因為DNS解析器返回的時間是其記錄的TTL的剩余時間,對于給定的主機名,每次執行DNS查找時接收的TTL值都會變化
        3.通過使用Keep-Alive和較少的域名來減少DNS查找
        4.一般建議將頁面組件分別放到至少2個,但不要超過4個主機名下
        復制代碼

        十五.避免重定向

        這塊需要前后端共同配合,對頁面路由進行統一規范。

        以上就是小編今天為大家分享的關于Web前端性能優化的實用技巧匯總的文章,希望本篇文章能夠對正在從事Web前端工作的小伙伴們有所幫助,想要了解更多Web前端知識記得關注達內Web培訓官網,最后祝愿小伙們工作順利!

        文章來源于趣談前端 ,作者徐小夕

        【免責聲明:本文圖片及文字信息均由小編轉載自網絡,旨在分享提供閱讀,版權歸原作者所有,如有侵權請聯系我們進行刪除。】

        預約申請免費試聽課

        怕錢不夠?就業掙錢后再付學費!    怕學不會?從入學起,達內定制課程!     擔心就業?達內多家實踐企業供你挑選!

        上一篇:2021年Web前端開發的趨勢有哪些
        下一篇:如何學習Web前端技術才能升職加薪?

        Web前端性能優化的實用技巧匯總

        2021年Web前端開發的趨勢有哪些

        Web前端開發常用的十款開發工具匯總

        開源Web應用的安全測試工具匯總

        • 掃碼領取資料

          回復關鍵字:視頻資料

          免費領取 達內課程視頻學習資料

        • 視頻學習QQ群

          添加QQ群:1143617948

          免費領取達內課程視頻學習資料

        Copyright ? 2018 Tedu.cn All Rights Reserved 京ICP備08000853號-56 京公網安備 11010802029508號 達內時代科技集團有限公司 版權所有

        選擇城市和中心
        江西省

        貴州省

        廣西省

        海南省

        免费国产久久啪久久爱每天第一时间更新最新aV视频、宅男在线视频 百度 好搜 搜狗
        <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <文本链> <文本链> <文本链> <文本链> <文本链> <文本链>