CSS浮動怎么理解的
浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
由于浮動框不在文檔的普通流中，也就是脫離文檔流，所以文檔的普通流中的塊框表現得就像浮動框不存在一樣。一般使用float來實現浮動，聯系=》清除浮動的相關方法。27題

絕對定位相對定位怎么理解
absolute：絕對定位，將對象從文檔流中拖離出來，使用left/right/top/bottom等屬性相對其最接近的一個并有定位設置的父元素進行絕對定位；如果不存在這樣的父對象，則依據根元素(html)《瀏覽器》進行定位，而其層疊通過z-index屬性定義。
relative ：相對定位，該對象的文檔流位置不動，將依據right，top，left，bottom（相對定位）等屬性在正常文檔流中偏移位置；其層疊通過z-index屬性定義

塊元素和行內元素、行內塊什么區別
1.行內元素
　　行內元素最常使用的就是span，其他的只在特定功能下使用，修飾字體和標簽，還有_{和^{這兩個標簽可以直接做出平方的效果，而不需要類似移動屬性的幫助，很實用。
　　行內元素特征：(1)設置寬高無效
　　　　　　　　　(2)對margin僅設置左右方向有效，上下無效；padding設置上下左右都有效，即會撐大空間
　　　　　　　　　(3)不會自動進行換行
2.塊狀元素
　　塊狀元素代表性的就是div，其他如p、nav、aside、header、footer、section、article、ul-li、address等等，都可以用div來實現。不過為了可以方便程序員解讀代碼，一般都會使用特定的語義化標簽，使得代碼可讀性強，且便于查錯。
　　塊狀元素特征：(1)能夠識別寬高
　　　　　　　　　(2)margin和padding的上下左右均對其有效
　　　　　　　　　(3)可以自動換行
　　　　　　　　　(4)多個塊狀元素標簽寫在一起，默認排列方式為從上至下
3.行內塊狀元素
　　行內塊狀元素綜合了行內元素和塊狀元素的特性，但是各有取舍。因此行內塊狀元素在日常的使用中，由于其特性，使用的次數也比較多。
　　行內塊狀元素特征：(1)不自動換行
　　　　　　　　　　　(2)能夠識別寬高
　　　　　　　　　　　(3)默認排列方式為從左到右
這三者是可以互相轉換的，使用display屬性能夠將三者任意轉換：
　　(1)display:inline;轉換為行內元素
　　(2)display:block;轉換為塊狀元素
　　(3)display:inline-block;轉換為行內塊狀元素}}

Css如何實現盒子水平垂直居中
第一種：
.parent {
position: relative;
}
.child {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
第二種：
.parent {
position: relative;
}
.child {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
第三種：
.middle{
width:100px;
height:100px;
background-color:tomato;
/* 水平垂直居中*/
position: absolute;
top:50%;
left:50%;
margin: -50px 0 0 -50px;
}
第四種：
#container{
width:100%;
height: 100%;
/* 子元素middle垂直居中 */
display: flex;
justify-content: center; // 水平居中
align-items:center; // 垂直居中
}
第五種：
#container{
width:100%;
height: 100%;
display: flex;
}
.middle{
width:100px;
height:100px;
background-color:tomato;
margin:auto;
}

Href 和 src的區別
1.href：Hypertext Reference的縮寫，超文本引用，它指向一些網絡資源，建立和當前元素或者說是本文檔的鏈接關系。在加載它的時候，不會停止對當前文檔的處理，瀏覽器會繼續往下走。常用在a、link等標簽。
2.src：source的所寫，表示的是對資源的引用，它指向的內容會嵌入到當前標簽所在的位置。由于src的內容是頁面必不可少的一部分，因此瀏覽器在解析src時會停下來對后續文檔的處理，直到src的內容加載完畢。常用在script、img、iframe標簽中，我們建議js文件放在HTML文檔的最后面。如果js文件放在了head標簽中，可以使用window.onload實現js的最后加載。
總結：href用于建立當前頁面與引用資源之間的關系（鏈接），而src則會替換當前標簽。遇到href，頁面會并行加載后續內容；而src則不同，瀏覽器需要加載完畢src的內容才會繼續往下走。

Px和Rem的區別
px：絕對單位，頁面按精確像素展示。
rem：相對單位， 相對根節點html的字體大小來計算，CSS3新加屬性。

html5中新增哪些api
多媒體：baivideo、audio、
游戲：canvas、webgl、
存儲du：localstorage、sessonstorage、websql、indexedDB
網絡：websocket

html5新增哪些標簽
h5是html的最新版本，是14年由baiw3c完成標準制du定。增強了，瀏覽zhi器的原生功能，減少瀏覽器插件（eg：flash）的應用，提dao高用戶體驗滿意度，讓開發更加方便。- h5新增的標簽
新增元素
說明
video 表示一段視頻并提供播放的用戶界面
audio 表示音頻
canvas 表示位圖區域
source 為video和audio提供數據源
track 為video和audio指定字母
svg 定義矢量圖
code 代碼段
figure 和文檔有關的圖例
figcaption 圖例的說明
main
time 日期和時間值
mark 高亮的引用文字
datalist 提供給其他控件的預定義選項
keygen 秘鑰對生成器控件
output 計算值
progress 進度條
menu 菜單
embed 嵌入的外部資源
menuitem 用戶可點擊的菜單項
menu 菜單
template
section
nav
aside
article
footer
header

移動端怎么做適配
一：meta viewport
meta viewport屬性主要是讓viewport的寬度等于當前設備的寬度，也可以按照需求來限制用戶是否可以縮放。

你們以前移動端是怎么寫的
布局，寫樣式，寫功能，上線

