面試總結

前言

面好了要鎮定，面很差要淡定。最後的最後，加油加油加油。

正文

HTML

1. < !DOCTYPE >的做用 首航標籤，指示HTML使用哪一個版本進行編寫（DTD文件），HTML4是使用SGML,HTML5則不是使用SGML來規範的，因此不須要DTD的引入，H5之中直接使用

2. < meta >標籤內容

   標籤主要的屬性是http-equiv和name屬性內容。

   name 所擁有的關鍵屬性以及對應的content內容以下：

   • keywords（關鍵字，告訴搜索引擎頁面關鍵字）
   • descriptions （描述，告訴搜索引擎網站的主要內容）
   • robots（機器人嚮導，告訴搜索引擎那些頁面須要索引那些頁面不須要，分爲all,none,index,unindex,follow,nofollow。默認是all）
   • author（做者，網站做者），renderer（網站的渲染模式）
   • viewport（視圖模式，經常使用設置屬性有height,width,initial-scale,maximum-scale,minimum-scale,user-scalable）

   http-equiv 至關於http文件頭的做用，其對應的常見設置有以下：

   • X-UA-Compatible（瀏覽模式）設置瀏覽器版本
   • Expires：網頁過時時間，一旦網頁過時，必定要到服務器從新傳輸。格式要GMT
   • Pragma(cache模式)禁止瀏覽器從本地計算機的緩存之中訪問內容。
   • Refresh:頁面自動刷新指向新頁面 content之中格式爲 Time;URL Time的單位是秒。
   • Set-Cookie(設置cookie)，若是網頁過時，存盤的cookie將會被刪除。
   • content-Type：設定網頁使用的字符集 通常都是 text/html;charset=utf-8
   • Content-Language: 頁面展現的語言內容。
   • Cache-Control: 能夠設置在content的屬性有max-age：最大存在時間，public，private，no-cache，no-store

   具體可見

3. localStorage，sessionStorage，cookie

   • localStorage：空間大（5-10M），保存持久。
   • sessionStorage：空間大，保存單次會話。
   • cookie：只有4kb，主要用途是保存登錄信息。

4. 什麼是cookie， cookie的優點是什麼。

   cookie又名會話跟蹤機制，解決了http請求無狀態的問題。若是控制好session對象的大小，咱們能夠將此對象內容放置在cookie之中。咱們也能夠在其中放置用戶的相關登錄信息內容，等到下一次用戶開啓網站的時候，用戶能夠直接登錄。

   cookie的優點，我覺的在於：

   1. 它能夠很方便的記錄http請求的狀態和繪畫狀態，同時能夠設置相關的過時控制，不用手動刪除內容。
   2. Secure屬性的設置，經過SSL或者https能夠更爲安全的傳輸。
   3. 簡單輕量，可持久存儲。
   4. 服務器能夠進行操做。

5. unicode編碼

   爲了統籌計算機對於多種語言對應表的混亂，因此提出了unicode編碼，通抽全部的字符編碼，統一傳輸數據內容。

6. utf-8字符集理解

   utf-8的全稱是（8-bit Unicode Transformation Format），是針對unicode的可變長度字符編碼。其會自動的依據展現數據來調整所需的字節長度，一個到四個不等。節約了傳輸的空間。

CSS

1. CSS盒模型介紹，和切換。

   主要的盒模型是content-box，border-box 盒模型內容相同。

   二者主要區別：

   content-box主體內容高度，和寬度由width和height設置padding還有border的修改不影響。

   而border-box的長寬受到padding還有border影響。長寬是固定的，可是內容會因爲padding或者border的改變而互斥改變。

   切換盒模型使用box-sizing的做用

例：box-sizing: content-box      是W3C盒子模型 
    box-sizing: border-box        是IE盒子模型
複製代碼

2. 樣式優先等級怎麼計算

   樣式表引入展現優先：行內樣式（style屬性）＞內頁樣式（style標籤）＞外部樣式（link引入）

   樣式表做用優先： 通用選擇器（*） < 元素(類型)選擇器 < 類選擇器 < 屬性選擇器 < 僞類 < ID 選擇器 < 內聯樣式

3. position之中的屬性有幾個。

   static, absolute, relative, fixed, inherit

4. 內容填充高度，元素須要水平垂直居中。

   直接上連接

5. 如何使用CSS3實現拋物線動畫。

   • animation 與 @keyframes的結合使用。
   • transition來直接設置top和left的值。同時設置變更方式。
   • js實現。

6. aimation和transition的不一樣。

   transition：其關注的點是過渡，相對比較簡單的那一種。其主要是兩個關鍵幀，開始與結尾。簡單方便，可是又侷限性。

   animation：爲了彌補上面內容的特色，animation經過控制關鍵幀來控制動畫的每一步，來實現相關的效果。

   主要的不一樣在於 transition須要經過事件來進行內容的觸發，可是animation的話就不一樣了，能夠不經過事件的形式。

7. 說一說對flex的理解。

   彈性佈局用來爲盒模型提供最大的靈活性。當一個元素設置成爲flex，則其中子元素自動成爲容器的成員。容器主要是存在的是水平主軸和垂直的交叉軸。因此咱們能夠經過設置軸的方向的形式來控制展現基調，而後經過設置項目的權重，來控制最後的展現效果。

