前端面試題

　　整理了一下最近的面試題，方便之後查閱。

　　1、vue相關（包括nuxt.js）

　　1.nodejs請求的接口。 有時須要區分 nodejs 請求的接口和瀏覽器請求的接口。使用服務端渲染時，有些數據能夠經過asyncData的方式獲取，在nodejs層面獲取數據後直接渲染在頁面上，能夠縮短響應時間。nodejs訪問接口時有時由於環境配置的問題，不能經過域名的方式訪問，須要改爲ip形式的。

　　2.vuex.獲取vuex中變量的值：this.$store.state.xxx;修改vuex中的變量的值：this.$store.commit(name,value)---在mutation-types.js中定義這個事件並暴露出來，在mutations.js中作具體處理，把傳過來的value賦值給state中的某個變量，有時須要同時存在localStorage中。state---獲取；getter--- store 的計算屬性，高級的state；mutation---修改狀態，經過commit方法調用；action---能夠包含任意異步操做。getter與state之間的區別相似computed與data、watch之間的區別。

　　3.vue.prototype.countClose。把統計代碼加在Vue上，做爲一個全局函數，方便在任何頁面調用。

　　4.vue跨域方式：在config/index.js中修改proxyTable的配置，pathRewrite（dev環境）。

　　5.Object.defineProperty：數據描述符屬性以及存取描述符屬性。其中數據屬性包括:configurable,enumerable,writeable,value;存取描述符：configurable，enumberable，get，set。vue就是在set被調用時通知watcher從新計算。這裏用到了觀察者模式這種設計模式。vue更新DOM：每一個watch對應一個dom節點，watch會觸發這個小dom節點的更新，減小開銷。

　　6.雙向綁定和單向數據流：react是單項的，vue和ng是雙向綁定。

　　雙向綁定：方便，代碼少，數據相互依賴相互綁定，致使數據問題的源頭難以被跟蹤；所以適應於中小型項目；
　　單項綁定：好比vue父子組件傳值，單向向下，便於追蹤。所以適用於大型項目

　　7.

