摘要：一般情況下是全局對(duì)象。避免在頁(yè)面的主體布局中使用，要等其中的內(nèi)容完全下載之后才會(huì)顯示出來(lái)，顯示布局慢。對(duì)普通的網(wǎng)站有一個(gè)統(tǒng)一的思路，就是盡量向前端優(yōu)化減少數(shù)據(jù)庫(kù)操作減少磁盤(pán)。

1.XHTML和HTML有什么區(qū)別

HTML是一種基本的WEB網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言，XHTML是一個(gè)基于XML的置標(biāo)語(yǔ)言
最主要的不同：

XHTML 元素必須被正確地嵌套。

XHTML 元素必須被關(guān)閉。

標(biāo)簽名必須用小寫(xiě)字母。

XHTML 文檔必須擁有根元素。

2.前端頁(yè)面有哪三層構(gòu)成，分別是什么?作用是什么?

結(jié)構(gòu)層 Html 表示層 CSS 行為層 js;

3.你做的頁(yè)面在哪些流覽器測(cè)試過(guò)?這些瀏覽器的內(nèi)核分別是什么?

Ie(Ie內(nèi)核) 火狐（Gecko） 谷歌（webkit,Blink） opera(Presto),Safari(wbkit)

4.什么是語(yǔ)義化的HTML?

直觀的認(rèn)識(shí)標(biāo)簽 對(duì)于搜索引擎的抓取有好處，用正確的標(biāo)簽做正確的事情！

html語(yǔ)義化就是讓頁(yè)面的內(nèi)容結(jié)構(gòu)化，便于對(duì)瀏覽器、搜索引擎解析；
在沒(méi)有樣式CCS情況下也以一種文檔格式顯示，并且是容易閱讀的。搜索引擎的爬蟲(chóng)依賴于標(biāo)記來(lái)確定上下文和各個(gè)關(guān)鍵字的權(quán)重，利于 SEO。

使閱讀源代碼的人對(duì)網(wǎng)站更容易將網(wǎng)站分塊，便于閱讀維護(hù)理解。

5.HTML5 為什么只需要寫(xiě) !DOCTYPE HTML？

HTML5 不基于 SGML，因此不需要對(duì)DTD進(jìn)行引用，但是需要doctype來(lái)規(guī)范瀏覽器的行為（讓瀏覽器按照它們應(yīng)該的方式來(lái)運(yùn)行）；而HTML4.01基于SGML,所以需要對(duì)DTD進(jìn)行引用，才能告知瀏覽器文檔所使用的文檔類(lèi)型。

6.Doctype作用？標(biāo)準(zhǔn)模式與兼容模式各有什么區(qū)別?

!DOCTYPE聲明位于位于HTML文檔中的第一行，處于html 標(biāo)簽之前。告知瀏覽器的解析器用什么文檔標(biāo)準(zhǔn)解析這個(gè)文檔。DOCTYPE不存在或格式不正確會(huì)導(dǎo)致文檔以兼容模式呈現(xiàn)。

標(biāo)準(zhǔn)模式的排版 和JS運(yùn)作模式都是以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行。在兼容模式中，頁(yè)面以寬松的向后兼容的方式顯示,模擬老式瀏覽器的行為以防止站點(diǎn)無(wú)法工作。

7.html5有哪些新特性、移除了那些元素？如何處理HTML5新標(biāo)簽的瀏覽器兼容問(wèn)題？如何區(qū)分 HTML 和
HTML5？

HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集，主要是關(guān)于圖像，位置，存儲(chǔ)，多任務(wù)等功能的增加。

繪畫(huà) canvas

用于媒介回放的 video 和 audio 元素

本地離線存儲(chǔ) localStorage 長(zhǎng)期存儲(chǔ)數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失；

sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除

語(yǔ)意化更好的內(nèi)容元素，比如 article、footer、header、nav、section

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

新的技術(shù)webworker, websockt, Geolocation
移除的元素

純表現(xiàn)的元素：basefont，big，center，font, s，strike，tt，u；

對(duì)可用性產(chǎn)生負(fù)面影響的元素：frame，frameset，noframes；
支持HTML5新標(biāo)簽：

IE8/IE7/IE6支持通過(guò)document.createElement方法產(chǎn)生的標(biāo)簽，

可以利用這一特性讓這些瀏覽器支持HTML5新標(biāo)簽，

瀏覽器支持新標(biāo)簽后，還需要添加標(biāo)簽?zāi)J(rèn)的樣式：

