1.HTML語義化的理解和作用？

理解：根據(jù)具體內(nèi)容，選擇合適的標簽(每個標簽都有自己特定的語義)進行代碼的編寫。便于開發(fā)者閱讀和寫出更優(yōu)雅的代碼，同時讓搜索引擎的爬蟲能更好的識別。（用正確的標簽包含正確的內(nèi)容，比如nav標簽，里面就應該包含導航條的內(nèi)容，而不是用做其他的用途，標簽語義化的好處就是結構良好，便于閱讀，方便威化，也有利于爬蟲的查找，提高搜索率。）
作用：
a.有利于SEO，搜索引擎的爬蟲是讀不懂無語義的span和div的，因此語義化標簽能使爬蟲抓取更多的有效信息。
b.語義化的HTML在沒有CSS的情況下也能呈現(xiàn)較好的內(nèi)容結構與代碼結構
c.方便其他設備的解析和便于團隊開發(fā)和維護

2.CSS規(guī)范？

a.命名規(guī)范：
css文件命名：按照功能模塊劃分css文件，如reset.css；global.css；themes.css....等，這是開發(fā)階段的規(guī)范做法，等到整站發(fā)布上線的時候，用工具將多個css文件壓縮成一個。
id和class命名：使用中劃線命名，命名時一般取父元素的class作為前綴。
書寫規(guī)范（順序）：影響文檔流屬性；自身盒模型屬性；文本屬性；裝飾屬性；其他屬性。
注釋規(guī)范：頂部注釋（作者，說明，時間）；模塊注釋（...部分，開始；...部分，結束）；防壓縮注釋（在注釋內(nèi)容最前面加" ! "）。
Css reset樣式：HTML標簽在不同瀏覽器下有不同的默認樣式，這是為了保證在沒有樣式表的情況下也能正常顯示，也是HTML語義化的意義所在。例如button元素在IE，chrome，firefox等瀏覽器中的默認樣式都不同，為了開發(fā)效率，就可以使用reset.css樣式來去除瀏覽器的默認樣式。
瀏覽器對css選擇器的解析是從右到左的方向；

3.盒模型？

將HTML元素看成盒子，它包括：邊距（margin）、邊框（border）、填充（padding）和實際內(nèi)容。注意：當你指定一個css元素的寬度和高度屬性，你只是設置了實際內(nèi)容區(qū)域的高度和寬度，而完全大小的元素，你還必須加上填充，邊框和邊距。盒模型的寬度和高度計算：
總寬度：寬度 + 左填充 + 右填充 + 左邊框 + 右邊框 + 左邊距 + 右邊距
總高度：高度 + 頂部填充 + 底部填充 + 上邊框 + 下邊框 + 上邊距 + 下邊距
外邊距疊加：只符合block和inline-塊級元素，inline元素的margin-top和margin-bottom設置無效；水平方向永遠不會疊加；垂直方向疊加之后取最大值。
負margin：margin-top和margin-left為負數(shù)時，當前元素會被拉向指定方向；
margin-bottom和margin-right為負數(shù)時，后續(xù)元素會被拉向指定方向；
技巧：a.圖片和文字并列上下不對齊，可以給圖片設置margin：0 3px -3px 0；
b.自適應兩列布局，主體列寬度設置100%，另外一列設置固定寬度，主題列負marign另外一列的固定寬度；

4.實現(xiàn)三欄布局，左右定寬，中間自適應？

1.絕對定位方法；2.使用自身浮動法；3.圣杯布局（負margin值法）；4.flex布局

5.詳細說說box-sizing屬性取值的區(qū)別？

content-box(默認值)：寬度和高度分別應用到元素的內(nèi)容框，在寬度和高度之外繪制元素的內(nèi)邊距和邊框。
border-box：元素指定的任何內(nèi)邊距和邊框都將在已設定的寬度和高度內(nèi)進行繪制，通過從已設定的寬度和高度分別減去邊框和內(nèi)邊距才能得到內(nèi)容的寬度和高度。
inherit：從父元素繼承 box-sizing 屬性的值。

6.塊級元素和行內(nèi)元素的區(qū)別？