你們以前移動端是怎么布局的
1.固定meta視圖
1
　　這種寫法中，利用meta標簽，將視圖寬度定位了750px，固定值，也就是ios6的標準，然后css也是基于750px的設計稿進行布局。
優點：前端開發十分快速，都是死值。
缺點：匹配不完全，手機像素高于這個的，顯示這個效果，不理想狀態；低于這個狀態的，不兼容這個狀態；固定寬在做項目的時候由于每個手機屏幕的高度不同需要有一個最小的內容區域。
2.rem布局
rem是一種基于頁面根元素的布局方式
當手機屏幕大小改變了，只要改變對應的頁面根元素，就可以實現頁面的縮小放大。按照750px的設計稿，進行布局的時候 可以在head中添加下圖的一段j，監聽屏幕改變，從而動態改變頁面根元素的fonsize大小，對頁面進行縮放改變
換句話說 設置根元素 fontsize=16px 那么 1rem=16px，所以根據屏幕大小 而動態改變 fontsize的值，從而做到 移動端rem適配效果。

你對語義化標簽是怎么理解的？有什么好處？
什么是標簽語義化？
<基本上都是圍繞著幾個主要的標簽，像標題（H1~H6）、列表（li）、強調（strong em）等等>
根據內容的結構化（內容語義化），選擇合適的標簽（代碼語義化）便于開發者閱讀和寫出更優雅的代碼的同時讓瀏覽器的爬蟲和機器很好地解析。
標簽語義化有什么意義？
為了在沒有CSS的情況下，頁面也能呈現出很好地內容結構、代碼結構:為了裸奔時好看；
用戶體驗：例如title、alt用于解釋名詞或解釋圖片信息、label標簽的活用；
有利于SEO：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標簽來確定上下文和各個關鍵字的權重；
方便其他設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網頁；
便于團隊開發和維護，語義化更具可讀性，是下一步吧網頁的重要動向，遵循W3C標準的團隊都遵循這個標準，可以減少差異化。

Css3動畫有哪些
2D：transform屬性，包括位移translate()、旋轉rotate()、縮放scale()、傾斜skew()
3D：transform-style屬性，有兩個屬性值：flat和preserve-3d，包括3D位移translate3d(tx,ty,tz)、3D旋轉rotate3d(x,y,z,a)、3D縮放scale3d(sx,sy,sz)

使用 CSS 預處理器嗎？喜歡哪個？
工作流程：
各種預處理器語法不一樣，但最終工作流程是一樣的，以Sass為例。
以Sass提供的語法規則編寫樣式代碼
經過編譯器把Sass編寫的代碼轉換成標準的CSS代碼
瀏覽器加載解析轉換后的CSS樣式（瀏覽器只能解析標準的CSS代碼，而不能是Sass等）
主流CSS預處理器：
Sass，2007，最早最成熟的CSS預處理器，有兩種語法，分別以 .sass 和 .scss 為擴展名。SCSS是Sass 3引入的新語法，完全兼容CSS3，并繼承了Sass的強大功能，和CSS語法結構更接近
Less，2009，受Sass影響大，以 .less 為擴展名
Stylus，2010，來自Node.js社區，主要用來給Node項目進行CSS預處理支持，以 .styl 為擴展名
可以在CSS預處理器中：使用變量、簡單邏輯判斷、函數等基本編程技巧。

CSS優化、提高性能的方法有哪些？
1，首推的是合并css文件，如果頁面加載10個css文件，每個文件1k，那么也要比只加載一個100k的css文件慢。
2，減少css嵌套，最好不要套三層以上。
3，不要在ID選擇器前面進行嵌套，ID本來就是唯一的而且人家權值那么大，嵌套完全是浪費性能。
4，建立公共樣式類，把相同樣式提取出來作為公共類使用，比如我們常用的清除浮動等。
5，減少通配符*或者類似[hidden=“true”]這類選擇器的使用，挨個查找所有…這性能能好嗎？當然重置樣式這些必須 的東西是不能少的。
6，巧妙運用css的繼承機制，如果父節點定義了，子節點就無需定義。
7，拆分出公共css文件，對于比較大的項目我們可以將大部分頁面的公共結構的樣式提取出來放到單獨css文件里， 這樣一次下載后就放到緩存里，當然這種做法會增加請求，具體做法應以實際情況而定。
8，不用css表達式，表達式只是讓你的代碼顯得更加炫酷，但是他對性能的浪費可能是超乎你的想象的。
9，少用css rest，可能你會覺得重置樣式是規范，但是其實其中有很多的操作是不必要不友好的，有需求有興趣的 朋友可以選擇normolize.css
10，cssSprite，合成所有icon圖片，用寬高加上bacgroud-position的背景圖方式顯現出我們要的icon圖，這是一種 十分實用的技巧，極大減少了http請求。
11，當然我們還需要一些善后工作，CSS壓縮(這里提供一個在線壓縮 YUI Compressor ，當然你會用其他工具來壓縮是十 分好的)，
12，GZIP壓縮，Gzip是一種流行的文件壓縮算法，詳細做法可以谷歌或者百度

怎么讓Chrome支持小于12px 的文字
通過對文字區域局部應用以下樣式解決：針對谷歌瀏覽器內核，加webkit前綴，用transform:scale()這個屬性進行縮放。

CSS3有哪些新特性？
1.CSS3實現圓角（border-radius），陰影（box-shadow），
2.對文字加特效（text-shadow、），線性漸變（gradient），旋轉（transform）
3.transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋轉,縮放,定位,傾斜
4.增加了更多的CSS選擇器 多背景 rgba
5.在CSS3中唯一引入的偽元素是 ::selection.
6.媒體查詢，多欄布局
7.border-image

html5有哪些新特性、移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問題？如何區分HTML和HTML5？
新特性：

拖拽釋放(Drag and drop) API

語義化更好的內容標簽（header,nav,footer,aside,article,section）

