前端常見問題

1.null和undefined的區別

2.談談性能優化問題

3.常見web安全漏洞

4.哪些操作會造成內存泄漏？

5.瀏覽器兼容性問題以及列舉IE 與其他瀏覽器不一樣的特性？

6.談談你對重構的理解

7.HTTP狀態碼

8.說說你對MVC和MVVM的理解以及vue和angular區別

9.說說你對語義化的理解？

10.瀏覽器渲染頁面的過程

11.頭部申明的作用

12.介紹一下你對瀏覽器內核的理解，常見的瀏覽器內核有哪些？

13.HTML5的離線儲存怎么使用，工作原理能不能解釋一下？

14.iframe 有那些優點和缺點？

15.如何實現瀏覽器內多個標簽頁之間的通信? 

16.如何在頁面上實現一個圓形的可點擊區域？

17.實現不使用 border 畫出1px高的線，在不同瀏覽器的標准模式與怪異模式下都能保持一致的效果

 

1.null和undefined的區別？

null用來表示尚未存在的對象，常用來表示函數企圖返回一個不存在的對象。

undefined表示"缺少值"，就是此處應該有一個值，但是還沒有定義。典型用法是：

（1）變量被聲明了，但沒有賦值時，就等於undefined。

（2) 調用函數時，應該提供的參數沒有提供，該參數等於undefined。

（3）對象沒有賦值的屬性，該屬性的值為undefined。

（4）函數沒有返回值時，默認返回undefined。

null表示"沒有對象"，即該處不應該有值。典型用法是：

（1） 作為函數的參數，表示該函數的參數不是對象。

（2） 作為對象原型鏈的終點。

 總之：null是不存在，undefined是沒有賦值

 

 

2.談談性能優化問題

 

代碼層面：避免使用css表達式，避免使用高級選擇器，通配選擇器。

 

緩存利用：使用CDN，使用外部js和css文件以便緩存，添加Expires頭，緩存Ajax，服務端配置Etag，減少DNS查找等

 

請求數量：合並樣式和腳本，使用css圖片精靈，初始首屏之外的圖片資源按需加載，靜態資源延遲加載。

 

請求帶寬：壓縮文件，開啟GZIP

 

代碼層面的優化

 

減少DOM操作次數

避免全局查詢

盡量避免寫在HTML標簽中寫Style屬性

 

用hash-table來優化查找

少用全局變量

用innerHTML代替DOM操作

優化javascript性能

用setTimeout來避免頁面失去響應

緩存DOM節點查找的結果

避免使用CSS Expression

避免使用with(with會創建自己的作用域，會增加作用域鏈長度)

多個變量聲明合並

避免圖片和iFrame等的空Src。空Src會重新加載當前頁面，影響速度和效率

 

 

移動端性能優化

 

 

適當使用touch事件代替click事件

不濫用Float。Float在渲染時計算量比較大，盡量減少使用

 

盡量使用css3動畫，開啟硬件加速

避免使用css3漸變陰影效果

可以用transform: translateZ(0)來開啟硬件加速

不濫用Web字體。Web字體需要下載，解析，重繪當前頁面，盡量減少使用

合理使用requestAnimationFrame動畫代替setTimeout

CSS中的屬性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）會觸發GPU渲染，請合理使用。過渡使用會引發手機過耗電增加

PC端的在移動端同樣適用

 

3.常見web安全漏洞

1 XSS攻擊

1.1它允許惡意web用戶將代碼植入到提供給其它用戶使用的頁面中。其實在web前端方面，可以簡單的理解為一種javascript代碼注入

如果你的用戶名稱里面含有script標簽的話，就可以執行其中的代碼了。

還可以使用ajax，將其他用戶在當前域名下的cookie獲取並發送到自己的服務器上。這樣就可以獲取他人信息了。再在各個QQ群中，散播自己的空間，引誘別人來訪問。就可以拿到用戶在這個域名下的cookie或者其他隱私了。

如何防范？

最簡單的辦法防治辦法，還是將前端輸出數據都進行轉義最為穩妥。

1.2再比如圖片顯示不出來會執行onerror，可以從這里面注入從而中毒，解決辦法一樣的，也可以轉義：

<img src="<?php echo htmlentities($imgsrc);?>" />

1.3保護好你的cookie

我們的敏感信息都是存儲在cookie中的（不要把用戶機密信息放在網頁中），想要阻止黑客通過js訪問到cookie中的用戶敏感信息。那么請使用cookie的HttpOnly屬性，加上了這個屬性的cookie字段，js是無法進行讀寫的。php的設置方法如下：

<?php setcookie("userpass", "doctorhou-shuai", NULL, NULL, NULL, NULL, TRUE); ?>

2 CSRF攻擊

 我們日常的開發，還是要遵循提交業務，嚴格按照post請求去做的。把一些應當提交的數據，做成get請求。殊不知，這不僅僅是違反了http的標准而已，也同樣會被黑客所利用。更不要使用jsonp去做提交型的接口，這樣非常的危險。

 

3 網絡劫持攻擊

如果你的網站還沒有進行https加密的化，則在表單提交部分，最好進行非對稱加密--即客戶端加密，只有服務端能解開。這樣中間的劫持者便無法獲取加密內容的真實信息了。

 

4 控制台注入代碼

不知道各位看官有沒有注意到天貓官網控制台的警告信息，這是為什么呢？因為有的黑客會誘騙用戶去往控制台里面粘貼東西（欺負小白用戶不懂代碼），比如可以在朋友圈貼個什么文章，說:"只要訪問天貓，按下F12並且粘貼以下內容，則可以獲得xx元禮品"之類的，那么有的用戶真的會去操作，並且自己隱私被暴露了也不知道。

 

我們平時開發要注意些什么？

1. 開發時要提防用戶產生的內容，要對用戶輸入的信息進行層層檢測

2. 要注意對用戶的輸出內容進行過濾(進行轉義等)

3. 重要的內容記得要加密傳輸(無論是利用https也好，自己加密也好)

