web前端應該從幾個方面來優化性能

ckllj 發布于2019-08-29 12:12 / 1628人閱讀

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

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

<1>合理設置http緩存
在前端瀏覽器中，把你需要的數據，可以在第一次請求的時候將數據保存在js對象中，這樣可以極大的較少服務器訪問，那么如何實現呢？
首先我們創建一個cache.js,

var clsCodes ={
    "clsCodes":["BOOL","STATUS","USER_TYPE","REPORT_STATUS" ]
}
var dist;
//前端定義一個函數來調用后端接口獲得的數據，然后再保存到本地
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
    );
}

第二種代碼級別優化

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

云服務器 GPU云服務器前端性能優化前端開發性能優化 web性能優化 web前端優化

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111738.html

web前端應該從幾個方面來優化性能

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

andycall 2019-08-01 16:28 評論0 收藏0
騰訊前端求職直播課——面試篇

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

YFan 2019-08-21 16:01 評論0 收藏0
騰訊前端求職直播課——面試篇

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

gxyz 2019-08-29 12:57 評論0 收藏0
騰訊前端求職直播課——面試篇

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

miya 2019-08-01 17:11 評論0 收藏0