面試問題

時間 2019-11-08

原文原文鏈接

前端javascript

跨域問題css

　　同源：兩個文檔需知足：協議相同，域名相同，端口相同。html

　　跨域通訊：js進行DOM操做、通訊時若是目標與當前窗口不知足同源條件，瀏覽器爲了安全會阻止跨域操做。前端

　　跨域通訊一般有如下方法：vue

若是請求json數據，使用<script>進行jsonp請求
內部服務器代理請求跨域url，而後返回數據

call 和 apply 方法是作什麼的？有什麼區別？java

　　call, apply 方法是改變函數體內部 this 的指向。好比[].slice.call(對象,參數)node

　　區別：接收參數的方式不一樣。call是把參數按順序傳進去，而 apply 則是把參數放進一個數組中，把數組傳進去。webpack

箭頭函數的 thisios

　　箭頭函數不是function關鍵字定義的函數; 箭頭函數中的 this 在函數被定義的時候就已經綁定好了，而不是取決於誰調用這個函數，this就指向誰。箭頭函數的this取決於最近的一個非箭頭父級函數的this指向。web

var obj = {
  a: 10,
  b: () => {
    console.log(this.a); //undefined
    console.log(this); //window
  },
  c: function() {
    console.log(this.a); //10
    console.log(this); //obj{...}
  }
}
obj.b(); 
obj.c();

css 盒子模型

　　盒子的組成： margin + border + padding + content

什麼是閉包，應用場景？

　　將函數或方法做爲值傳遞，都會引發閉包。如C#中的Lambda表達式。

　　因爲JavaScript的垃圾回收機制，普通函數執行完以後，變量就會被直接回收。可是，閉包的方式可讓變量一直存在，不被回收。

function add () {
  var count = 0;
  function demo() {
    count ++;
    console.log(count);
  }
  return demo;
}
var counter = add();
counter();
counter();

什麼是 IIFE，應用場景？

　　IIFE：當即執行函數
　　IIFE中定義的任何變量和函數，都會在執行結束時被銷燬。適合作初始化工做。

(function() {
  var a = 123;
  var b = 234;
  console.log(a+b);
})()

如何實現繼承

　　設置原型鏈實現繼承一
　　缺點: 父類實例屬性爲引用類型時，不恰當地修改會致使全部子類被修改。

// Person.prototype --原型
function Person() {};
Person.prototype.name = 'sun';
var ppp  = new Person();

　　Object.create() 方式實現類繼承
　　這個方法會返回一個的一個新對象，帶着指定的原型對象和屬性

function Father() {
  this.name = 'sun';
  this.age = 18;
}
// 父類方法
Father.prototype.getName = function () {
  return this.name;
}
function Child() {
  Father.call(this); // call father constructor
}
// 子類繼承父類
Child.prototype = Object.create(Father.prototype);
Child.prototype.constructor = Child;

輸入url到渲染的過程

在瀏覽器地址欄輸入URL
瀏覽器查看緩存，若是請求資源在緩存中而且新鮮，跳轉到轉碼步驟：
若是資源未緩存，發起新請求； 若是已緩存，檢驗是否足夠新鮮，足夠新鮮直接提供給客戶端，不然與服務器進行驗證。檢驗新鮮一般有兩個HTTP頭進行控制Expires和Cache-Control：
HTTP1.0提供Expires，值爲一個絕對時間表示緩存新鮮日期
HTTP1.1增長了Cache-Control: max-age=,值爲以秒爲單位的最大新鮮時間
瀏覽器解析URL獲取協議，主機，端口，path
瀏覽器組裝一個HTTP（GET）請求報文
瀏覽器獲取主機ip地址，過程以下：
瀏覽器緩存
本機緩存
hosts文件
路由器緩存
ISP DNS緩存
DNS遞歸查詢（可能存在負載均衡致使每次IP不同）
打開一個socket與目標IP地址，端口創建TCP連接，三次握手以下：
客戶端發送一個TCP的SYN=1，Seq=X的包到服務器端口
服務器發回SYN=1， ACK=X+1， Seq=Y的響應包
客戶端發送ACK=Y+1， Seq=Z
TCP連接創建後發送HTTP請求
服務器接受請求並解析，將請求轉發到服務程序，如虛擬主機使用HTTP Host頭部判斷請求的服務程序
服務器檢查HTTP請求頭是否包含緩存驗證信息若是驗證緩存新鮮，返回304等對應狀態碼
處理程序讀取完整請求並準備HTTP響應，可能須要查詢數據庫等操做
服務器將響應報文經過TCP鏈接發送回瀏覽器
瀏覽器接收HTTP響應，而後根據狀況選擇關閉TCP鏈接或者保留重用，關閉TCP鏈接的四次握手以下：
主動方發送Fin=1， Ack=Z， Seq= X報文
被動方發送ACK=X+1， Seq=Z報文
被動方發送Fin=1， ACK=X， Seq=Y報文
主動方發送ACK=Y， Seq=X報文
瀏覽器檢查響應狀態嗎：是否爲1XX，3XX， 4XX， 5XX，這些狀況處理與2XX不一樣
若是資源可緩存，進行緩存
對響應進行解碼（例如gzip壓縮）
根據資源類型決定如何處理（假設資源爲HTML文檔）
解析HTML文檔，構件DOM樹，下載資源，構造CSSOM樹，執行js腳本，這些操做沒有嚴格的前後順序，如下分別解釋
構建DOM樹：
Tokenizing：根據HTML規範將字符流解析爲標記
Lexing：詞法分析將標記轉換爲對象並定義屬性和規則
DOM construction：根據HTML標記關係將對象組成DOM樹
解析過程當中遇到圖片、樣式表、js文件，啓動下載
構建CSSOM樹：
Tokenizing：字符流轉換爲標記流
Node：根據標記建立節點
CSSOM：節點建立CSSOM樹
根據DOM樹和CSSOM樹構建渲染樹
js解析
顯示頁面（HTML解析過程當中會逐步顯示頁面）