4. get請求與post請求，要嚴格遵守規范，不要混用，不要將一些危險的提交使用jsonp完成。

5. 對於URL上攜帶的信息，要謹慎使用。

6. 心中時刻記着，自己的網站哪里可能有危險。

 

 

4.哪些操作會造成內存泄漏？

 

 內存泄漏指任何對象在您不再擁有或需要它之后仍然存在。

 

垃圾回收器定期掃描對象，並計算引用了每個對象的其他對象的數量。如果一個對象的引用數量為 0（沒有其他對象引用過該對象），或對該對象的惟一引用是循環的，那么該對象的內存即可回收。

 

setTimeout 的第一個參數使用字符串而非函數的話，會引發內存泄漏。

 

閉包、控制台日志、循環（在兩個對象彼此引用且彼此保留時，就會產生一個循環）

 

 

5.瀏覽器兼容性問題以及列舉IE 與其他瀏覽器不一樣的特性？

在各個瀏覽器下img有空隙；解決方法:讓圖片浮動

png24位的圖片在iE6瀏覽器上出現背景，解決方案是做成PNG8.

瀏覽器默認的margin和padding不同。解決方案是加一個全局的*{margin:0;padding:0;}來統一

使用css hack

 

  .header {_width:100px;}            /* IE6專用*/
    .header {*+width:100px;}        /* IE7專用*/
    .header {*width:100px;}            /* IE6、IE7共用*/
    .header {width:100px\0;}        /* IE8、IE9共用*/
    .header {width:100px\9;}        /* IE6、IE7、IE8、IE9共用*/
    .header {width:330px\9\0;}    /* IE9專用*/

 

flex（微信兼容性）： 在外層加上：flex-direction: column;display: flex;

html頭部標簽： 若頁面需默認用極速核，增加標簽：<meta name="renderer" content="webkit"> （兼容360瀏覽器（兼容模式）：） <meta http-equiv="X-UA-Compatible" content="chrome=1">（讓網頁優先采用Chrome渲染）

ie6、ie7兼容性問題,常用有兼容性問題的屬性(這些屬性不僅在ie低版本兼容有問題，在火狐等瀏覽器也有，因此需要加前綴)邊框border-radius、box-shadow、border-image

ie6、ie7特殊情況： 1.max-width、min-width、max-height、min-height等屬性無效 2.margin值雙倍邊距3.width等百分比值計算時有誤

 

 

 

 

6.談談你對重構的理解

網站重構：在不改變外部行為的前提下，簡化結構、添加可讀性，而在網站前端保持一致的行為。也就是說是在不改變UI的情況下，對網站進行優化， 在擴展的同時保持一致的UI。

對於傳統的網站來說重構通常是：

表格(table)布局改為DIV+CSS

使網站前端兼容於現代瀏覽器(針對於不合規范的CSS、如對IE6有效的)

對於移動平台的優化

針對於SEO進行優化

深層次的網站重構應該考慮的方面


減少代碼間的耦合

讓代碼保持彈性

嚴格按規范編寫代碼

設計可擴展的API

代替舊有的框架、語言(如VB)

增強用戶體驗

通常來說對於速度的優化也包含在重構中



壓縮JS、CSS、image等前端資源(通常是由服務器來解決)

程序的性能優化(如數據讀寫)

采用CDN來加速資源加載

對於JS DOM的優化

HTTP服務器的文件緩存

 

7.HTTP狀態碼

    100  Continue  繼續，一般在發送post請求時，已發送了http header之后服務端將返回此信息，表示確認，之后發送具體參數信息

    200  OK   正常返回信息

    201  Created  請求成功並且服務器創建了新的資源

    202  Accepted  服務器已接受請求，但尚未處理

    301  Moved Permanently  請求的網頁已永久移動到新位置。

    302 Found  臨時性重定向。

    303 See Other  臨時性重定向，且總是使用 GET 請求新的 URI。

    304  Not Modified  自從上次請求后，請求的網頁未修改過。


    400 Bad Request  服務器無法理解請求的格式，客戶端不應當嘗試再次使用相同的內容發起請求。

    401 Unauthorized  請求未授權。

    403 Forbidden  禁止訪問。

    404 Not Found  找不到如何與 URI 相匹配的資源。

    500 Internal Server Error  最常見的服務器端錯誤。

    503 Service Unavailable 服務器端暫時無法處理請求（可能是過載或維護）。

8.說說你對MVC和MVVM的理解

一：MVC

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

所有通信都是單向的。

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

二：MVVm

View 與 Model 不發生聯系，都通過 viewmodel傳遞。

 

三：vue與angular區別

 

9.說說你對語義化的理解？

1，去掉或者丟失樣式的時候能夠讓頁面呈現出清晰的結構

2，有利於SEO：和搜索引擎建立良好溝通，有助於爬蟲抓取更多的有效信息：爬蟲依賴於標簽來確定上下文和各個關鍵字的權重；

3，方便其他設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網頁；

4，便於團隊開發和維護，語義化更具可讀性，是下一步吧網頁的重要動向，遵循W3C標准的團隊都遵循這個標准，可以減少差異化。

 

 

 10.瀏覽器渲染頁面的過程

1，瀏覽器解析html源碼，然后創建一個 DOM樹(DOM樹的根節點就是 documentElement，對應的是html標簽)

2，瀏覽器解析CSS代碼，計算出最終的樣式數據(解析CSS的時候會按照如下順序來定義優先級：瀏覽器默認設置，用戶設置，外鏈樣式，內聯樣式，html中的style)

3.構建一個 渲染樹(渲染樹中的每一個節點都存儲有對應的css屬性)

4.一旦渲染樹創建好了，瀏覽器就可以根據渲染樹直接把頁面繪制到屏幕上。

 

11.Doctype作用？標准模式與兼容模式各有什么區別?

