摘要:從用戶角度來說,優化能讓頁面加載的更快,對用戶的操作能及時的響應,能提升用戶的更好的體驗效果。從服務商的角度來說,優化能解決頁面的請求次數,或者減少請求所帶來的帶寬。
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
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/50544.html
摘要:從用戶角度來說,優化能讓頁面加載的更快,對用戶的操作能及時的響應,能提升用戶的更好的體驗效果。從服務商的角度來說,優化能解決頁面的請求次數,或者減少請求所帶來的帶寬。 1.從用戶角度來說,優化能讓頁面加載的更快,對用戶的操作能及時的響應,能提升用戶的更好的體驗效果。2.從服務商的角度來說,優化能解決頁面的請求次數,或者減少請求所帶來的帶寬。前端優化的方式有很多,主要可以分為兩大類;第一...
摘要:主講人石小勇騰訊高級前端工程師,核心成員之一,現主要負責騰訊興趣部落的研發設計工作閑聊前端從移動時代開始,前后端分離之后,前端這個崗位才開始慢慢火起來一線城市前端需求量大,但合格前端很少大話面試面試如相親,為什么這么說五大要素顏王面試的第一 主講人:AlloyTeam@石小勇(騰訊高級前端工程師,AlloyTeam核心成員之一,現主要負責騰訊QQ興趣部落的研發設計工作) 1.閑聊前端 ...
摘要:主講人石小勇騰訊高級前端工程師,核心成員之一,現主要負責騰訊興趣部落的研發設計工作閑聊前端從移動時代開始,前后端分離之后,前端這個崗位才開始慢慢火起來一線城市前端需求量大,但合格前端很少大話面試面試如相親,為什么這么說五大要素顏王面試的第一 主講人:AlloyTeam@石小勇(騰訊高級前端工程師,AlloyTeam核心成員之一,現主要負責騰訊QQ興趣部落的研發設計工作) 1.閑聊前端 ...
摘要:主講人石小勇騰訊高級前端工程師,核心成員之一,現主要負責騰訊興趣部落的研發設計工作閑聊前端從移動時代開始,前后端分離之后,前端這個崗位才開始慢慢火起來一線城市前端需求量大,但合格前端很少大話面試面試如相親,為什么這么說五大要素顏王面試的第一 主講人:AlloyTeam@石小勇(騰訊高級前端工程師,AlloyTeam核心成員之一,現主要負責騰訊QQ興趣部落的研發設計工作) 1.閑聊前端 ...
閱讀 1207·2021-09-03 10:44
閱讀 604·2019-08-30 13:13
閱讀 2796·2019-08-30 13:11
閱讀 1967·2019-08-30 12:59
閱讀 1034·2019-08-29 15:32
閱讀 1595·2019-08-29 15:25
閱讀 987·2019-08-29 12:24
閱讀 1277·2019-08-27 10:58