1.塊元素，總是獨占一行；內(nèi)聯(lián)元素，能和其他元素并列在一行；
2.塊元素，能容納其他塊元素或者內(nèi)聯(lián)元素；內(nèi)聯(lián)元素，只能容納文本或其他內(nèi)聯(lián)元素；
3.塊元素中高度，行高以及頂和底邊距都可以控制；內(nèi)聯(lián)元素中高，行高及頂和底邊距不可改變。
4.行內(nèi)塊元素實際就是把塊元素以行的形式展現(xiàn),保留了塊元素可以設置的對應CSS屬性

7.清除浮動？

1.父級div手動定義height，就解決了父級div無法自動獲取到高度的問題,只適合高度固定的布局，要給出精確的高度，如果高度和父級div不一樣時，會產(chǎn)生問題。
2.結尾處加空div標簽 clear:both;添加一個空div，利用css的clear:both清除浮動，讓父級div能自動獲取到高度。
3.父級div定義偽元素:after 和 zoom；IE8以上和非IE瀏覽器才支持:after，原理和方法2有點類似，zoom(IE轉有屬性)可解決ie6,ie7浮動問題
4.父級div定義 overflow:hidden；必須定義width或zoom:1，同時不能定義height，使用overflow:hidden時，瀏覽器會自動檢查浮動區(qū)域的高度，不能和position配合使用，因為超出的尺寸的會被隱藏。
5.父級div定義 overflow:auto；必須定義width或zoom:1，同時不能定義height，使用overflow:auto時，瀏覽器會自動檢查浮動區(qū)域的高度，內(nèi)部寬高超過父級div時，會出現(xiàn)滾動條。
6.父級div 也一起浮動，所有代碼一起浮動，就變成了一個整體
7.父級div定義 display:table；將div屬性變成表格。

8.什么是BFC,怎么觸發(fā)BFC?

塊級元素格式化上下文；它決定了塊級元素如何對它的內(nèi)容進行布局，以及與其他元素的關系和相互關系。塊級元素：父級（是一個塊元素；內(nèi)容：子元素（是一個塊元素）；其他元素：與內(nèi)容同級別的兄弟元素相互作用：BFC里的元素與外面的元素不會發(fā)生影響。
觸發(fā)BFC的方式（一下任意一條就可以）
1.float的值不為none
2.overflow的值不為visible
3.display的值為table-cell、table-caption和inline-block之一
4.position的值不為static或則releative中的任何一個

9.偽類和偽元素的區(qū)別？

有沒有創(chuàng)建一個文檔樹之外的元素。
常用偽類：:link，:visited，:hover，:active，:focus，:first-child，nth-child等；
常見偽元素：::before/:before，::after/:after

10.什么是reflow 和 repaint?

reflow（回流）指的是計算頁面布局。
repiant（重繪）遍歷所有的節(jié)點檢測各節(jié)點的可見性、顏色、輪廓等可見的樣式屬性，然后根據(jù)檢測的結果更新頁面的響應部分。

11. 前端怎么做優(yōu)化？

1、使用css sprites，可以有效的減少http請求數(shù)
2、使用緩存
3、壓縮js，css文件，減小文件體積
4、使用cdn，減小服務器負擔
5、懶加載圖片
6、預加載css，js文件
7、避免dom結構的深層次嵌套
8、給DOM元素添加樣式時，把樣式放到類中，直接給元素添加類，減少重構，回流

12.不同瀏覽器之間的兼容性問題？

a.html部分
1）h5標簽低版本瀏覽器無法解析，htmlshim框架可以讓低于IE9的瀏覽器支持h5標簽
2）img的alt屬性，在圖片不存在的情況下，各瀏覽器的解析不一致；在chrome下顯示的是一張破損的圖片，在ff下顯示的是alt的文字，而在IE中顯示的是破損的圖片加文字
3）ul標簽內(nèi)外邊距問題，ul標簽在IE6\IE7中，有個默認的外邊距，但是在IE8以上及其他瀏覽器中有個默認的內(nèi)邊距

b.css部分
1）css的hack問題：主要針對IE的不同版本，不同的瀏覽器的寫法不同


2）被點擊過后的超鏈接不再具有hover和active屬性，解決辦法:按link，visited，hover，active的順序書寫css樣式
3)在使用絕對定位或者相對定位后，IE中設置z-index失效，原因是因為其元素依賴于父元素的z-index，但是父元素默認為0， 子高父低，所以不會改變顯示的順序

