性能優(yōu)化

lily_wang 發(fā)布于2019-08-22 11:09 / 3220人閱讀

摘要：引言性能優(yōu)化本質(zhì)來說就是怎樣讓用戶體驗更好。性能優(yōu)化不是銀彈在程序做不到內(nèi)響應(yīng)的時候外在輔助措施就很必要。接下總結(jié)一些性能優(yōu)化點雖不常規(guī)但蠻有意義的。上次參加時記得一位主講人講述百度移動端優(yōu)化時就是這么的。

引言

性能優(yōu)化本質(zhì)來說就是怎樣讓用戶體驗更好。之前同事分享過一個關(guān)于體驗的時間標準,我感覺蠻有趣的,就是說我們盡量讓交互響應(yīng)在0.1秒內(nèi),這時體驗比較好;如果1秒左右就需要loading;如果10秒左右就需要一個進度條。性能優(yōu)化不是銀彈,在程序做不到0.1內(nèi)響應(yīng)的時候,外在輔助措施就很必要。接下總結(jié)一些性能優(yōu)化點,雖不常規(guī),但蠻有意義的。

200 or 304

在sg上回答相關(guān)問題時,我較深入的研究了一下,并結(jié)合自己的在工作中出現(xiàn)的相關(guān)現(xiàn)象做一下總結(jié)。我們線上js和css的?max-age只有15分鐘,所以很容易進行?freshness校驗,此時就會出現(xiàn)304,但是這就浪費性能了,雖然比較微小。最好的辦法是設(shè)置一個很長的時間,然后使用版本控制的方法。

webworker

?如果主線程需要進行一些耗時操作，時間長了之后瀏覽器會有假死狀態(tài)（彈框提示，是否關(guān)閉），但是異步拆分操作或者使用webworker的方式，可以使主線程繼續(xù)能接收到用戶的相應(yīng)。下面是我寫的一個demo示例。

var worker=new Worker("./work.js");
var data1=0;
worker.onmessage=function (event) {
    var data = event.data;
    data2 = new Date().getTime();
    document.getElementById("result").innerHTML ="workers 耗時："+ (data2 - data1)+"ms"+"" +data;
}
function cal() {
    data1 = new Date().getTime();
    worker.postMessage(limit);
}
------------------work.js
onmessage = function(event){
    var num = event.data;
    console.log(num)
    var i=0,sum=0;
    while (i
內(nèi)聯(lián)css
減少關(guān)鍵路徑往返次數(shù),可以使用內(nèi)聯(lián)的方式提升性能,如果你使用webpack的話,去掉ExtractTextPlugin配置,但需損失一些代碼的可維護性。上次參加qcon時,記得一位主講人講述百度移動端優(yōu)化時就是這么的。所以這種行為還是有一定借鑒意義的。