音頻、視頻API(audio,video)

畫布(Canvas) API

地理(Geolocation) API

本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉后數據不丟失；

sessionStorage 的數據在瀏覽器關閉后自動刪除

表單控件，calendar、date、time、email、url、search

新的技術webworker, websocket, Geolocation
移除的元素：

純表現的元素：basefont，big，center，font, s，strike，tt，u；

對可用性產生負面影響的元素：frame，frameset，noframes；
支持HTML5新標簽：

IE8/IE7/IE6支持通過 document.createElement 方法產生的標簽，可以利用這一特性讓這些瀏覽器支持 HTML5 新標簽，瀏覽器支持新標簽后，還需要添加標簽默認的樣式（當然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架）：

::before 和 :after中雙冒號和單冒號 有什么區別？
· 在 CSS 中偽類一直用 : 表示，如 :hover, :active ,:visited,:link等
· 偽元素在CSS1中已存在，當時語法是用 : 表示，如 :before 和 :after
· 后來在CSS3中修訂，偽元素用 :: 表示，如 ::before 和 ::after，以此區分偽元素和偽類
· 由于低版本IE對雙冒號不兼容，開發者為了兼容性各瀏覽器，繼續使使用 :after 這種老語法表示偽元素
· 綜上所述：::before 是 CSS3 中寫偽元素的新語法； :after 是 CSS1 中存在的、兼容IE的老語法

說下遇到的各種兼容性的處理方法？
1、不同瀏覽器的標簽默認的margin和padding不同
解決方案：可以使用Normalize來清除默認樣式。
2、塊屬性標簽float后，又有橫行的margin情況下，在IE6顯示margin比設置的大。
解決方案：在float的標簽樣式控制中加入 display:inline;將其轉化為行內屬性
3、設置較小高度標簽（一般小于10px），在IE6，IE7中高度超出自己設置高度
解決方案：給超出高度的標簽設置overflow:hidden;
4、阻止事件冒泡
e.stopPropagation()；ie:window.event.cancelBubble = true;

Html盒模型的不同？
w3c的盒子模型： padding和border不被包含在定義的width和height之內。對象的實際寬度等于設置的width值和border、padding之和，即 ( Element width = width + border + padding ) 此屬性表現為標準模式下的盒模型。
IE的盒子模型： padding和border被包含在定義的width和height之內。對象的實際寬度就等于設置的width值，即使定義有border和padding也不會改變對象的實際寬度，即 ( Element width = width ) 。
一般都使用標準的w3c盒子模型，如果需要使用IE的盒子模型，可以使用box-sizing屬性進行修改。
W3C盒模型是與IE盒模型的區別就是對寬高的定義不同。
W3C認為：寬高是內容區的寬度（只包含節點顯示的具體內容）content-box
IE認為：寬高是顯示效果的實際效果（包含節點的全部內容）border-box

響應式布局
響應式布局概念
Responsive design，意在實現不同屏幕分辨率的終端上瀏覽網頁的不同展示方式。通過響應式設計能使網站在手機和平板電腦上有更好的瀏覽閱讀體驗。·
響應式設計的步驟

設置 Meta 標簽

通過媒介查詢來設置樣式 Media Queries

設置多種試圖寬度

透明度opacity和rgba的區別？
rgba()和opacity都能實現透明效果，但最大的不同是opacity作用于元素，以及元素內的所有內容的透明度，而rgba()只作用于元素的顏色或其背景色。（設置rgba透明的元素的子元素不會繼承透明效果！）使用Opacity時，背景和背景內的元素都會透明；而rgba()只會讓背景透明。

兼容IE8以下的瀏覽器你是如何編寫css樣式的

IE hacks:
“_” 是IE6 專有的hack;
“\9” 對IE6-IE10都有效；
"\0"對IE8-IE10都有效；
"\9\0"對IE9-IE10都有效；
優點:
CSS hacks 內嵌在普通的 CSS 里面，不會產生更多 HTTP 請求。CSS hacks 內嵌在普通的 CSS 里面，編寫時比較方便。
缺點:
　　 它是不標準的產物。內嵌在其他 CSS 中，不便維護。尤其是當 hacks 的數量比較多的時候維護簡直是個惡夢。內嵌在其他 CSS 中，即使在非 IE 瀏覽器中也會被加載，浪費資源。
2.條件注釋 CSS:

Ajax同步和異步怎么理解的
AJAX的核心是客戶端的JavaScript程序能夠實現異步執行,異步執行是相對與同步執行的.同步執行意味著代碼必須順序執行.

Js面相對象是怎么理解的
ECMAScript 有兩種開發模式：1.函數式(過程化)，2.面向對象(OOP)。面向對象的語言有一個標志，那就是類的概念，而通過類可以創建任意多個具有相同屬性和方法的對象。但是，ECMAScript 沒有類的概念，因此它的對象也與基于類的語言中的對象有所不同。
js（如果沒有作特殊說明，本文中的js僅包含ES5以內的內容）本身是沒有class類型的，但是每個函數都有一個prototype屬性。prototype指向一個對象，當函數作為構造函數時，prototype則起到類似class的作用。

Js寫過原生插件嗎？
寫過，比如輪播圖插件，運動插件，煙花特效插件

Js閉包是如何理解的
在一個函數內部創建另一個函數，通過另一個函數訪問這個函數的局部變量，將函數內部的變量和方法傳遞到外部。
簡單來說就算將函數內部和函數外部連接起來。

apply和call的區別
Apply：B.apply(A, arguments);即A對象應用B對象的方法。第一個參數是對象，第二個參數是是一個數組，是要替換的數據集合
Call：B.call(A, args1,args2);即A對象調用B對象的方法。第一個參數是對象，第二個往后參數是是要替換的數據