c.js部分
1）標準的事件綁定方法函數(shù)為addEventListener，但IE下是attachEvent；
2）事件的捕獲方式不一致，標準瀏覽器是由外至內(nèi)，而IE是由內(nèi)到外，但是最后的結果是將IE的標準定為標準
3）事件處理時的event屬性，在標準瀏覽器其是傳入的，IE下由window.event獲取的。并且獲取目標元素的方法也不同，標準瀏覽器是event.target，而IE下是event.srcElement
4）ajax的實現(xiàn)方式不同，這個我所理解的是獲取XMLHttpRequest的不同，IE下是activeXObject
5）IE中不能操作tr的innerHtml
6）獲得DOM節(jié)點的父節(jié)點、子節(jié)點的方式不同
其他瀏覽器：parentNode parentNode.childNodes
IE：parentElement parentElement.children

13.異步settimeout和setinterval的區(qū)別？

setTimeout：在指定的毫秒數(shù)后，將定時任務處理的函數(shù)添加到執(zhí)行隊列的隊尾。(執(zhí)行一次)。
setInterval：按照指定的周期(以毫秒數(shù)計時)，將定時任務處理函數(shù)添加到執(zhí)行隊列的隊尾。（以指定時間為周期循環(huán)執(zhí)行）
注意：setInterval根據(jù)HTML規(guī)范可知：在一個小時之內(nèi)會延遲 4-5ms這么一個延遲。也就是說使用這個計時不是非常精確。

14.map和forEach區(qū)別？

1、map速度比foreach快
2、map會返回一個新數(shù)組，不對原數(shù)組產(chǎn)生影響,foreach不會產(chǎn)生新數(shù)組，
3、map因為返回數(shù)組所以可以鏈式操作，foreach不能。

15.DNS解析？

域名與IP地址之間是多對一的關系，一個ip地址不一定只對應一個域名，且一個域名只可以對應一個ip地址，它們之間的轉換工作稱為域名解析。

16.ES6的模塊化是什么

ES6中的模塊就是一個個獨立的js文件。es6中新增了兩個命令export和import,export命令用于規(guī)定es6模塊的對外接口，import 命令用于輸入其他es6模塊化提供的功能。

17.列舉出通過CSS樣式隱藏元素的方法，并說明其區(qū)別？

1、opacity:0
只能從視覺上隱藏元素。而元素本身依然占據(jù)它自己的位置并對網(wǎng)頁的布局起作用，它也將響應用戶交互。
2、visibility:hidden
對網(wǎng)頁布局起作用。與opacity唯一不同的是它不會響應任何用戶交互。
3、diaplay:none
被隱藏的元素不可見并且連盒模型也不生成，不占據(jù)任何空間，用戶交互操作都不可能生效。
4、position:absolute
將元素移出可視區(qū)域，既不會影響布局，有可能讓元素保持可以操作。

18.列出移動端開發(fā)中適配各種屏幕尺寸的解決方案(至少3種)？

a.固定高度，寬度自適應
視口：<meta name="viewport" content="width=device-width,initial-scale=1">
垂直方向用定值，水平方向用百分比、定值、flex都行。
b.固定寬度，viewport縮放
視口：<meta name="viewport" content="width=640,initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scalable=no">
設計圖、頁面寬度、viewport width使用一個寬度，瀏覽器幫我們完成縮放。單位使用px即可。
c.rem做寬度，viewport縮放
根據(jù)屏幕寬度設定 rem 值，需要適配的元素都使用 rem 為單位，不需要適配的元素還是使用 px 為單位

19.圖片近似垂直居中與完全垂直居中？

近似垂直居中：如果div內(nèi)插入了img圖片后就盡量別插入其他元素，比如文字或者其他標簽，否則img可能會不是100%的垂直居中，可能會偏上或者偏下一點點距離。
垂直居中：<div><img style="vertical-align:middle" src="#" /></div>
<div><img align=absmiddle src="#" /></div>

20.介紹閉包？

閉包是指有權訪問另一個函數(shù)作用域中的變量的函數(shù)。創(chuàng)建閉包的常見方式，就是在一個函數(shù)內(nèi)部創(chuàng)建另一個函數(shù)。
閉包的用處有兩個：