8.請(qǐng)描述一下 cookies，sessionStorage 和 localStorage 的區(qū)別？

cookie在瀏覽器和服務(wù)器間來(lái)回傳遞。 sessionStorage和localStorage不會(huì)

sessionStorage和localStorage的存儲(chǔ)空間更大；

sessionStorage和localStorage有更多豐富易用的接口；

sessionStorage和localStorage各自獨(dú)立的存儲(chǔ)空間；

9.如何實(shí)現(xiàn)瀏覽器內(nèi)多個(gè)標(biāo)簽頁(yè)之間的通信?

調(diào)用localstorge、cookies等本地存儲(chǔ)方式

1.簡(jiǎn)要說(shuō)一下CSS的元素分類(lèi)

塊級(jí)元素：div,p,h1,form,ul,li;

行內(nèi)元素 :  span>,a,label,input,img,strong,em;

2.CSS隱藏元素的幾種方法（至少說(shuō)出三種）

Opacity:元素本身依然占據(jù)它自己的位置并對(duì)網(wǎng)頁(yè)的布局起作用。它也將響應(yīng)用戶交互;

Visibility:與 opacity 唯一不同的是它不會(huì)響應(yīng)任何用戶交互。此外，元素在讀屏軟件中也會(huì)被隱藏;

Display:display 設(shè)為 none 任何對(duì)該元素直接打用戶交互操作都不可能生效。此外，讀屏軟件也不會(huì)讀到元素的內(nèi)容。這種方式產(chǎn)生的效果就像元素完全不存在;

Position:不會(huì)影響布局，能讓元素保持可以操作;

Clip-path:clip-path 屬性還沒(méi)有在 IE 或者 Edge 下被完全支持。如果要在你的 clip-path 中使用外部的 SVG 文件，瀏覽器支持度還要低;

3.CSS清楚浮動(dòng)的幾種方法（至少兩種）

使用帶clear屬性的空元素

使用CSS的overflow屬性；

使用CSS的:after偽元素；

使用鄰接元素處理；

4.CSS居中（包括水平居中和垂直居中）

內(nèi)聯(lián)元素居中方案
水平居中設(shè)置：
1.行內(nèi)元素
設(shè)置 text-align:center；

2.Flex布局
設(shè)置display:flex;justify-content:center;(靈活運(yùn)用,支持Chroime，F(xiàn)irefox，IE9+)

垂直居中設(shè)置：
1.父元素高度確定的單行文本（內(nèi)聯(lián)元素）
設(shè)置 height = line-height；

2.父元素高度確定的多行文本（內(nèi)聯(lián)元素）

a:插入 table （插入方法和水平居中一樣），然后設(shè)置 vertical-align:middle；

b:先設(shè)置 display:table-cell 再設(shè)置 vertical-align:middle；


塊級(jí)元素居中方案
水平居中設(shè)置：
1.定寬塊狀元素
設(shè)置 左右 margin 值為 auto；

2.不定寬塊狀元素

a:在元素外加入 table 標(biāo)簽（完整的，包括 table、tbody、tr、td），該元素寫(xiě)在 td 內(nèi)，然后設(shè)置 margin 的值為 auto；

b:給該元素設(shè)置 displa:inine 方法；

c:父元素設(shè)置 position:relative 和 left:50%，子元素設(shè)置 position:relative 和 left:50%；


垂直居中設(shè)置：

使用position:absolute（fixed）,設(shè)置left、top、margin-left、margin-top的屬性;

利用position:fixed（absolute）屬性，margin:auto這個(gè)必須不要忘記了;

利用display:table-cell屬性使內(nèi)容垂直居中;

使用css3的新屬性transform:translate(x,y)屬性;

使用:before元素;

5.寫(xiě)出幾種IE6 BUG的解決方法

雙邊距BUG float引起的 使用display

3像素問(wèn)題 使用float引起的 使用dislpay:inline -3px

超鏈接hover 點(diǎn)擊后失效 使用正確的書(shū)寫(xiě)順序 link visited hover active

Ie z-index問(wèn)題 給父級(jí)添加position:relative

Png 透明 使用js代碼 改

Min-height 最小高度 ！Important 解決’

select 在ie6下遮蓋 使用iframe嵌套

為什么沒(méi)有辦法定義1px左右的寬度容器（IE6默認(rèn)的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）

6.對(duì)于SASS或是Less的了解程度？喜歡那個(gè)？

