北京某某某某科技前端開發面試

面試時間： 2020年12月11日上午10.30點-11點
面試形式： 語音面試

1. 自我介紹
   參考模板：
   你好，我是XX，畢業於XX大學。現就職於XX公司，有X年開發經驗，公司主要使用技術棧為React+AntDesign+Redux進行開發

2. 瀏覽器相容性問題
   不同瀏覽器的標籤預設內補丁padding和外補丁margin不同
   解決：使用css萬用字元，設定css內補丁和外補丁為0 *{margin：0， padding： 0}
   圖片預設有間距
   解決：使用float為img佈局
   塊屬性標籤float後，又有橫向的margin值，在IE6中顯示會比設定的大
   解決：在float標籤樣式中加入display：inline

3. 盒模型

對比	W3C的標準盒模型	IE的盒模型
width	content部分的寬度	content+padding+border三個部分的寬度
box-sizing	content-box(預設)	border-box

4. 雙等和三等=的區別

對比	雙等==	三等===
概念	相等	嚴格相等
型別轉換	型別轉換	型別不同則直接返回false
轉換規則	原始型別的值：字串和布林值都會轉換成數值；物件（數值和函式）與原始型別值比較，物件轉換成原始型別的值，在進行比較；undefied和null與其他型別值比較，為false，相互比較為true	不同型別值，直接返回false；同一類的原始型別值（數字，字串，布林值），值相同返回true，否則false；同一類的複合型別值（物件，陣列，函式），比較他們是否指向同一個物件；undefined和null與自身嚴格相等

5. 實現一個promise

function myPromise(constructor){
	let self = this;
	self.status = 'pending' //定義狀態改變前的初始狀態
	self.value = undefined; //定義狀態為resolved時的狀態
	self.reason = undefined;//定義狀態為rejected時的狀態
	
	function resolve(value){
		//兩個===pending，保證了狀態的改變是不可逆的
		if(self.status === 'pending'){
			self.value = value;
			self.status = 'resolved';
		}
	}
	
	function reject(reason){
		//兩個===pending，保證了狀態的改變是不可逆的
		if(self.status === 'pending'){
			self.reason = reason;
			self.status = 'rejected';
		}
	}
	
	//捕獲構造異常
	try{
		constructor(resolve, reject)
	}catch(e){
		reject(e)
	}
}

myPromise.prototype.then=function(onFullFilled, onRejected){
	let self = this;
	switch(self.status){
		case 'resolved':
			onFullFilled(self.value );
		break;
		case 'rejected':
			onRejected(self.reason );
		break;
		default:
	}
}

6. 講一下Async/Await
   async函式是generator函式的語法糖
   await後面接一個返回return new Promise函式並執行（await放在try catch中接受promise處理結果rejected）
   await只能放在async函式裡
   優點：方便級聯呼叫；同步程式碼編寫方式；多個引數傳遞

7. 前端效能優化
   降低請求量：合併資源，減少HTTP請求數，minify/gzip壓縮
   加快請求速度：預解析DNS，CDN分發
   快取：HTTP協議快取請求，離線資料儲存localStorage
   渲染：JS/CSS優化，載入順序，伺服器端渲染

8. 講一下執行緒和程式

區別	程式	執行緒
定義	程式的一個例項	一個程式之內可以分成多個執行緒
單位	資源分配的最小單位	資源排程的最小單位
上下文切換	涉及到當前程式CPU環境的儲存和新被排程執行程式的CPU環境的設定	更輕量，僅需要儲存和設定少量的暫存器內容，不涉及儲存管理方面的操作
資料共享	同一程式下不同執行緒間資料很易共享	不同程式的執行緒間資料很難共享

9. http和https區別

區別	http	https
定義	超文字傳輸協議	http加入ssl層，加密的詳細內容需要ssl
是否需要證照	不需要	需要，費用較高
加密傳輸	明文傳輸	ssl加密傳輸
埠	80	443
連線	簡單，無狀態	ssl+http可進行加密傳輸，身份認證
優點		可認證使用者和伺服器，確保資料傳送到正確的客戶機和伺服器；ssl+http可進行加密傳輸，身份認證，可防止資料在傳輸過程中不被竊取改變，保證資料完整性；較安全，增加了中間人攻擊的成本
缺點	快取高效；	快取會增加資料開銷；需要ssl證照，功能越大，費用越高；握手比較費時，頁面載入時間延長50%，增加10%-20%耗電

10. event loop
    執行順序：
    一開始整個指令碼作為一個巨集任務執行
    執行過程中，同步程式碼直接執行，巨集任務進入巨集任務佇列，微任務進入微任務佇列
    當前巨集任務執行完出隊，檢查微任務列表，有則依次執行，知道全部執行完
    執行瀏覽器UI渲染的執行緒工作
    檢查是否有web work，有則執行
    執行完本輪的巨集任務，回到2，依次執行，直到巨集任務和微任務佇列為空
    微任務：Promise.then,
    巨集任務：script, settimeout, setinterval, setimdiate,I/O, UI render

11. webpack
    描述了專案中webpack的配置和每項的作用

