基礎問題
- = 和 == 和 === 的區別？
= : 用于賦值== : 用于判斷=== : 用于判斷，必須類型
和值
同時相等才是等
2.有幾種方式清除浮動？
父級元素overflow: hidden;
浮動元素后面的元素clear: both;
偽元素選擇器:.clear:after { content: ''; display: block; clear: both; }
父級元素設置高度
父級元素display: table;
3.請解釋JS中的閉包？
閉包，一個概念，在一個函數中，返回另一個函數，里面的函數即成為閉包閉包限制了一定的作用域，保證變量不被釋放掉
// 示例代碼var add = (function () { var count = 0; return function () { return ++count; };})();add(); // 1add(); // 2add(); // 3
4.常見兼容性問題？
1.png24位的圖片在iE6瀏覽器上出現背景，解決方案是做成PNG8
2.瀏覽器默認的margin和padding不同。解決方案是加一個全局的{margin:0;padding:0;}來統一。
3.IE6雙邊距bug:塊屬性標簽float后，又有橫行的margin情況下，在ie6顯示margin比設置的大。浮動ie產生的雙倍距離 #box{float:left;width:10px;margin:0 0 0 10px;} 這種情況之下IE會產生20px的距離，解決方案是在float的標簽樣式控制中加入 ——display:inline;將其轉化為行內屬性。(這個符號只有ie6會識別) 漸進識別的方式，從總體中逐漸排除局部。首先，巧妙的使用“\9”這一標記，將IE游覽器從所有情況中分離出來。接著，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經獨立識別。 css.bb{background-color:#f1ee18;/所有識別/.background-color:#00deff\9;/IE6、7、8識別/+background-color:#a200ff;/IE6、7識別/_background-color:#1e0bd1;/IE6識別*/}
4.IE下,既可以使用獲取常規屬性的方法來獲取自定義屬性, 又可以使用getAttribute()獲取自定義屬性;Firefox下,只能使用getAttribute()獲取自定義屬性. 解決方法:統一通過getAttribute()獲取自定義屬性.
5.IE下,even對象有x,y屬性,但是沒有pageX,pageY屬性;Firefox下,event對象有pageX,pageY屬性,但是沒有x,y屬性. 解決方法：（條件注釋）缺點是在IE瀏覽器下可能會增加額外的HTTP請求數。
6.Chrome 中文界面下默認會將小于 12px 的文本強制按照 12px 顯示, 可通過加入 CSS 屬性 -webkit-text-size-adjust:none; 解決. 如果這一屬性也不成 使用 transform:scale 來實施
7.超鏈接訪問過后hover樣式就不出現了 被點擊訪問過的超鏈接樣式不再具有hover和active樣式了解決方法是改變CSS屬性的排列順序:LoVe-HA:a:link{}a:visited{}a:hover{}a:active{}
5.如何實現瀏覽器內多個標簽頁之間同域頁面的通信?
調用localstorge
、cookies
等本地存儲方式
HTML相關問題
1.HTML5新標簽？
nav
/header
/footer
/ section
/article
/aside
/detail
/summary
video
/audio
/source
/canvas
/figure
/figcaption
time
/progress
/mark
2.HTML5新表單元素?
url
/email
/date
/datetime
/time
/week
/month
/search
/range
/color
3.HTML5中有哪些新功能？
本地存儲：localStorage
/sessionStorage
離線緩存：Manifest
新標簽：canvas
/video
/audio
拖放API：drag drop
地理位置：geolocation
瀏覽器后臺執行：web worker
4.請解釋Cookie、sessionStroage、localStroage的區別？
Cookie
: 存儲數據量小，可以設置存儲時間，到期自動刪除sessionStroage
: 將數據臨時存儲，離開當前頁面就刪除localStroage
: 將數據保存到設備上，可以實現永久存儲，需要主動刪除
5.描述application cache更新的過程?
第一次訪問緩存manifest文件里列的文件，之后訪問先加載緩存，在后臺加載manifest文件按字節對比看是否有變化，如果沒變化則說明緩存未失效，否則在后臺按列表更新緩存，在下一次刷新頁面的時候使用新的資源
6.iframe有那些缺點?
1.iframe會阻塞主頁面的Onload事件
2.iframe和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的并行加載。使用iframe之前需要考慮這兩個缺點。如果需要使用iframe，最好是通過javascript 動態給iframe添加src屬性值，這樣可以可以繞開以上兩個問題。
3.iframe 會降低頁面整體性能， 之前QQ空間的數據是頁面每新增一個iframe，性能下降10%。 更多詳細內容， 參見知乎問答：http://www.zhihu.com/question/20653055
CSS相關問題
1.CSS3新屬性？
更多的選擇器
彈性布局：flex
幀動畫：keyframes
/animations
過渡動畫：transition
多列布局：column
背景漸變：linear-gradient
/radial-gradient
背景屬性：background-image
/background-size
/background-clip
/background-origin
邊框、陰影：border-image
/border-radius
/box-shadow
2D、3D變換：transform
/transform-origin
用戶界面屬性添加：box-sizing
/outline-offset
/cursor更多屬性值
2.請簡述flex布局？
CSS3中的新增的特性，也稱為彈性布局。
使用flex布局，會更加快速與方便，但是有一定的兼容問題（display: -webkit-flex）。
主要含有主軸
、交叉軸
的概念，通過彈性布局，可以非常方便的設置元素的左對齊
、右對齊
、上對齊
、下對齊
、居中對齊
等等各種對齊方式，快速實現頁面效果。
常用屬性有:flex-direction
/flex-wrap
/justify-content
/align-items
/align-content
/flex-grow
/flex-shrink
/flex-basis
/align-self
/ 等等
3.rem如何使用？
CSS3中的一個新單位
和em的區別是rem單位只針對HTML根元素，而em是根據父標簽的大小進行計算
通常都是給html
標簽設置好font-size
之后，然后其它的單位都換算為rem
進行使用。這樣，當根標簽的font-size
發生改變了之后，頁面中所有根據rem
設置的元素都會發生改變。
html的font-size
會根據屏幕的寬度進行調整，可以使用媒體查詢，根據屏幕寬度進行font-size
的設置。或者使用JS，根據屏幕寬度，計算出html
的font-size
的大小
4.Less和Sass分別是什么？
CSS預處理工具
使用編程的思路編寫CSS代碼，更加高效、快速、便捷
可以使用變量
、嵌套規則
、混入（函數）
、參數混入
、運算
、顏色功能
、作用域
等等類似編程中的功能
Sass在市面上有一些成熟的框架，比如說Compass，而且有很多框架也在使用Sass，比如說Foundation
5.什么是樣式重置文件（重置樣式表）？
reset.css
由于各個瀏覽器對標簽的默認樣式支持方式不同，所以樣子都不太一樣。為了實現不同瀏覽器效果一致，開發者會主動清掉默認樣式，這些代碼就放到reset.css文件中，叫樣式重置文件（重置樣式表）。
6.em和rem的區別？
em
是相對于父級標簽字體大小rem
是CSS3新的單位，相對根標簽(HTML)
字體大小，通常用來做移動端適配
7.如何做水平垂直居中？
方案一：已知寬高，設置position: absolute;
，然后left
和top
都設置為50%
，再根據margin的負值來調正方案二：類似方案一，最后一步用transform:translate(-50%,-50%);
方案三：絕對定位，top
、bottom
、left
、right
都設置為0
，設置好寬高，然后margin: auto;
方案四：display:table-cell;
+vertical-align:middle;
方案五：使用flex
彈性盒模型
8.transition、animation、transform有什么區別?
transition
: 處理過渡效果animation
: CSS3動畫，和keyframes
一起使用transform
: 處理元素的形變，位移
、旋轉
、縮放
、傾斜
9.display: inline-block;
顯示的縫隙如何去掉？
1.移除空格2.使用margin負值3.使用font-size:04.letter-spacing5.word-spacing6.float
10.rgba()和opacity的透明效果有什么不同？
rgba()和opacity都能實現透明效果但最大的不同是opacity作用于元素，以及元素內的所有內容的透明度
而rgba()只作用于元素的顏色或其背景色。（設置rgba透明的元素的子元素不會繼承透明效果！）
11.inline、block、inline-block的區別是什么？
inline
元素和其他inline元素在同一行展示，寬度由內容決定，無法設置寬度
block
元素在新行開始，默認寬度為容器的寬度，可以設置寬度
inline-block
從外面看是inline，里面看是block，可以設置寬度
12.display:none與visibility:hidden的區別是什么？
display
: 隱藏對應的元素但不擠占該元素原來的空間visibility
:隱藏對應的元素并且擠占該元素原來的空間
即是，使用CSSdisplay:none;
屬性后，HTML元素（對象）的寬度、高度等各種屬性值都將“丟失”;而使用visibility:hidden;
屬性后，HTML元素（對象）僅僅是在視覺上看不見（完全透明），而它所占據的空間位置仍然存在
13.知道css有個content屬性嗎？有什么作用？有什么應用？
css的content屬性專門應用在 before/after偽元素上，用于來插入生成內容
最常見的應用是利用偽類清除浮動
一種常見利用偽類清除浮動的代碼
.clearfix::after { content: ".";//這里利用到了content屬性 display: block; height: 0; visibility: hidden; clear: both;}.clearfix { *zoom: 1;}
14.有幾種方式可以對一個DOM設置它的CSS樣式？
外部樣式表
，引入一個外部css文件2內部樣式表
，將css代碼放在標簽內部
內聯樣式
，將css樣式直接定義在HTML元素內部
15.什么是Css Hack？ie6,7,8的hack分別是什么？
針對不同的瀏覽器寫不同的CSScode的過程，就是CSShack
test{ width:300px; height:300px; background-color:blue; /firefox/ background-color:red\9; /all ie/ background-color:yellow; /ie8/ +background-color:pink; /ie7/ _background-color:orange; /ie6/} :root #test { background-color:purple\9; /ie9/} @media all and (min-width:0px) { #test { background-color: black; /opera/ } } @media screen and (-webkit-min-device-pixel-ratio:0) { #test { background-color: gray; /chrome and safari/ } }
16.CSS中link和@import的區別?
link
屬于html標簽，而@import
是CSS中提供的
在頁面加載的時候，link會同時被加載，而@import引用的CSS會在頁面加載完成后才會加載引用的CSS
@import只有在ie5以上才可以被識別，而link是html標簽，不存在瀏覽器兼容性問題
link引入樣式的權重大于@import的引用（@import是將引用的樣式導入到當前的頁面中）
JavaScript相關問題
1.說說你了解的ES6新特性？
let關鍵字
模板字符串
箭頭函數
函數默認值的設置
for..of..更多內容參照博客：http://es6.ruanyifeng.com/
2.JQ如何擴展插件？
jQuery.extend()
: 給JQuery對象本身擴展方法
jQuery.fn.extend()
: 給JQ元素擴展方法
3.AJAX兼容問題？
AJAX用于請求網絡數據
正常情況下使用XMLHttpRequest
對象即可，但是在IE瀏覽器下需要使用ActiveXObject
對象處理兼容問題
如果使用JQ，則直接使用$.get()
/$.post()
/$.getJSON()
/$.ajax()
即可處理網絡請求問題
4.JQ和Zepto的區別？
Zepto更加的輕量級，專為移動端開發
Zepto并不是包含JQ所有的功能，只是封裝JQ常用的一些方法
Zepto內部劃分模塊，不同的功能放到了不同的文件中，需要使用的時候引入，否則不引入。
JQ則是所有功能都放到一個文件中。JQ會更加占用項目體積，而Zepto的使用率更高
5.JQ的優勢？
代碼簡介，語法簡單
強大的選擇器支持
封裝了常用功能，例如：slideUp()
、$.each()
等等
很好的兼容處理
豐富強大的插件庫
完善的AJAX
鏈式語法
完善的文檔、開源
6.JavaScript嚴格模式是什么？
ECMAScript5添加了“嚴格模式”這種模式下JavaScript在更嚴格的條件下運行
主要目的：1.消除JavaScript語法的一些不合理，不嚴謹，減少一些怪異行為2.消除代碼運行的一些不安全之處，保證代碼運行的安全3.提高編譯器效率，增加運行速度4.為未來新版JavaScript做好鋪墊
注意：同樣的代碼，在“嚴格模式下”，可能會有不一樣的運行結果；一些“正常模式”可以運行的語句，在嚴格模式下將不能運行
“use strict”;
，進入嚴格模式的標志，老版本瀏覽器會當做一行普通字符串，加以忽略將“use strict”;
放到第一行，則整個腳本都將以嚴格模式運行。也可以放到函數中的第一行，則只作用當前函數，
// 優化寫法(function () { "use strict"; // some code ...})();
嚴格模式的一些限制：1.全局變量必須顯示聲明2.禁止this指向全局對象(構造函數，必須加new
)3.函數不能有重復的形參名4.保留字(let、interface、package、private、protected、public、static、yield、implements)
7.JavaScript中常用的設計模式？
1.單例模式2.原型模式3.構造函數4.工廠模式5.適配器模式6.策略模式
8.什么是作用域鏈？
作用域的范圍是函數，函數嵌套函數，查找變量從內層函數依次向外層找，最后找不到在window上找
9.解釋call、apply、bind的區別?
call
和apply
都是調用一個函數，并指定this和參數，call
和apply
第一個參數都是指定的this的值，區別在于call
第二個參數開始的參數是替換的參數，而apply
的第二個參數是一個數組。
bind
是由一個函數創建一個新函數，并綁定this和部分參數，參數形式和call
類似
10.描述事件委派(delegate)的原理和優點?
原理: 在容器節點上綁定事件，利用冒泡，判斷事件是否在匹配指定的選擇器的節點上被觸發
優點: 只用綁定一次，不用對每個目標做綁定，還有對動態插入的節點也生效，無需重新綁定
11.有哪些原生觸屏事件？
touchstart
，touchmove
，touchend
，touchcancel
12.為什么老版本的webkit的click事件有300ms延遲？
為了支持雙擊放大，如果300ms以內有兩次點擊則觸發放大操作，而不是click。chromium較新版本在沒有雙擊放大的頁面去掉了click事件的300ms延遲
13.ajax和jsonp哪個可以跨域，原理是什么？
ajax默認無法跨域，xhr2新增的CORS讓ajax也可以跨域，需要輸出http頭(Access-Control-Allow-Origin)
jsonp可以跨域，原理是script元素的src可以跨域
14.JavaScript基本數據類型？
基本數據類型：number
,string
,boolean
,undefined
,null
引用數據類型： Object(Array
,Date
,RegExp
,Function
)
15.談談This對象的理解?
this是JavaScript的一個關鍵字，隨著函數使用場合不同，this的值會發生變化
但是有一個總原則，那就是this指的是調用函數的那個對象。this一般情況下：是全局對象Global。作為方法調用，那么this就是指這個對象
16.new操作符具體干了什么?
1.創建一個空對象，并且 this 變量引用該對象，同時還繼承了該函數的原型2.屬性和方法被加入到 this 引用的對象中3.新創建的對象由 this 所引用，并且最后隱式的返回 this
var obj = {};obj.proto = Base.prototype;Base.call(obj);
Other問題
1.AngularJS中與項目壓縮的問題？
在寫控制器的時候，有一種寫法，會在使用壓縮工具的時候出問題
// 在進行代碼壓縮的時候，參數$scope/$css等服務名稱會被壓縮工具替換掉，就造成無法使用的錯誤app.controller("homeCtrl", function ($scope, $css) {});// 換成如下寫法即可：app.controller('homeCtrl', ['$scope', '$css', function ($scope, $css) {}]);
2.什么是模塊化開發？AMD和CMD是什么？
NodeJS
實現了JavaScript語言編寫后臺，其中使用CommonJS
規范實現了模塊化開發
模塊化開發其實就是讓JavaScript文件可以互相引用，每個文檔代表一個模塊，提高代碼的使用頻率。在HTML中引入JS文件也會方便很多。原生JavaScript中并不支持模塊化開發，出現了一些規范，就是所說的AMD
和CMD
，這兩種方式適合使用桌面端，可以進行異步加載
，而在NodeJS
中使用CommonJS
是同步的，所以CommonJS
并不適合桌面端
在require.js推廣的過程中，產生了一種模塊化規范，叫AMD
在sea.js推廣的過程中，產生了一種模塊化規范，叫CMD
sea.js
是淘寶的前端開發工程師，網名叫玉伯
的人編寫的。require.js
而是國外朋友編寫。sea.js
是根據CommonJS
規范來編寫的，和CommonJS
語法類似，而require.js
的寫法則教特殊一些
3.微信JSSDK是什么？以及使用流程？
如果項目需要使用微信提供的一些功能，例如：分享、定位、掃一掃、支付、等，就需要借助微信JSSDK來實現這些功能
使用流程：1.將自己項目的域名添加到微信公眾賬號中，設置為安全域名2.在代碼中引入JSSDK所需的js文件3.進行配置: wx.config({debug: true, appId: '', timestamp: '', nonceStr: '', signature: '', jsApiList: []});4.調用JSSDK提供的方法進行調用
4.什么是SPA？
Single Page Application 單頁應用程序
打開SPA項目的時候，通常只有一個主頁面，然后根據點擊不同的按鈕，切換主頁面中顯示的內容。
通過點擊不同的按鈕(a標簽)
，來修改錨點
的值，然后使用路由
根據錨點，實現加載不同的頁面不需要進行網頁跳轉，即可切換頁面
5.什么是懶加載？什么是預加載?
懶加載懶加載又稱延遲加載
，當圖片需要顯示到頁面上的時候，才開始真正的發起圖片的網絡請求，否則不請求。
懶加載原理：1. 將圖片地址不寫入src
屬性，而是寫入其它的屬性(data-original)
中2. 頁面onload時候，根據圖片的offsetTop
值，判斷哪些圖片顯示在用戶視野范圍內，然后把這些圖片的地址從data-original
中取出，放到src
屬性中，圖片會自動請求3. 設置好onscroll
函數，監測屏幕的滾動，如果有圖片即將進入用戶視野，則同樣將圖片的地址從data-original
取出，放到src
屬性中取出即可
預加載在頁面正式顯示之前，先把所需要的圖片資源全部加載下來，然后再顯示界面，用戶就不會看到圖片加載的過程，提高了用戶體驗
預加載原理1.拿到所有圖片的地址，分別創建Image對象，并賦值給src2.在imgObj.onload方法中，判斷是否所有圖片都已經加載完畢3.當所有圖片加載完畢之后，調用回調函數，處理頁面的顯示
6.如何提高網頁加載速度？（網站如何優化？）
上線的時候，使用壓縮后三方庫（帶有min的文件: jquery.min.js）
盡可能使用CDN來加載你的三方庫
選取圖片的時候，能選擇jpg就不選擇png（只有鏤空圖才選擇png圖片）
圖片搞定之后，使用網站進行二次壓縮（TinyPNG）
減少網路請求，比如使用懶加載等等
優化代碼
7.如何解決跨域問題？
由于瀏覽器同源策略
的限制，訪問非同源的數據需要進行跨域處理
實現跨域的幾種方式:1. JSONP2. 后臺設置訪問源限制3. 使用后臺代理
JSONP實現跨域問題最常用的一種方式利用了script標簽src屬沒有域的限制而完成需要前端、后臺
配合完成
JSONP使用步驟:1. 動態創建script標簽2. 將目標數據的地址放到script標簽的src屬性中，并在請求地址中拼接callback參數并攜帶回調函數名3. 定義回調函數，當數據請求成功之后，回調函數被調用4. 數據完成之后，移除script標簽注意：后臺返回的數據不是真正的JSON數據，而是一個函數調用，數據為參數的一段字符串。( callbackFun('jsonString'); )
如果使用JQ，直接使用$.getJSON()
函數即可進行跨域請求，JQ已經對跨域請求做了封裝。
后臺設置訪問源限制：只需后臺做訪問源(Access-Control-Allow-Origin)
的設置，前端就可以正常訪問跨域的數據。
NodeJS設置方式:response.setHeader("Access-Control-Allow-Origin", "*");
*****號代表了所有域名，設置好之后代表任何域名都可以訪問，也可以對域名進行單獨控制
此種方式不夠安全
使用后臺代理:前端不直接訪問跨域的數據，而是交給服務器去做服務器去請求別的站點的數據，后臺服務器是沒有域的限制的，所以很方便當后臺獲取到數據之后，前端從自己的服務器請求到數據，無需做跨域處理此種方式，主要內容都在后臺，前端進行正常AJAX請求
8.請解釋baiduTemplate.js模板引擎？
模板引擎根據數據，快速生成HTML代碼片段，插入到HTML結構中顯示
首先編寫結構，可以將HTML和JavaScript混寫，然后賦值數據，就可以生成HTML代碼片段
<script type="text/template" id="li"> <%for (var i = 0; i < data.length; i++) {%> <li><%= data[i] %></li> <%}%></script>// 根據數據，生成HTML代碼片段var data = ['小明', '小紅', '小黑'];var html = baidu.template('li', {data: data});document.getElementById("result").innerHTML = html;
和baiduTemplate相似模板引擎還有很多，還會使用artTemplate.js
，語法相似http://www.jq22.com/jquery-info1097
9.請解釋MVC和MVVM設計模式？
10.XSS是什么？
跨站腳本攻擊（Cross-site scripting, XSS）
是一種網站應用程序的安全漏洞攻擊，是代碼注入的一種。允許用戶將惡意代碼注入到網頁上，影響網頁。
這類攻擊通常包含了HTML以及用戶端腳本語言。
11.移動端性能優化？
加載優化1.減少HTTP請求2.壓縮JS、CSS、HTML靜態資源并在服務器設置gzip3.首屏加載，不超過120k4.壓縮圖片5.避免重定向6.異步加載第三方資源: async / 動態創建script / defer7.oneRequest: 首次內聯CSS，JavaScript，存localStroage，第二次讀取localStroage8.按需加載: 滾動加載、點擊加載
CSS優化1.層次不超過32.合并CSS規則，合并margin、background等屬性3.移除空的CSS規則4.去掉0的單位5.不要聲明過多的font-size
腳本執行優化1.避免iframe、img等src為空2.圖片盡量避免使用DataURI3.避免重設圖片大小4.點擊事件優化5.注意scroll resize事件綁定時機
渲染優化1.動畫優化: 使用CSS3動畫、使用requestAnimationFrame替代setTimeout2.高頻事件優化: touch事件、scroll事件3.圖片優化: 壓縮圖片、webp優于jpg、png8優于gif、對圖片使用lazyload、避免使用DataURI4.GPU加速: 使用transition觸發、tranform觸發、opacity5.DOM層次不宜過多6.JS主動的釋放內存
12.Tween.JS如何使用？
// 首先獲取所需要的4個數字var currentStep = 0; // 當前步數var allStep = 100; // 總步數var startValue = $(window).scrollTop(); // 開始的值var changeValue = 0 - startValue; // 改變的值// 使用定時器進行改變var timer = setInterval(function () { // 當前步數增加 currentStep++; // 判斷結束時間 if (currentStep > allStep) { clearInterval(timer); } // 四個參數（當前步數、開始值、變化值、總步數） var v = Tween.Bounce.easeIn(currentStep, startValue, changeValue, allStep); // 使用Tween.js實現效果 $(window).scrollTop(v);}, 10);
13.什么是Cordova？
hybird App
開發平臺一個工具，正常編寫HTML、CSS、JavaScript代碼，即可通過Cordova生成各個平臺的Native App
可以通過編寫JavaScript代碼調用設備的功能
常用命令1.cordova create ProjectPath com.lidaze.www HelloCordova
2.cordova platform add ios
3.cordova platform rm ios
4.cordova build ios
5.cordova emulate ios
6.cordova plugin add cordova-plugin-dialogs
7.cordova plugin remove cordova-plugin-dialogs
14.什么是Web App
? 什么是hybird App
?
Web App
: 移動App，通過編寫HTML、CSS、JavaScript實現Native App的功能外觀，還是運行在瀏覽器中。有時會被嵌入到Native App中
hybird App
: 混合App，通過編寫HTML、CSS、JavaScript實現Navtive App的功能和外觀，可直接生成各個操作系統的Native App，可直接安裝到手機中
15.http狀態碼有那些？分別代表是什么意思？
100-199 用于指定客戶端應相應的某些動作
200-299 用于表示請求成功
300-399 用于已經移動的文件并且常被包含在定位頭信息中指定新的地址信息
400-499 用于指出客戶端的錯誤。400 語義有誤，當前請求無法被服務器理解。401 當前請求需要用戶驗證403 服務器已經理解請求，但是拒絕執行它。
500-599 用于支持服務器錯誤。503 – 服務不可用
16.你能描述一下漸進增強和優雅降級之間的不同嗎?
漸進增強progressiveenhancement
：針對低版本瀏覽器進行構建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗
優雅降級gracefuldegradation
：一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容。
區別：優雅降級是從復雜的現狀開始，并試圖減少用戶體驗的供給，而漸進增強則是從一個非常基礎的，能夠起作用的版本開始，并不斷擴充，以適應未來環境的需要。降級（功能衰減）意味著往回看；而漸進增強則意味著朝前看，同時保證其根基處于安全地帶。
優雅降級觀點“優雅降級”觀點認為應該針對那些最高級、最完善的瀏覽器來設計網站。而將那些被認為“過時”或有功能缺失的瀏覽器下的測試工作安排在開發周期的最后階段，并把測試對象限定為主流瀏覽器（如IE、Mozilla等）的前一個版本。在這種設計范例下，舊版的瀏覽器被認為僅能提供“簡陋卻無妨(poor,butpassable)”的瀏覽體驗。你可以做一些小的調整來適應某個特定的瀏覽器。但由于它們并非我們所關注的焦點，因此除了修復較大的錯誤之外，其它的差異將被直接忽略。
漸進增強觀點“漸進增強”觀點則認為應關注于內容本身。內容是我們建立網站的誘因。有的網站展示它，有的則收集它，有的尋求，有的操作，還有的網站甚至會包含以上的種種，但相同點是它們全都涉及到內容。這使得“漸進增強”成為一種更為合理的設計范例。這也是它立即被Yahoo!所采納并用以構建其“分級式瀏覽器支持(GradedBrowserSupport)”策略的原因所在。
17.簡述一下src與href的區別？
src用于替換當前元素，href用于在當前文檔和引用資源之間確立聯系。
src是source的縮寫，指向外部資源的位置，指向的內容將會嵌入到文檔中當前標簽所在位置；在請求src資源時會將其指向的資源下載并應用到文檔內，例如js腳本，img圖片和frame等元素。
<scriptsrc=”js.js”></script>
當瀏覽器解析到該元素時，會暫停其他資源的下載和處理，直到將該資源加載、編譯、執行完畢，圖片和框架等元素也如此，類似于將所指向資源嵌入當前標簽內。這也是為什么將js腳本放在底部而不是頭部。
href是HypertextReference的縮寫，指向網絡資源所在位置，建立和當前元素（錨點）或當前文檔（鏈接）之間的鏈接，如果我們在文檔中添加
<linkhref=”common.css”rel=”stylesheet”/>
那么瀏覽器會識別該文檔為css文件，就會并行下載資源并且不會停止對當前文檔的處理。這也是為什么建議使用link方式來加載css，而不是使用@import方式。
非技術問題
1.使用過哪些開發工具？
編輯器:
Sublime Text
Atom (GitHub)
VS Code(微軟)
IDE（集成開發環境）:
HBuilder(國內)
WebStorm(國外）
2.前公司技術團隊多少人？H5開發有幾個？
3.談談以前端角度出發做好SEO需要考慮什么？
了解搜索引擎如何抓取網頁和如何索引網頁你需要知道一些搜索引擎的基本工作原理，各個搜索引擎之間的區別，搜索機器人（SErobot或叫webcrawler）如何進行工作，搜索引擎如何對搜索結果進行排序等等。
Meta標簽優化主要包括主題（Title)，網站描述(Description)，和關鍵詞（Keywords）。還有一些其它的隱藏文字比如Author（作者），Category（目錄），Language（編碼語種）等。
如何選取關鍵詞并在網頁中放置關鍵詞搜索就得用關鍵詞。關鍵詞分析和選擇是SEO最重要的工作之一。首先要給網站確定主關鍵詞（一般在5個上下），然后針對這些關鍵詞進行優化，包括關鍵詞密度（Density），相關度（Relavancy），突出性（Prominency）等等。
了解主要的搜索引擎雖然搜索引擎有很多，但是對網站流量起決定作用的就那么幾個。比如英文的主要有Google，Yahoo，Bing等；中文的有百度，搜狗，有道等。不同的搜索引擎對頁面的抓取和索引、排序的規則都不一樣。還要了解各搜索門戶和搜索引擎之間的關系，比如AOL網頁搜索用的是Google的搜索技術，MSN用的是Bing的技術。
主要的互聯網目錄OpenDirectory自身不是搜索引擎，而是一個大型的網站目錄，他和搜索引擎的主要區別是網站內容的收集方式不同。目錄是人工編輯的，主要收錄網站主頁；搜索引擎是自動收集的，除了主頁外還抓取大量的內容頁面。
按點擊付費的搜索引擎搜索引擎也需要生存，隨著互聯網商務的越來越成熟，收費的搜索引擎也開始大行其道。最典型的有Overture和百度，當然也包括Google的廣告項目GoogleAdwords。越來越多的人通過搜索引擎的點擊廣告來定位商業網站，這里面也大有優化和排名的學問，你得學會用最少的廣告投入獲得最多的點擊。
搜索引擎登錄網站做完了以后，別躺在那里等著客人從天而降。要讓別人找到你，最簡單的辦法就是將網站提交（submit）到搜索引擎。如果你的是商業網站，主要的搜索引擎和目錄都會要求你付費來獲得收錄（比如Yahoo要299美元），但是好消息是（至少到目前為止）最大的搜索引擎Google目前還是免費，而且它主宰著60％以上的搜索市場。
鏈接交換和鏈接廣泛度（LinkPopularity）網頁內容都是以超文本（Hypertext）的方式來互相鏈接的，網站之間也是如此。除了搜索引擎以外，人們也每天通過不同網站之間的鏈接來Surfing（“沖浪”）。其它網站到你的網站的鏈接越多，你也就會獲得更多的訪問量。更重要的是，你的網站的外部鏈接數越多，會被搜索引擎認為它的重要性越大，從而給你更高的排名。
合理的標簽使用
4.“有什么想問我的？”， 面試官說。
目前關注哪些最新的Web前端技術（未來的發展方向）？
前端團隊如何工作的（實現一個產品的流程）？
公司的薪資結構是什么樣子的？