語(yǔ)法介紹

7.Bootstrap了解程度

特點(diǎn)，排版，插件的使用;

8.頁(yè)面導(dǎo)入樣式時(shí)，使用link和@import有什么區(qū)別？

link屬于XHTML標(biāo)簽，除了加載CSS外，還能用于定義RSS, 定義rel連接屬性等作用；而@import是CSS提供的，只能用于加載CSS;

頁(yè)面被加載的時(shí)，link會(huì)同時(shí)被加載，而@import引用的CSS會(huì)等到頁(yè)面被加載完再加載;

import是CSS2.1 提出的，只在IE5以上才能被識(shí)別，而link是XHTML標(biāo)簽，無(wú)兼容問(wèn)題;

9.介紹一下CSS的盒子模型？

有兩種， IE 盒子模型、標(biāo)準(zhǔn) W3C 盒子模型；IE的content部分包含了 border 和 pading;

盒模型： 內(nèi)容(content)、填充(padding)、邊界(margin)、 邊框(border).

10.CSS 選擇符有哪些？哪些屬性可以繼承？?jī)?yōu)先級(jí)算法如何計(jì)算？ CSS3新增偽類(lèi)有那些？

id選擇器（ # myid）

類(lèi)選擇器（.myclassname）

標(biāo)簽選擇器（div, h1, p）

相鄰選擇器（h1 + p）

子選擇器（ul > li）

后代選擇器（li a）

通配符選擇器（ * ）

屬性選擇器（a[rel = "external"]）

偽類(lèi)選擇器（a: hover, li: nth - child）

可繼承的樣式： font-size font-family color, UL LI DL DD DT;

不可繼承的樣式：border padding margin width height ;

優(yōu)先級(jí)就近原則，同權(quán)重情況下樣式定義最近者為準(zhǔn);

優(yōu)先級(jí)為:
!important >  id > class > tag
important 比 內(nèi)聯(lián)優(yōu)先級(jí)高

11.CSS3有哪些新特性？

CSS3實(shí)現(xiàn)圓角（border-radius:8px），陰影（box-shadow:10px），
  對(duì)文字加特效（text-shadow、），線性漸變（gradient），旋轉(zhuǎn)（transform）

transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋轉(zhuǎn),縮放,定位,傾斜
 增加了更多的CSS選擇器  多背景 rgba

1.javascript的typeof返回哪些數(shù)據(jù)類(lèi)型

Ｏbject number function boolean underfind;

2.例舉3種強(qiáng)制類(lèi)型轉(zhuǎn)換和2種隱式類(lèi)型轉(zhuǎn)換?

強(qiáng)制（parseInt,parseFloat,number）隱式（== – ===）；

3.數(shù)組方法pop() push() unshift() shift()

Push()尾部添加 pop()尾部刪除

Unshift()頭部添加 shift()頭部刪除

4.ajax請(qǐng)求的時(shí)候get 和post方式的區(qū)別?

一個(gè)在url后面 一個(gè)放在虛擬載體里面
有大小限制

安全問(wèn)題
應(yīng)用不同 一個(gè)是論壇等只需要請(qǐng)求的，一個(gè)是類(lèi)似修改密碼的;

5.call和apply的區(qū)別

Object.call(this,obj1,obj2,obj3)

Object.apply(this,arguments)

6.ajax請(qǐng)求時(shí)，如何解釋json數(shù)據(jù)

使用eval parse,鑒于安全性考慮 使用parse更靠譜;

7.事件委托是什么

讓利用事件冒泡的原理，讓自己的所觸發(fā)的事件，讓他的父元素代替執(zhí)行！

8.閉包是什么，有什么特性，對(duì)頁(yè)面有什么影響?簡(jiǎn)要介紹你理解的閉包

閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)。

9.添加 刪除 替換 插入到某個(gè)接點(diǎn)的方法

obj.appendChidl()
obj.innersetBefore
obj.replaceChild
obj.removeChild

10.說(shuō)一下什么是javascript的同源策略？

一段腳本只能讀取來(lái)自于同一來(lái)源的窗口和文檔的屬性，這里的同一來(lái)源指的是主機(jī)名、協(xié)議和端口號(hào)的組合

11.編寫(xiě)一個(gè)b繼承a的方法;