<!DOCTYPE>聲明位於位於HTML文檔中的第一行，處於 <html> 標簽之前。告知瀏覽器的解析器用什么文檔標准解析這個文檔。DOCTYPE不存在或格式不正確會導致文檔以兼容模式呈現

標准模式的排版 和JS運作模式都是以該瀏覽器支持的最高標准運行。在兼容模式中，頁面以寬松的向后兼容的方式顯示,模擬老式瀏覽器的行為以防止站點無法工作

 

 

12.介紹一下你對瀏覽器內核的理解，常見的瀏覽器內核有哪些？

主要分成兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎

渲染引擎：負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計算網頁的顯示方式，然后會輸出至顯示器或打印機。瀏覽器的內核的不同對於網頁的語法解釋會有不同，所以渲染的效果也不相同。所有網頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網絡內容的應用程序都需要內核

JS引擎則：解析和執行javascript來實現網頁的動態效果

最開始渲染引擎和JS引擎並沒有區分的很明確，后來JS引擎越來越獨立，內核就傾向於只指渲染引擎

 

常見的瀏覽器內核有哪些？

• Trident內核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML]
• Gecko內核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
• Presto內核：Opera7及以上。 [Opera內核原為：Presto，現為：Blink;]
• Webkit內核：Safari,Chrome等。 [ Chrome的Blink（WebKit的分支）]

 

13.HTML5的離線儲存怎么使用，工作原理能不能解釋一下？

• 在用戶沒有與因特網連接時，可以正常訪問站點或應用，在用戶與因特網連接時，更新用戶機器上的緩存文件

• 原理：HTML5的離線存儲是基於一個新建的.appcache文件的緩存機制(不是存儲技術)，通過這個文件上的解析清單離線存儲資源，這些資源就會像cookie一樣被存儲了下來。之后當網絡在處於離線狀態下時，瀏覽器會通過被離線存儲的數據進行頁面展示

• 如何使用：

  • 頁面頭部像下面一樣加入一個manifest的屬性；
  • 在cache.manifest文件的編寫離線存儲的資源
  • 在離線狀態時，操作window.applicationCache進行需求實現

CACHE MANIFEST
    #v0.11
    CACHE:
    js/app.js
    css/style.css
    NETWORK:
    resourse/logo.png
    FALLBACK:
    / /offline.html

14.iframe 有那些優點和缺點？

• 優點：

  • 用來加載速度較慢的內容（如廣告）
  • 可以使腳本可以並行下載
  • 可以實現跨子域通信

• 缺點：

  • iframe 會阻塞主頁面的 onload 事件
  • 無法被一些搜索引擎索識別
  • 會產生很多頁面，不容易管理

15.如何實現瀏覽器內多個標簽頁之間的通信? 

• WebSocket、SharedWorker
• 也可以調用localstorge、cookies等本地存儲方式

16.如何在頁面上實現一個圓形的可點擊區域？

• map+area或者svg
• border-radius
• 純js實現 需要求一個點在不在圓上簡單算法、獲取鼠標坐標等等

17.實現不使用 border 畫出1px高的線，在不同瀏覽器的標准模式與怪異模式下都能保持一致的效果

 

<div style="height:1px;overflow:hidden;background:red"></div>

 

 

css：

1.CSS 選擇符有哪些？哪些屬性可以繼承？優先級算法如何計算？ CSS3新增偽類有那些？

2.display：none;和visibility:hidden區別

3、link與@import的區別

4.display:block;和display:inline;的區別

5、如何水平居中一個元素

6.css垂直居中方法

7.自適應布局

8.移動端自適應

9.position的值， relative和absolute分別是相對於誰進行定位的？

10.上下margin重合問題

11.解釋下浮動和它的工作原理？清除浮動的技巧

12.浮動元素引起的問題和解決辦法

13.介紹一下標准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？

14.什么是響應式設計？響應式設計的基本原理是什么？如何兼容低版本的IE？

15.什么是視差滾動效果，如何給每頁做不同的動畫？

16.display:inline-block 什么時候會顯示間隙？

 

17.overflow: scroll 時不能平滑滾動的問題怎么處理？ 

18.一個高度自適應的div，里面有兩個div，一個高度100px，希望另一個填滿剩下的高度

 

 

 

1.CSS 選擇符有哪些？哪些屬性可以繼承？優先級算法如何計算？ CSS3新增偽類有那些？

 

CSS 選擇符有哪些

1.id選擇器（ # myid） 2.類選擇器（.myclassname） 3.標簽選擇器（div, h1, p） 4.相鄰選擇器（h1 + p） 5.子選擇器（ul > li） 6.后代選擇器（li a） 7.通配符選擇器（ * ） 8.屬性選擇器（a[rel = "external"]） 9.偽類選擇器（a: hover, li:nth-child）

優先級為:

!important > id > class > tag

important 比 內聯優先級高,但內聯比 id 要高

CSS3新增偽類舉例：

    p:first-of-type 選擇屬於其父元素的首個 <p> 元素的每個 <p> 元素。 p:last-of-type 選擇屬於其父元素的最后 <p> 元素的每個 <p> 元素。 p:only-of-type 選擇屬於其父元素唯一的 <p> 元素的每個 <p> 元素。 p:only-child 選擇屬於其父元素的唯一子元素的每個 <p> 元素。 p:nth-child(2) 選擇屬於其父元素的第二個子元素的每個 <p> 元素。 :enabled :disabled 控制表單控件的禁用狀態。 :checked 單選框或復選框被選中。

CSS3有哪些新特性？

CSS3實現圓角（border-radius），陰影（box-shadow），

對文字加特效（text-shadow、），線性漸變（gradient），旋轉（transform）

transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋轉,縮放,定位,傾斜

增加了更多的CSS選擇器 多背景 rgba

在CSS3中唯一引入的偽元素是::selection.

媒體查詢，多欄布局

border-image

CSS3中新增了一種盒模型計算方式：

box-sizing。盒模型默認的值是content-box, 新增的值是padding-box和border-box，幾種盒模型計算元素寬高的區別如下：