js中數組后面添加數據 數組前面添加數據 數組后面刪除數據 數組前面刪除數據用什么？
push、unshift、pop、shift

請描述一下cookies，sessionStorage和localStorage的區別？
相同點：都存儲在客戶端
不同點：
1.存儲大小
cookie數據大小不能超過4k。
sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大。
2.有效時間
localStorage 存儲持久數據，瀏覽器關閉后數據不丟失除非主動刪除數據；
sessionStorage 數據在當前瀏覽器窗口關閉后自動刪除。
cookie 設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉

數據與服務器之間的交互方式
cookie的數據會自動的傳遞到服務器，服務器端也可以寫cookie到客戶端
sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。

你對localStorage是怎么理解的？
localStorage 和 sessionStorage 屬性允許在瀏覽器中存儲 key/value 對的數據。
localStorage 用于長久保存整個網站的數據，保存的數據沒有過期時間，直到手動去刪除。
localStorage 屬性是只讀的

跨域請求是怎么理解的？
也就是觸發同源策略（同域名同協議同端口），跨域交互數據有幾種方法，jsonp（script、src、href還有ajajx等）、cors服務器代理、API

Post和get的區別是怎么理解的？
GET

什么情況下面存在跨域
端口、協議、域名其一不一樣就會存在

你如何處理后臺接口返回的數據
通過json轉換成前端能識別的代碼

開發過程中遇到的內存泄露情況，如何解決的？
1、定義和用法：
內存泄露是指一塊被分配的內存既不能使用，又不能回收，直到瀏覽器進程結束。C#和Java等語言采用了自動垃圾回收方法管理內存，幾乎不會發生內存泄露。我們知道，瀏覽器中也是采用自動垃圾回收方法管理內存，但由于瀏覽器垃圾回收方法有bug，會產生內存泄露。
2、內存泄露的幾種情況:
(1)、當頁面中元素被移除或替換時，若元素綁定的事件仍沒被移除，在IE中不會作出恰當處理，此時要先手工移除事件，不然會存在內存泄露。
(2)、由于是函數內定義函數，并且內部函數–事件回調的引用外暴了，形成了閉包。閉包可以維持函數內局部變量，使其得不到釋放。
實例如下

網站如何優化？
減少http請求 代碼合并整合

網站加載速度慢如何優化
提高網速、靜態化生成頁面、減少http請求，整合css代碼和js代碼、壓縮圖片

網站seo優化有哪些方法？
1、戰略的制定：通過數據分析用戶需求和競爭對手，找出SEO優化的突破口。
2、關鍵詞挖掘：根據用戶需求和SEO優化的突破口進行關鍵詞挖掘。
3、網站搭建：按照戰略目標，有計劃的制定網站建設框架，網站搭建分為幾個步驟：導航設計、頁面框架、確定草圖、設計設置展示。網站搭建之后就可以根據我們之前設計的框架對導航、首頁、目錄頁、內頁的標題和url進行設置了，同時也可以根據內容框架開始給網站填充內容。
4、優化戰略制定：首先，戰略制定是SEO基礎操作必須做好的一個工作。所謂的戰略的制定就是我們要通過數據分析滿足到我們網站的用戶最大的搜索需求，并且通過對比競爭對手找到最適合的SEO優化方向。戰略制定分為四個部分。
Seo針對搜索引擎操作的

一次完整的HTTP事務是怎樣的一個過程？
客戶端輸入url回車后解析成ip地址向服務器發送請求（三次握手），服務器端接收請求，查看路徑，給你做出響應
服務器響應，數據到了前端，渲染到頁面中

你以前用過哪些js庫和框架
jQuery、Angular、vue、react

ajax請求時，如何解釋json數據
JSON.parse(xhr.responseText)

如何阻止事件冒泡和默認事件
阻止默認事件
非IE
e.stopPropagation();
IE
window.event.cancelBubble = true;
阻止默認事件
//全支持
// event.preventDefault();
//該特性已經從 Web 標準中刪除，雖然一些瀏覽器目前仍然支持它，但也許會在未來的某個時間停止支持，請盡量不要使用該特性。
// window.event.returnValue = false;
//不建議濫用，jq中可以同時阻止冒泡和默認事件
// return false;
// 兼容
// stopDefault(event)

解釋jsonp的原理，以及為什么不是真正的ajax
①Ajax與JSONP這兩種技術看起來很像，目的也一樣，都是請求一個url，然后把服務器返回的數據進行處理，因此jQuery等框架都把JSONP作為Ajax的一種形式。
②實際上Ajax與JSONP有著本質上的不同。Ajax的核心是通過XMLHttpRequest獲取數據，而JSONP的核心則是動態添加

Jquery與jQuery UI有啥區別？
jQuery UI 與 jquery 的主dao要區別是： 　
　(1) jQuery是一du個js庫，主要提供的zhi功能是選擇器，屬性dao修改和事件綁定內等等。 　
　(2) jQuery UI則是在容jQuery的基礎上，利用jQuery的擴展性，設計的插件。提供了一些常用的界面元素，諸如對話框、拖動行為、改變大小行為等等。 　
　(3) jQuery本身注重于后臺，沒有漂亮的界面，而jQuery UI則補充了前者的不足，他提供了華麗的展示界面，使人更容易接受。既有強大的后臺，又有華麗的前臺。jQuery UI是jQuery插件，只不過專指由jQuery官方維護的UI方向的插件。

Zepto如何理解的
Zepto是一個輕量級的針對現代高級瀏覽器的JavaScript庫， 它與jquery有著類似的api。 如果你會用jquery，那么你也會用zepto。
zepto與jquery的區別
jquery針對pc端，主要用于解決瀏覽器兼容性問題，zepto主要針對移動端。
zepto比jquery輕量，文件體積更小
zepto封裝了一些移動端的手勢事件
zepto的使用與jquery基本一致，zepto是分模塊的，需要某個功能，就需要引入某個zepto的文件。