1. 可以讀取函數(shù)內(nèi)部的變量
2. 讓這些變量的值始終保持在內(nèi)存中
   閉包的缺點：
   1.閉包使得函數(shù)中的變量都被保存在內(nèi)存中，內(nèi)存消耗很大，濫用閉包會造成網(wǎng)頁性能問題，在IE中導致內(nèi)存泄漏。解決方法是，在退出函數(shù)之前，將不使用的局部變量全部刪除。
3. 閉包會在父函數(shù)外部，改變父函數(shù)內(nèi)部變量的值。

21.數(shù)組去重？

image.png

22.數(shù)據(jù)類型有哪幾種？引用和基本數(shù)據(jù)類型的區(qū)別？

基本數(shù)據(jù)類型：
undefined，null，boolean，number，string，symbol；
引用數(shù)據(jù)類型：
Object，Array，Date，RegExp，F(xiàn)unction，Number，String，Boolean，Global，Math；
兩者區(qū)別：
基本數(shù)據(jù)類型是簡單的數(shù)據(jù)段，存儲在棧中，可以直接進行復制和保存等訪問操作；引用數(shù)據(jù)類型是有多個值構成的對象，存儲在堆中，當訪問引用數(shù)據(jù)類型時，需要先找到對象在內(nèi)存中的地址，在按照地址去獲取對象中的值，這叫做引用訪問，引用數(shù)據(jù)類型進行參數(shù)傳遞時，傳遞的是內(nèi)存地址。

22.Ajax原理？

Ajax是異步的JavaScript 和 XML，在不重新加載整個網(wǎng)頁的情況下，通過XmlHttpRequest對象來向服務器發(fā)異步請求，從服務器獲得數(shù)據(jù)，然后用javascript來操作DOM來更新頁面。

23.同步和異步？

由于javascript是單線程，單線程就意味著，所有任務執(zhí)行需要排隊，前一個任務結束，才會執(zhí)行后一個任務。
同步指下一個程序的執(zhí)行需要等到上一個程序執(zhí)行完畢，也就是得出結果后下一個才能執(zhí)行，
異步指的是上一個程序執(zhí)行后，下一個程序不用等到上一個程序出結果就能執(zhí)行，等上一個出結果了調(diào)用回調(diào)函數(shù)處理結果就好。

24.js的5種設計模式？

1.js工廠模式；
2.js構造函數(shù)模式；
3.js原型模式；
4.構造函數(shù)+原型的js混合模式（推薦）；
5.構造函數(shù)+原型的動態(tài)原型模式（推薦）；

25.Promise的理解？

將異步操作以同步操作的流程表達出來，避免了層層嵌套的回調(diào)函數(shù)，Promise對象提供統(tǒng)一接口，可用鏈式操作，使得異步操作更容易控制。缺點是：一旦執(zhí)行，無法中途取消；不設置回調(diào)函數(shù)，內(nèi)部發(fā)生錯誤；當處于pending狀態(tài)時，無法得知進展到哪一個階段。
特性：
a.立即執(zhí)行屬性

image.png

b.狀態(tài)不可逆，鏈式調(diào)用
c.then() 回調(diào)異步性
用法：

image.png

26.slice、splice和split的區(qū)別？

slice：對數(shù)組進行部分截取，并返回一個新的數(shù)組，用法：array.slice(start,end)；
var arr1 = [1,2,3,4];
var arr2 = arr1.slice(1,2);
此時arr1還是[1,2,3,4],arr2是[2]
splice：一個強大的js數(shù)組操作方法，可以完成刪除、插入、替換（刪除+插入）功能。用法：arr.splice(index,howmany,item1,.....,itemX)，第一個參數(shù)是刪除的出發(fā)點，第二個是數(shù)量，第三個和之后的是插入的內(nèi)容，從第一個參數(shù)開始的位置插入。
var all = [1,2,3,4,5,6]；
all.splice(1,2,7)；
splice返回刪除的內(nèi)容是[2,3]，從數(shù)組標識1開始2位，此時輸出all則是[1,7,4,5,6]
split：把string分割成片段來創(chuàng)建一個字符串數(shù)組?？蛇x參數(shù)limit可以限制被分割的片段數(shù)量。separator參數(shù)可以是一個字符串或一個正則表達式。如果separator是一個空字符，會返回一個單字符的數(shù)組。用法：string.split(separator,limit)
var str="1-2-3-4";
var arr = str.split("-");//arr = [1,2,3,4]
var a="0123456";
var b=a.split("",3); //b=["0","1","2"]