function A(name){
    this.name = name;
    this.sayHello = function(){alert(this.name+” say Hello!”);};
}
function B(name,id){
    this.temp = A;
    this.temp(name);        //相當(dāng)于new A();
    delete this.temp;       
     this.id = id;   
    this.checkId = function(ID){alert(this.id==ID)};
}

12.如何阻止事件冒泡和默認(rèn)事件

function stopBubble(e)
{
   if (e && e.stopPropagation)
       e.stopPropagation()
   else
       window.event.cancelBubble=true
}
return false

13.下面程序執(zhí)行后彈出什么樣的結(jié)果?

function fn() {
    this.a = 0;
    this.b = function() {
        alert(this.a)
    }
}
fn.prototype = {
    b: function() {
        this.a = 20;
        alert(this.a);
    },
    c: function() {
        this.a = 30;
        alert(this.a);
    }
}
var myfn = new fn();
myfn.b();
myfn.c();

14.談?wù)凾his對(duì)象的理解。

this是js的一個(gè)關(guān)鍵字，隨著函數(shù)使用場(chǎng)合不同，this的值會(huì)發(fā)生變化。
  但是有一個(gè)總原則，那就是this指的是調(diào)用函數(shù)的那個(gè)對(duì)象。
  this一般情況下：是全局對(duì)象Global。 作為方法調(diào)用，那么this就是指這個(gè)對(duì)象

15.下面程序的結(jié)果

function fun(n,o) {
  console.log(o)
  return {
    fun:function(m){
      return fun(m,n);
    }
  };
}
var a = fun(0);  a.fun(1);  a.fun(2);  a.fun(3);
var b = fun(0).fun(1).fun(2).fun(3);
var c = fun(0).fun(1);  c.fun(2);  c.fun(3);

//答案：
//a: undefined,0,0,0
//b: undefined,0,1,2
//c: undefined,0,1,1

16.下面程序的輸出結(jié)果

var name = "World!";
(function () {
    if (typeof name === "undefined") {
        var name = "Jack";
        console.log("Goodbye " + name);
    } else {
        console.log("Hello " + name);
    }
})();

17.了解Node么？Node的使用場(chǎng)景都有哪些？

高并發(fā)、聊天、實(shí)時(shí)消息推送

18.介紹下你最常用的一款框架

jquery,rn,angular等;

19.對(duì)于前端自動(dòng)化構(gòu)建工具有了解嗎？簡(jiǎn)單介紹一下

Gulp,Grunt等；

20.介紹一下你了解的后端語(yǔ)言以及掌握程度

1.對(duì)Node的優(yōu)點(diǎn)和缺點(diǎn)提出了自己的看法？

(優(yōu)點(diǎn)）
 因?yàn)镹ode是基于事件驅(qū)動(dòng)和無(wú)阻塞的，所以非常適合處理并發(fā)請(qǐng)求，
 因此構(gòu)建在Node上的代理服務(wù)器相比其他技術(shù)實(shí)現(xiàn)（如Ruby）的服務(wù)器表現(xiàn)要好得多。
此外，與Node代理服務(wù)器交互的客戶端代碼是由javascript語(yǔ)言編寫(xiě)的，
因此客戶端和服務(wù)器端都用同一種語(yǔ)言編寫(xiě)，這是非常美妙的事情。
（缺點(diǎn)）
 Node是一個(gè)相對(duì)新的開(kāi)源項(xiàng)目，所以不太穩(wěn)定，它總是一直在變，
而且缺少足夠多的第三方庫(kù)支持。看起來(lái)，就像是Ruby/Rails當(dāng)年的樣子。 

2.你有哪些性能優(yōu)化的方法？

（1） 減少http請(qǐng)求次數(shù)：CSS Sprites, JS、CSS源碼壓縮、圖片大小控制合適；網(wǎng)頁(yè)Gzip，CDN托管，data緩存 ，圖片服務(wù)器。
 （2）前端模板 JS+數(shù)據(jù)，減少由于HTML標(biāo)簽導(dǎo)致的帶寬浪費(fèi)，前端用變量保存AJAX請(qǐng)求結(jié)果，每次操作本地變量，不用請(qǐng)求，減少請(qǐng)求次數(shù)