requireJS是怎么理解的
RequireJS 是一個JavaScript模塊加載器。
在ES6出現之前，JS不像其他語言同樣擁有“模塊”這一概念，于是為了支持JS模塊化，出現了各種各樣的語言工具，如webpack，如ReuqireJS。
模塊化：模塊化就是將不同功能的函數封裝起來，并提供使用接口，他們彼此之間互不影響。
· 不會阻塞頁面：RequireJS，會在相關的js加載后執行回調函數，這個過程是異步的，所以它不會阻塞頁面。
· 按需加載：平時我們寫html文件的時候，在底部可能會引用一堆js文件。在頁面加載的時候，這些js也會全部加載。使用require.js就能避免此問題。舉個例子，比如說我寫了一個點擊事件，放到了一個js文件里，并在html引用，在不使用require.js的情況下，頁面加載它跟著加載，使用后則是什么時候觸發點擊事件，什么時候才會加載js。
require.js將javascript模塊化確實比較好用，語法也簡單，主要掌握三個語法就能實現一定的功能，即require.config()、require()、define()。但可惜自從webpack出現后，RequireJs幾乎退出了人們的視野，官網也不再升級版本，后續出現的框架如angular、React、Vue又將前端模塊上升到了另外一個高度。跟隨前端時代的變遷固然重要，但有時，嘗試一些“老技術”也無可厚非，或許也能給我們帶來不同的體。

jQuery的優點
（1）輕量級：JQuery非常輕巧，采用Dean Edwards編寫的Packer壓縮后，大小不到30KB,如果使用Min版并且在服務器端啟用Gzip壓縮后，大小只有18KB。
（2）強大的選擇器：JQuery允許開發者使用從CSS1到CSS3幾乎所有的選擇器，以及JQuery獨創的高級而且復雜的選擇器，另外還可以加入插件使其支持XPath選擇器，甚至開發者可以編寫屬于自己的選擇器。
（3）出色的DOM操作的封裝：JQuery封裝了大量常用的DOM操作，使開發者在編寫DOM操作相關程序的時候能夠得心應手。
（4）可靠的事件處理機制：JQuery的事件處理機制吸收了JavaScript專家Dean Edwards編寫的事件處理函數的精華，是的JQuery在處理事件綁定的時候相當可靠。
（5）完善的Ajax：JQuery將所有的Ajax操作封裝到一個函數也可以隨時交流控制權，絕對不會污染其他的對象。該特性是JQuery可以與其他JavaScript庫共存，在項目中放心地引用而不需要考慮到后期的沖突。
（7）出色的瀏覽器兼容性：JQuery能夠在IE6.0+,FF 2+,Safari2.+和Opera9.0+下正常運行。JQuery同時修復了一些瀏覽器之間的的差異，使開發者不必在開展項目前建立瀏覽器兼容庫。
（8）鏈式操作方式：JQuery中最有特色的莫過于它的鏈式操作方式——即對發生在同一個JQuery對象上的一組動作，可以直接接連寫無需要重復獲取對象。這一特點使得JQuery的代碼無比優雅。
（9）隱式迭代：當用JQuery找到帶有“.myClass”類的全部元素，然后隱藏他們時。無需循環遍歷每一個返回的元素。相反，JQuery里的方法都被設計成自動操作的對象集合，而不是單獨的對象，這使得大量的循環結構變得不再必要，從而大幅度地減少代碼量。
（10）行為層與結構層的分離：開發者可以使用選擇器選中元素，然后直接給元素添加事件。
（11）豐富的插件：JQuery的易擴展性，吸引了來自全球開發者來編寫JQuery的擴展插件。目前已經有超過幾百種官方插件支持，而且還不斷有新插件面試。
（12）完善的文檔：JQuery的文檔非常豐富，現階段多位英文文檔，中文文檔相對較少。很多熱愛JQuery的團隊都在努力完善JQuery中文文檔，例如JQuery的中文API。
（13）開源：JQuery是一個開源的產品，任何人都可以自由地使用并提出修改意見。

懶加載的原理？
意義：懶加載的主要目的就是作為服務器前端的優化，減少請求次數或者延遲請求數。
實現原理:先加載一部分數據，當觸發某個條件時利用異步(async)加載剩余的數據，新得到的數據不會影響原有數據的顯示，同時最大幅度的減少服務器端資源耗用。

數組的所有遍歷方法，包括es6
1.For循環 2.forEach循環 3.map循環 4.for of遍歷 5.for in遍歷 6.filter遍歷
7.every遍歷 8.some遍歷 9.indexOf 10.find 11.findIndex 12.includes 13.reduce
14.reduceRight

說下事件委托是什么？有什么好處？
事件委托就是利用事件冒泡機制指定一個事件處理程序，來管理某一類型的所有事件。
即：利用冒泡的原理，把事件加到父級上，觸發執行效果。
好處：

只在內存中開辟了一塊空間，節省資源同時減少了dom操作，提高性能

對于新添加的元素也會有之前的事件。