sessionStorage,localStorage,cookie區別

　　都會在瀏覽器端保存，有大小限制，同源限制
　　cookie會在請求時發送到服務器，做爲會話標識，服務器可修改cookie；web storage不會發送到服務器
　　cookie有path概念，子路徑能夠訪問父路徑cookie，父路徑不能訪問子路徑cookie
　　有效期：cookie在設置的有效期內有效，默認爲瀏覽器關閉；sessionStorage在窗口關閉前有效；localStorage長期有效，直到用戶刪除
　　共享：sessionStorage不能共享，localStorage在同源文檔之間共享，cookie在同源且符合path規則的文檔之間共享
　　localStorage的修改會促發其餘文檔窗口的update事件
　　瀏覽器不能保存超過300個cookie，單個服務器不能超過20個，每一個cookie不能超過4k。web storage大小支持能達到5M

css畫三角形

div1{
  border-style: solid;
  border-width: 0px 0px 100px 100px;
  border-color: transparent transparent blue transparent;
  width: 0px;
  height: 0px;
}

offsetHeight， clientHeight，scrollHeight 的區別

　　offsetWidth/ offsetHeight返回值包含 content + padding + border，效果與e.getBoundingClientRect()相同
　　clientWidth/ clientHeight 返回值只包含 content + padding，若是有滾動條，也不包含滾動條
　　scrollWidth/ scrollHeight 返回值包含 content + padding + 溢出內容的尺寸

前端須要注意的SEO

　　合理的title、description、keywords：搜索對着三項的權重逐個減少，title值強調重點便可，重要關鍵詞出現不要超過2次，並且要靠前，不一樣頁面title要有所不一樣；description把頁面內容高度歸納，長度合適，不可過度堆砌關鍵詞，不一樣頁面description有所不一樣；keywords列舉出重要關鍵詞便可

　　語義化的HTML代碼，符合W3C規範：語義化代碼讓搜索引擎容易理解網頁

　　重要內容HTML代碼放在最前：搜索引擎抓取HTML順序是從上到下，有的搜索引擎對抓取長度有限制，保證重要內容必定會被抓取

　　重要內容不要用js輸出：爬蟲不會執行js獲取內容

　　少用iframe：搜索引擎不會抓取iframe中的內容

　　非裝飾性圖片必須加alt

　　提升網站速度：網站速度是搜索引擎排序的一個重要指標

get 和 post 的區別　

　　只考慮語法來講，這兩個方式沒什麼區別， GET 和 POST 有不一樣的語義：
　　GET方式用做獲取信息； POST方式用做發送信息。
　　GET的數據在URL中對全部人都是可見的；POST的數據不會顯示在URL中。
　　GET對數據長度有限制，當發送數據時，GET方法向URL添加數據，最大長度是2048個字符。 POST無限制。

如何優化網站的性能

content方面:

減小HTTP請求：合併文件、CSS精靈
減小DNS查詢：DNS查詢完成以前瀏覽器不能從這個主機下載任何任何文件。方法：DNS緩存、將資源分佈到恰當數量的主機名，平衡並行下載和DNS查詢
避免重定向：多餘的中間訪問
使Ajax可緩存
非必須組件延遲加載
將來所需組件預加載
減小DOM元素數量
減小iframe數量

css/ js方面：

將樣式表放到頁面頂部
不使用CSS表達式
將件腳本放到頁面底部
將css和javascript從外部引入
壓縮javascript和css
減小DOM訪問
合理設計事件監聽器

什麼是漸進加強

　　漸進加強是指在web設計時強調可訪問性、語義化HTML標籤、外部樣式表和腳本。保證全部人都能訪問頁面的基本內容和功能同時爲高級瀏覽器和高帶寬用戶提供更好的用戶體驗。核心原則以下:

全部瀏覽器都必須能訪問基本內容
全部瀏覽器都必須能使用基本功能
全部內容都包含在語義化標籤中
經過外部CSS提供加強的佈局
經過非侵入式、外部javascript提供加強功能

axios和ajax區別

　　 axios是經過promise實現對ajax技術的一種封裝，就像jQuery實現ajax封裝同樣。axios 是一個基於Promise 用於瀏覽器和 nodejs 的 HTTP 客戶端，本質上也是對原生XHR的封裝，只不過它是Promise的實現版本，符合最新的ES規範，它自己具備如下特徵：

1.從瀏覽器中建立 XMLHttpRequest
2.支持 Promise API
3.客戶端支持防止CSRF
4.提供了一些併發請求的接口（重要，方便了不少的操做）
5.從 node.js 建立 http 請求
6.攔截請求和響應
7.轉換請求和響應數據
8.取消請求
9.自動轉換JSON數據

vue特色

　　（1）簡潔（2）輕量（3）快速（4）數據驅動（5）模塊友好（6）組件化

vue動畫鉤子

webpack簡介

　　Webpack 是一款強大的打包工具，在 Webpack 中一切皆模塊。Webpack 從一個入口文件開始遞歸地分析模塊的依賴關係，根據依賴關係將這些模塊打包成一個或多個文件。

經常使用的 loader：

　　Webpack 能夠處理任何非 js 語言，得益於社區提供的豐富的 loader，平常開發中所使用到的 loader，均可以在社區找到。這裏對一些經常使用的 loader 進行簡要的說明。

babel-loader 將 ES2015+ 代碼轉譯爲 ES5。
ts-loader 將 TypeScript 代碼轉譯爲 ES5。
css-loader 解析 @import 和 url()，並對引用的依賴進行解析。
style-loader 在 HTML 中注入 <style> 標籤將 css 添加到 DOM 中。一般與 css-loader 結合使用。
sass-loader 加載 sass/scss 文件並編譯成 css。
postcss-loader 使用 PostCSS 加載和轉譯 CSS文件。
html-loader 將 HTML 導出爲字符串。
vue-loader 加載和轉譯 Vue 組件。
url-loader 和 file-loader 同樣，但若是文件小於配置的限制值，能夠返回 data URL。
file-loader 將文件提取到輸出目錄，並返回相對路徑。

經常使用的插件

HtmlWebpack Plugin 自動生成入口文件，並將最新的資源注入到 HTML 中。
CommonsChunkPlugin 用以建立獨立文件，經常使用來提取多個模塊中的公共模塊。
DefinePlugin 用以定義在編譯時使用的全局常量。
DllPlugin 拆分 bundle 減小沒必要要的構建。
ExtractTextWebpack Plugin 將文本從 bundle 中提取到單獨的文件中。常見的場景是從 bundle 中將 css 提取到獨立的 css 文件中。
HotModuleReplacementPlugin 在運行過程當中替換、添加或刪除模塊，而無需從新加載整個頁面。
UglifyjsWebpack Plugin 對 js 進行壓縮，減少文件的體積。
CopyWebpack Plugin 將單個文件或整個目錄複製到構建目錄。一個經常使用的場景是將項目中的靜態圖片不經構建直接複製到構建後的目錄。

React父子組件如何進行通訊

　　父組件經過屬性向子組件傳值，子組件若是想操做父組件的數據，須要父組件想子組件傳遞一個方法，子組件經過這個方法間接的操做父組件數據。

React中的虛擬DOM

　　虛擬DOM就是一個js對象，用它來描述一個真實的DOM，當state中數據發生變化後，經過數據+模板生成新的虛擬DOM，經過比較原始虛擬DOM和新的虛擬DOM的區別，找到須要更新的DOM元素，比較JS對象能夠提示性能。