記錄一些前端面試題（帶答案）

時間 2019-11-11

標籤記錄一些端面試題答案简体版

原文原文鏈接

img的title和alt有什麼區別
title是global attributes之一，用於爲元素提供附加的advisory information。一般當鼠標滑動到元素上的時候顯示。
alt是img的特有屬性，是圖片內容的等價描述，用於圖片沒法加載時顯示、讀屏器閱讀圖片。可提圖片高可訪問性，除了純裝飾圖片外都必須設置有意義的值，搜索引擎會重點分析。javascript
doctype是什麼,舉例常見doctype及特色
咱們一般稱doctype爲doctype聲明，doctype是document type(文檔類型)的簡寫，用來講明咱們的HTML或者XHTML是什麼版本，它告訴瀏覽器應該用兼容模式仍是使用標準模式來渲染文檔。
在HTML4.01中<!doctype>聲明指向一個DTD，因爲HTML4.01基於SGML，因此DTD指定了標記規則以保證瀏覽器正確渲染內容
常見dotype：
- HTML4.01 strict
- HTML 5: <!doctype html>
HTML全局屬性
class
id
style
title
contextmenu
draggable
tabIndex
hiddencss
什麼Web是語義化？有什麼好處
Web語義化包含兩部分：HTML標籤的語義化與CSS命名語義化
HTML標籤語義化指使用具備必定語義的標籤來恰當的表示文檔結構
CSS命名語義化表示爲HTML標籤添加有意義的class與idhtml

使用Web語義化的好處前端

樣式去掉後頁面結構清晰
利於盲人閱讀
利於搜索引擎理解頁面，有利於收錄
利於後期維護java

HTTP

http是什麼

是超文本傳輸協議，是互聯網上應用最爲普遍的一種網絡協議。webpack

http做用

瀏覽器的地址框中輸入一個URL或是單擊一個超級連接時，URL就肯定了要瀏覽的地址。瀏覽器經過超文本傳輸協議(HTTP)，將Web服務器上站點的網頁代碼提取出來，並翻譯成漂亮的網頁。git

HTTP method

get post delete put head OPTIONS TRACEes6

get：GET是最經常使用的方法，一般用於請求服務器發送某個資源。
post：向指定的資源提交要被處理的數據。實際上，一般會用它來支持HTML的表單。表單中填好的數據一般會被送給服務器，而後由服務器將其發送到要去的地方。
delete：DELETE請求服務器刪除請求URL指定的資源

get與post的區別

getweb

GET 請求可被緩存
GET 請求保留在瀏覽器歷史記錄中
GET 請求可被收藏爲書籤
GET 請求不該在處理敏感數據時使用
GET 請求有長度限制
GET 請求只應當用於取回數據編程

post
POST 請求不會被緩存
POST 請求不會保留在瀏覽器歷史記錄中
POST 不能被收藏爲書籤
POST 請求對數據長度沒有要求

性能優化

頁面級優化

減小hHTTP請求
將頁面設計簡單
合理利用HTTP緩存
靜態資源進行合併與壓縮
CSS Sprites
Lasy Load
將外部腳本置於底部
按需加載javascript
將CSS放在HEAD中
防止瀏覽器尚未下載CSS就開始渲染頁面了，致使頁面出現五CSS到有CSS的跳轉。
避免重複資源的請求

代碼級優化

編寫高質量代碼，注意代碼質量
減小DOM操做
- HTML Collection（html蒐集器）
  document.images,document.froms,document.getElementsByTagName()返回的都是html collection集合，是一個類數組，也是動態查詢。每次訪問該集合都會從新查詢。
  解決方案：轉爲數組
慎用with語句
with會延長做用於鏈
避免使用eval和Function，腳本引擎每次都須要將裏面的源代碼轉爲可執行代碼，很是耗時，比簡單的函數調用慢100倍。
減小做用域鏈查找
- 把全局變量改成局部變量
字符串拼接
+比數據的join方法效率低
CSS選擇符
CSS選擇符是從右向左開始解析的。

Web綜合

什麼是W3C標準
W3C而是一系列標準的集合。網頁主要由三部分組成：結構（Structure）、表現（Presentation）和行爲（Behavior）。對應的標準也分三方面：結構化標準語言主要包括XHTML和XML，表現標準語言主要包括CSS，行爲標準主要包括對象模型（如W3C DOM）、ECMAScript等。這些標準大部分由W3C起草和發佈，也有一些是其餘標準組織制訂的標準，好比ECMA（European Computer Manufacturers Association）的ECMAScript標準。咱們來簡單瞭解一下這些標準：

前端須要注意哪些SEO

合理的title、description、keywords：搜索對着三項的權重逐個減少，title值強調重點便可，重要關鍵詞出現不要超過2次，並且要靠前，不一樣頁面title要有所不一樣；description把頁面內容高度歸納，長度合適，不可過度堆砌關鍵詞，不一樣頁面description有所不一樣；keywords列舉出重要關鍵詞便可
語義化的HTML代碼，符合W3C規範：語義化代碼讓搜索引擎容易理解網頁
重要內容HTML代碼放在最前：搜索引擎抓取HTML順序是從上到下，有的搜索引擎對抓取長度有限制，保證重要內容必定會被抓取
重要內容不要用js輸出：爬蟲不會執行js獲取內容
少用iframe：搜索引擎不會抓取iframe中的內容
非裝飾性圖片必須加alt
提升網站速度：網站速度是搜索引擎排序的一個重要指標

grunt glup webpack區別