開發過程中有什么編碼規范？
HTML規范
一.DOCTYPE的聲明: 每個HTML開頭使用！doctype來啟用標準模式聲明，在此建議使用HTML5的聲明模式
二.字符集和編碼字符: 在每個頁面的head中設置字符集，一般都是使用"UTF-8"
三.語法: 使用四個空格的縮進 在屬性上使用雙引號 不要忽略可選的關閉標簽
四.引入css樣式以及js腳本: 需要采用外鏈的形式引入css樣式/js腳本，方便管理和修改
五.正確的標簽嵌套
除了固定的嵌套規則（如ul包含li，ol包含li等），一般遵循以下規則：
1.塊級元素與塊級元素平級、內聯元素與內聯元素平級
2.塊級元素可以包含內聯元素或某些塊級元素，但內聯元素不能包含塊級元素
3.有幾個特殊的塊級元素只能包含內聯元素，不能再包含塊級元素 h1~h6、p、dt。
4.塊級元素不能放在標簽p里面。
5.li標簽可以包含div標簽，因為li和div標簽都是裝在內容的容器。
六.屬性順序
HTML屬性應該按照特定的順序出現保證可讀性
除了固定的嵌套規則（如ul包含li，ol包含li等），一般遵循以下規則：
1.class
2.id、name.
3.data-*
4.src，for，tpye，href等
5.title，alt
6.role，aria-*
七.邏輯順序
盡量讓自己的網站按照先后順序 比如先寫頁頭，在寫頁體，最后寫頁腳
CSS書寫規范
一.聲明順序
1.positioning 定位
2.因為可使一個元素脫離文檔流，覆蓋盒模型相關的樣式
3.Box model盒模型
4.Typographic 排版
5.Visual 外觀
二.媒體查詢
盡量將媒體查詢的位置靠近他們的相關的規則。不要把他們放在一個獨立 文件當中，也不要寫在最底下，以免容易忘記
三.CLASS的命名
不但要自己能看懂代碼，也要別人能輕松讀懂自己的代碼。
1.規則命名中，一律采用小寫加中劃線的方式，不允許使用大寫字母或_
2.命名避免使用中文拼音，應該采用更簡明有語義的英文單詞進行組合+
3.不允許通過1、2、3等序號進行命名；避免class與id重名
4.class用于標識某一個類型的對象，命名必須言簡意賅
5.盡可能提高代碼模塊的復用，樣式盡量用組合的方式
6.規則名稱中不應該包含顏色（red/blue）、定位（left/right）等與具體顯示效果相關的信息。 應該用意義命名，而不是樣式顯示結果命名
四.屬性簡寫
堅持限制屬性取值簡寫的使用，過度使用屬性簡寫往往會導致更混亂的代碼。 常見的屬性簡寫濫用包括： padding，margin，font，background等

實現多個標簽頁的通信？（就是localStorage和cookie）
在一個標簽頁里面使用 localStorage.setItem(key,value)添加（修改、刪除）內容；
在另一個標簽頁里面監聽 storage 事件。即可得到 localstorge 存儲的值，實現不同標簽頁之間的通信。將要傳遞的信息存儲在cookie中，每隔一定時間讀取cookie信息，即可隨時獲取要傳遞的信息。

在瀏覽器中輸入url到整個頁面顯示在用戶面前時，這個過程發生了什么？
①域名解析
②發起請求
③相應請求
④瀏覽器解析

常見的http請求方式，以及區別？
GET：從服務器獲取數據（給的少拿的多）
POST：向服務器推送數據（給的多拿的少）
DELETE：刪除服務器的一些內容
PUT：向服務器存放一些內容
HEAD:只請求頁面的頭部
TRACE（或OPTIONS）：發送一個探測性請求，如果返回了信息說明建立了連接

記住幾個常用的狀態碼(200，400,401,404,500)
200，服務器成功處理請求。400，錯誤請求。401，服務器未授權，先驗證身份。
201，404，服務器找不到請求的頁面。500，服務器內部錯誤。

Es6你用過什么？具體說下
（1）let/const 特性：let定義的變量只能在代碼塊{}里面使用,形成一個{}塊級作用域，var作用于函數作用域。let不允許重復聲明,它是一個封閉空間,解決了i問題。const用來定義常量,一旦定義了,后面就不能修改了。
（2）箭頭函數：沒有this、super、arguments和new.target綁定；不能通過new關鍵字調用；沒有原型；不可以改變this的綁定；不支持arguments對象；不支持重復的命名參數。
（3）解構賦值：左右兩邊結構一樣；右邊必須是合法結構；聲明和賦值寫在一句話中。
（4）模板字符串：用反引號()標識，它可以當作普通字符串使用，也可以用來定義多行字符串，或者在字符串中嵌入變量，還支持插入、字符串連接、表達式、換行。
（5）模塊化：
exprot default // 導出
import modA from ‘./a.js’ // 引入模塊
（6）參數：rest參數：ES6 引入 rest 參數（形式為…變量名），用于獲取函數的多余參數，這樣就不需要使用arguments對象了。rest 參數搭配的變量是一個數組，該變量將多余的參數放入數組中。
（7）Map：Map 是一個可以存儲鍵值對的對象。其中鍵和值都可以是對象。
Map對象基本方法：
set(‘屬性’,‘屬性值’) 添加操作
has(‘屬性’)
get(‘屬性’) 通過屬性來獲去屬性值
clear() 清空
delete() 刪除
（8）Set：Set跟數組很像，集合中的數據是唯一的。
Set中的方法：

• add() 添加數據
• clear() 清空集合
• has() 檢車集合中是否存在制定的數據
• forEach() 遍歷
• delete() 刪除成員
  （9）for Each：可以使用foreach進行循環,然后再執行一個函數,函數的第一個參數是數組的每一項,第二個參數是數組的索引(index),第三表示改元素所在數組的全部數據(整個數組數據)。
  （10）filter方法: 過濾篩選的作用，數組filter后，返回的結果為新的數組。

你對前端工程師的理解是什么？在代碼方面有什么難度？
前端開發工程師，是從事Web前端開發工作的工程師。主要進行網站開發，優化，完善的工作。不過，現階段的網站開發已經不同于早年的網頁設計，當時主要是以圖片和文字為主，用戶使用網站的行為也以瀏覽為主，這些的東西html就可以辦到。而現在的前端開發使得現代網頁更加美觀，交互效果顯著，功能更加強大。所以現在的前端開發，能做到的更多，運用到的知識面更加廣泛，要學習到的知識也就更多，三大基礎技能html、CSS和JavaScript是少不了的。