（3） 用innerHTML代替DOM操作，減少DOM操作次數(shù)，優(yōu)化javascript性能。
（4） 當(dāng)需要設(shè)置的樣式很多時(shí)設(shè)置className而不是直接操作style。
（5） 少用全局變量、緩存DOM節(jié)點(diǎn)查找的結(jié)果。減少I(mǎi)O讀取操作。
（6） 避免使用CSS Expression（css表達(dá)式)又稱Dynamic properties(動(dòng)態(tài)屬性)。
（7） 圖片預(yù)加載，將樣式表放在頂部，將腳本放在底部  加上時(shí)間戳。
（8） 避免在頁(yè)面的主體布局中使用table，table要等其中的內(nèi)容完全下載之后才會(huì)顯示出來(lái)，顯示div+css布局慢。對(duì)普通的網(wǎng)站有一個(gè)統(tǒng)一的思路，就是盡量向前端優(yōu)化、減少數(shù)據(jù)庫(kù)操作、減少磁盤(pán)IO。向前端優(yōu)化指的是，在不影響功能和體驗(yàn)的情況下，能在瀏覽器執(zhí)行的不要在服務(wù)端執(zhí)行，能在緩存服務(wù)器上直接返回的不要到應(yīng)用服務(wù)器，程序能直接取得的結(jié)果不要到外部取得，本機(jī)內(nèi)能取得的數(shù)據(jù)不要到遠(yuǎn)程取，內(nèi)存能取到的不要到磁盤(pán)取，緩存中有的不要去數(shù)據(jù)庫(kù)查詢。減少數(shù)據(jù)庫(kù)操作指減少更新次數(shù)、緩存結(jié)果減少查詢次數(shù)、將數(shù)據(jù)庫(kù)執(zhí)行的操作盡可能的讓你的程序完成（例如join查詢），減少磁盤(pán)IO指盡量不使用文件系統(tǒng)作為緩存、減少讀寫(xiě)文件次數(shù)等。程序優(yōu)化永遠(yuǎn)要優(yōu)化慢的部分，換語(yǔ)言是無(wú)法“優(yōu)化”的。

3.http狀態(tài)碼有那些？分別代表是什么意思？

100-199 用于指定客戶端應(yīng)相應(yīng)的某些動(dòng)作。
200-299 用于表示請(qǐng)求成功。
300-399 用于已經(jīng)移動(dòng)的文件并且常被包含在定位頭信息中指定新的地址信息。
400-499 用于指出客戶端的錯(cuò)誤。400    1、語(yǔ)義有誤，當(dāng)前請(qǐng)求無(wú)法被服務(wù)器理解。401    當(dāng)前請(qǐng)求需要用戶驗(yàn)證 403    服務(wù)器已經(jīng)理解請(qǐng)求，但是拒絕執(zhí)行它。
500-599 用于支持服務(wù)器錯(cuò)誤。 503 – 服務(wù)不可用

4.一個(gè)頁(yè)面從輸入 URL 到頁(yè)面加載顯示完成，這個(gè)過(guò)程中都發(fā)生了什么？（流程說(shuō)的越詳細(xì)越好）

查找瀏覽器緩存

DNS解析、查找該域名對(duì)應(yīng)的IP地址、重定向（301）、發(fā)出第二個(gè)GET請(qǐng)求

進(jìn)行HTTP協(xié)議會(huì)話

客戶端發(fā)送報(bào)頭(請(qǐng)求報(bào)頭)

文檔開(kāi)始下載

文檔樹(shù)建立，根據(jù)標(biāo)記請(qǐng)求所需指定MIME類(lèi)型的文件

文件顯示

瀏覽器這邊做的工作大致分為以下幾步：

加載：根據(jù)請(qǐng)求的URL進(jìn)行域名解析，向服務(wù)器發(fā)起請(qǐng)求，接收文件（HTML、JS、CSS、圖象等）。

解析：對(duì)加載到的資源（HTML、JS、CSS等）進(jìn)行語(yǔ)法解析，建議相應(yīng)的內(nèi)部數(shù)據(jù)結(jié)構(gòu)（比如HTML的DOM樹(shù)，JS的（對(duì)象）屬性表，CSS的樣式規(guī)則等等）

5.你常用的開(kāi)發(fā)工具是什么，為什么？

Sublime,Atom,Nodepad++;

6.說(shuō)說(shuō)最近最流行的一些東西吧？常去哪些網(wǎng)站？

Node.js、MVVM、React-native,Angular,Weex等

CSDN,Segmentfault,博客園,掘金,Stackoverflow等

7.介紹下你的項(xiàng)目（如果有的話）？并說(shuō)一下在做這個(gè)項(xiàng)目中運(yùn)用的技術(shù)以及遇到的難題是如何解決的