• <legend id="kntsb"></legend>
  • <track id="kntsb"></track>
    <span id="kntsb"><output id="kntsb"><b id="kntsb"></b></output></span>
  • <span id="kntsb"><blockquote id="kntsb"><nav id="kntsb"></nav></blockquote></span>
      <legend id="kntsb"></legend><span id="kntsb"><output id="kntsb"></output></span>

      杭州PHP培訓
      達內杭州PHP培訓中心

      0571-56020837

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

      • 時間:2021-04-02 14:05
      • 發布:杭州PHP培訓
      • 來源:php面試題

      今天小編要跟大家分享的文章是關于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年前端面試題匯總之算法和應用
      下一篇:2020年前端面試題匯總之Webpack

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

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

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

      2021Web前端面試題及答案匯總-Javascript篇

      • 關注微信公眾號

        回復關鍵字:視頻資料

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

      • 視頻學習QQ群

        添加QQ群:1143617948

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

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

      選擇城市和中心
      江西省

      貴州省

      廣西省

      海南省

      天天爱搞搞狠狠爱 天天射天天日天天舔 狠狠在线插口日日干