你對MVC、MVVM的理解？
M、V、C
Model（模型）：是應用程序中用于處理應用程序數據邏輯的部分。
View（視圖）：是應用程序中處理數據顯示的部分。
Controller（控制器）：是應用程序中處理用戶交互的部分。
M、V、VM
· 模型層 (Model)：負責從各種數據源中獲取數據；
· 視圖層 (View)：在 Android 中對應于 Activity 和 Fragment，用于展示給用戶和處理用戶交互，會驅動 ViewModel 從 Model 中獲取數據；
· ViewModel 層：用于將 Model 和 View 進行關聯，我們可以在 View 中通過 ViewModel 從 Model 中獲取數據；當獲取到了數據之后，會通過自動綁定，比如 DataBinding，來將結果自動刷新到界面上。

你知道哪些htlm5的移動端框架。
1.jquery mobile框架
2.bootstrap框架
3.ionic框架
4.Mobile Angular UI框架
5.Intel XDK框架
6.Appcelerator Titanium框架
7.Sencha Touch框架
8.Kendo UI框架
9.PhoneGap框架

知道各種JS框架(Angular, Backbone, Ember, React, Meteor, Knockout…)么? 能講出他們各自的優點和缺點么?
angular、backbone、knockout都是完整的MV*框架
angular是雙向數據綁定的，backbone、knockout是單向數據綁定的
React只是單純地View層

常使用的庫有哪些？常用的前端開發工具？開發過什么應用或組件？
常使用的js庫：jQuery Bootstrap.js vue.js react.js
常用的前端開發工具：webstorm sublime vs code
開發過的應用：歡樂上墻、微信小程序“信息加密”

你怎么看待Web App 、hybrid App、Native App？
Native App
Native App是一種基于智能手機本地操作系統如iOS、Android、WP并使用原生程式編寫運行的第三方應用程序,也叫本地app。
常用語言當然就是
iOS ：Objective-C swift
Android ：JAVA
Windowsphone ：C++
優點：
（1）打造完美的用戶體驗
（2）性能穩定
（3）操作速度快，上手流暢
（4）訪問本地資源（通訊錄，相冊）
（5）設計出色的動效，轉場，
（6）擁有系統級別的貼心通知或提醒
（7）用戶留存率高
缺點：
（1）分發成本高（不同平臺有不同的開發語言和界面適配）
（2）維護成本高（例如一款App已更新至V5版本，但仍有用戶在使用V2， V3， V4版本，需要更多的開發人員維護之前的版本）
（3）更新緩慢，根據不同平臺，提交–審核–上線 等等不同的流程，需要經過的流程較復雜

你移動端前端開發的理解？（和 Web 前端開發的主要區別是什么？）
pc端的網頁開發要考慮更多樣式兼容性的問題，ie，火狐，chrome等各大瀏覽器內核不一，使用到新特性的時候需要給樣式加上最基礎的兼容前綴，所以最好的做法還是盡量避免使用新樣式屬性來完成預期的效果。在移動端開發網頁就基本不用考慮這種瀏覽器間的兼容問題了，手機上的瀏覽器絕大部分是webkit內核的，所以在移動端網頁開發的時候能用到很多新的特性，像是極大簡便了頁面布局的flex布局，還有各種語義化的標簽等。

平時如何管理你的項目？
先期團隊必須確定好全局樣式（globe.css），編碼模式(utf-8)等；
編寫習慣必須一致（例如都是采用繼承式的寫法，單樣式都寫成一行）；
標注樣式編寫人，各模塊都及時標注（標注關鍵樣式調用的地方）；
頁面進行標注（例如 頁面 模塊 開始和結束）；
CSS跟HTML 分文件夾并行存放，命名都得統一（例如style.css）；
JS 分文件夾存放 命名以該JS功能為準的英文翻譯。
圖片采用整合的 images.png png8 格式文件使用 盡量整合在一起使用方便將來的管理

說說最近最流行的一些東西吧？常去哪些網站？
Node.js、Mongodb、npm、MVVM、MEAN、three.js,React 。 網站：w3cfuns,sf,hacknews,CSDN,慕課，博客園，InfoQ,w3cplus等

簡單描述一下你做過的移動APP項目研發流程？
第一階段：需求策劃。
在需求階段產品經理內部進行需求討論：討論下版本需求重點是什么，做什么功能，怎么做。通過反復調研、討論、輸出交互方案。
確認需求可行性：產品在輸出交互方案后找相應的開發討論需求方案是否可行，這個討論階段產品和開發的思維方式不同，往往會擦出新火花、新驚喜；但討論控制不好或者會演化為產品和程序員的撕逼大戰，呵呵。
UI設計：設計師將產品的交互方案變得更生動精美，不過精美的設計稿不見得都能實現出來。在這個過程中產品經理需要協調設計師和前端人員的溝通，制 定設計規范。同時保證設計稿的質量，出稿進度。需求宣講：產品經理將交互方案和實現邏輯完善以及將上版本的bug、其他優化需求等整合出完整的版本需求文 檔后，拉上項目所有成員宣講。宣講目的主要讓項目成員清楚新版本需求的重點是什么，做什么功能，為什么做（重點講）；簡單介紹怎么做，講解交互方案或設計 稿，給大家有一個整體的印象，讓大家都了解版本功能的意義。
第二階段：需求研發。
項目啟動：需求宣講后，開發根據產品需求文檔進行需求評審，評估出研發周期、提測時間、預發布時間點、正式發布時間點。
產品根據評審結果發送項目啟動郵件。研發：需求研發過程中，產品跟進研發進度，保持與開發溝通確保需求被正確理解，及時解決研發過程中發現的新問題。測試用例：產品、測試、開發共同確認版本測試用例，并同步研發過程中變更的需求和細節。
提測：產品驗收開發輸出的功能模塊，并輸出體驗回歸文檔；測試根據用例驗證需求邏輯，提bug、優化給開發。內網環境測試通過后，測試繼續驗證預發布環境、正式環境。
第三階段：版本發布。
客服培訓：測試驗證的過程中，版本發布前，產品提前給客服培訓新版本內容。
發布：后端開發、運維人員將代碼發布外網環境，前端輸出外網正式包。產品運營將正式包上傳各大安卓市場或ios -appstore提審。
升級：所有安卓渠道包更新好，或者appsore審核通過，新版本也沒有發現什么問題時，后端開發和運營人員打開升級配置，并發送升級通知。運營報 告：版本發布完畢還未算完呢，運營人員在新版本發布后，收集用戶反饋，進行數據監測、數據分析；評估新版本功能效果和影響，驗證新版本功能以及輸出下版本 需求開發和優化建議。