const path = require('path');  //引入node的path模組
const webpack = require('webpack'); //引入的webpack,使用lodash
const HtmlWebpackPlugin = require('html-webpack-plugin')  //將html打包
const ExtractTextPlugin = require('extract-text-webpack-plugin')  // 分離樣式檔案，CSS 提取為獨立檔案，支援按需載入   //打包的css拆分,將一部分抽離出來  //提取 Chunk 中的 CSS 程式碼到單獨檔案
const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = {
    entry: './src/index.js', //入口檔案
    output: { //webpack如何輸出
        path: path.resolve(_dirname, 'dist'),//定位，輸出檔案的目標路徑
        filename: '[name].[chunkhash:8].js' //設定 output 的 filename，用 chunkhash: 和 Webpack 打包的 chunk 有關，不同的 entry 會生出不同的 chunkhash
    },
    module: {//模組的相關配置
        rules:[ //根據檔案的字尾提供一個loader，解析規則:型別為陣列，每一項都是一個object，內部包含test（正則：型別檔案；loader, options:引數等屬性 ）；本質是一個函式，在該函式中對接受到的內容進行轉換，返回轉換後的結果。loader即翻譯官，對其他除js型別的資源進行轉譯的預處理工作
            {
                text: /\.js$/, //正則：型別檔案 es6=>es5
                includes:[
                    path.resolve(_dirname, 'src')
                ],
                exclude:[], //不匹配選項，優先順序高於test和include
                use: 'babel-loader'//es6=>es5
            },
            {
                test: /\.less$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use:['css-loader', 'less-loader'] //載入CSS，支援模組化，壓縮，檔案匯入等特性
                })
            },
            { //圖片loader
                test: /\.(png|jpg|gif)$/,
                use:[
                    {
                        loader: 'file-loader'//根據檔案地址載入檔案，把檔案輸入到一個資料夾中，在程式碼中通過相對url去引用輸出的檔案（處理圖片和文字）；設定file-loader的name，使用hash；和整個專案的構建相關，只要專案檔案有修改，整個專案的hash值就會改變
                    }
                ]
            }
        ]
    },
    resolve:{ //解析模組的可選項
        modules: [], //模組的查詢目錄，配置其他的css等檔案
        extensions: ['.js', '.json', '.jsx', '.less', '.css'],//用到檔案的擴充名，儘可能減少字尾嘗試的可能性
        alias:{//模組別名列表，合理使用alias可縮小打包作用域
            utils: path.resolve(_dirname, 'src/utils')
        }
    },
    plugins:[//插進的引用，壓縮，分離美化，型別為陣列，每一項都是plagin的例項，引數通過建構函式傳入：外掛，擴充套件webpak的功能，在webpakck生命週期會有很多事件，plugin可以監聽這些事件，通過webpak提供的api改變輸入結果
        new ExtractTextPlugin('[name].css'), //[name]預設 也可以自定義name 宣告使用；分離樣式檔案，css提取為獨立檔案，支援按需載入；設定MiniCssExtractPlugin 的filename，使用contenthash：根據檔案內容來定義hash，檔案內容不變，則contenthash不變
        new HtmlWebpackPlugin({//將模板的頭部和尾部新增CSS 和js模板，dist目錄釋出到伺服器上，專案包，可以直接上線；簡化html檔案建立
            file: 'index.html',//打造單頁面運用，最後執行的不是這個
            template: 'src/index.html' //腳手架放在根目錄下
        }),
        new CopyWebpackPlugin([//src下其他的檔案直接賦值到dist目錄下
            {form:'src/assert/favicon.oci', to: 'favicon.ico'}
        ]),
        new webpack.ProvidePlugin({ //引用框架jquery lodash工具庫是很多元件會複用 省去了import
            '_': 'lodash'//引用webpack
        })
    ]
}

12. 電商頁面多圖片載入方式和優化方式

13. git基本使用
    git clone 複製
    git init 初始化
    git add 新增，有工作區到暫存區
    git status 檢視當前倉庫的狀態
    git commit 提交註釋說明
    git fetch 與主幹同步
    git pull 從遠端更新程式碼
    git push 將原生程式碼更新到遠端分支上
    git branch 檢視分支
    git checkout 切換分支

14. git fetch和git pull 不同
    git pull = git fetch + git merge
    fetch 更新遠端倉庫的程式碼為最新的，本地倉庫的程式碼還未被更新，需要用git merge合併
    merge 將本地倉庫和遠端倉庫更新到遠端的最新版本

15. ES6新特性
    const和let
    模板字串
    箭頭函式
    函式的引數預設值
    物件和陣列的解構
    模板的匯入匯出

16. 變數提升
    函式和變數的宣告都將被提升到函式的最頂部。變數可以先使用在宣告。同一個變數只會宣告一次，其他的會被忽略掉或者覆蓋掉。函式宣告的優先順序高於變數宣告的優先順序，並且函式宣告和函式定義的部分一起被提升

17. ES6的for of原理
    迭代器 Iterator

18. ES6的新資料結構Map
    資料結構類似物件，為鍵值對集合，但是鍵的範圍不限於字串，可以是任何型別的。

19. vue和react不同

區別	vue	react
資料是否可變	響應式，資料可變（效能優化自動的）	單向資料流，資料不可變（效能優化手動做）
通過js還是自行處理	html，js， css組合在一起，用各自處理方式	all in js(js生成html為jsx， js操作css)
元件寫法	宣告式寫法，通過傳入options和api，引數很多	類式寫法，api很少
擴充套件元件	mixin	高階元件
內建還是社群做	很多東西內建	做的少，交給社群

20. vue生命週期
    beforeCreate
    created
    beforeMount：此時還沒有生成html到頁面上
    mounted：掛載完成，模板中html渲染到html頁面上，可以做一些ajax操作，只執行一次
    beforeUpdate
    updated
    deforeDestroy
    destroyed