成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

web前端應(yīng)該從幾個(gè)方面來優(yōu)化性能

ckllj / 1648人閱讀

摘要：從用戶角度來說，優(yōu)化能讓頁面加載的更快，對用戶的操作能及時(shí)的響應(yīng)，能提升用戶的更好的體驗(yàn)效果。從服務(wù)商的角度來說，優(yōu)化能解決頁面的請求次數(shù)，或者減少請求所帶來的帶寬。

1.從用戶角度來說，優(yōu)化能讓頁面加載的更快，對用戶的操作能及時(shí)的響應(yīng)，能提升用戶的更好的體驗(yàn)效果。
2.從服務(wù)商的角度來說，優(yōu)化能解決頁面的請求次數(shù)，或者減少請求所帶來的帶寬。
前端優(yōu)化的方式有很多，主要可以分為兩大類；
第一種就是頁面級的優(yōu)化：
例如 HTTP請求次數(shù)，腳本的無阻塞加載，內(nèi)聯(lián)腳本優(yōu)化的問題，
第二種代碼級的優(yōu)化：
例如 Javascript中的DOM 操作優(yōu)化、CSS選擇符優(yōu)化、圖片優(yōu)化以及 HTML結(jié)構(gòu)優(yōu)化等等。另外，本著提高投入產(chǎn)出比的目的，后文提到的各種優(yōu)化策略大致按照投入產(chǎn)出比從大到小的順序排列。
一，頁面級優(yōu)化
1.減少HTTP請求，記得我在面試的時(shí)候，面試官問答過這個(gè)問題，當(dāng)時(shí)我答的時(shí)候就說了減少HTTP請求，回來我想的時(shí)候，具體實(shí)現(xiàn)減少HTTP請求有哪些實(shí)現(xiàn)的方法呢；
首先我們需要了解http請求的過程：請求都是需要花費(fèi)成本的，既時(shí)間成本加資源成本，一個(gè)完整的請求通過DNS尋址，到連接到服務(wù)器，發(fā)送請求，等待服務(wù)器響應(yīng)請求，接收數(shù)據(jù)，這是一個(gè)漫長的過程，資源上每個(gè)請求都是要攜帶數(shù)據(jù)的，因此每個(gè)請求都是要占帶寬的。

<1>合理設(shè)置http緩存
在前端瀏覽器中，把你需要的數(shù)據(jù)，可以在第一次請求的時(shí)候?qū)?shù)據(jù)保存在js對象中，這樣可以極大的較少服務(wù)器訪問，那么如何實(shí)現(xiàn)呢？
首先我們創(chuàng)建一個(gè)cache.js,
var clsCodes ={
    "clsCodes":["BOOL","STATUS","USER_TYPE","REPORT_STATUS" ]
}
var dist;
//前端定義一個(gè)函數(shù)來調(diào)用后端接口獲得的數(shù)據(jù)，然后再保存到本地
function getdists(){
    //$.post(url,data,callback,Type)
    $.post(getContextpath()+" "/api/sys/getDictList",
            clsCodes,
            function(resultBean,stauts,xhrRequest){
                if(resultBean.data!=undefined){
                    dist=resultBean.data;
                }
            },
            json
    );
}

第二種代碼級別優(yōu)化

***1.css部分優(yōu)化***
將樣式表至于頂部；
避免使用css表達(dá)式；
用link代替@import;
***2.js部分***
把腳本置于頁面底部
使用外部 JavaScript 和 CSS
削減 JavaScript 和 CSS
剔除重復(fù)腳本
減少DOM訪問
開發(fā)智能事件處理程序
***image部分***
合并圖片，使用css sprite

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/111738.html

相關(guān)文章

  • web前端應(yīng)該從幾個(gè)方面來優(yōu)化性能

    摘要：從用戶角度來說，優(yōu)化能讓頁面加載的更快，對用戶的操作能及時(shí)的響應(yīng)，能提升用戶的更好的體驗(yàn)效果。從服務(wù)商的角度來說，優(yōu)化能解決頁面的請求次數(shù)，或者減少請求所帶來的帶寬。 1.從用戶角度來說，優(yōu)化能讓頁面加載的更快，對用戶的操作能及時(shí)的響應(yīng)，能提升用戶的更好的體驗(yàn)效果。2.從服務(wù)商的角度來說，優(yōu)化能解決頁面的請求次數(shù)，或者減少請求所帶來的帶寬。前端優(yōu)化的方式有很多，主要可以分為兩大類；第一...

    andycall 評論0 收藏0

  • 騰訊前端求職直播課——面試篇

    摘要：主講人石小勇騰訊高級前端工程師，核心成員之一，現(xiàn)主要負(fù)責(zé)騰訊興趣部落的研發(fā)設(shè)計(jì)工作閑聊前端從移動時(shí)代開始，前后端分離之后，前端這個(gè)崗位才開始慢慢火起來一線城市前端需求量大，但合格前端很少大話面試面試如相親，為什么這么說五大要素顏王面試的第一 主講人：AlloyTeam@石小勇(騰訊高級前端工程師，AlloyTeam核心成員之一，現(xiàn)主要負(fù)責(zé)騰訊QQ興趣部落的研發(fā)設(shè)計(jì)工作) 1.閑聊前端 ...

    YFan 評論0 收藏0

  • 騰訊前端求職直播課——面試篇

    摘要：主講人石小勇騰訊高級前端工程師，核心成員之一，現(xiàn)主要負(fù)責(zé)騰訊興趣部落的研發(fā)設(shè)計(jì)工作閑聊前端從移動時(shí)代開始，前后端分離之后，前端這個(gè)崗位才開始慢慢火起來一線城市前端需求量大，但合格前端很少大話面試面試如相親，為什么這么說五大要素顏王面試的第一 主講人：AlloyTeam@石小勇(騰訊高級前端工程師，AlloyTeam核心成員之一，現(xiàn)主要負(fù)責(zé)騰訊QQ興趣部落的研發(fā)設(shè)計(jì)工作) 1.閑聊前端 ...

    gxyz 評論0 收藏0

  • 騰訊前端求職直播課——面試篇

    摘要：主講人石小勇騰訊高級前端工程師，核心成員之一，現(xiàn)主要負(fù)責(zé)騰訊興趣部落的研發(fā)設(shè)計(jì)工作閑聊前端從移動時(shí)代開始，前后端分離之后，前端這個(gè)崗位才開始慢慢火起來一線城市前端需求量大，但合格前端很少大話面試面試如相親，為什么這么說五大要素顏王面試的第一 主講人：AlloyTeam@石小勇(騰訊高級前端工程師，AlloyTeam核心成員之一，現(xiàn)主要負(fù)責(zé)騰訊QQ興趣部落的研發(fā)設(shè)計(jì)工作) 1.閑聊前端 ...

    miya 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<