[toc] ## JS 篇 #### 1.js 的數據類型以及區別 #### 2.數據類型判斷 typeof #### 3.判斷數組的幾種方式 #### 4.var, let, const 區別 #### 5.js 垃圾回收機制 js 中在創建一個對象的時候，會開辟一個內存空間，如果是基本數據類型，就會放在棧空間中，如果是引用數據類型，就會放在堆空間中，并在棧中保存一個指針，而瀏覽器的 v8 回收機制，會每隔一段時間自動回收沒有使用的變量，gc 的回收策略主要是一個分代回收，它分為新生代和老生代兩種，在新生代中，存在 from 和 to 兩個空間，一個使用，一個空閑，當新創建變量時，會放到 from 空間，當 from 占滿后，就會啟動垃圾回收清除 from 空間失活的對象，并把存活的部分復制到放到 to 空間中，然后 from 和 to 空間互換。在老生代中，會采用一個標記清除的方法，當變量進入執行環境時就會標記為進入環境，離開環境是就會標記為離開環境，并且啟動標記清楚算法，老生代的內存空間是連續的，所以清楚后會出現內存碎片，當內存碎片超過了一定限制后，會啟動壓縮算法，將存活的對象放到一邊，失活的放到另一邊 #### 6.作用域和作用域鏈 js 分為全局作用域和函數作用域，外部無法獲取內部聲明的變量，作用域最大的用處就是隔離變量，不同作用域下的同名變量不會沖突 作用域鏈，比如函數內使用一個變量，如果這個函數作用域內找不到這個變量，就會從上一級去找，一直查到全局作用域，這個過程就叫做作用域鏈 #### 7.閉包是什么，作用？ #### 8.this #### 9.原型和原型鏈 #### 10.new 操作符的實現 #### 11.eventloop 事件循環 #### 12.promise, promise.all, promise.race promise.all 保證所有的 promise 都被 resolve 改變狀態了，res 拿到的是一個數組[res1, res2]，如果 reject 了，就會返回第一個失敗的 promise 結果 promise.race 是返回最快改變狀態的 promise 的 res promise.allSettled()，不管內部的 promise 是被 resolve 還是 reject，都會返回一個 promise 結果的數組 #### 13.async/await async 是異步函數的語法糖， await 在 async 內部使用，await 的返回結果是一個 promise，await 語句下面的代碼相當于 promise.then #### 14.節流和防抖，原理和使用 #### 15.數組遍歷有哪些方法 #### 16.操作 string 有哪些方法 #### 17.es6 新增了哪些新特性 常見的 let, const, 箭頭函數, Symbol, 解構賦值 數組中的方法：map, reduce, Array.from(), Array.flat() 字符串中的方法：startsWith, endWith 對象上的方法：Obejct.keys()，Object.assign, for in, Class 類 新增了一些對象，比如 promise, Set, Map, WeakSet, WeakMap 還有一些操作符，比如?., ?? #### 18.es5 和 es6 的繼承區別 es5 繼承通過在 function 的 prototype 添加方法實現方法繼承 在構造函數 function 中通過父函數 parent.call(this, ...args)實現參數的繼承 es6 是 class 類的繼承，通過 extends 繼承父類上的方法，通過 super(name)，繼承父類的參數 #### 18.手寫深拷貝 #### 19.拖拽方法 #### 20.websocket ## html && css 篇 #### 1.html5 新特性和語義化 #### 2.css 選擇器以及優先級 #### 3.position 屬性的值 static absolute relative fixed sticky #### 4.box-sizing #### 5.盒子模型 #### 5.BFC（塊級格式上下文） #### 6.垂直居中的方法 #### 7.隱藏元素的三種方法 #### 8.css 實現三角符號 #### 9.flex 布局 #### 10.rem 和 vw, em, px, rpx 區別 #### 11.清除浮動 #### 12.css3 動畫 #### 13.css 的 gpu 加速 以下屬性自帶 gpu 加速 transform opacity filter 主動觸發 gpu 加速 will-change: transform #### 14.瀏覽器重繪和重排(回流) ## 網絡，瀏覽器 #### 1.瀏覽器輸入 url 到頁面加載的過程 #### 2.http #### 3.https #### 4.強緩存和協商緩存 #### 5.http 三次握手 #### 6.http 四次揮手 #### 7.瀏覽器跨域 #### 8.Cookie, sessionStorage, localStorage ## 操作系統 #### 1.進程，線程和協程 進程是程序運行的一個載體，操作系統進行資源分配和調度的一個獨立單位 一個進程可以擁有多個線程，同一進程下的線程之間共享進程的內存空間 協程:屬于線程，是在線程中跑的由用戶操作的程序,比如迭代器 generator ## webpack 篇 #### 1.webpack 中有哪些 loader，都有什么作用 1.css-loader 2.style-loader 3.sass-loader 4.less-loader 6.postcss-loader: 用于根據瀏覽器內核不同，添加 css 前綴 ```js // 在loader中配置，將原style-loader刪除，使用MiniCssExtractPlugin.loader { test: /\.(css|less)$/, use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader'] } ``` 7.babel-loader 8.ts-loader 9.vue-loader 10.file-loader: 處理圖片資源 11.url-loader: 處理圖片資源，但是可以接受一個 limit 限制，超過這個大小用 http 請求，否則轉化為 base6 #### 2.webpack 中用過哪些 plugin，有什么作用 1.html-webpack-plugin：通過一個 html template，自動引入需要的 js，css 等依賴 2.mini-css-extract-plugin: 將 css 分離成單獨的文件 #### 3.loader 是什么，手寫 loader loader 本質上是一個函數，接受模塊的文件內容，進行一系列的處理，并 return 出去 比如 style-loader 1.拿到 css 文件的內容 2.創建 style 標簽，并且把內容寫入到 style 標簽中 3.再將 style 標簽 append 到 document.head 中 ```js function loader(source) { let style = document.createElement("style"); style.innerHTML = JSON.stringify(source); document.head.appendChild(style); return style; } module.exports = loader; ``` #### 4.plugin 是什么，手寫 plugin #### 5.說說 webpack optimization #### 6.webpack 如何進行性能優化 #### 7.webpack 的打包流程是怎么樣的 #### 8.tree-shaking 實現的原理 #### 9.webpack 熱更新(HMR)是如何實現的 #### 10.webpack 打包中的 Babel 插件是如何工作的 #### 11.webpack 和 rollup 有哪些相同點和不同點 #### 12.webpack5 有哪些新特性 ## vue 篇 #### 1.簡述 mvvm，優點 #### 2.Vue 雙向數據綁定的原理 #### 3.vue 生命周期的理解以及原理 #### 4.computed 和 watch #### 5.組件中的 data 為什么是一個函數 #### 6.vue 中如何檢測數組的變化 #### 7.vue 中如何進行依賴收集 #### 8.vue-router 原理 #### 9.vue.mixin 原理 #### 10.$nextTick 作用，原理 #### 11.連續修改兩次數據，會導致視圖更新兩次嗎？為什么 #### 12.vue 模板編譯的原理 #### 13.對 diff 算法的理解 #### 14.vue3 中有哪些 api #### 15.vue3 和 vue2 有哪些區別 #### 16.vue-vuex 的原理 #### 17.vue 組件傳參有哪些方式 ## 項目篇(僅針個人簡歷) #### 1.你項目中用過的比較亮眼的技術 #### 2.你封裝過組件嗎，怎么封裝的，舉例 #### 3.qiankun 是怎么實現的，他里面做了什么 #### 4.動態樣式是怎么實現的 element-ui 2.0 版本之后所有的樣式都是基于 SCSS 編寫的， 所有的顏色都是基于幾個基礎顏色變量來設置的，所以就不難實現動態換膚了，只要找到那幾個顏色變量修改它就可以了。 首先我們需要拿到通過 package.json 拿到 element-ui 的版本號，根據該版本號去請求相應的樣式。 拿到樣式之后將樣色，通過正則匹配和替換，將顏色變量替換成你需要的， 之后動態添加 style 標簽來覆蓋原有的 css 樣式。 ## node 篇 ## 性能優化篇 ## 網絡安全篇 ## js 手寫題篇 #### 1.手寫 call, bind, apply [詳見](http://www.hmoore.net/book/mrxuxu/js/edit#2applyapply_31) #### 2.手寫 promise.all [詳見](http://www.hmoore.net/book/mrxuxu/js/edit#2applyapply_31) ## 算法篇 ## react 篇 #### react 組件傳值 1.父傳子：通過 props 2.子傳父：通過給子組件外部掛一個事件，子組件拿到props中的這個事件，調用，然后通過這個事件傳參 ```js import React from 'react' class ChildCom extends React.Component { valueToParent(value) { this.props.onValue(value); } render() { return ( <div> <h2>子組件</h2> <div> <a onClick={this.valueToParent.bind(this,123)}>向父組件傳值123</a> </div> </div> ) } } export default ChildCom; ```