content-box（默認）

布局所占寬度Width：

Width = width + padding-left + padding-right + border-left + border-right

布局所占高度Height:

Height = height + padding-top + padding-bottom + border-top + border-bottom

padding-box

布局所占寬度Width：

Width = width(包含padding-left + padding-right) + border-top + border-bottom

布局所占高度Height:

Height = height(包含padding-top + padding-bottom) + border-top + border-bottom

border-box

布局所占寬度Width：

Width = width(包含padding-left + padding-right + border-left + border-right)

布局所占高度Height:

Height = height(包含padding-top + padding-bottom + border-top + border-bottom)

2.display：none;和visibility:hidden區別

1）display:none;會讓元素完全從渲染樹中消失，渲染的時候不占據任何空間；visibility:hidden;不會讓元素從渲染樹消失，渲染樹元素繼續占據空間，只是內容不可見。        

2）display:none;是非繼承屬性，子孫節點消失由於元素從渲染樹消失造成，通過修改子孫節點屬性無法顯示；visibility:hidden;是繼承屬性，子孫節點消失由於繼承了hidden，通過設置visibility:visible;可以讓子孫節點顯示。

 

3、link與@import的區別

1）link是html方式，@import是css方式

2）link優於@import

 

4.display:block;和display:inline;的區別

display:block就是將元素顯示為塊級元素,高度，行高以及頂和底邊距都可控制；

display:inline就是將元素顯示為行內元素,高，行高及頂和底邊距不可改變；

應用此特性的元素呈現為內聯對象，周圍元素保持在同一行，但可以設置寬度和高度地塊元素的屬性

 

5、如何水平居中一個元素
1）如果需要居中的元素為常規流中的inline元素，為父元素設置text-align:center;即可實現
2）如果需要居中的元素為常規流中的block元素：
i.為元素設置寬度
ii.設置左右margin為auto
iii.IE6下需在父元素上設置text-align:center;再給子元素恢復需要的值
3）如果需要居中的元素為浮動元素：

//確定容器的寬高 寬500 高 300 的層
//設置層的外邊距

 .div {
      width:500px ; height:300px;//高度可以不設
      margin: -150px 0 0 -250px;
      position:relative;         //相對定位
      background-color:pink;     //方便看效果
      left:50%;
      top:50%;
 }

4）如果需要居中的元素為絕對定位元素：

  position: absolute;
  width: 1200px;
  background: none;
  margin: 0 auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;

 

 

 

6.css垂直居中方法

這個問題又可以細分為，被垂直居中的元素是否定高，是文字還是塊，文字是單行還是多行文字等等

解決方案：

1.單行文字

元素定高的話，設置margin值或者和外層高度一樣的line-height

2.多行文字：

把多行文字當做整體span，然后當做圖片處理，然后外層div的設置，外部div不能使用浮動

span{display:inline-block; font-size:0.1em; vertical-align:middle;}