　　僅使用vue時：在router/index.js中可進行路由鑑權等全局守衛，也能夠在組件中或者對單個路由處理。router.beforeEach((to, from, next)。路由獨享的守衛在具體的路由配置中直接寫，path....而後是　　router.beforeEach....
　　使用nuxt時：頁面路徑自動生成，在.nuxt/router.js中。想作配置須要本身作插件。在nuxt.config.js中定義router：{middleware: 'auth'}，在middleware/auth中進行路由鑑權。

 

　　2、ng相關

　　1.生命週期的順序 對組件和directive（指令）都會調用鉤子方法
　　ngOnChanges --- ngOnInit --- ngDoCheck --- ngOnDestroy等等
　　2.解耦！依賴注入是一個很重要的設計模式。 它使用得很是普遍，以致於幾乎每一個人都把它簡稱爲 DI 。（Dependency injection）
　　3.指令：經過指令來擴展html，因此指令都是寫在html上的，不過ng仍是vue，都是這樣。除了內置指令，ng還能夠自定義指令。
　　ng-repeat相似v-for，重複html
　　ng-app 指令定義了 AngularJS 應用程序的 根元素，網頁加載後自動初始化應用程序。能夠經過ng-app="moduleName"鏈接到代碼模塊。
　　ng-init、ng-bind、ng-model、ng-repeat等
　　自定義指令（restrict：限制）
　　var app = angular.module("myApp", []);
　　app.directive("name",function(){
　　　　return {
　　　　　　restrict : "A", // EACM四個值，分別是四種方法：元素名，屬性，類名和註釋（Comment）
　　　　　　template : `<p>666</q>`
　　　　}
　　})

 

　　3、Html相關

　　1.新增的語義化標籤

　　<article><aside><details><dialog><mark><nav><section>

　　優點：

1. 代碼結構清晰，方便閱讀，有利於團隊合做開發。
2. 方便其餘設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以語義的方式來渲染網頁。
3. 有利於搜索引擎優化（SEO）
4. css未加載時能夠有部分自帶的樣式，而不會是頁面顯得太亂。

　　4、JS相關（包含ES6）

　　1.set數據結構 set.size返回長度，其餘方法：add(6),delete(6),has(6),clear();[...new Set(array)]以及Array.from(items)返回去重後的數組，Array.from方法能夠將 Set 結構轉爲數組。Set 結構沒有鍵名，只有鍵值（或者說鍵名和鍵值是同一個值）。

　　2.null，undefined，num，string，Boolean，obj，Symbol

　　ps. js中爲false的狀況：‘’，NaN，false，0，null，undefined

　　undefined：已聲明，未賦值。not defined：未定義。null是一個特殊的對象，空對象。

　　3.var let const的區別

　　避免變量提高；不能夠重複聲明；不會成爲全局變量（var a=0，window.a）；塊級做用域，塊內聲明的變量，外部不可見

　　4.清空數組的方式 length=0;arr=[];arr.splice(0,arr.leng)

　　5.vue中computed和watch的區別；computed被緩存了，沒有更新還會使用原來的值；watch每次刷新都會觸發計算。

　　6.js的時區函數getTimezoneOffset

　　7.vue指令：show，if，else，else-if，on，for，bind，modle，text，html，once

　　8.繼承

　　1.經過call(),apply()來繼承；function.call(this,a,b,c,d)/function.apply(this.[a,b,c,d])
　　2.經過prototype繼承，實現的本質是重寫了原型鏈對象，取代他的是新的實例。
　　原型鏈繼承，寄生式繼承，原型式繼承，組合式繼承等等。

　　9.es6新特性

　　a，箭頭操做符，保留this指向；

　　b，字符串模板；
　　c，解構；
　　d.參數默認值，不定參數，拓展參數 ps.arguments[0]
　　e.let const
　　f.promise
　　g.模塊 import

　　

　　5、CSS相關

　　1.CSS盒模型；IE盒子模型，標準盒子模型（在IE盒子模型中，width表示content+padding+border這三個部分的寬度；標準模型只有content）：box-sizing: border-box | content-box；

　　2.css三角形：border-left：10px solid red；其餘方向顏色是透明的

　　3.flex垂直水平居中：display:flex;justify-content:center;（主軸方向）align-items:center;（交叉軸，側軸）

　　4.清除浮動

　　.float_div:after{

　　　　content:".";

　　　　clear:both;

　　　　display:block;

　　　　height:0;

　　　　overflow:hidden;

　　　　visibility:hidden;

　　}

　　

　　.float_div{
　　　　zoom:1
　　}

 

　　6、瀏覽器和HTTP相關

　　1.頁面渲染過程：

　　a，解析html生成DOM樹；
　　b，解析css；
　　c，DOM+css生成渲染樹renderTree；
　　d，佈局繪製，佈局：計算位置大小等位置信息；繪製：bgc，bgimg，border等
　　e，Repaint（重繪）和Reflow（重排/迴流）：重繪不必定致使重排，可能只是改變顏色，代價較小；重排必定會致使重繪，代價高昂。

　　PS.

　　減小重繪和重排：
　　1.不要使用 table 佈局。由於可能很小的一個小改動會形成整個 table 的從新佈局。（在問卷網寫過郵件模板，就是用的table佈局，N年前的東西了，table定寬800px，就像在座標紙中畫畫。）
　　2.position absolute和fix，脫離文檔流不影響其餘元素
　　3.display屬性爲none的元素不在渲染樹中，對隱藏的元素操做不會引起其餘元素的重排

　　PPS.
　　display:none:
　　隱藏元素，不佔網頁中的任何空間，讓這個元素完全消失（看不見也摸不着）,因爲會影響到網頁的空間，因此會引發一次重排和重繪。

　　visibility:hidden:
　　他是把那個層隱藏了，也就是你看不到它的內容可是它內容所佔據的空間仍是存在的。（看不見但摸獲得），該操做不會對頁面有影響，因此只會引發一次重繪。

　　overflow:hidden:
　　讓超出的元素隱藏（不佔據網頁空間），就是在設置該屬性的時候他會根據你設置的寬高把多餘的那部分剪掉，會引發一次重排和重繪。

　　2.瀏覽器內核（引擎）：渲染引擎和js引擎

　　渲染引擎（Rendering Engine）：①Trident②Gecko③Presto④Webkit。瀏覽器的內核的不一樣對於網頁的語法解釋會有不一樣，因此渲染的效果也不相同，所以要初始化。
　　* {padding: 0; margin: 0;} ==> 淘寶官網樣式初始化
　　js引擎：chrome的V8引擎，Edge的查克拉（Chakra）

　　js引擎和渲染引擎的效率不一樣，所以經過計算vDOM這種方式能夠在一些時候大大提升渲染效率。（後文詳述）

　　3.三次握手四次揮手

　　（圖片來源：https://www.cnblogs.com/wcd144140/p/9743618.html）

　　第一次握手：創建鏈接時，由客戶端發起，想服務器發送syn包，並進入SYN_SENT狀態；
　　第二次握手：服務器收到syn包，發送本身的syn包給客戶端，服務器進入SYN_RECV狀態；
　　第三次握手：客戶端收到服務器發來的包，向服務器發送確認包，進入ESTABLISHED狀態，服務端收到後也進入ESTABLISHED狀態，TCP鏈接成功，三次握手完成。

　　四次揮手是改進的三次握手
　　第一次揮手:客戶端向服務端發起FIN請求，請求關閉數據傳輸；
　　第二次揮手：服務端收到FIN後向發ACK，確認包；
　　第三次揮手：服務端向客戶端發FIN；
　　第四次揮手：客戶端收到FIN後回覆ACK給服務端，四次揮手結束。

　　註釋：
　　（established：已創建的; 已設立的，ACK：Acknowledge確認，Seq：Sequence，syn：同步序列編號）

　　4.從ur到頁面呈現的過程：
　　a，輸入URL
　　b,DNS解析（先找hosts-再找緩存），從右向左查詢，轉換爲ip，有時候ping 百度會發現指向a.shifen這個域名，這就是DNS在起做用（騰訊：Tencent，百度：shifen，我：皮！）
　　c,創建TCP鏈接，三次握手，發起HTTP請求,四次揮手請求結束（TCP：Transmission Control Protocol 傳輸控制協議）
　　c,瀏覽器接受響應
　　d,頁面渲染

　　總算趕在國慶長假的最後一天完成了，之後有新的內容會及時的補充上來。