更多課程 選擇中心

Web培訓
達內IT學院

400-111-8989

Web培訓

2020年前端面試題匯總之常見性能優化

  • 發布:Web前端培訓
  • 來源:web前端面試
  • 時間:2020-11-24 17:31

今天小編要跟大家分享的文章是關于2020年前端面試題匯總之常見性能優化。正在從事Web前端工作和想要換工作的小伙伴們來和小編一起看一看吧,希望本篇文章能夠對大家有所幫助。

2020年前端面試題匯總

常見性能優化

2.1 構建工具帶來的

前置css,后置js,防止js加載,運行阻塞頁面渲染

將小圖達成base64,減少資源請求。[file-loader, url-loader,...]

壓縮精簡html,css和js,減小打包體積。[uglifyjs, OptimizeCssAssetsPlugin, ...]

Gzip壓縮打包后的文件,該功能需要服務器支持才能正常顯示頁面

css預處理器,開啟css編程之路

2.2 瀏覽器相關

使用CDN分發網絡,請求資源更快

減少HTTP請求次數,減少DNS查詢次數(盡量減少主機名),避免重定向

DNS預獲取 link標簽 ref='dns-prefetch' herf=''

使AJAX可緩存:get請求可在客戶端緩存;post請求不能再客戶端緩存,但是服務端可以緩存數據(redis,memorycache等),提高請求速度。

減少DOM數量

避免重排和重繪: 減少DOM操作,動畫優先使用 opacity, transform 屬性;

合并DOM的讀寫操作,如使用 document.createDocumentFragment();

使用特殊的函數,優化條件渲染:window.requestAnimationFrame(), window.requestIdleCallback()

時間分片函數,使用requestAnimationFrame和createDocumentFragment

2.3 js相關

使用 JavaScript Cache API,我們可以使用 service worker。

延遲不必要的 JS 首屏加載 defer , aysc, 動態添加script節點

刪除未使用的 JavaScript 和 合并重復的代碼 減少編譯時間(JIT)

避免內存泄漏 意外的全局變量;沒有銷毀的計時器;已經刪除的 DOM 還是被引用,(刪除DOM后將變量設值為 null 可以避免這個問題)

避免使用全局變量 & 優先使用局部變量,作用域鏈查找更快

使用 Web workers 處理需要大量執行時間的代碼(子線程)

合理使用事件代理。合并類似的操作,節約內存空間,減少 DOM 操作

使用高級函數等,例如addEvent的兼容惰性加載函數; map的性能高于forEach

2.4 css相關

避免使用css表達式

使用css sprite 雪碧圖,減少圖片請求

在不影響畫質的情況下,使用合理的圖片格式和壓縮圖片,優先使用JPG格式,如果能用css3實現動畫,則盡量不使用GIF。如果能使用canvas或SVG實現,則盡量不使用圖片

2.5 Vue相關

在vue2.0中不在data上使用嵌套多層的對象,或使用Object.freeze凍結對象。vue3中使用了lazy reactive不用擔心這個。

異步加載路由,減少體積

通過使用require.context。自動生成路由

// ../components/test目錄下的vue文件

let _req = require.context('../components/test', true, /\.vue$/)let routes = []

_req.keys().map(name => {

const nameArr = name.split('.') // 模塊的export.defalut

const comp = _req(name).default routes.push({ path: `/test${nameArr[1]}`, component: comp, title: comp.name })});

export default routes

通過$store.registerModule 動態注冊狀態樹,減小打包體積。(混入beforeCreate,異步加載store的模塊)

Vue.mixin({

beforeCreate: function() {

if (this.$options[config.dynamicVuex]) {

let name = config.moduleName || this.$options.name console.log('name = ', ame) import(`./store/module/${name}.store.js`).

then(module =>

{ // or require.ensure t

his.$store.registerModule(name, module.default)

})

}

}})

2.6 React相關

更合理的傳遞state和props:

在構造函數里使用bind;

盡量不使用內聯的對象;

不傳遞不必要的屬性

合理使用shouldComponentUpdate生命鉤子和繼承PureComponent組件

以上就是小編今天為大家分享的關于2020年前端面試題匯總之常見性能優化的文章,希望本篇文章能夠對想要換工作的Web前端工程師們有所幫助,想要了解更多Web前端知識記得關注達內Web培訓官網,最后祝愿小伙伴們工作順利,成為一名優秀的Web前端工程師。

文章來源:原創 const弓長張 總在落幕后

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

預約申請免費試聽課

填寫下面表單即可預約申請免費試聽!怕錢不夠?可就業掙錢后再付學費! 怕學不會?助教全程陪讀,隨時解惑!擔心就業?一地學習,可全國推薦就業!

上一篇:2020年前端面試題匯總之Webpack
下一篇:2020年前端面試題匯總之算法和應用

Web前端面試前需要做的面試準備有哪些

2020年前端面試題匯總之概念

2020年前端面試題匯總之算法和應用

2020年前端面試題匯總之常見性能優化

  • 關注微信公眾號

    回復關鍵字:視頻資料

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

  • 視頻學習QQ群

    添加QQ群:1143617948

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

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

選擇城市和中心
黑龍江省

吉林省

河北省

貴州省

云南省

廣西省

海南省

a一天堂网,靑靑青草手机版,免费视频,青娛樂,大香蕉,热热色,原网站,窝窝影院 <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <文本链> <文本链> <文本链> <文本链> <文本链> <文本链>