你認為怎樣才是全端(全棧式)工程師（Full Stack developer）？
懂得配置服務器、懂得UI設計、懂得HTML、CSS、JS還有后端語言比如python，java等，懂得測試，懂得產品兼容PC與安卓IOS以及后期服務器優化

介紹一個你最得意的作品吧？
可以介紹自己的項目過程困難解決方法等等。

項目中遇到國哪些印象深刻的技術難題，具體是什么問題，怎么解決？
前后端交互出現問題，前端請求不到數據，與后端討論問題是在哪，ie低版本瀏覽器兼容問題，添加兼容指令或運用插件，移動客戶端操作系統問題，利用虛擬機模擬

最近在學什么？能談談你未來3，5年給自己的規劃嗎？
vue.js,react.js,Node.js、Mongodb、當產品經理或者開發小組長

模塊化開發如何理解的。
.什么是模塊化？
模塊化就是講js文件按照功能分離，根據需求引入不同的文件中。源于服務器端。
在前段開發中，最先出現在node.js中，commne.js中（module.exports和require）隨著web應用的模塊化，在瀏覽器端頁是需要進行模塊化開發，早期AMD，CMD規范，代表Require.js和sea.js。在es6中，提出了原生模塊呼哈的解決方案，就是export和import但是瀏覽器并沒有完全支持，需要借助一些工具，–babel，實現這個轉換的有browserify和webpack。
在node.js中，模塊就是一個文件，通常js、json文件，包是多個模塊的集合，類似文件夾。
模塊化通俗點的理解就是這樣：就像我們小時候拼積木一樣。我們想拼一個房子出來，我們不是一下子從低到頂逐漸的拼出來。而是我們把一個橫條，豎條，圓圈等拼湊在一起，形成一個窗戶，一面墻，房頂等等部件。這些部件就如同是一個個模塊一樣。具備一定的功能，可以單獨分開使用。不同的框架和庫的模塊，有很多功能類似，可以理解為你的積木是塑料的，他的是木頭的，只要接口Api可以對的上，那么也可以通用。

如何提高網站性能
1…瀏覽器訪問優化
2.減少http請求
3.使用瀏覽器緩存
4.啟用壓縮
5.CSS放在頁面最上面，JavaScript放在頁面最下面
6.減少Cookie傳輸
7.CDN加速
8.反向代理
9.應用服務器性能優化
10.分布式緩存
11.異步操作
12.使用集群
13.代碼優化

怎么實現js的模塊化編程？
在沒有全局污染的情況下，更好的組織項目代碼

你有上線項目嗎？
有，具體介紹自己參與過的項目，著重把設計思路、開發過程，難題簡述出來

對React的理解
react把用戶界面抽象成一個個組件，如按鈕組件button，對話框組件Dialog，日期組件Calendar，開發者通過組合這些組件，最終得到功能豐富、可交互的頁面，通過引用jsx語法，復用組件變得非常容易，同時也能保證組件結構清晰，有了組件這層抽象，react把代碼和真實渲染目標隔離開來，除了可以在瀏覽器端渲染到DOM來開發網頁外，還能用于開發原生移動應用。
react的特點有：
1.聲明式設計 ?React采用聲明范式，可以輕松描述應用（自動dom操作）。
2.高效 ?React通過對DOM的模擬(虛擬dom)，最大限度地減少與DOM的交互。
3.靈活 ?React可以與已知的庫或框架很好地配合。
4.JSX ? JSX 是 JavaScript 語法的擴展。
5.組件 ? 通過 React 構建組件，使得代碼更加容易得到復用，能夠很好的應用在大項目的開發中。
6.單向響應的數據流 ? React 實現了單向響應的數據流，從而減少了重復代碼，這也是它為什么比傳統數據綁定更簡單。
React的核心是組件，精髓是函數式編程，組件的設計目的是提高代碼復用率、降低測試難度和代碼復雜度

對Vue的理解
· vue的語法很簡單,很容易上手,可以說就是對著模板來填充內容.想要動態綁定的數據,那么就在data中填充內容.想要具體的method,那么就在methods屬性中填充內容.想要顯示變量就用雙花括號.可以說是很簡單了.
· vue使用的是MVVM模式,并且使用簡單的命令加數據來進行DOM操作,讓我避開了進行繁雜的獲取,創建和刪除DOM元素的操作.
· 借助vue的vue-router插件,可以很方便的實現單頁面應用的搭建.并且可以實現瀏覽器中的回退效果.
· vue的組件化開發可以說很方便的就實現了組件的復用.之前想要寫復用組件的時候,一方面要寫重復的html,另一方面把對應的CSS文件和JS文件獨立開來,需要的時候進行引入.但是vue把三者放在同一個文件中,可以說非常的貼心,修改也很方便.

對面向對象的理解