27.對象的淺拷貝和深拷貝是什么，該怎么實現(xiàn)？

對于字符串類型，淺拷貝是對值得復制；對于對象來說，淺拷貝是對對象地址的復制，并沒有開辟新的棧，也就是拷貝的結果是兩個對象指向同一個地址，修改其中一個對象的屬性，則另一個對象的屬性也會改變；深拷貝則是開辟新的棧，兩個對象對應不同的地址，修改一個對象的屬性不會改變另外一個對象的屬性。
深拷貝常用的兩種實現(xiàn)辦法：
a.遞歸調(diào)用淺拷貝

image.png

b.過JSON解析

image.png

28.原型和原型鏈

在JS中，萬物皆對象，大致可分為函數(shù)對象和普通對象。一般而言，通過new Function產(chǎn)生的對象是函數(shù)對象，其他對象都是普通對象。通過new 普通函數(shù)產(chǎn)生的對象（實例），就是普通對象。
在JS中，每當創(chuàng)建一個函數(shù)對象f1時，該對象中都會內(nèi)置一些屬性，其中包括prototype和proto，prototype即原型對象，它記錄著f1的一些屬性和方法。但是，prototype對f1是不可見的，也就是說，f1不會查找prototype里面的屬性和方法。
prototype有什么用呢？ 其實prototype的主要作用就是繼承。 通俗一點講，prototype中定義的屬性和方法都是留給自己的“后代”用的，因此，子類完全可以訪問prototype中的屬性和方法。
想要知道f1是如何把prototype留給“后代”，我們需要了解一下JS中的原型鏈，此時，JS中的 proto 入場了，它的作用就是保存父類的prototype對象，JS在通過new 表達式創(chuàng)建一個對象的時候，通常會把父類的prototype賦值給新對象的proto屬性，這樣，就形成了一代代傳承…
原型鏈解析圖

image.png

29.websocket ？

websocket是一種協(xié)議，可以讓我們建立客戶端到服務器端的全雙工通信，這就意味著服務器端可以主動推送數(shù)據(jù)到客戶端。

30.多個頁面之間如何進行通信？

使用cookie，使用web worker（web worker 是運行在后臺的 JavaScript，獨立于其他腳本，不會影響頁面的性能。您可以繼續(xù)做任何愿意做的事情：點擊、選取內(nèi)容等等，而此時 web worker 在后臺運行。所有主流瀏覽器均支持 web worker，除了 Internet Explorer。），使用localeStorage和sessionStorage

32.new 操作符到底做了什么?

首先，new操作符為我們創(chuàng)建一個新的空對象，然后this變量指向該對象，其次，空對象的原型繼承函數(shù)的原型，最后，改變構造函數(shù)內(nèi)部的this的指向。

33.JavaScript的作用域和作用域鏈？

JavaScript的作用域指的是變量的作用范圍，內(nèi)部作用域由函數(shù)的形參，實參，局部變量，函數(shù)構成，內(nèi)部作用域和外部的作用域一層層的鏈接起來形成作用域鏈，當在在函數(shù)內(nèi)部要訪問一個變量的時候，首先查找自己的內(nèi)部作用域有沒有這個變量，如果沒有就到這個對象的原型對象中去查找，還是沒有的話，就到該作用域所在的作用域中找，直到到window所在的作用域，每個函數(shù)在聲明的時候就默認有一個外部作用域的存在了。

34.跨域的幾種方式？

jsonp（利用script標簽的跨域能力）跨域、
websocket（html5的新特性，是一種新協(xié)議）跨域、
設置代理服務器（由服務器替我們向不同源的服務器請求數(shù)據(jù)）、
CORS（跨源資源共享，cross origin resource sharing）、
iframe跨域、
postMessage(包含iframe的頁面向iframe傳遞消息)

35.封裝cookie的添加，刪除，查詢方法？