Gulp/Grunt是一個構建工具，能夠配合各類插件作js壓縮，css壓縮，less編譯替代手工實現自動化工做
webpack是文件打包工具，能夠把項目的各類js文、css文件等打包合併成一個或多個文件，主要用於模塊化方案，預編譯模塊的方案

seajs / require : 是一種在線"編譯" 模塊的方案，至關於在頁面上加載一個 CMD/AMD 解釋器。這樣瀏覽器就認識了 define、exports、module 這些東西。也就實現了模塊化。
browserify / webpack : 是一個預編譯模塊的方案，相比於上面，這個方案更加智能。這裏以webpack爲例。首先，它是預編譯的，不須要在瀏覽器中加載解釋器。另外，你在本地直接寫JS，不論是 AMD / CMD / ES6 風格的模塊化，它都能認識，而且編譯成瀏覽器認識的JS。

common AMD CDM ES6

　commonjs是用在服務器端的，同步的，NodeJS是這種規範的實現
根據CommonJS規範，一個單獨的文件就是一個模塊。加載模塊使用require方法，該方法讀取一個文件並執行，最後返回文件內部的exports對象。
Node.js主要用於服務器的編程，加載的模塊文件通常都已經存在本地硬盤，因此加載起來比較快，不用考慮異步加載的方式

AMD是異步加載模塊，是用在瀏覽器端的，異步的，requirejs採用的是AMD
AMD規範適用define方法定義模塊。

//經過數組引入依賴 ，回調函數經過形參傳入依賴 
define(['someModule1', ‘someModule2’], function (someModule1, someModule2) { 
    function foo () { 
        // someing 
        someModule1.test(); 
    } 
    return {foo: foo} 
}); 
// AMD規範容許輸出模塊兼容CommonJS規範，這時define方法以下： 
define(function (require, exports, module) { 
    var reqModule = require("./someModule"); 
    requModule.test();  
    exports.asplode = function () { 
        //someing 
    } 
});

CMD是通用模塊定義，是用在瀏覽器端的，異步的，seajs採用的CMD

CMD和AMD的區別:CMD至關於按需加載，定義一個模塊的時候不須要當即制定依賴模塊，在須要的時候require就能夠了，比較方便；而AMD則相反，定義模塊的時候須要制定依賴模塊，並以形參的方式引入factory中。

requireJS與seaJS

聯繫

RequireJS 和 Sea.js 都是模塊加載器，倡導模塊化開發理念，核心價值是讓 JavaScript 的模塊化開發變得簡單天然。

區別

定位有差別。RequireJS 想成爲瀏覽器端的模塊加載器，同時也想成爲 Rhino / Node 等環境的模塊加載器。Sea.js 則專一於 Web 瀏覽器端，同時經過 Node 擴展的方式能夠很方便跑在 Node 環境中。
遵循的規範不一樣。RequireJS 遵循 AMD（異步模塊定義）規範，Sea.js 遵循 CMD （通用模塊定義）規範。規範的不一樣，致使了二者 API 不一樣。Sea.js 更貼近 CommonJS Modules/1.1 和 Node Modules 規範。
推廣理念有差別。RequireJS 在嘗試讓第三方類庫修改自身來支持 RequireJS，目前只有少數社區採納。Sea.js 不強推，採用自主封裝的方式來「海納百川」，目前已有較成熟的封裝策略。
對開發調試的支持有差別。Sea.js 很是關注代碼的開發調試，有 nocache、debug 等用於調試的插件。RequireJS 無這方面的明顯支持。
插件機制不一樣。RequireJS 採起的是在源碼中預留接口的形式，插件類型比較單一。Sea.js 採起的是通用事件機制，插件類型更豐富。

MV*

MVC

MVC的意思是軟件能夠分爲三部分

視圖（View）：用戶界面。
控制器（Controller）：業務邏輯
模型（Model）：數據保存

View 傳送指令到 Controller
Controller 完成業務邏輯後，要求 Model 改變狀態
Model 將新的數據發送到 View，用戶獲得反饋

互動模式有兩種

一種是經過 View 接受指令，傳遞給 Controller。
另外一種是直接經過controller接受指令。

MVP

MVP 模式將 Controller 更名爲 Presenter，同時改變了通訊方向。

各部分之間的通訊，都是雙向的。
View 與 Model 不發生聯繫，都經過 Presenter 傳遞。
View 很是薄，不部署任何業務邏輯，稱爲"被動視圖"（Passive View），即沒有任何主動性，而 Presenter很是厚，全部邏輯都部署在那裏。

MVVM

MVVM 模式將 Presenter 更名爲 ViewModel，基本上與 MVP 模式徹底一致。

惟一的區別是，它採用雙向綁定（data-binding）：View的變更，自動反映在 ViewModel

git svn

Git是分佈式的，SVN是集中式的
SVN 是集中式的，會出現耦合。但從另一個方面來講，這也要求開發人員代碼的規範：不要一個函數幹不少事情，不要一個文件寫不少個類。
git仍然可以提交文件，查看歷史版本記錄，建立項目分支

集中式與分佈式區別

集中式：是將項目集中存放在中央服務器中，在工做的時候，你們只在本身電腦上操做，從同一個地方下載最新版本，而後開始工做，作完的工做再提交給中央服務器保存。這種方式須要聯網，如今雲開發就是這樣的處理方式。
分佈式開發：只要提供一臺電腦做爲版本集中存的服務器放就夠了，但這個服務器的做用僅僅是用來方便「交換」你們的修改，沒有它也同樣幹活，只是交換修改不方便而已。而每一臺電腦有各自獨立的開發環境，不須要聯網，本地直接運行，相對集中式安全係數高不少。