div{display:table-cell; width:550px; height:1.14em; padding:0 0.1em; border:4px solid #beceeb; color:#069; font-size:10em; vertical-align:middle;}

3.大小不固定，圖片的水平垂直居中：

將要顯示的圖片與一張透明的高度100%，寬度1像素的透明圖片vertical-align:middle對齊

HTML部分（僅示例一張圖片，其他重復，故略）：

<ul class="zxx_align_box_6 fix">

　　<li> <img class="show_img" src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" />

　　<img class="alpha_img" src="../image/pixel.gif" /> </li>

</ul>

css部分：

.zxx_align_box_6 li{height:128px; width:150px; padding:13px 0; float:left; margin-right:10px; border:1px solid #beceeb; text-align:center; font-size:0;} .

zxx_align_box_6 li .alpha_img{height:100%; width:1px; vertical-align:middle;}

.zxx_align_box_6 li .show_img{vertical-align:middle;}

 

 

7.自適應布局

這個問題可以划分為，左固定右自適應寬度，上固定下固定中間自適應高度等等布局要求。

關於左右自適應的，不低於10種解決方案，還要看dom結構要求是並列還是嵌套，是否允許有父級元素，是否允許使用CSS3，是否有背景色，是否要兩列等高，等等

 

例如：先讓右側的寬度定義為100%；里面的right_in的左邊距等於左邊固定寬度的尺寸

而關於自適應高度的解決方案就略少一些，大致也是靠，CSS3的calc屬性，內padding，絕對定位后拉伸，動態js計算等等解決方案，同樣也是要看應用場景能用哪個

 

8.移動端自適應

固定一個某些寬度，使用一個模式，加上少許的媒體查詢方案

使用flexbox解決方案

使用百分比加媒體查詢

使用rem

 

9.position的值， relative和absolute分別是相對於誰進行定位的？

• absolute :生成絕對定位的元素， 相對於最近一級的 定位不是 static 的父元素來進行定位。

• fixed （老IE不支持）生成絕對定位的元素，通常相對於瀏覽器窗口或 frame 進行定位。

• relative 生成相對定位的元素，相對於其在普通流中的位置進行定位。

• static 默認值。沒有定位，元素出現在正常的流中

• sticky 生成粘性定位的元素，容器的位置根據正常文檔流計算得出

 

 

 

 10.上下margin重合問題

ie和ff都存在，相鄰的兩個div的margin-left和margin-right不會重合，但是margin-top和margin-bottom卻會發生重合。

解決方法，養成良好的代碼編寫習慣，同時采用margin-top或者同時采用margin-bottom。


11.解釋下浮動和它的工作原理？清除浮動的技巧
浮動元素脫離文檔流，不占據空間。浮動元素碰到包含它的邊框或者浮動元素的邊框停留。
 1.使用空標簽清除浮動。 
這種方法是在所有浮動標簽后面添加一個空標簽 定義css clear:both. 弊端就是增加了無意義標簽。
2.使用overflow。 
給包含浮動元素的父標簽添加css屬性 overflow:auto; zoom:1; zoom:1用於兼容IE6。 
3.使用after偽對象清除浮動。 
該方法只適用於非IE瀏覽器。具體寫法可參照以下示例。使用中需注意以下幾點。一、該方法中必須為需要清除浮動元素的偽對象中設置 height:0，否則該元素會比實際高出若干像素；



12.浮動元素引起的問題和解決辦法？

浮動元素引起的問題：

（1）父元素的高度無法被撐開，影響與父元素同級的元素

（2）與浮動元素同級的非浮動元素（內聯元素）會跟隨其后

（3）若非第一個元素浮動，則該元素之前的元素也需要浮動，否則會影響頁面顯示的結構

解決方法：

使用CSS中的clear:both;屬性來清除元素的浮動可解決2、3問題，對於問題1，添加如下樣式，給父元素添加clearfix樣式：

    .clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;} .clearfix{display: inline-block;} /* for IE/Mac */

13.介紹一下標准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？

• 有兩種， IE 盒子模型、W3C 盒子模型；
• 盒模型： 內容(content)、填充(padding)、邊界(margin)、 邊框(border)；
• 區 別： IE的content部分把 border 和 padding計算了進去;

14.什么是響應式設計？響應式設計的基本原理是什么？如何兼容低版本的IE？

• 響應式設計就是網站能夠兼容多個終端，而不是為每個終端做一個特定的版本
• 基本原理是利用CSS3媒體查詢，為不同尺寸的設備適配不同樣式
• 對於低版本的IE，可采用JS獲取屏幕寬度，然后通過resize方法來實現兼容：

$(window).resize(function () { screenRespond(); }); screenRespond(); function screenRespond(){ var screenWidth = $(window).width(); if(screenWidth <= 1800){ $("body").attr("class", "w1800"); } if(screenWidth <= 1400){ $("body").attr("class", "w1400"); } if(screenWidth > 1800){ $("body").attr("class", ""); } }

15.什么是視差滾動效果，如何給每頁做不同的動畫？

• 視差滾動是指多層背景以不同的速度移動，形成立體的運動效果，具有非常出色的視覺體驗
• 一般把網頁解剖為：背景層、內容層和懸浮層。當滾動鼠標滾輪時，各圖層以不同速度移動，形成視差的

• 實現原理
  • 以 “頁面滾動條” 作為 “視差動畫進度條”
  • 以 “滾輪刻度” 當作 “動畫幀度” 去播放動畫的
  • 監聽 mousewheel 事件，事件被觸發即播放動畫，實現“翻頁”效果

16.display:inline-block 什么時候會顯示間隙？

• 相鄰的 inline-block 元素之間有換行或空格分隔的情況下會產生間距
• 非 inline-block 水平元素設置為 inline-block 也會有水平間距
• 可以借助 vertical-align:top; 消除垂直間隙
• 可以在父級加 font-size：0; 在子元素里設置需要的字體大小，消除垂直間隙
• 把 li 標簽寫到同一行可以消除垂直間隙，但代碼可讀性差

17.overflow: scroll 時不能平滑滾動的問題怎么處理？

• 監聽滾輪事件，然后滾動到一定距離時用 jquery 的 animate 實現平滑效果。

18.一個高度自適應的div，里面有兩個div，一個高度100px，希望另一個填滿剩下的高度

• 方案1： .sub { height: calc(100%-100px); }
• 方案2： .container { position:relative; } .sub { position: absolute; top: 100px; bottom: 0; }
• 方案3： .container { display:flex; flex-direction:column; } .sub { flex:1; }

 

js：

1.事件冒泡和事件捕獲

2.事件的三個階段

3.事件、IE與火狐的事件機制有什么區別？ 如何阻止冒泡？

4.閉包原理及應用

5.說說你對閉包的理解

6.跨域與如何解決跨域問題

7.ajax的post和get如何實現以及區別

8.創建ajax過程

9.ajax的缺點以及如何解決跨域問題

10.cookie 和session 的區別

11.請你談談Cookie的弊端

12.如何刪除一個cookie

13.棧和隊列的區別?

14.棧和堆的區別？

15.構造函數模式

16.new操作符具體干了什么呢?

17.js性能優化

18.js組件開發

 19.輪播圖實現原理

20.與后台交互數據綁定實現循環出列表數據、表單驗證

 

1.事件冒泡和事件捕獲

事件捕獲 當你使用事件捕獲時，

父級元素先觸發，子級元素后觸發，即div先觸發，p后觸發。

事件冒泡 當你使用事件冒泡時，

子級元素先觸發，父級元素后觸發，即p先觸發，div后觸發。

W3C模型中：

W3C模型是將兩者進行中和，在W3C模型中，任何事件發生時，先從頂層開始進行事件捕獲，直到事件觸發到達了事件源元素。然后，再從事件源往上進行事件冒泡，直到到達document。

程序員可以自己選擇綁定事件時采用事件捕獲還是事件冒泡，

方法就是綁定事件時通過addEventListener函數，它有三個參數，第三個參數若是true，則表示采用事件捕獲，若是false，則表示采用事件冒泡。

ele.addEventListener('click',doSomething2,true)

true=捕獲 false=冒泡

事件的傳播是可以阻止的：

• 在W3c中，使用stopPropagation（）方法

• 在IE下設置cancelBubble = true； 在捕獲的過程中stopPropagation（）；后，后面的冒泡過程也不會發生了.阻止事件的默認行為，例如click <a>后的跳轉~

• 在W3c中，使用preventDefault（）方法；

• 在IE下設置window.event.returnValue = false;

 

2.事件的三個階段

分別是捕獲，目標，冒泡階段

 

3.事件、IE與火狐的事件機制有什么區別？ 如何阻止冒泡？

 1. 我們在網頁中的某個操作（有的操作對應多個事件）。例如：當我們點擊一個按鈕就會產生一個事件。是可以被 JavaScript 偵測到的行為。

 2. 事件處理機制：IE是事件冒泡、firefox同時支持兩種事件模型，也就是：捕獲型事件和冒泡型事件。；

 3. `ev.stopPropagation()`;注意舊ie的方法 `ev.cancelBubble = true`;

4.閉包原理及應用

變量的作用域無非就是兩種：全局變量和局部變量

一：函數內部可以直接讀取全局變量

 

var n=999;

 

　　function f1(){
　　　　alert(n);
　　}

 

　　f1(); // 999

二：在函數外部自然無法讀取函數內的局部變量

function f1(){
　　　　var n=999;
　　}

　　alert(n); // error

 

出於種種原因，我們有時候需要得到函數內的局部變量。但是，前面已經說過了，正常情況下，這是辦不到的，只有通過變通方法才能實現。

那就是在函數的內部，再定義一個函數

function f1(){

　　　　var n=999;

　　　　function f2(){
　　　　　　alert(n); 
　　　　}

　　　　return f2;

　　}

　　var result=f1();

　　result(); // 999

 

 

閉包就是能夠讀取其他函數內部變量的函數，閉包可以用在許多地方。它的最大用處有兩個，一個是可以讀取函數內部的變量，另一個就是讓這些變量的值始終保持在內存中。

 

function f1(){

 

　　　　var n=999;

 

　　　　nAdd=function(){n+=1}

 

　　　　function f2(){
　　　　　　alert(n);
　　　　}

 

　　　　return f2;

 

　　}

 

　　var result=f1();

 

　　result(); // 999

 

　　nAdd();

 

　　result(); // 1000

在這段代碼中，result實際上就是閉包f2函數。它一共運行了兩次，第一次的值是999，第二次的值是1000。這證明了，函數f1中的局部變量n一直保存在內存中，並沒有在f1調用后被自動清除。

為什么會這樣呢？原因就在於f1是f2的父函數，而f2被賦給了一個全局變量，這導致f2始終在內存中，而f2的存在依賴於f1，因此f1也始終在內存中，不會在調用結束后，被垃圾回收機制（garbage collection）回收。

 

 

5.說說你對閉包的理解

使用閉包主要是為了設計私有的方法和變量。閉包的優點是可以避免全局變量的污染，缺點是閉包會常駐內存，會增大內存使用量，使用不當很容易造成內存泄露。在js中，函數即閉包，只有函數才會產生作用域的概念

閉包有三個特性：

1.函數嵌套函數

2.函數內部可以引用外部的參數和變量

3.參數和變量不會被垃圾回收機制回收

 

6.跨域與如何解決跨域問題

跨域：

關於跨域大概可以分iframe的跨域，和純粹的跨全域請求。

A上的頁面獲取B上的資源，瀏覽器會檢查服務器B的HTTP頭(HEAD請求)，如果Access-Control-Allow-Origin中有A，或者是通配符*，瀏覽器就會允許跨域。

 

如何解決跨域問題

jsonp：

原理是：動態插入script標簽，通過script標簽引入一個js文件，這個js文件載入成功后會執行我們在url參數中指定的函數，並且會把我們需要的json數據作為參數傳入。

由於同源策略的限制，XmlHttpRequest只允許請求當前源（域名、協議、端口）的資源，為了實現跨域請求，可以通過script標簽實現跨域請求，然后在服務端輸出JSON數據並執行回調函數，從而解決了跨域的數據請求。

優點是兼容性好，簡單易用，支持瀏覽器與服務器雙向通信。缺點是只支持GET請求。

 

 

7.ajax的post和get如何實現以及區別

最簡單的區別：

1.使用Get請求時,參數在URL中顯示,而使用Post方式,則不會顯示出來

2.使用Get請求發送數據量小,Post請求發送數據量大

3.get請求需注意緩存問題,post請求不需擔心這個問題

AJAX亂碼問題:

編碼問題，1、若客戶端是gb2312編碼，則在服務器指定輸出流編碼2、服務器端和客戶端都使用utf-8編碼

何時使用Get請求,何時使用Post請求：

Get請求的目的是給予服務器一些參數,以便從服務器獲取列表.例如:list.aspx?page=1,表示獲取第一頁的數據

Post請求的目的是向服務器發送一些參數,例如form中的內容.

下面使用實例來表示Get請求和Post請求在發送同一段數據時的區別.

與 POST 相比，GET 更簡單也更快，並且在大部分情況下都能用。

然而，在以下情況中，請使用 POST 請求：

無法使用緩存文件（更新服務器上的文件或數據庫）

向服務器發送大量數據（POST 沒有數據量限制）

發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠

 

8.創建ajax過程，以及json數據如何解析

(1)創建XMLHttpRequest對象,也就是創建一個異步調用對象.

(2)創建一個新的HTTP請求,並指定該HTTP請求的方法、URL及驗證信息.

(3)設置響應HTTP請求狀態變化的函數.

(4)發送HTTP請求.

(5)獲取異步調用返回的數據.

(6)使用JavaScript和DOM實現局部刷新.

 var xmlHttp = new XMLHttpRequest(); xmlHttp.open('GET','demo.php','true'); xmlHttp.send() xmlHttp.onreadystatechange = function(){ if(xmlHttp.readyState === 4 & xmlHttp.status === 200){ } }
https://segmentfault.com/a/1190000000691919


json數據如何解析

我們先初始化一個json格式的對象： 兩種方式

　　var jsonDate = '{ "name":"ABC","age":23 }'

　　var jsonObj = eval( '(' + jsonDate + ')' );  // eval();方法

　　var jsonObj = JSON.parse( jsonDate );  // JSON.parse(); 方法

9.ajax的缺點以及如何解決跨域問題

  1、ajax不支持瀏覽器back按鈕。

  2、安全問題 AJAX暴露了與服務器交互的細節。

  3、對搜索引擎的支持比較弱。

  4、破壞了程序的異常機制。

  5、不容易調試。

如何解決跨域問題

script和iframe

10.cookie 和session 的區別：

1、cookie數據存放在客戶的瀏覽器上，session數據放在服務器上。

2、cookie不是很安全，別人可以分析存放在本地的COOKIE並進行COOKIE欺騙 考慮到安全應當使用session。

3、session會在一定時間內保存在服務器上。當訪問增多，會比較占用你服務器的性能 考慮到減輕服務器性能方面，應當使用COOKIE。

4、單個cookie保存的數據不能超過4K，很多瀏覽器都限制一個站點最多保存20個cookie。

5、所以個人建議： 將登陸信息等重要信息存放為SESSION 其他信息如果需要保留，可以放在COOKIE中

 

11.請你談談Cookie的弊端

cookie雖然在持久保存客戶端數據提供了方便，分擔了服務器存儲的負擔，但還是有很多局限性的。

第一：每個特定的域名下最多生成20個cookie

1.IE6或更低版本最多20個cookie

2.IE7和之后的版本最后可以有50個cookie。

3.Firefox最多50個cookie

4.chrome和Safari沒有做硬性限制

IE和Opera 會清理近期最少使用的cookie，Firefox會隨機清理cookie。

cookie的最大大約為4096字節，為了兼容性，一般不能超過4095字節。

IE 提供了一種存儲可以持久化用戶數據，叫做userdata，從IE5.0就開始支持。每個數據最多128K，每個域名下最多1M。這個持久化數據放在緩存中，如果緩存沒有清理，那么會一直存在。

優點：極高的擴展性和可用性

1.通過良好的編程，控制保存在cookie中的session對象的大小。

2.通過加密和安全傳輸技術（SSL），減少cookie被破解的可能性。

3.只在cookie中存放不敏感數據，即使被盜也不會有重大損失。

4.控制cookie的生命期，使之不會永遠有效。偷盜者很可能拿到一個過期的cookie。

缺點：

1.`Cookie`數量和長度的限制。每個domain最多只能有20條cookie，每個cookie長度不能超過4KB，否則會被截掉.

2.安全性問題。如果cookie被人攔截了，那人就可以取得所有的session信息。即使加密也與事無補，因為攔截者並不需要知道cookie的意義，他只要原樣轉發cookie就可以達到目的了。

3.有些狀態不可能保存在客戶端。例如，為了防止重復提交表單，我們需要在服務器端保存一個計數器。如果我們把這個計數器保存在客戶端，那么它起不到任何作用。

 

12.如何刪除一個cookie

1.將時間設為當前時間往前一點。

var date = new Date(); date.setDate(date.getDate() - 1);//真正的刪除

setDate()方法用於設置一個月的某一天。

2.expires的設置

    document.cookie = 'user='+ encodeURIComponent('name') + ';expires = ' + new Date(0)

 

 

13.棧和隊列的區別?

棧的插入和刪除操作都是在一端進行的，而隊列的操作卻是在兩端進行的。

隊列先進先出，棧先進后出。

棧只允許在表尾一端進行插入和刪除，而隊列只允許在表尾一端進行插入，在表頭一端進行刪除

14.棧和堆的區別？

棧區（stack）—   由編譯器自動分配釋放   ，存放函數的參數值，局部變量的值等。

堆區（heap）   —   一般由程序員分配釋放，   若程序員不釋放，程序結束時可能由OS回收。

堆（數據結構）：堆可以被看成是一棵樹，如：堆排序；

棧（數據結構）：一種先進后出的數據結構。

 

15.構造函數模式

使用構造函數的方法 ，即解決了重復實例化的問題 ，又解決了對象識別的問題，該模式與工廠模式的不同之處在於：

1.構造函數方法沒有顯示的創建對象 (new Object());

2.直接將屬性和方法賦值給 this 對象;

3.沒有 renturn 語句。

 

 

 

 16.new操作符具體干了什么呢?

   1、創建一個空對象，並且 this 變量引用該對象，同時還繼承了該函數的原型。

   2、屬性和方法被加入到 this 引用的對象中。

   3、新創建的對象由 this 所引用，並且最后隱式的返回 this 。



var obj  = {};

obj.__proto__ = Base.prototype;

Base.call(obj);

17.js性能優化

1.避免全局查找和當重復操作dom時候存儲局部變量

2.針對不斷運行的代碼應使用setlnterval代替settimeout

3.字符串連接使用s+=a 代替s=s+a

 

 

18.js組件開發

1.功能模塊化

 

2.用$extend擴展框架 

 

 19.輪播圖實現原理

 例子：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

<! DOCTYPE  html> < html >      < head >          < meta  charset="utf-8">          < title >123</ title >          < style  type="text/css">              .Div0 {width: 200px;height: 100px;position: absolute;top: 30%;left: 300px;}              .Div1 {overflow: hidden;position: relative;width: 200px;height: 100px;}              .Div1 div{width: 200px;height: 100px;position: absolute;top: 0;left: 0;display: none;}          </ style >      </ head >      < body >          < div  class="Div0">              < div  class="Div1">                  < div  style="background: red;display: block;"></div>                  < div  style="background: yellow;"></div>                  < div  style="background: blue;"></div>                  < div  style="background: green;"></div>              </ div >          </ div >      </ body >      < script  src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>      < script >      $(function(){          var i = 0;          var bimg = $(".Div1 div");          var Wid = bimg.width();          function WFB(){              bimg.eq(i).show().animate({left:-Wid});              i++;              if (i == bimg.length) i = 0;              bimg.eq(i).css("left",Wid).show().animate({left:'0px'});          }          setInterval(WFB,1000);      })      </ script > </ html >

　　點擊切換圖片：

1 2 3 4 5 6

var timer=setInterval(WFB,2000); document.onclick=function(){      clearTimeout(timer);      WFB(); timer=setInterval(WFB,2000); };

　　

原生js：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213

<! DOCTYPE  html> < html >   < head >      < meta  charset="UTF-8">      < title ></ title >      < style  type="text/css">          * {              margin: 0;              padding: 0;              text-decoration: none;          }            body {              padding: 20px;          }            #container {              position: relative;              width: 600px;              height: 400px;              border: 3px solid #333;              overflow: hidden;          }            #list {              position: absolute;              z-index: 1;              width: 4200px;              height: 400px;          }            #list img {              float: left;              width: 600px;              height: 400px;          }            #buttons {              position: absolute;              left: 250px;              bottom: 20px;              z-index: 2;              height: 10px;              width: 100px;          }            #buttons span {              float: left;              margin-right: 5px;              width: 10px;              height: 10px;              border: 1px solid #fff;              border-radius: 50%;              background: #333;              cursor: pointer;          }            #buttons .on {              background: orangered;          }            .arrow {              position: absolute;              top: 180px;              z-index: 2;              display: none;              width: 40px;              height: 40px;              font-size: 36px;              font-weight: bold;              line-height: 39px;              text-align: center;              color: #fff;                           cursor: pointer;          }            .arrow:hover {                       }            #container:hover .arrow {              display: block;          }            #prev {              left: 20px;          }            #next {              right: 20px;          }      </ style >      < script  type="text/javascript">          /* 知識點：        */          /*       this用法 */          /*       DOM事件 */          /*       定時器 */            window.onload = function() {              var container = document.getElementById('container');              var list = document.getElementById('list');              var buttons = document.getElementById('buttons').getElementsByTagName('span');              var prev = document.getElementById('prev');              var next = document.getElementById('next');              var index = 1;              var timer;                function animate(offset) {                  //獲取的是style.left，是相對左邊獲取距離，所以第一張圖后style.left都為負值，                  //且style.left獲取的是字符串，需要用parseInt()取整轉化為數字。                  var newLeft = parseInt(list.style.left) + offset;                  list.style.left = newLeft + 'px';                  //無限滾動判斷                  if (newLeft > -600) {                      list.style.left = -3000 + 'px';                  }                  if (newLeft < -3000) {                      list.style.left = -600 + 'px';                  }              }                function play() {                  //重復執行的定時器                  timer = setInterval(function() {                      next.onclick();                  }, 2000)              }                function stop() {                  clearInterval(timer);              }                function buttonsShow() {                  //將之前的小圓點的樣式清除                  for (var i = 0; i <  buttons.length ; i++) {                      if (buttons[i].className == "on") {                          buttons[i].className = "";                      }                  }                  //數組從0開始，故index需要-1                  buttons[index - 1].className = "on";              }                prev.onclick = function() {                  index -= 1;                  if (index < 1) {                      index = 5                  }                  buttonsShow();                  animate(600);              };                next.onclick = function() {                  //由於上邊定時器的作用，index會一直遞增下去，我們只有5個小圓點，所以需要做出判斷                  index += 1;                  if (index > 5) {                      index = 1                  }                  animate(-600);                  buttonsShow();              };                for (var i = 0; i <  buttons.length ; i++) {                  (function(i) {                      buttons[i].onclick = function() {                            /*   這里獲得鼠標移動到小圓點的位置，用this把index綁定到對象buttons[i]上，去谷歌this的用法  */                          /*   由於這里的index是自定義屬性，需要用到getAttribute()這個DOM2級方法，去獲取自定義index的屬性*/                          var clickIndex = parseInt(this.getAttribute('index'));                          var offset = 600 * (index - clickIndex); //這個index是當前圖片停留時的index                          animate(offset);                          index = clickIndex; //存放鼠標點擊后的位置，用於小圓點的正常顯示                          buttonsShow();                      }                  })(i)              }                container.onmouseover = stop;              container.onmouseout = play;              play();            }      </script> </ head >   < body >        < div  id="container">          < div  id="list" style="left: -600px;">              < img  src="" alt="1" />              < img  src="" alt="1" />              < img  src="" alt="2" />              < img  src="" alt="3" />              < img  src="" alt="4" />              < img  src="" alt="5" />              < img  src="" alt="5" />          </ div >          < div  id="buttons">              < span  index="1" class="on"></span>              < span  index="2"></span>              < span  index="3"></span>              < span  index="4"></span>              < span  index="5"></span>          </ div >          < a  href="javascript:;" id="prev" class="arrow"><</a>          < a  href="javascript:;" id="next" class="arrow">></a>      </ div >   </ body >   </ html >

　　html:list(圖片),btn(按鈕)，prev(上一張)，next(下一張)

　　animate（偏移的方法，偏移圖片的寬度）

　　prev（執行animate方法）animate（-圖片寬度）

　　next（animate（圖片寬度）

　　setInterval（自動切換圖片）play方法：設置定時器，1500執行一次prev.coclick（）事件 

 

20.與后台交互數據綁定實現循環出列表數據、表單驗證

 js 發ajax 請求然后循環data

 

21.this用法

 this所在的函數是當做哪個對象的方法調用的

 

22.用面向對象的方式編寫

第一種像下面這樣：

1 2 3 4 5 6 7 8 9

function click1(){      alert("1"); } function click2(){      alert("2"); } function click3(){      alert("3"); }

　　

或者高級一點的就這么寫：

1 2 3 4 5 6 7 8 9

var MyClass;   MyClass.prototype.add = function () {      alert("this is add"); };   MyClass.prototype.reduce = function () {      alert("this is reduce"); };

　　

 

其實這種方法已經很不錯了，就是用面向對象的編程思想去寫的，但是感覺還是羅列，不夠完美，后期維護找起來也比較麻煩。

有一種更直觀更系統的寫法

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

var MyClass = {      //定義屬性      //定義私有屬性      _flag : true,      _arr : [],        //定義公有屬性（在外部可調用）      tips : "hello world",        //定義私有方法      _init : function () {          this._flag = false;      },        //定義公有方法（在外部可調用）      myAdd : function () {          this._init();          if (!this._flag){              alert(this.tips);          }      } };   $(function () {      MyClass.myAdd(); });

　　

以一個類封裝所有的屬性和方法，如果只允許在類內部調用的屬性和方法用“_”來加以區分。

需要注意的問題是，一定要注意this的作用域