8. 三角形的實現。

   能夠參考這篇文章

9. 經常使用到的CSS單位有什麼。

   • px：絕對單位，頁面按精確像素展現

   • em：相對單位，基準點爲父節點字體的大小，若是自身定義了font-size按自身來計算（瀏覽器默認字體是16px），整個頁面內1em不是一個固定的值。

   • rem：相對單位，可理解爲」root em」, 相對根節點html的字體大小來計算，CSS3新加屬性，chrome/firefox/IE9+支持。

   • vw：viewpoint width，視窗寬度，1vw等於視窗寬度的1%。

   • vh：viewpoint height，視窗高度，1vh等於視窗高度的1%。

   • vmin：vw和vh中較小的那個。

   • vmax：vw和vh中較大的那個。

   • %:百分比

   • in:寸

   • cm:釐米

   • mm:毫米

   • pt:point，大約1/72寸

   • pc:pica，大約6pt，1/6寸

   • ex：取當前做用效果的字體的x的高度，在沒法肯定x高度的狀況下以0.5em計算(IE11及如下均不支持，firefox/chrome/safari/opera/ios safari/android browser4.4+等均需屬性加麼有前綴)

   • ch:以節點所使用字體中的「0」字符爲基準，找不到時爲0.5em(ie10+,chrome31+,safair7.1+,opera26+,ios safari 7.1+,android browser4.4+支持)

JS

1. console.log打印內容。

let a = 1;
    let obj = {
        a: 2,
        b() {
            console.log(this.a); // 2
        },
        c: () => {
            console.log(this.a); // 1 或者undefined
            //(此處主要是看運行環境，瀏覽器運行上下文windows是undefined)
        }
    }
    console.log(obj.b()); // undefined
    console.log(obj.c()); // undefined
複製代碼

2. new操做符的理解。

   let newObj = Object.create(new Object(), Func.prototype); let newObj = Func.call(newObj);

3. 數組遍歷的方法

   • for循環（for..of..）
   • forEach(function(item, index, array))
   • map(function(item, index, array))
   • filter(function(item, index, array))
   • every(function(item, index, array))檢測是否全部的元素都符合體條件，是返回true，不是返回false。
   • some(function(item, index, array))檢測是否有的元素都符合體條件，是返回true，不是返回false。)

   ES6之中的迭代器

   • entries（）返回鍵值對迭代器
   • keys() 返回索引迭代器
   • values() 返回數值迭代器

4. 數組去重方法，若是數組之中有多個NaN如何去重。

   工具類方法，或者使用ES6之中的Set對象也是十分方便的。不過這裏咱們須要注意的一件事情是，若是在數組之中擁有多個NaN的狀況的時候。若是過使用Set的話不用擔憂，NaN重複插入的時候其也會進行判斷。可是使用工具類的方法的時候咱們須要特殊處理。

5. 數組的排序方法，和數組倒敘。

   • 方法有不少，這裏咱們須要說一下sort方法，它是在元素組之上進行排序的，他是按照字符編碼進行排序的，因此咱們將數字傳遞進去的時候會是按照收尾字符進行大的排序，而後按照第二位字符對首位字符相同的進行排序。
   • 這裏再說一下數組倒敘，字符串倒敘也是經常會問的。咱們會使用reverse這個方法，它也是在原數組上面進行操做的，操做時須要注意啊。字符串的顛倒實際上也是可使用這一方法的，經過split方法來進行拆解，最後經過join方法在合併。

6. 時間複雜度和空間複雜度。

   • 時間頻度：一個算法的執行所須要消耗的時間。由於算法的時間複雜度和其中所須要執行的語句成正比。一個算法中的語句執行次數稱爲語句頻度或時間頻度，記爲T（n）

   • 時間複雜度：時間頻度之中n稱爲問題的規模，當n變化，T（n）也會不斷的變化，可是有的時候咱們想要知道它變化的規律，爲此引入時間複雜度的概念，若是存在某個輔助函數F（n）使得當n趨近於無窮大的時候T(n)/F(n)的極限值爲不等於零的常數，稱f(n)是T(n)的同數量級函數。記作T(n) = O(F(n));稱這爲算法的漸進時間複雜度，也就是時間複雜度。

   • 空間複雜度：空間複雜度實際上和時間複雜度概念相似，只是它是用來表示空間頻度的變化複雜形勢的。

7. addEventListener的第三個與以後參數內容。

   第三個參數傳遞boolean表示的的是useCapture，表示事件在事件捕獲階段調用。

8. 對於event-loop的理解。

   這裏提供篇文章

Vue

1. v-show和v-if的差異

   v-show： 樣式修改展現狀況。

   v-if： 判別是否渲染。因此v-if修飾的組件除非須要渲染不然不走生命週期

   問題：那麼v-if修飾組件的話，若是不渲染組件那麼組件的生命週期會執行嗎？

2. value變量深度觀察，對象變量元素改變觀察。

3. directive

4. 經常使用的生命週期函數有什麼，用在項目之中承接什麼邏輯。

5. Vue如何添加和刪除已有Vue實例之中的數據內容。