image.png

36.事件委托機制？

不在事件的發(fā)生地設立監(jiān)聽函數(shù)，而是在事件發(fā)生地的父元素或者祖先元素設置監(jiān)聽器函數(shù)，這樣可以大大提高性能，因為可以減少綁定事件的元素

37.前端模塊化的理解？

前端模塊話就是把復雜的文件分成一個個獨立的模塊，比如js文件，分成獨立的模塊之后有利于代碼的重用和維護，但是這樣又會引來模塊與模塊之間的依賴問題，所以就有了CommonJS、AMD、CMD規(guī)范，最后出現(xiàn)了webpack，webpack就是前端模塊化的一種解決方案。

38.HTTP服務器狀態(tài)代碼定義?

200 OK 正常返回信息
304 Not Modified 自從上次請求后，請求的網(wǎng)頁未被修改
400 Bad Request 錯誤的請求格式，服務器無法理解請求的格式，客戶端不應該嘗試再次使用相同的內(nèi)容發(fā)起請求
403 Forbidden 禁止訪問
404 Not Found 找不到如何與URI匹配的資源
500 Internal Server Error 最常見的服務器端錯誤
503 Server Unavailable 服務器端暫時無法處理請求（可能是過載或維護）

39.div里面的div水平垂直居中？

①使用偽元素::after

image.png

②css3屬性transform

image.png

image.png

④讓圖片水平垂直居中

image.png

image.png

40.三角符號？

image.png

41.css單位？

1.相對單位：px,%,em,rem
%：width,height,font-size的百分比是相對于父元素“相同屬性”的值來計算的；
em：em是相對當前元素的字體大?。ㄒ詐x為單位的font-szie值）而言的。如果當前元素沒有定義font-size，則當前元素會繼承父元素的font-size,如果當前元素的所有祖先元素都沒定義font-size,則當前元素會繼承瀏覽器默認的font-size,所有瀏覽器默認的都是16px。使用技巧：首行縮進：text-indent：2em;設定html的font-szie:62.5%;那么1em = 10px;（建議PC端使用，或者px）
rem：指的是相對于根元素（即html元素）的字體大小。rem是css3新引入的字體，ie8及以下不支持。（建議移動端使用）

42.css選擇器和優(yōu)先級？

5種基本選擇器：
id，class，類型（標簽名），通配符（*）和屬性選擇符[foo='bar']
2種偽選擇器？
偽類選擇器：hover，active，focus，visited，link，:first-child，:nth-child；
偽元素選擇器：:before，:after，:first-line，:first-letter；
和組合選擇器（+, >, ~）
優(yōu)先級：
ID>類或偽類或?qū)傩?gt;類型或偽元素>通配選擇器， 外部樣式表和內(nèi)部樣式表擁有相同的優(yōu)先級， HTML style屬性擁有最高優(yōu)先級（important除外），瀏覽器默認樣式（UA Default）優(yōu)先級最低。 對于相同優(yōu)先級的規(guī)則，寫在后面的會覆蓋前面的。

43.移動端表單輸入的時候，手機鍵盤擋住輸入框，怎么解決？

讓頁面長一點，或者用脫離文檔流的定位，這樣鍵盤彈出來時，輸入框會自動上滑；或者使用js讓頁面向上滑動一段距離。

44.Jquery處理緩存？

主要是jquery.data()方法，jquery.data為兩種對象提供緩存：js對象和HtmlElement

45.使用正則清除字符串兩端的空格？

image.png

46.主流瀏覽器內(nèi)核？

IE：Trident，IE11的后繼者Edge采用了新內(nèi)核EdgeHTML。
FF：Gecko。
Chrome/Safari：Webkit。
360：Trident和webkit

48.在瀏覽器中敲入URL到完整渲染出來，經(jīng)歷的過程解析？

1）.輸入url地址，瀏覽器根據(jù)域名尋找IP地址，并發(fā)送一個http請求給服務器。
2）.服務器接受請求，處理請求生成html代碼（可能是壓縮過的），返回給瀏覽器，瀏覽器接收服務器響應結果（有壓縮則解壓）。
3）.瀏覽器解析html頁面，構建DOM樹。
4）.根據(jù)css構建render樹
5）.最后是布局和繪制。