2019最新Web前端經典面試試題及答案，持續更新

_cris發表於2018-06-08

Ps: 文章所述內容，來源渠道平時積累以及網上摘錄。按日期持續更新...目錄：

轉載請註明來源。
-2018/6/8
1.position的定位方式
2.描述下從輸入URL到整個網頁載入完畢及顯示在螢幕上的整個流程
3. 描述一下漸進增強和優雅降級之間的不同
-2018/6/10
1.如何解決跨域問題
2.XML和JSON的區別？
3.快速排序的思想並實現一個快排？
-2018/6/16
window.onload和$(function(){})區別
-2018/6/20
1.用div+css寫出文字水平垂直居中，圖片水平垂直居中的樣式及佈局
2.用div+css寫出左側固定(width：200px)，右側自適應的頁面佈局
3.css瀏覽器相容性的寫法
4.jQuery中提供了四種事件監聽方式，分別是bind、live、delegate、on，對應的解除監聽的函式分別是unbind、die、undelegate、off
5.js瀏覽器相容性的寫法
6.造成js記憶體洩漏的問題
7.談你對js閉包的理解
8. js物件導向的幾種方式

-2018/6/21
1. display:none和visibility:hidden
2. 清除浮動

-2018/7/16

1 null和undefined的區別？
2 new操作符具體幹了什麼?
3 js延遲載入的方式有哪些？
4 有哪些效能優化的方法
5 哪些操作會造成記憶體洩漏？
6 javascript的typeof返回哪些資料型別（7種）
7 例舉3種強制型別轉換和2種隱式型別轉換?
8 split() join() 的區別
9 陣列方法pop() push() unshift() shift()
10 事件繫結和普通事件有什麼區別
11 IE和DOM事件流的區別
12 IE和標準下有哪些相容性的寫法
13 call和apply的區別
14 已知ID的Input輸入框，希望獲取這個輸入框的輸入值，怎麼做？(不使用第三方框架)
15 希望獲取到頁面中所有的checkbox怎麼做？(不使用第三方框架)
16 設定一個已知ID的DIV的html內容為xxxx，字型顏色設定為黑色(不使用第三方框架)
17 當一個DOM節點被點選時候，我們希望能夠執行一個函式，應該怎麼做？
18 看下列程式碼輸出為何？解釋原因。
19 已知陣列var stringArray = [“This”, “is”, “Baidu”, “Campus”]，Alert出”This is Baidu Campus”。
20 輸出今天的日期，以YYYY-MM-DD的方式，比如今天是2014年9月26日，則輸出2014-09-26
21 為了保證頁面輸出安全，我們經常需要對一些特殊的字元進行轉義，請寫一個函式escapeHtml，將<, >, &, “進行轉義
22 foo = foo||bar ，這行程式碼是什麼意思？為什麼要這樣寫？
23 用js實現隨機選取10–100之間的10個數字，存入一個陣列，並排序。
24 把兩個陣列合並，並刪除第二個元素。
25 怎樣新增、移除、移動、複製、建立和查詢節點
26 簡述建立函式的幾種方式
27 documen.write和 innerHTML 的區別？
28介紹一下box-sizing屬性？
29 什麼是閉包？寫一個簡單的閉包？
30 常見 == 和 === 運算結果
31 請描述一下cookies，sessionStorage和localStorage的區別？
32 js取消事件冒泡
33 js阻止事件預設行為
34 js陣列元素新增、刪除、排序等方法有哪些？
35 識別符號變數定義規則
36 cookies，sessionStorage和localStorage的區別
37 JavaScript的資料型別都有什麼？
38 什麼是Ajax和JSON，它們的優缺點
39 將字串”<tr><td>{$id}</td><td>{$name}</td></tr>”中的{$id}替換成10，{$name}替換成Tony （使用正規表示式）
40 為了保證頁面輸出安全，我們經常需要對一些特殊的字元進行轉義，請寫一個函式escapeHtml，將<, >, &, “進行轉義
41 對BFC規範的理解？
42 Doctype作用? 嚴格模式與混雜模式如何區分？它們有何意義?
43你知道多少種Doctype文件型別？
44 這樣一個URL：http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e，請寫一段JS程式提取URL中的各個GET引數(引數名和引數個數不確定)，將其按key-value形式返回到一個json結構中，如{a:’1′, b:’2′, c:”, d:’xxx’, e:undefined}
45 對作用域上下文和this的理解，看下列程式碼：
46 原生JS的window.onload與Jquery的$(document).ready(function(){})有什麼不同？如何用原生JS實現Jq的ready方法？
47 CSS中 link 和@import 的區別是？
48 css中的盒子模型
49 CSS 選擇符有哪些？哪些屬性可以繼承？優先順序演算法如何計算？ CSS3新增偽類有那些？
50 CSS3有哪些新特性？
51 為什麼要初始化CSS樣式？
52解釋下 CSS sprites，以及你要如何在頁面或網站中使用它
53 說說你對語義化的理解？
54 Doctype作用? 嚴格模式與混雜模式如何區分？它們有何意義?
55 你知道多少種Doctype文件型別？
56 HTML與XHTML——二者有什麼區別
57 html常見的相容性問題
58 浮動的原理和浮動引起的問題
59 html5的新屬性和移除了那些屬性？如何處理HTML5新標籤的瀏覽器相容問題？如何區分 HTML 和 HTML5？
60 iframe的優缺點？
61 如何對網站的檔案和資源進行優化？三種減少頁面載入時間的方法？
62 一個頁面從輸入 URL 到頁面載入顯示完成，這個過程中都發生了什麼？
63 javasript物件的幾種建立方式
64 javascript繼承的 6 種方法
65 ajax 的過程是怎樣的
66 請解釋一下 JavaScript 的同源策略
67 GET和POST的區別，何時使用POST？
68 什麼是 “use strict”; ? 使用它的好處和壞處分別是什麼？
69 Flash、Ajax各自的優缺點，在使用中如何取捨？
70 eval是做什麼的？
71 jQuery的美元符號$有什麼作用？
72 body中的onload()函式和jQuery中的document.ready()有什麼區別？
73 jQuery中有哪幾種型別的選擇器？
74 請使用jQuery將頁面上的所有元素邊框設定為2px寬的虛線？
75 當CDN上的jQuery檔案不可用時，該怎麼辦？
76 如何使用jQuery實現點選按鈕彈出一個對話方塊？
77 jQuery中的Delegate()函式有什麼作用？
78 怎樣用jQuery編碼和解碼URL？
79 如何用jQuery禁用瀏覽器的前進後退按鈕？
80 tcp的三次握手
81 深入理解ES6箭頭函式的this以及各類this
82 前端需要注意哪些SEO
83 web開發中會話跟蹤的方法有哪些
84 <img>的title和alt有什麼區別
85 doctype是什麼,舉例常見doctype及特點
86 什麼是web語義化,有什麼好處
87 HTTP method
88 聖盃佈局和雙飛翼佈局以及全域性佈局的方式
89 移動端效能優化
90 棧和佇列的區別?
91 棧和堆的區別？
92 你覺得jQuery或zepto原始碼有哪些寫的好的地方
93 ES6的瞭解
94 關於Http 2.0 你知道多少？
95 什麼是 FOUC（無樣式內容閃爍）？你如何來避免 FOUC？
96 請解釋什麼是事件代理
97 attribute和property的區別是什麼？
98 說說網路分層裡七層模型是哪七層
99 說說mongoDB和MySQL的區別
100 講講304快取的原理
101 什麼樣的前端程式碼是好的
102 談談你對預載入的理解？
103 快取和預載入的區別是什麼？
104 CDN是什麼？
105 瀏覽器一次可以從一個域名下請求多少資源？
106 什麼是垃圾回收機制（GC）？
107 http和tcp有什麼區別？
108 你知道有哪些方法可以提高網站的效能？
109 什麼是Keep-Alive模式？
110 啟用Keep-Alive的優點
111 看下列程式碼，<p>標籤內的文字是什麼顏色的？
112 你面前有一座高塔，這座高塔有N(N > 100)個臺階，你每次只能往前邁1個或者2個臺階，請寫出程式計算總共有多少種走法？
113 當前一段程式碼輸出結果是什麼？
114 對Node的優點和缺點提出了自己的看法？
115 對前端介面工程師這個職位是怎麼樣理解的？它的前景會怎麼樣？
116 平時如何管理你的專案？
117 說說最近最流行的一些東西吧？常去的哪些網站？
118 前端的安全問題？
119 javascript裡面的繼承怎麼實現，如何避免原型鏈上面的物件共享
120 Flash、Ajax各自的優缺點，在使用中如何取捨？
121 什麼是 "use strict"; ? 使用它的好處和壞處分別是什麼？
122 哪些地方會出現css阻塞，哪些地方會出現js阻塞？
123 寫一個通用的事件偵聽器函式
124 Node.js 的適用場景
125 JavaScript 原型，原型鏈 ? 有什麼特點？
126 怎麼重構頁面？
127 WEB應用從伺服器主動推送Data到客戶端有那些方式？
128 事件、IE與火狐的事件機制有什麼區別？如何阻止冒泡？
129 js物件的深度克隆程式碼實現
130 對網站重構的理解
131 如何獲取UA

<-- 目錄 --/>

1）2018/6/8

1. position的定位方式？檢視

常見的有4種：
position:static（靜態定位）
靜態定位；是position的預設值，元素框正常生成，也就是沒有定位時的正常顯示。
position:relative（相對定位）
生成的位置相對於自身定位的，需要注意的是使用position:relative的元素並沒有脫離文件流，且原來的位置佔用的空間依舊存在，只是位置發生了變化。一般使用relative來改變位置比較少，主要是用來設定子級的absolute定位的參考物件。
position:absolute（絕對定位）
absolute定位是佈局中最常用到的定位，其生成的位置是相對於帶有position屬性的父（父...)級來定位；如果父級都沒有position屬性，則相對於document來定位；使用absolute定位後，定位元素是脫離文件流的，這時候父級會檢測不到定位元素的寬高。inline元素使用absolute定位之後，可以對其設定寬高；元素是不可以同時使用絕對定位和浮動的。
position:fixed（固定定位）
fixed定位是相對於瀏覽器視窗來定位的，所以也是脫離了文件流，與absolute一樣，父級會檢測不到定位元素的寬高。inline元素使用absolute定位之後，可以對其設定寬高；元素是不可以同時使用fixed定位和浮動的。

另外，還有4種不常見的：

position: inherit;  // 繼承父元素的position屬性
position: initial;  // 設定屬性為預設值
position: unset;    // 不設定屬性
position: sticky;   // 粘性定位

2. 描述下從輸入URL到整個網頁載入完畢及顯示在螢幕上的整個流程檢視

1、輸入url地址
2、瀏覽器查詢域名的 IP 地址　　
3、瀏覽器向 web 伺服器傳送一個 HTTP 請求
4、伺服器的永久重定向響應
5、瀏覽器跟蹤重定向地址
6、伺服器處理請求
7、伺服器返回一個 HTTP 響應　
8、瀏覽器顯示 HTML
9、瀏覽器傳送請求獲取嵌入在 HTML 中的資源（如圖片、音訊、視訊、CSS、JS等等）

3. 描述一下漸進增強和優雅降級之間的不同

- ○ 漸進增強(progressive enhancement)：針對低版本瀏覽器進行構建頁面，保證最基本的功能，然後再針對高階瀏覽器進行效果、互動等改進和追加功能達到更好的使用者體驗。

- ○ 優雅降級(graceful degradation)：一開始就構建完整的功能，然後再針對低版本瀏覽器進行相容。

區別：優雅降級是從複雜的現狀開始，並試圖減少使用者體驗的供給，而漸進增強則是從一個非常基礎的，能夠起作用的版本開始，並不斷擴充，以適應未來環境的需要。降級（功能衰減）意味著往回看；而漸進增強則意味著朝前看，同時保證其根基處於安全地帶。　

“優雅降級”觀點
“優雅降級”觀點認為應該針對那些最高階、最完善的瀏覽器來設計網站。而將那些被認為“過時”或有功能缺失的瀏覽器下的測試工作安排在開發週期的最後階段，並把測試物件限定為主流瀏覽器（如 IE、Mozilla 等）的前一個版本。
在這種設計範例下，舊版的瀏覽器被認為僅能提供“簡陋卻無妨 (poor, but passable)” 的瀏覽體驗。你可以做一些小的調整來適應某個特定的瀏覽器。但由於它們並非我們所關注的焦點，因此除了修復較大的錯誤之外，其它的差異將被直接忽略。

“漸進增強”觀點
“漸進增強”觀點則認為應關注於內容本身。

內容是我們建立網站的誘因。有的網站展示它，有的則收集它，有的尋求，有的操作，還有的網站甚至會包含以上的種種，但相同點是它們全都涉及到內容。這使得“漸進增強”成為一種更為合理的設計範例。這也是它立即被 Yahoo! 所採納並用以構建其“分級式瀏覽器支援 (Graded Browser Support)”策略的原因所在

2）2018/6/10

1. 如何解決跨域問題

JSONP：

原理是：動態插入script標籤，通過script標籤引入一個js檔案，這個js檔案載入成功後會執行我們在url引數中指定的函式，並且會把我們需要的json資料作為引數傳入。
由於同源策略的限制，XmlHttpRequest只允許請求當前源（域名、協議、埠）的資源，為了實現跨域請求，可以通過script標籤實現跨域請求，然後在服務端輸出JSON資料並執行回撥函式，從而解決了跨域的資料請求。
優點是相容性好，簡單易用，支援瀏覽器與伺服器雙向通訊。缺點是隻支援GET請求。
JSONP：json+padding（內填充），顧名思義，就是把JSON填充到一個盒子裡

<script>
    function createJs(sUrl){
        var oScript = document.createElement('script');
        oScript.type = 'text/javascript';
        oScript.src = sUrl;
        document.getElementsByTagName('head')[0].appendChild(oScript);
    }

    createJs('jsonp.js');

    box({
       'name': 'test'
    });

    function box(json){
        alert(json.name);
    }
</script>

CORS：

伺服器端對於CORS的支援，主要就是通過設定Access-Control-Allow-Origin來進行的。如果瀏覽器檢測到相應的設定，就可以允許Ajax進行跨域的訪問。

通過修改document.domain來跨子域

將子域和主域的document.domain設為同一個主域.前提條件：這兩個域名必須屬於同一個基礎域名!而且所用的協議，埠都要一致，否則無法利用document.domain進行跨域
主域相同的使用document.domain

使用window.name來進行跨域

window物件有個name屬性，該屬性有個特徵：即在一個視窗(window)的生命週期內,視窗載入的所有的頁面都是共享一個window.name的，每個頁面對window.name都有讀寫的許可權，window.name是持久存在一個視窗載入過的所有頁面中的

使用HTML5中新引進的window.postMessage方法來跨域傳送資料

還有flash、在伺服器上設定代理頁面等跨域方式。個人認為window.name的方法既不復雜，也能相容到幾乎所有瀏覽器，這真是極好的一種跨域方法。

2. XML和JSON的區別？

(1).資料體積方面。
JSON相對於XML來講，資料的體積小，傳遞的速度更快些。
(2).資料互動方面。
JSON與JavaScript的互動更加方便，更容易解析處理，更好的資料互動。
(3).資料描述方面。
JSON對資料的描述性比XML較差。
(4).傳輸速度方面。
JSON的速度要遠遠快於XML。

3. 快速排序的思想並實現一個快排？

“快速排序”的思想很簡單，整個排序過程只需要三步：
（1）在資料集之中，找一個基準點
（2）建立兩個陣列，分別儲存左邊和右邊的陣列
（3）利用遞迴進行下次比較

 <script type="text/javascript">
        function quickSort(arr){
            if(arr.length<=1){
                return arr;//如果陣列只有一個數，就直接返回；
            }
            var num = Math.floor(arr.length/2);//找到中間數的索引值，如果是浮點數，則向下取整
            var numValue = arr.splice(num,1);//找到中間數的值
            var left = [];
            var right = [];

            for(var i=0;i<arr.length;i++){
                if(arr[i]<numValue){
                    left.push(arr[i]);//基準點的左邊的數傳到左邊陣列
                }
                else{
                   right.push(arr[i]);//基準點的右邊的數傳到右邊陣列
                }
            }
            return quickSort(left).concat([numValue],quickSort(right));//遞迴不斷重複比較
        }
        alert(quickSort([32,45,37,16,2,87]));//彈出“2,16,32,37,45,87”
    </script>

3）2018/6/16

window.onload和$(function(){})區別

window.onload是js原生的事件，$(function(){})是Jquery的方法(等價於$(document).ready(function(){}) )，兩者主要有以下幾點差別：
1、window.onload：在頁面所有資源載入完後執行，如果有多個定義則只執行最後一個
2、$(function(){})：在Dom節點建立完成後執行，如果有多個定義則依次執行
可以看出$(function(){})在window.onload前執行
比如：頁面中只有一個img標籤，當img節點建立完後就會執行$(function(){})中的程式碼，當img的src指定的圖片完全載入完後才會觸發window.onload事件。

4）2018/6/20

1. 用div+css寫出文字水平垂直居中，圖片水平垂直居中的樣式及佈局

// 單文字垂直居中:
.align_cc{height:30px;line-height:30px;text-align:center; }
// 多行文字垂直居中：
.align_box {width: 220px;height: 200px;display: table-cell;vertical-align: middle;text-align: center;*position: relative;}                
.align_box span.align_word {display: inline-block;*position: absolute;*left: 0;*top: 50%;*width: 100%;}
.align_box span.align_word a {*display: inline-block;*position: relative;*top: -50%;}
<div class="align_box">
        <span class="align_word">
                <a href="">文字垂直居中對齊文字垂直居中對齊文字垂直居中對齊</a>
        </span>
</div>
// 圖片垂直居中： 
.ver_pic {width: 200px; height: 200px;line-height:200px;text-align: center;background: #eee;} 
.ver_pic img { vertical-align:middle;width:100px;height:100px;}

2. 用div+css寫出左側固定(width：200px)，右側自適應的頁面佈局

.c_left{float:left;display:inline-block;width:200px;} 
.c_right{margin-left:200px;}

3. css瀏覽器相容性的寫法

* ：IE6、IE7可以識別；
_和- ：IE6可以識別；
!important ：表示高優先順序，IE7及以上、Firefox都支援，IE6認識帶!important的樣式屬性，但不認識!important的優先順序
-webkit- ：針對谷歌瀏覽器核心支援的CSS樣式
-moz- ：針對Firefox瀏覽器的核心CSS寫法
-ms- ：針對ie核心CSS寫法

-o- ：針對opera核心CSS寫法

4. jQuery中提供了四種事件監聽方式，分別是bind、live、delegate、on，對應的解除監聽的函式分別是unbind、die、undelegate、off

bind()可以向匹配的元素繫結一個或者多個事件處理器。但是它不會在沒有存在dom樹中的元素繫結該事件;而live()、delegate()則可以實現在不存在dom樹中的元素繼續繫結事件.
live方法其實是bind方法的變種，其基本功能同bind方法的功能一樣都是為一個元素繫結某個事件，但是bind方法只能給當前存在的元素繫結事件，對於事後採用JS等方式新生成的元素無效，而live方法則正好彌補了bind方法的這個缺陷，它可以對後生成的元素也可以繫結相應的事件。
live()方法用到了事件委託的概念來處理事件的繫結，會繫結相應的事件到你所選擇的元素的根元素上，即是document元素上，一旦事件冒泡到document上，jQuery將會查詢selector/event metadata,然後決定那個handler應該被呼叫。
delegate()有點像.live(),不同於.live()的地方在於，它不會把所有的event全部繫結到document,而是由你決定把它放在哪兒。而和.live()相同的地方在於都是用event delegation.
其實.bind(), .live(), .delegate()都是通過.on()來實現的，.unbind(), .die(), .undelegate(),也是一樣的都是通過.off()來實現的。
bind的缺點：
它會繫結事件到所有的選出來的元素上，當元素很多時，會出現效率問題；
當頁面載入完的時候，你才可以進行bind()；
它不會繫結到在它執行完後動態新增的那些元素上。
live的優點：
僅有一次的事件繫結，繫結到document上；
動態新增的elemtns依然可以觸發那些早先繫結的事件，因為事件真正的繫結是在document上；
可以在document ready之前就可以繫結那些需要的事件。
live的缺點：
從jq1.7開始已經不被推薦了;
當一個元素採用live方法進行事件的繫結的時候，如果想阻止事件的傳遞或冒泡，就要在函式中return false,僅僅呼叫stopPropagation()是無法實現阻止事件的傳遞或者冒泡的,因為都要到達document，所以速度也會非常慢；
delegate的優點：
可以選擇把這個事件放到哪個元素上了，可以有效的減小你所要查詢的元素；
可以用在動態新增的元素上。
delegate的缺點：
需要查詢哪個元素上發生了那個事件，儘管比document少很多了，不過，還是得浪費時間來查詢。
on的優點：
提供了一種統一繫結事件的方法,可以用.on()來代替上述的3種方法。

one是在dom樹載入後，對元素的繫結，和bind一樣屬於後期繫結，但是會在事件執行之後移除元素的繫結事件，事件只執行一次。

5. js瀏覽器相容性的寫法（檢視）

6. 造成js記憶體洩漏的問題

記憶體洩漏指任何物件在您不再擁有或需要它之後仍然存在。
垃圾回收器定期掃描物件，並計算引用了每個物件的其他物件的數量。如果一個物件的引用數量為 0（沒有其他物件引用過該物件），或對該物件的惟一引用是迴圈的，那麼該物件的記憶體即可回收。

1）setTimeout 的第一個引數使用字串而非函式的話，會引發記憶體洩漏。
2）閉包
3）控制檯日誌
4）迴圈（在兩個物件彼此引用且彼此保留時，就會產生一個迴圈）

7. 談你對js閉包的理解

考的是變數的作用域。閉包可以用在許多地方。它的最大用處有兩個，一個是前面提到的可以讀取函式內部的變數，另一個就是讓這些變數的值始終保持在記憶體中。
1）由於閉包會使得函式中的變數都被儲存在記憶體中，記憶體消耗很大，所以不能濫用閉包，否則會造成網頁的效能問題，
在IE中可能導致記憶體洩露。解決方法是，在退出函式之前，將不使用的區域性變數全部刪除。
2）閉包會在父函式外部，改變父函式內部變數的值。
所以，如果你把父函式當作物件（object）使用，把閉包當作它的公用方法（Public Method），把內部變數當作它的私有屬性（private value），這時一定要小心，不要隨便改變父函式內部變數的值。

8. js物件導向的幾種方式

第一種模式：工廠方式
var lev=function(){ return "指令碼之家"; };
function Parent(){ var Child = new Object(); Child.name="指令碼"; Child.age="4"; Child.lev=lev; return Child; };
var x = Parent();
alert(x.name);
alert(x.lev());
第二種模式：建構函式方式
var lev=function(){ return "指令碼之家"; };
function Parent(){ this.name="指令碼"; this.age="30"; this.lev=lev; };
var x =new Parent();
alert(x.name);
alert(x.lev());
第三種模式：原型模式
var lev=function(){ return "指令碼之家"; };
function Parent(){ };
Parent.prototype.name="李小龍";
Parent.prototype.age="30";
Parent.prototype.lev=lev;
var x =new Parent();
alert(x.name);
alert(x.lev());
第四種模式：混合的建構函式，原型方式（推薦）
function Parent(){ this.name="指令碼"; this.age=4; };
Parent.prototype.lev=function(){ return this.name; };
var x =new Parent();
alert(x.lev());
第五種模式：動態原型方式
function Parent(){ this.name="指令碼"; this.age=4; if(typeof Parent._lev=="undefined"){
Parent.prototype.lev=function(){ return this.name; } Parent._lev=true; }
};
var x =new Parent();
alert(x.lev());

5）2018/6/21

1. display:none和visibility:hidden

CSS display:none;
使用該屬性後，HTML元素（物件）的寬度、高度等各種屬性值都將“丟失”，視為不存在，不載入;
一旦父節點元素應用了display:none，父節點及其子孫節點元素全部不可見
隱藏產生reflow和repaint(迴流與重繪)
visibility:hidden;
使用該屬性後，HTML元素（物件）僅僅是在視覺上看不見（完全透明），而它所佔據的空間位置仍然存在，也即是說它仍具有高度、寬度等屬性值。

2. 清除浮動

方法一：使用帶clear屬性的空元素
在浮動元素後使用一個空元素如<div class="clear"></div>，並在CSS中賦予.clear{clear:both;}屬性即可清理浮動。
優點：簡單，程式碼少，瀏覽器相容性好。
缺點：需要新增大量無語義的html元素，程式碼不夠優雅，後期不容易維護。
方法二：使用CSS的overflow屬性
給浮動元素的容器新增overflow:hidden;或overflow:auto;可以清除浮動
方法三：給浮動的元素的容器新增浮動
給浮動元素的容器也新增上浮動屬性即可清除內部浮動，但是這樣會使其整體浮動，影響佈局，不推薦使用。
方法四：使用鄰接元素處理
給浮動元素後面的元素換行符 br 新增clear屬性。
方法五：父級div定義 height
原理：父級div手動定義height，就解決了父級div無法自動獲取到高度的問題。
方法六：父級div定義偽類:after 和 zoom
在網頁主要佈局時使用:after偽元素方法並作為主要清理浮動方式；在**小模組如ul裡使用overflow:hidde**n;（留意可能產生的隱藏溢位元素問題）；如果本身就是浮動元素則可自動清除內部浮動，無需格外處理；正文中使用鄰接元素清理之前的浮動。最後可以使用相對完美的:after偽元素方法清理浮動，文件結構更加清晰。

6）2018/7/16

1.HTML 定義了網頁的內容

2.CSS 描述了網頁的佈局

3.JavaScript 網頁的行為

console.log()，會在瀏覽器控制檯列印出資訊。
console.dir()可以顯示一個物件所有的屬性和方法。

1 null和undefined的區別？

null是一個表示”無”的物件，轉為數值時為0

undefined是一個表示”無”的原始值，轉為數值時為NaN

當宣告的變數還未被初始化時，變數的預設值為undefined

null用來表示尚未存在的物件，常用來表示函式企圖返回一個不存在的物件

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

1. 變數被宣告瞭，但沒有賦值時，就等於 undefined

2. 呼叫函式時，應該提供的引數沒有提供，該引數等於 undefined

3. 物件沒有賦值的屬性，該屬性的值為 undefined

4. 函式沒有返回值時，預設返回 undefined

null表示“沒有物件”，即該處不應該有值。典型用法是：

1. 作為函式的引數，表示該函式的引數不是物件

2. 作為物件原型鏈的終點

2 new操作符具體幹了什麼?

1）建立一個空物件，並且 this 變數引用該物件，同時還繼承了該函式的原型

2）屬性和方法被加入到 this 引用的物件中

3）新建立的物件由 this 所引用，並且最後隱式的返回 this

3 js延遲載入的方式有哪些？

1）defer和async

沒有defer或async，瀏覽器會立即載入並執行指定的指令碼，立即是在渲染該script標籤下的文件元素之前，不等待後續載入的文件元素，讀到就載入並執行

有async，載入和渲染後續文件元素的過程和script.js載入和執行並行執行（非同步）

有defer，並行，但是在所有元素解析完成後執行。

2）動態建立DOM方式（建立script，插入到DOM中，載入完畢後callBack）

3）按需非同步載入js

4 有哪些效能優化的方法

1）減少http請求次數：CSS Sprites, JS、CSS 原始碼壓縮、圖片大小控制合適；網頁 Gzip，CDN 託管，data 快取，圖片伺服器

2）前端模板 JS + 資料，減少由於HTML標籤導致的頻寬浪費，前端用變數儲存 AJAX 請求結果，每次操作本地變數，不用請求，減少請求次數

3）用 innerHTML 代替 DOM 操作，減少 DOM 操作次數，優化 javascript 效能

4）當需要設定的樣式很多時設定 className 而不是直接操作 style

5）少用全域性變數、快取DOM節點查詢的結果。減少 IO 讀取操作

6）避免使用 CSS Expression（css表示式)又稱 Dynamic properties(動態屬性)

7）圖片預載入，將樣式表放在頂部，將指令碼放在底部，加上時間戳

5 哪些操作會造成記憶體洩漏？

記憶體洩漏指任何物件在您不再擁有或不再需要它之後仍然存在。

垃圾回收器定期掃描物件，並計算引用了每個物件的其他物件的數量。如果一個物件的引用數量為 0（沒有其他物件引用過該物件），或對該物件的惟一引用是迴圈的，那麼該物件的記憶體即可回收。

1）setTimeout 的第一個引數使用字串而非函式的話，會引發記憶體洩漏。

2）閉包

3）控制檯日誌

4）迴圈（在兩個物件彼此引用且彼此保留時，就會產生一個迴圈）

垃圾回收機制？

答：在Javascript中，如果一個物件不再被引用，那麼這個物件就會被GC回收。如果兩個物件互相引用，而不再被第3者所引用，那麼這兩個互相引用的物件也會被回收。因為函式a被b引用，b又被a外的c引用，這就是為什麼函式a執行後不會被回收的原因。

6 javascript的typeof返回哪些資料型別（7種）

Object number function boolean underfind string symbol

typeof ‘123’ // string

typeof null // object

typeof 123 //number

typeof false // boolean

typeof [1,2,3] // object

typeof {‘name’:’tony’} // object

typeof undefined // undefined

typeof function fn(){} // function

另外ES6新加一種 symbol

var symbol = Symbol()

typeof symbol //"symbol"

7 例舉3種強制型別轉換和2種隱式型別轉換?

強制（parseInt,parseFloat,number）

隱式（== – ===）

8 split() join() 的區別

前者是切割成陣列的形式，後者是將陣列轉換成字串

('string').split('') // ["s", "t", "r", "i", "n", "g"]

('string').split('t') // ["s", "ring"]

["s", "t", "r", "i", "n", "g"].join('') // “string”

["s", "t", "r", "i", "n", "g"].join() // "s,t,r,i,n,g"

["s", "t", "r", "i", "n", "g"].join(',') // "s,t,r,i,n,g"

["s", "t", "r", "i", "n", "g"].join('.') // "s.t.r.i.n.g"

9 陣列方法pop() push() unshift() shift()

push()尾部新增 pop()尾部刪除

unshift()頭部新增 shift()頭部刪除

var arr = [1,2,3,4]

arr.push(5) // arr = [1, 2, 3, 4, 5]

var arr = [1,2,3,4]

arr.pop(3) // 返回的值為4

// arr = [1, 2, 3]

var arr = [1,2,3,4]

arr.unshift(5) // arr = [5, 1, 2, 3, 4]

var arr = [1,2,3,4]

arr.shift() // arr = [2, 3, 4]

10 事件繫結和普通事件有什麼區別

事件繫結是指把事件註冊到具體的元素之上，普通事件指的是可以用來註冊的事件

11 IE和DOM事件流的區別

1.執行順序不一樣

2.引數不一樣

3.事件加不加on

4.this指向問題

12 IE和標準下有哪些相容性的寫法

var ev = ev || window.event

document.documentElement.clientWidth || document.body.clientWidth

var target = ev.srcElement||ev.target

13 call和apply的區別

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

Object.apply(this,arguments)

14 已知ID的Input輸入框，希望獲取這個輸入框的輸入值，怎麼做？(不使用第三方框架)

document.getElementById(“ID”).value

15 希望獲取到頁面中所有的checkbox怎麼做？(不使用第三方框架)

var domList = document.getElementsByTagName(‘input’)
var checkBoxList = [];
var len = domList.length;　　//快取到區域性變數
while (len--) {　　//使用while的效率會比for迴圈更高
　　if (domList[len].type == ‘checkbox’) {
    　　checkBoxList.push(domList[len]);
　　}
}

16 設定一個已知ID的DIV的html內容為xxxx，字型顏色設定為黑色(不使用第三方框架)

var dom = document.getElementById(“ID”);
dom.innerHTML = “xxxx”
dom.style.color = “#000”

17 當一個DOM節點被點選時候，我們希望能夠執行一個函式，應該怎麼做？

直接在DOM裡繫結事件：<div οnclick=”test()”></div>

在JS裡通過onclick繫結：xxx.onclick = test

通過事件新增進行繫結：addEventListener(xxx, ‘click’, test)

那麼問題來了，Javascript的事件流模型都有什麼？

“事件冒泡”：事件開始由最具體的元素接收，然後逐級向上傳播

“事件捕捉”：事件由最不具體的節點先接收，然後逐級向下，一直到最具體的

“DOM事件流”：三個階段：事件捕捉，目標階段，事件冒泡

18 看下列程式碼輸出為何？解釋原因。

var a;
alert(typeof a); // undefined
alert(b); // 報錯

解釋：undefined是一個只有一個值的資料型別，這個值就是“undefined”，在使用var宣告變數但並未對其賦值進行初始化時，這個變數的值就是undefined。而b由於未宣告將報錯。注意未申明的變數和宣告瞭未賦值的是不一樣的。

--------------------------------------------------------

var a = null;
alert(typeof a); //object

解釋：null是一個只有一個值的資料型別，這個值就是null。表示一個空指標物件，所以用typeof檢測會返回”object”。

--------------------------------------------------------

var undefined;
undefined == null; // true
1 == true;   // true
2 == true;   // false
0 == false;  // true
2 == false; // false
0 == '';     // true
NaN == NaN;  // false
null == null // true
undefined == undefined // true
[] == false; // true
[] == ![];   // true
[] == [] // false
!NaN  // true

undefined與null相等，但不恆等（===）

一個是number一個是string時，會嘗試將string轉換為number

嘗試將boolean轉換為number，0或1

嘗試將Object轉換成number或string，取決於另外一個對比量的型別

所以，對於0、空字串的判斷，建議使用 “===” 。“===”會先判斷兩邊的值型別，型別不匹配時為false。

--------------------------------------------------------

var foo = "11"+2-"1";
console.log(foo);
console.log(typeof foo);

執行完後foo的值為111，foo的型別為number。

--------------------------------------------------------

console.log(1+ "2"+"2");//1+"2"先轉化為“12”然後進行字串的相加結果是“122”

console.log(1+ +"2"+"2");//由於一元運算子“+”的優先順序更高，因此+“2”轉換為數值2，然後1+2=3，最後數值和字串相加，轉換為字串的拼接，結果“32”

console.log(1+ -"1"+"2");//先執行取反，變成1-1=0，然後0+“2”，結果“02”

console.log(+"1"+ "1"+"2");//先執行數值轉換，相當於執行1+“1”+“2”，結果“112”

console.log("A"- "B"+"2");//先執行"A"- "B"返回NaN,再執行NaN+"2"=>"NaN2"

console.log("A"- "B"+2);//先執行"A"- "B"返回NaN+2,NaN執行加減法均返回NaN

--------------------------------------------------------

var a = new Object();
a.value = 1;
b = a;
b.value = 2;
alert(a.value);

答案：2（考察引用資料型別細節）

--------------------------------------------------------

var foo = 1;
function(){
    console.log(foo);
    var foo = 2;
    console.log(foo);
}

答案：輸出undefined 和 2。上面程式碼相當於：

var foo = 1;
function test(){
    var foo;
    console.log(foo); //undefined
    foo = 2;
    console.log(foo); // 2;  
}
test()

函式宣告與變數宣告會被JavaScript引擎隱式地提升到當前作用域的頂部，但是隻提升宣告不會提升賦值部分。

--------------------------------------------------------

for(var i=1;i<=3;i++){
  setTimeout(function(){
      console.log(i);   
  },0); 
};

答案：4 4 4。

原因：Javascript事件處理器線上程空閒之前不會執行。追問，如何讓上述程式碼輸出1 2 3？

for(var i=1;i<=3;i++){
   setTimeout((function(a){  //改成立即執行函式
       console.log(a);   
   })(i),0); 
};
1           //輸出
2
3

--------------------------------------------------------

var arr = new Array(1 ,3 ,5);

arr[4]='z';

arr2 = arr.reverse(); // arr = [“z”,‘’,5,3,1]

arr3 = arr.concat(arr2);

alert(arr3);

彈出提示對話方塊：z,,5,3,1,z,,5,3,1

提示：引用型別

--------------------------------------------------------

var a = 1;

</script>

var a;

console.log(a);

</script>

輸出結果為 1；宣告提前

--------------------------------------------------------

var a;

var b = a * 0; // undefined*0 = NaN

if (b == b) {

console.log(b * 2 + "2" - 0 + 4);

} else {

console.log(!b * 2 + "2" - 0 + 4);

}

答案輸出 26

--------------------------------------------------------

var a = 1;

</script>

var a;

var b = a * 0;

if (b == b) {

console.log(b * 2 + "2" - 0 + 4);

} else {

console.log(!b * 2 + "2" - 0 + 4);

}

</script>

答案輸出 6

--------------------------------------------------------

var t = 10;

function test(t){

var t = t++;

}

test(t);

console.log(t);

答案輸出10

--------------------------------------------------------

var t = 10;

function test(test){

var t = test++;

console.log(t) // 10

}

test(t);

console.log(t);

答案輸出10

--------------------------------------------------------

var t = 10;

function test(test){

t = test++;

}

test(t);

console.log(t);

答案：10

--------------------------------------------------------

var t = 10;

function test(test){

t = ++test;

}

test(t);

console.log(t);

答案：11

--------------------------------------------------------

var t = 10;

function test(test){

t = t + test;

console.log(t);

var t = 3;

}

test(t);

console.log(t);

答案：NaN 10

--------------------------------------------------------

var a;

var b = a / 0; // NaN

if (b == b) {

console.log(b * 2 + "2" - 0 + 4);

} else {

console.log(!b * 2 + "2" - 0 + 4);

}

答案：26

--------------------------------------------------------

var a = 1;

</script>

var a;

var b = a / 0; // Infinity

if (b == b) {

console.log(b * 2 + "2" + 4);

} else {

console.log(!b * 2 + "2" + 4);

}

</script>

答案：Infinity24

此外！Infinity = false

--------------------------------------------------------

var iNum = 0;

for(var i = 1; i< 10; i++){

if(i % 5 == 0){

continue;

}

iNum++;

}

console.log(iNum)

答案：8

--------------------------------------------------------

var obj = {proto: {a:1,b:2}};

function F(){};

F.prototype = obj.proto;

var f = new F();

obj.proto.c = 3;

obj.proto = {a:-1, b:-2};

console.log(f.a);

console.log(f.c);

delete F.prototype['a'];

console.log(f.a);

console.log(obj.proto.a);

答案

undefined

-1

--------------------------------------------------------

function setName(){

name="張三";

}

setName();

console.log(name);

答案："張三"

--------------------------------------------------------

//考點：1、變數宣告提升 2、變數搜尋機制

var a=1;

function test(){

console.log(a);

var a=1;

}

test();

答案：undefined

--------------------------------------------------------

var b=2;

function test2(){

window.b=3;

console.log(b);

}

test2();

答案：3

--------------------------------------------------------

c=5;//宣告一個全域性變數c

function test3(){

window.c=3;

console.log(c); //答案：undefined，原因：由於此時的c是一個區域性變數c，並且沒有被賦值

var c;

console.log(window.c);//答案：3，原因：這裡的c就是一個全域性變數c

}

test3();

--------------------------------------------------------

var arr = [];

arr[0] = 'a';

arr[1] = 'b';

arr[10] = 'c';

alert(arr.length); //答案：11

console.log(arr[5]); //答案：undefined

--------------------------------------------------------

var a=1;

console.log(a++); //答案：1

console.log(++a); //答案：3

--------------------------------------------------------

console.log(null==undefined); //答案：true

console.log("1"==1); //答案：true，因為會將數字1先轉換為字串1

console.log("1"===1); //答案：false，因為資料型別不一致

--------------------------------------------------------

typeof 1; "number"

typeof "hello"; "string"

typeof /[0-9]/; "object"

typeof {}; "object"

typeof null; "object"

typeof undefined; "undefined"

typeof [1,2,3]; "object"

typeof function(){}; //"function"

--------------------------------------------------------

parseInt(3.14); //3

parseFloat("3asdf"); //3

parseInt("1.23abc456"); // 1

parseInt(true);// NaN

--------------------------------------------------------

//考點：函式宣告提前

function bar() {

return foo;

foo = 10;

function foo() {}

//var foo = 11;

}

alert(typeof bar());//"function"

--------------------------------------------------------

var foo = 1;

function bar() {

foo = 10;

return;

function foo() {}

}

bar();

alert(foo);//答案：1

--------------------------------------------------------

console.log(a);//是一個函式

var a = 3;

function a(){}

console.log(a); //3

--------------------------------------------------------

//考點：對arguments的操作

function foo(a) {

arguments[0] = 2;

alert(a);//答案：2，因為：a、arguments是對實參的訪問，b、通過arguments[i]可以修改指定實參的值

}

foo(1);

--------------------------------------------------------

function foo(a) {

alert(arguments.length);//答案：3，因為arguments是對實參的訪問

}

foo(1, 2, 3);

--------------------------------------------------------

bar();//報錯

var foo = function bar(name) {

console.log("hello"+name);

console.log(bar);

};

//alert(typeof bar);

foo("world");//"hello"

console.log(bar);//undefined

console.log(foo.toString());

bar();//報錯

--------------------------------------------------------

function test(){

console.log("test函式");

}

setTimeout(function(){

console.log("定時器回撥函式");

}, 0)

test();

function foo(){

var name="hello";

}

--------------------------------------------------------

19 已知陣列var stringArray = [“This”, “is”, “Baidu”, “Campus”]，Alert出”This is Baidu Campus”。

var stringArray = ["This", "is", "Baidu", "Campus"];

console.log(stringArray.join(" "))

答案：alert(stringArray.join(" "))

20 輸出今天的日期，以YYYY-MM-DD的方式，比如今天是2014年9月26日，則輸出2014-09-26

var d = new Date();

// 獲取年，getFullYear()返回4位的數字

var year = d.getFullYear();

// 獲取月，月份比較特殊，0是1月，11是12月

var month = d.getMonth() + 1;

// 變成兩位

month = month < 10 ? '0' + month : month;

// 獲取日

var day = d.getDate();

day = day < 10 ? '0' + day : day;

alert(year + '-' + month + '-' + day);

21 為了保證頁面輸出安全，我們經常需要對一些特殊的字元進行轉義，請寫一個函式escapeHtml，將<, >, &, “進行轉義

function escapeHtml(str) {

return str.replace(/[<>”&]/g, function(match) {

switch (match) {

case “<”:

return “<”;

case “>”:

return “>”;

case “&”:

return “&”;

case “\””:

return “"”;

}

};

}

22 foo = foo||bar ，這行程式碼是什麼意思？為什麼要這樣寫？

答案：if(!foo) foo = bar; //如果foo存在，值不變，否則把bar的值賦給foo。

短路表示式：作為”&&”和”||”操作符的運算元表示式，這些表示式在進行求值時，只要最終的結果已經可以確定是真或假，求值過程便告終止，這稱之為短路求值。

23 用js實現隨機選取10–100之間的10個數字，存入一個陣列，並排序。

var iArray = [];

funtion getRandom(istart, iend){

var iChoice = iend - istart +1;

return Math.floor(Math.random() * iChoice + istart);

}

for(var i=0; i<10; i++){

iArray.push(getRandom(10,100));

}

iArray.sort();

24 把兩個陣列合並，並刪除第二個元素。

var array1 = ['a','b','c'];

var bArray = ['d','e','f'];

var cArray = array1.concat(bArray);

cArray.splice(1,1);

25 怎樣新增、移除、移動、複製、建立和查詢節點

1）建立新節點

createDocumentFragment() //建立一個DOM片段

createElement() //建立一個具體的元素

createTextNode() //建立一個文字節點

2）新增、移除、替換、插入

appendChild() //新增

removeChild() //移除

replaceChild() //替換

insertBefore() //插入

3）查詢

getElementsByTagName() //通過標籤名稱

getElementsByName() //通過元素的Name屬性的值

getElementById() //通過元素Id，唯一性

26 簡述建立函式的幾種方式

第一種（函式宣告）：

function sum1(num1,num2){

return num1+num2;

}

第二種（函式表示式）：

var sum2 = function(num1,num2){

return num1+num2;

}

第三種（函式物件方式）：

var sum3 = new Function("num1","num2","return num1+num2");

27 documen.write和 innerHTML 的區別？

document.write 只能重繪整個頁面

innerHTML 可以重繪頁面的一部分

28介紹一下box-sizing屬性？

box-sizing屬性主要用來控制元素的盒模型的解析模式。預設值是content-box。

content-box：讓元素維持W3C的標準盒模型。元素的寬度/高度由border + padding + content的寬度/高度決定，設定width/height屬性指的是content部分的寬/高
border-box：讓元素維持IE傳統盒模型（IE6以下版本和IE6~7的怪異模式）。設定width/height屬性指的是border + padding + content

標準瀏覽器下，按照W3C規範對盒模型解析，一旦修改了元素的邊框或內距，就會影響元素的盒子尺寸，就不得不重新計算元素的盒子尺寸，從而影響整個頁面的佈局。

29 什麼是閉包？寫一個簡單的閉包？

閉包就是能夠讀取其他函式內部變數的函式。在本質上，閉包就是將函式內部和函式外部連線起來的一座橋樑。

function outer(){

var num = 1;

function inner(){

var n = 2;

alert(n + num);

}

return inner;

}

outer()();

30 常見 == 和 === 運算結果

console.log(NaN==NaN) // false

console.log(NaN===NaN) // false

console.log(!NaN) // true

console.log(undefined = undefined) // undefined

console.log(undefined == undefined) // true

console.log(undefined === undefined) // true

console.log(undefined == null) // true

console.log(undefined === null) // false

按位與 &

console.log(1&2) // 0 0001&0010 = 0000 0

console.log(2&2) // 2 0010&0010 = 0010 2

console.log(0&2) // 0 0000&0010 = 0000 0

console.log(2&3) // 2 0010&0011 = 0010 2

按位或 |

console.log(1|2) // 3 0001&0010 = 0011 3

console.log(2|2) // 2 0010|0010 = 0010 2

console.log(0|2) // 2 0000|0010 = 0010 2

console.log(2|3) // 3 0010|0011 = 0011 3

且 && （第一個量為true則輸出第二個量；第一個量為false 直接為false）

console.log(1&&2) // 2

console.log(0&&2) // 0

console.log("string"&&2) // 2

console.log(true&&2) // 2

console.log([1,2,3]&&2) // 2

console.log(2&&true) // true

console.log(2&&[1,2,3]) // [1,2,3]

console.log(2&&"string") // string

console.log(2&&1) // 1

或 || （第一個量為true輸出第一個量）

console.log(2||3) // 2

console.log(1||3) // 1

console.log("string"||3) // string

console.log(NaN||3) // 3

console.log(undefined||3) // 3

console.log(undefined||NaN) // NaN

31 請描述一下cookies，sessionStorage和localStorage的區別？

cookies相容所有的瀏覽器，Html5提供的storage儲存方式。

• Document.cookie

• Window.localstorage

• Window.sessionstorage

cookie資料始終在同源的http請求中攜帶（即使不需要），即cookie在瀏覽器和伺服器間來回傳遞。而sessionStorage和localStorage不會自動把資料發給伺服器，僅在本地儲存。

儲存大小限制也不同，cookie資料不能超過4k，同時因為每次http請求都會攜帶cookie，所以cookie只適合儲存很小的資料，如會話標識。sessionStorage和localStorage 雖然也有儲存大小的限制，但比cookie大得多，可以達到5M或更大。

資料有效期不同，sessionStorage：僅在當前瀏覽器視窗關閉前有效，自然也就不可能持久保持；localStorage：始終有效，視窗或瀏覽器關閉也一直儲存，因此用作持久資料；cookie只在設定的cookie過期時間之前一直有效，即使視窗或瀏覽器關閉。

作用域不同，sessionStorage不在不同的瀏覽器視窗中共享，即使是同一個頁面；localStorage 在所有同源視窗中都是共享的；cookie也是在所有同源視窗中都是共享的。

32 js取消事件冒泡

function stopBubble(e) {

// 如果提供了事件物件，則這是一個非IE瀏覽器

var ev = e||window.event;

if (ev.stopPropagation ) {

// 因此它支援W3C的stopPropagation()方法

ev.stopPropagation();

} else {

// 否則，我們需要使用IE的方式來取消事件冒泡

ev.cancelBubble = true;

}

33 js阻止事件預設行為

function stopDefault( e ) {

// 阻止預設瀏覽器動作(W3C)

var ev = e||window.event;

if (ev.preventDefault ) {

ev.preventDefault();

} else {

// IE中阻止函式器預設動作的方式

ev.returnValue = false;

}

return false;

}

34 js陣列元素新增、刪除、排序等方法有哪些？

1)Array.concat( ) //連線陣列

arrayObject.concat(arrayX,arrayX,......,arrayX)

arrayX //必需。該引數可以是具體的值，也可以是陣列物件。可以是任意多個。

var arr = [1,2];

arr2 = [4,5];

arr3 = arr.concat(arr2)

// arr3 = [1,2,4,5]

2)Array.join( ) //將陣列元素連線起來以構建一個字串

arrayObject.join(separator)

separator 可選。指定要使用的分隔符。如果省略該引數，則使用逗號作為分隔符。

var arr = [2,3,4,5];

var arr2 = arr.join()

// arr2 = "2,3,4,5"

var arr2 = arr.join(‘’)

// arr2 = "2345"

3)Array.length //陣列的大小

var arr = [2,3,4,5];

arr.length

// arr.length = 4

4)Array.pop( ) //刪除並返回陣列的最後一個元素

pop() 方法將刪除 arrayObject 的最後一個元素，把陣列長度減 1，並且返回它刪除的元素的值。如果陣列已經為空，則 pop() 不改變陣列，並返回 undefined 值。

var arr = [1,2,3,4];

var result = arr.pop();

console.log(result) // 4

console.log(arr) // [1,2,3]

5)Array.push( ) //給陣列新增元素

push() 方法可向陣列的末尾新增一個或多個元素，並返回新的長度。

arrayObject.push(newelement1,newelement2,....,newelementX)

newelement1 //必需。要新增到陣列的第一個元素。

newelement2 //可選。要新增到陣列的第二個元素。

newelementX可選。可新增多個元素。

var arr = [1,2,3,4];

var result = arr.push(5);

console.log(result);// 5

console.log(arr) // [1,2,3,4,5]

6)Array.reverse( ) //顛倒陣列中元素的順序

該方法會改變原來的陣列，而不會建立新的陣列

var arr = [1,2,3,4];

var result = arr.reverse();

console.log(result); // [4, 3, 2, 1]

console.log(arr); // [4, 3, 2, 1]

7)Array.shift( ) //將第一個元素移出陣列

shift() 方法用於把陣列的第一個元素從其中刪除，並返回第一個元素的值

var arr = [1,2,3,4];

var result = arr.shift();

console.log(result) // 1

console.log(arr) // [2, 3, 4]

8)Array.unshift( ) //在陣列頭部插入一個元素,返回陣列長度

unshift() 方法可向陣列的開頭新增一個或更多元素，並返回新的長度

arrayObject.unshift(newelement1,newelement2,....,newelementX)

newelement1 //必需。向陣列新增的第一個元素

newelement2 //可選。向陣列新增的第二個元素

newelementX //可選。可新增若干個元素

var arr = [1,2,3,4];

var result = arr.unshift(0);

console.log(result)// 5

console.log(arr) // [0, 1, 2, 3, 4]

9)Array.sort( ) //對陣列元素進行排序

var arr = [2,4,7,1,0,9];

var result = arr.sort()

console.log(result)// [0, 1, 2, 4, 7, 9]

console.log(arr)// [0, 1, 2, 4, 7, 9]

若需要規定排序方式則需傳入一個排序函式

arrayObject.sort(sortby)

sortby // 可選。規定排序順序。必須是函式。

// 從小到大排序

function sortby(a,b){

return a - b

}

Exp:

function sortNumber(a,b){

return a - b

}

arr = [2,7,3,1,9,7,0];

arr.sort(sortNumber) // 結果 [0, 1, 2, 3, 7, 7, 9]

// 從大到小排序

function sortby(a,b){

return b - a

}

Exp:

function sortNumber(a,b){

return b - a

}

arr = [2,7,3,1,9,7,0];

arr.sort(sortNumber) // 結果 [9, 7, 7, 3, 2, 1, 0]

10)Array.splice(開始索引號，長度) //插入、刪除或替換陣列的元素

arrayObject.splice(index,howmany,item1,.....,itemX)

index //必需。整數，規定新增/刪除專案的位置，使用負數可從陣列結尾處規定位置。

Howmany //必需。要刪除的專案數量。如果設定為 0，則不會刪除專案。

item1, ..., itemX //可選。向陣列新增的新專案。

// 刪除並返回刪除的結果

var arr = [1,2,3,4];

var result = arr.splice(2,9)

console.log(result)// [3, 4]

console.log(arr)// [1, 2]

// 從指定位置刪除並開始新增專案

var arr = [1,2,3,4];

var result = arr.splice(2,0,5,6)

console.log(result)// [ ]

console.log(arr)// [1, 2, 5, 6, 3, 4]

11)Array.toLocaleString( ) //把陣列轉換成本地字串

把陣列轉換為本地字串。

var arr = [1,2,3,4];

var result = arr.toLocaleString();

console.log(arr);// [1, 2, 3, 4]

console.log(result)// 1,2,3,4

12)Array.toString( ) //將陣列轉換成一個字串

var arr = [1,2,3,4];

var result = arr.toString();

console.log(arr); // [1, 2, 3, 4]

console.log(result) // 1,2,3,4

toString() 方法可把一個邏輯值轉換為字串，並返回結果。

var boo = new Boolean(true);

var result = boo.toString();

console.log(boo); // Boolean {true}

console.log(result); // "true"

13)Array.slice( ) //返回陣列的一部分

slice() 方法可從已有的陣列中返回選定的元素。

arrayObject.slice(start,end)

start //必需。規定從何處開始選取。如果是負數，那麼它規定從陣列尾部開始算起的位置。也就是說，-1 指最後一個元素，-2 指倒數第二個元素，以此類推。

End //可選。規定從何處結束選取。該引數是陣列片斷結束處的陣列下標。如果沒有指定該引數，那麼切分的陣列包含從 start 到陣列結束的所有元素。如果這個引數是負數，那麼它規定的是從陣列尾部開始算起的元素。

返回一個新的陣列，包含從 start 到 end （不包括該元素）的 arrayObject 中的元素。

var arr = [2,3,5,6,9,0,3,4];

var result = arr.slice(2,5);

console.log(arr); // [2, 3, 5, 6, 9, 0, 3, 4]

console.log(result) // [5, 6, 9]

35 識別符號變數定義規則

識別符號是一個名字。在javascript中，識別符號用來對變數和函式進行命名，或者用作javascript程式碼中某些迴圈語句中的跳轉位置標記。

Js中識別符號必須以字母、下劃線（_）或者美元（$）開始。後續字元可以是字母、數字、下劃線或美元符（數字不允許作為首字母出現），另外關鍵字不允許做識別符號。

36 cookies，sessionStorage和localStorage的區別

共同點：都是儲存在瀏覽器端，且同源的。

區別：

1）cookie資料始終在同源的http請求中攜帶（即使不需要），即cookie在瀏覽器和伺服器間來回傳遞。

2）而sessionStorage和localStorage不會自動把資料發給伺服器，僅在本地儲存。

3）cookie資料還有路徑（path）的概念，可以限制cookie只屬於某個路徑下。儲存大小限制也不同，cookie資料不能超過4k，同時因為每次http請求都會攜帶cookie，所以cookie只適合儲存很小的資料，如會話標識。sessionStorage和localStorage 雖然也有儲存大小的限制，但比cookie大得多，可以達到5M或更大。

4）資料有效期不同，sessionStorage：僅在當前瀏覽器視窗關閉前有效，自然也就不可能持久保持；localStorage：始終有效，視窗或瀏覽器關閉也一直儲存，因此用作持久資料；cookie只在設定的cookie過期時間之前一直有效，即使視窗或瀏覽器關閉。

5）作用域不同，sessionStorage不在不同的瀏覽器視窗中共享，即使是同一個頁面；localStorage 在所有同源視窗中都是共享的；cookie也是在所有同源視窗中都是共享的。Web Storage 支援事件通知機制，可以將資料更新的通知傳送給監聽者。Web Storage 的 api 介面使用更方便。

sessionStorage用於本地儲存一個會話（session）中的資料，這些資料只有在同一個會話中的頁面才能訪問並且當會話結束後資料也隨之銷燬。

因此sessionStorage不是一種持久化的本地儲存，僅僅是會話級別的儲存。

而localStorage用於持久化的本地儲存，除非主動刪除資料，否則資料是永遠不會過期的。

web storage和cookie的區別

Web Storage的概念和cookie相似，區別是它是為了更大容量儲存設計的。Cookie的大小是受限的，並且每次你請求一個新的頁面的時候Cookie都會被髮送過去，這樣無形中浪費了頻寬，另外cookie還需要指定作用域，不可以跨域呼叫。

除此之外，Web Storage擁有setItem,getItem,removeItem,clear等方法，不像cookie需要前端開發者自己封裝setCookie，getCookie。

但是Cookie也是不可以或缺的：Cookie的作用是與伺服器進行互動，作為HTTP規範的一部分而存在，而Web Storage僅僅是為了在本地“儲存”資料而生。

Cookies:伺服器和客戶端都可以訪問；大小隻有4KB左右；有有效期，過期後將會刪除；

本地儲存：只有本地瀏覽器端可訪問資料，伺服器不能訪問本地儲存直到故意通過POST或者GET的通道傳送到伺服器；每個域5MB；沒有過期資料，它將保留知道使用者從瀏覽器清除或者使用Javascript程式碼移除

37 JavaScript的資料型別都有什麼？

基本資料型別：String,boolean,Number,Undefined, Null

引用資料型別：Object(Array,Date,RegExp,Function)

如何判斷某變數是否為陣列資料型別？

1）方法一.判斷其是否具有“陣列性質”，如slice()方法。可自己給該變數定義slice方法，故有時會失效

2）方法二.obj instanceof Array 在某些IE版本中不正確

3）方法三.方法一二皆有漏洞，在ECMA Script5中定義了新方法Array.isArray(), 保證其相容性，最好的方法如下

if(typeof Array.isArray==="undefined")

{

Array.isArray = function(arg){

return Object.prototype.toString.call(arg)==="[object Array]"

};

}

38 什麼是Ajax和JSON，它們的優缺點

Ajax是非同步JavaScript和XML，用於在Web頁面中實現非同步資料互動。

優點：

　1）可以使得頁面不過載全部內容的情況下載入區域性內容，降低資料傳輸量

　2）避免使用者不斷重新整理或者跳轉頁面，提高使用者體驗

缺點：

　1）對搜尋引擎不友好

　2）要實現ajax下的前後退功能成本較大

　3）可能造成請求數的增加

　4）跨域問題限制

JSON是一種輕量級的資料交換格式，ECMA的一個子集

優點：輕量級、易於人的閱讀和編寫，便於機器（JavaScript）解析，支援複合資料型別（陣列、物件、字串、數字）

39 將字串”<tr><td>{$id}</td><td>{$name}</td></tr>”中的{$id}替換成10，{$name}替換成Tony （使用正規表示式）

”<tr><td>{$id}</td><td>{$id}_{$name}</td></tr>”.replace(/{\$id}/g, ’10’).replace(/{\$name}/g, ‘Tony’);

40 為了保證頁面輸出安全，我們經常需要對一些特殊的字元進行轉義，請寫一個函式escapeHtml，將<, >, &, “進行轉義

function escapeHtml(str) {

return str.replace(/[<>”&]/g, function (match) {

switch (match) {

case“ <”:

return“ <”;

case“ >”:

return“ >”;

case“ &”:

return“ &”;

case“\”” :

return“ "”;

}

});

}

41 對BFC規範的理解？

BFC，塊級格式化上下文，一個建立了新的BFC的盒子是獨立佈局的，盒子裡面的子元素的樣式不會影響到外面的元素。在同一個BFC中的兩個毗鄰的塊級盒在垂直方向（和佈局方向有關係）的margin會發生摺疊。

（W3C CSS 2.1 規範中的一個概念，它決定了元素如何對其內容進行佈局，以及與其他元素的關係和相互作用。

42 Doctype作用? 嚴格模式與混雜模式如何區分？它們有何意義?

1）、<!DOCTYPE> 宣告位於文件中的最前面，處於 <html> 標籤之前。告知瀏覽器以何種模式來渲染文件。

2）、嚴格模式的排版和 JS 運作模式是以該瀏覽器支援的最高標準執行。

3）、在混雜模式中，頁面以寬鬆的向後相容的方式顯示。模擬老式瀏覽器的行為以防止站點無法工作。

4）、DOCTYPE不存在或格式不正確會導致文件以混雜模式呈現。

43你知道多少種Doctype文件型別？

該標籤可宣告三種 DTD 型別，分別表示嚴格版本、過渡版本以及基於框架的 HTML 文件。

HTML 4.01 規定了三種文件型別：Strict、Transitional 以及 Frameset。

XHTML 1.0 規定了三種 XML 文件型別：Strict、Transitional 以及 Frameset。

Standards （標準）模式（也就是嚴格呈現模式）用於呈現遵循最新標準的網頁，而 Quirks

（包容）模式（也就是鬆散呈現模式或者相容模式）用於呈現為傳統瀏覽器而設計的網頁。

44 這樣一個URL：http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e，請寫一段JS程式提取URL中的各個GET引數(引數名和引數個數不確定)，將其按key-value形式返回到一個json結構中，如{a:’1′, b:’2′, c:”, d:’xxx’, e:undefined}

function serilizeUrl(url){

var result = {};

url = url.split("?")[1];

var map = url.split("&");

for(var i = 0,len = map.length; i < len; i++) {

result[map[i].split("=")[0]] = map[i].split("=")[1];

}

return result;

}

45 對作用域上下文和this的理解，看下列程式碼：

var User = {

count: 1,

getCount: function() {

return this.count;

}

};

console.log(User.getCount()); // what?

var func = User.getCount;

console.log(func()); // what?

答案 1和undefined

func是在winodw的上下文中被執行的，所以會訪問不到count屬性。

繼續追問，那麼如何確保Uesr總是能訪問到func的上下文，即正確返回1。正確的方法是使用Function.prototype.bind。相容各個瀏覽器完整程式碼如下：

Function.prototype.bind = Function.prototype.bind || function(context){

var self = this;

return function(){

return self.apply(context, arguments);

};

}

var func = User.getCount.bind(User);

console.log(func());

46 原生JS的window.onload與Jquery的$(document).ready(function(){})有什麼不同？如何用原生JS實現Jq的ready方法？

window.onload()方法是必須等到頁面內包括圖片的所有元素載入完畢後才能執行。

$(document).ready()是DOM結構繪製完畢後就執行，不必等到載入完畢。

47 CSS中 link 和@import 的區別是？

(1) link屬於HTML標籤，而@import是CSS提供的;

(2) 頁面被載入的時，link會同時被載入，而@import引用的CSS會等到頁面被載入完再載入;

(3) import只在IE5以上才能識別，而link是HTML標籤，無相容問題;

(4) link方式的樣式的權重高於@import的權重.

48 css中的盒子模型

1）盒模型：內容(content)、填充(padding)、邊界(margin)、邊框(border)

2）有兩種， IE 盒子模型、標準 W3C 盒子模型；IE的content部分包含了 border 和 padding;

標準的盒子模型width只包括content，
IE的盒子的width包括content，padding和border。

49 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)

可繼承的樣式：

1.font-size
2.font-family
3.color
4.text-indent

不可繼承的樣式：

1.border
2.padding
3.margin
4.width
5.height

優先順序演算法：

1.優先順序就近原則，同權重情況下樣式定義最近者為準;
2.載入樣式以最後載入的定位為準;
3.!important > id > class > tag
4.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 單選框或核取方塊被選中。

50 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

51 為什麼要初始化CSS樣式？

因為瀏覽器的相容問題，不同瀏覽器對有些標籤的預設值是不同的，如果沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異。

當然，初始化樣式會對SEO有一定的影響，但魚和熊掌不可兼得，但力求影響最小的情況下初始化。

52解釋下 CSS sprites，以及你要如何在頁面或網站中使用它

CSS Sprites：把網頁中一些背景圖片整合到一張圖片檔案中，再利用 CSS 的”background-image”，”background-repeat”，”background-position” 的組合進行背景定位，background-position 可以用數字能精確的定位出背景圖片的位置。這樣可以減少很多圖片請求的開銷，因為請求耗時比較長；請求雖然可以併發，但是也有限制，一般瀏覽器都是6個。對於未來而言，就不需要這樣做了，因為有了 http2。

---

概念：將多個小圖片拼接到一個圖片中。通過background-position和元素尺寸調節需要顯示的背景圖案。

優點：

1）減少HTTP請求數，極大地提高頁面載入速度

2）增加圖片資訊重複度，提高壓縮比，減少圖片大小

3）更換風格方便，只需在一張或幾張圖片上修改顏色或樣式即可實現

缺點：

1）圖片合併麻煩

2）維護麻煩，修改一個圖片可能需要從新佈局整個圖片，樣式

53 說說你對語義化的理解？

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

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

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

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

54 Doctype作用? 嚴格模式與混雜模式如何區分？它們有何意義?

1. <!DOCTYPE> 宣告位於文件中的最前面，處於 <html> 標籤之前。告知瀏覽器以何種模式來渲染文件。

2. 嚴格模式的排版和 JS 運作模式是以該瀏覽器支援的最高標準執行。

3. 在混雜模式中，頁面以寬鬆的向後相容的方式顯示。模擬老式瀏覽器的行為以防止站點無法工作。

4. DOCTYPE不存在或格式不正確會導致文件以混雜模式呈現。

55 你知道多少種Doctype文件型別？

1. 該標籤可宣告三種 DTD 型別，分別表示嚴格版本、過渡版本以及基於框架的 HTML 文件。
2.HTML 4.01 規定了三種文件型別：Strict、Transitional 以及 Frameset。
3.XHTML 1.0 規定了三種 XML 文件型別：Strict、Transitional 以及 Frameset。
4. Standards （標準）模式（也就是嚴格呈現模式）用於呈現遵循最新標準的網頁，而 Quirks（包容）模式（也就是鬆散呈現模式或者相容模式）用於呈現為傳統瀏覽器而設計的網頁。

56 HTML與XHTML——二者有什麼區別

1）所有的標記都必須要有一個相應的結束標記

2）所有標籤的元素和屬性的名字都必須使用小寫

3）所有的 XML 標記都必須合理巢狀

4）所有的屬性必須用引號 “” 括起來

5）把所有 < 和 & 特殊符號用編碼表示

6）給所有屬性賦一個值

7）不要在註釋內容中使用 “–”

8）圖片必須有說明文字

57 html常見的相容性問題

1.瀏覽器預設的margin和padding不同
解決辦法：*{margin:0;padding:0;}
2.IE的雙邊距：塊屬性標籤float後，又有橫向的margin情況下，在IE6顯示margin比設定的大

**出現條件：**block元素+浮動+margin。

解決辦法：
在float標籤樣式控制中加入 display:inline，將其轉化為行內屬性。

Chrome 中文介面下預設會將小於 12px 的文字強制按照 12px 顯示
解決方法：可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決

4 超連結訪問過後 hover 樣式就不出現了，被點選訪問過的超連結樣式不在具有 hover 和 active 了
解決方法：改變CSS屬性的排列順序 L-V-H-A

5 上下margin重合問題：ie和ff都存在，相鄰的兩個div的margin-left和margin-right不會重合，但是margin-top和margin-bottom卻會發生重合。
解決方法：養成良好的程式碼編寫習慣，同時採用margin-top或者同時採用margin-bottom。

58 浮動的原理和浮動引起的問題

浮動元素脫離文件流，不佔據空間。浮動元素碰到包含它的邊框或者浮動元素的邊框停留。

浮動的元素引起的問題：
1. 父元素的高度無法被撐開，影響與父元素同級的元素
2. 與浮動元素同級的非浮動元素會跟隨其後
3. 若非第一個元素浮動，則該元素之前的元素也需要浮動，否則會影響頁面顯示的結構

59 html5的新屬性和移除了那些屬性？如何處理HTML5新標籤的瀏覽器相容問題？如何區分 HTML 和 HTML5？

新特性：
HTML5 現在已經不是 SGML 的子集，主要是關於影像，位置，儲存，多工等功能的增加。
1. 拖拽釋放(Drag and drop) API
2. 語義化更好的內容標籤（header,nav,footer,aside,article,section）
3. 音訊、視訊API(audio,video)
4. 畫布(Canvas) API
5. 地理(Geolocation) API
6. 本地離線儲存 localStorage 長期儲存資料，瀏覽器關閉後資料不丟失；
7. sessionStorage 的資料在瀏覽器關閉後自動刪除
8. 表單控制元件，calendar、date、time、email、url、search
9. 新的技術webworker, websocket, Geolocation

移除的元素：
1. 純表現的元素：basefont，big，center，font, s，strike，tt，u；
2. 對可用性產生負面影響的元素：frame，frameset，noframes；

支援HTML5新標籤：
1. IE8/IE7/IE6支援通過 document.createElement 方法產生的標籤，可以利用這一特性讓這些瀏覽器支援 HTML5 新標籤，瀏覽器支援新標籤後，還需要新增標籤預設的樣式（當然最好的方式是直接使用成熟的框架、使用最多的是html5shiv框架）：

<!--[if lt IE 9]>

<![endif]-->

60 iframe的優缺點？

優點：
1. 解決載入緩慢的第三方內容如圖示和廣告等的載入問題
2. Security sandbox
3. 並行載入指令碼
缺點：
1. iframe會阻塞主頁面的Onload事件
2. 即時內容為空，載入也需要時間
3. 沒有語意

61 如何對網站的檔案和資源進行優化？三種減少頁面載入時間的方法？

優化：
1. 檔案合併
2. 檔案最小化/檔案壓縮
3. 使用 CDN 託管
4. 快取的使用（多個域名來提供快取）

減少頁面的載入時間：
1. 優化圖片
2. 影像格式的選擇（GIF：提供的顏色較少，可用在一些對顏色要求不高的地方）
3. 優化CSS（壓縮合並css，如 margin-top, margin-left…)
4. 網址後加斜槓（如www.campr.com/目錄，會判斷這個目錄是什麼檔案型別，或者是目錄。）
5. 標明高度和寬度（如果瀏覽器沒有找到這兩個引數，它需要一邊下載圖片一邊計算大小，如果圖片很多，瀏覽器需要不斷地調整頁面。這不但影響速度，也影響瀏覽體驗。
當瀏覽器知道了高度和寬度引數後，即使圖片暫時無法顯示，頁面上也會騰出圖片的空位，然後繼續載入後面的內容。從而載入時間快了，瀏覽體驗也更好了）
6. 減少http請求（合併檔案，合併圖片）

62 一個頁面從輸入 URL 到頁面載入顯示完成，這個過程中都發生了什麼？

分為4個步驟：
1)當傳送一個 URL 請求時，瀏覽器都會開啟一個執行緒來處理這個請求，同時在遠端 DNS 伺服器上啟動一個 DNS 查詢。這能使瀏覽器獲得請求對應的 IP 地址。

2）瀏覽器與遠端 Web 伺服器通過 TCP 三次握手協商來建立一個 TCP/IP 連線。
該握手包括一個同步報文，一個同步-應答報文和一個應答報文，這三個報文在瀏覽器和伺服器之間傳遞。該握手首先由客戶端嘗試建立起通訊，而後伺服器應答並接受客戶端的請求，最後由客戶端發出該請求已經被接受的報文。

3）一旦 TCP/IP 連線建立，瀏覽器會通過該連線向遠端伺服器傳送 HTTP 的 GET 請求。遠端伺服器找到資源並使用 HTTP 響應返回該資源，值為 200 的 HTTP 響應狀態表示一個正確的響應。

4）此時，Web 伺服器提供資源服務，客戶端開始下載資源。

請求返回後，瀏覽器會解析 HTML 生成 DOM Tree，其次會根據 CSS 生成 CSS Rule Tree，而 javascript 又可以根據 DOM API 操作 DOM

CSDN更具體的解釋：

在瀏覽器位址列輸入URL
瀏覽器檢視快取，如果請求資源在快取中並且新鮮，跳轉到轉碼步驟
1. 如果資源未快取，發起新請求
2. 如果已快取，檢驗是否足夠新鮮，足夠新鮮直接提供給客戶端，否則與伺服器進行驗證。
3. 檢驗新鮮通常有兩個HTTP頭進行控制Expires和Cache-Control：
  - HTTP1.0提供Expires，值為一個絕對時間表示快取新鮮日期
  - HTTP1.1增加了Cache-Control: max-age=,值為以秒為單位的最大新鮮時間
瀏覽器解析URL獲取協議，主機，埠，path
瀏覽器組裝一個HTTP（GET）請求報文
瀏覽器獲取主機ip地址，過程如下：
1. 瀏覽器快取
2. 本機快取
3. hosts檔案
4. 路由器快取
5. ISP DNS快取
6. DNS遞迴查詢（可能存在負載均衡導致每次IP不一樣）
開啟一個socket與目標IP地址，埠建立TCP連結，三次握手如下：
1. 客戶端傳送一個TCP的SYN=1，Seq=X的包到伺服器埠
2. 伺服器發回SYN=1， ACK=X+1， Seq=Y的響應包
3. 客戶端傳送ACK=Y+1， Seq=Z
TCP連結建立後傳送HTTP請求
伺服器接受請求並解析，將請求轉發到服務程式，如虛擬主機使用HTTP Host頭部判斷請求的服務程式
伺服器檢查HTTP請求頭是否包含快取驗證資訊如果驗證快取新鮮，返回304等對應狀態碼
處理程式讀取完整請求並準備HTTP響應，可能需要查詢資料庫等操作
伺服器將響應報文通過TCP連線傳送回瀏覽器
瀏覽器接收HTTP響應，然後根據情況選擇關閉TCP連線或者保留重用，關閉TCP連線的四次握手如下：
1. 主動方傳送Fin=1， Ack=Z， Seq= X報文
2. 被動方傳送ACK=X+1， Seq=Z報文
3. 被動方傳送Fin=1， ACK=X， Seq=Y報文
4. 主動方傳送ACK=Y， Seq=X報文
瀏覽器檢查響應狀態嗎：是否為1XX，3XX， 4XX， 5XX，這些情況處理與2XX不同
如果資源可快取，進行快取
對響應進行解碼（例如gzip壓縮）
根據資源型別決定如何處理（假設資源為HTML文件）
解析HTML文件，構件DOM樹，下載資源，構造CSSOM樹，執行js指令碼，這些操作沒有嚴格的先後順序，以下分別解釋
構建DOM樹：
1. Tokenizing：根據HTML規範將字元流解析為標記
2. Lexing：詞法分析將標記轉換為物件並定義屬性和規則
3. DOM construction：根據HTML標記關係將物件組成DOM樹
解析過程中遇到圖片、樣式表、js檔案，啟動下載
構建CSSOM樹：
1. Tokenizing：字元流轉換為標記流
2. Node：根據標記建立節點
3. CSSOM：節點建立CSSOM樹
根據DOM樹和CSSOM樹構建渲染樹:
1. 從DOM樹的根節點遍歷所有可見節點，不可見節點包括：1）script,meta這樣本身不可見的標籤。2)被css隱藏的節點，如display: none
2. 對每一個可見節點，找到恰當的CSSOM規則並應用
3. 釋出可視節點的內容和計算樣式
js解析如下：
1. 瀏覽器建立Document物件並解析HTML，將解析到的元素和文字節點新增到文件中，此時document.readystate為loading
2. HTML解析器遇到沒有async和defer的script時，將他們新增到文件中，然後執行行內或外部指令碼。這些指令碼會同步執行，並且在指令碼下載和執行時解析器會暫停。這樣就可以用document.write()把文字插入到輸入流中。同步指令碼經常簡單定義函式和註冊事件處理程式，他們可以遍歷和操作script和他們之前的文件內容
3. 當解析器遇到設定了async屬性的script時，開始下載指令碼並繼續解析文件。指令碼會在它下載完成後儘快執行，但是解析器不會停下來等它下載。非同步指令碼禁止使用document.write()，它們可以訪問自己script和之前的文件元素
4. 當文件完成解析，document.readState變成interactive
5. 所有defer指令碼會按照在文件出現的順序執行，延遲指令碼能訪問完整文件樹，禁止使用document.write()
6. 瀏覽器在Document物件上觸發DOMContentLoaded事件
7. 此時文件完全解析完成，瀏覽器可能還在等待如圖片等內容載入，等這些內容完成載入並且所有非同步指令碼完成載入和執行，document.readState變為complete,window觸發load事件
顯示頁面（HTML解析過程中會逐步顯示頁面）

63 javasript物件的幾種建立方式

7種模式

檢視 https://blog.csdn.net/weixin_37861326/article/details/80773708

1，工廠模式

2，建構函式模式

3，原型模式

4，混合建構函式和原型模式

5，動態原型模式

6，寄生建構函式模式

7，穩妥建構函式模式

64 javascript繼承的 6 種方法

6種方式

檢視 https://blog.csdn.net/qq_31280709/article/details/52137086

1，原型鏈繼承

2，借用建構函式繼承

3，組合繼承(原型+借用構造)

4，原型式繼承

5，寄生式繼承

6，寄生組合式繼承

65 ajax 的過程是怎樣的

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){

}

66 請解釋一下 JavaScript 的同源策略

概念:同源策略是客戶端指令碼（尤其是Javascript）的重要的安全度量標準。它最早出自Netscape Navigator2.0，其目的是防止某個文件或指令碼從多個不同源裝載。

這裡的同源策略指的是：協議，域名，埠相同，同源策略是一種安全協議。

指一段指令碼只能讀取來自同一來源的視窗和文件的屬性。

為什麼要有同源限制：
我們舉例說明：

比如一個黑客程式，他利用Iframe把真正的銀行登入頁面嵌到他的頁面上，當你使用真實的使用者名稱，密碼登入時，他的頁面就可以通過Javascript讀取到你的表單中input中的內容，這樣使用者名稱，密碼就輕鬆到手了。

缺點：

現在網站的JS 都會進行壓縮，一些檔案用了嚴格模式，而另一些沒有。這時這些本來是嚴格模式的檔案，被 merge 後，這個串就到了檔案的中間，不僅沒有指示嚴格模式，反而在壓縮後浪費了位元組。

67 GET和POST的區別，何時使用POST？

GET：一般用於資訊獲取，使用URL傳遞引數，對所傳送資訊的數量也有限制，一般在2000個字元
POST：一般用於修改伺服器上的資源，對所傳送的資訊沒有限制

GET方式需要使用 Request.QueryString 來取得變數的值
POST方式通過 Request.Form 來獲取變數的值
也就是說 Get 是通過位址列來傳值，而 Post 是通過提交表單來傳值。

在以下情況中，請使用 POST 請求：
1. 無法使用快取檔案（更新伺服器上的檔案或資料庫）
2. 向伺服器傳送大量資料（POST 沒有資料量限制）
3. 傳送包含未知字元的使用者輸入時，POST 比 GET 更穩定也更可靠

68 什麼是 “use strict”; ? 使用它的好處和壞處分別是什麼？

ECMAscript 5新增了第二種執行模式：”嚴格模式”（strict mode）。顧名思義，這種模式使得Javascript在更嚴格的條件下執行。

設立”嚴格模式”的目的，主要有以下幾個：
1. 消除Javascript語法的一些不合理、不嚴謹之處，減少一些怪異行為;
2. 消除程式碼執行的一些不安全之處，保證程式碼執行的安全；
3. 提高編譯器效率，增加執行速度；
4. 為未來新版本的Javascript做好鋪墊。
注：經過測試 IE6,7,8,9 均不支援嚴格模式。

缺點：
現在網站的 JS 都會進行壓縮，一些檔案用了嚴格模式，而另一些沒有。這時這些本來是嚴格模式的檔案，被merge後，這個串就到了檔案的中間，不僅沒有指示嚴格模式，反而在壓縮後浪費了位元組。

69 Flash、Ajax各自的優缺點，在使用中如何取捨？

Flash：
1. Flash適合處理多媒體、向量圖形、訪問機器
2. 對CSS、處理文字上不足，不容易被搜尋

Ajax：
1. Ajax對CSS、文字支援很好，支援搜尋
2. 多媒體、向量圖形、機器訪問不足

共同點：
1. 與伺服器的無重新整理傳遞訊息
2. 可以檢測使用者離線和線上狀態
2. 操作DOM

70 eval是做什麼的？

1. 它的功能是把對應的字串解析成JS程式碼並執行
2. 應該避免使用eval，不安全，非常耗效能（2次，一次解析成js語句，一次執行）

71 jQuery的美元符號$有什麼作用？

其實美元符號$只是”jQuery”的別名，它是jQuery的選擇器，如下程式碼：

$(document).ready(function(){

});

當然你也可以用jQuery來代替$，如下程式碼：

jQuery(document).ready(function(){

});

jQuery中就是通過這個美元符號來實現各種靈活的DOM元素選擇的，例如$(“#main”)即選中id為main的元素。

72 body中的onload()函式和jQuery中的document.ready()有什麼區別？

onload()和document.ready()的區別有以下兩點：

1、我們可以在頁面中使用多個document.ready()，但只能使用一次onload()。

2、document.ready()函式在頁面DOM元素載入完以後就會被呼叫，而onload()函式則要在所有的關聯資源（包括影像、音訊）載入完畢後才會呼叫。

73 jQuery中有哪幾種型別的選擇器？

可以有3種型別的選擇器，如下：

1、基本選擇器：直接根據id、css類名、元素名返回匹配的dom元素。

2、層次選擇器：也叫做路徑選擇器，可以根據路徑層次來選擇相應的DOM元素。

3、過濾選擇器：在前面的基礎上過濾相關條件，得到匹配的dom元素。

74 請使用jQuery將頁面上的所有元素邊框設定為2px寬的虛線？

這正是jQuery選擇器上場的時候了，程式碼如下：

75 當CDN上的jQuery檔案不可用時，該怎麼辦？

為了節省頻寬和指令碼引用的穩定性，我們會使用CDN上的jQuery檔案，例如google的jquery cdn服務。但是如果這些CDN上的jQuery服務不可用，我們還可以通過以下程式碼來切換到本地伺服器的jQuery版本：

if (typeof jQuery == 'undefined') {

document.write(unescape("%3Cscript src='/Script/jquery-1.4.1.min.js' type='text/javascript' %3E%3C/script%3E"));

}//]]>

</script>

76 如何使用jQuery實現點選按鈕彈出一個對話方塊？

程式碼如下：

HTML：

<input id="inputField" type="text" size="12"/>

jQuery：

77 jQuery中的Delegate()函式有什麼作用？

delegate()會在以下兩個情況下使用到：

1、如果你有一個父元素，需要給其下的子元素新增事件，這時你可以使用delegate()了，程式碼如下：

$("ul").delegate("li", "click", function(){

$(this).hide();

});

2、當元素在當前頁面中不可用時，可以使用delegate()

78 怎樣用jQuery編碼和解碼URL？

在jQuery中，我們可以使用以下方法實現URL的編碼和解碼。

encodeURIComponent(url) and decodeURIComponent(url)

79 如何用jQuery禁用瀏覽器的前進後退按鈕？

實現程式碼如下：

$(document).ready(function() {

window.history.forward(1);

//OR

window.history.forward(-1);

});

</script>

80 tcp的三次握手

SYN(SYNchronization)：在連線建立時用來同步序號。當SYN=1而ACK=0時，表明這是一個連線請求報文。對方若同意建立連線，則應在響應報文中使SYN=1和ACK=1. 因此, SYN置1就表示這是一個連線請求或連線接受報文。

ACK ：TCP協議規定，只有ACK=1時有效，也規定連線建立後所有傳送的報文的ACK必須為1

seq：(sequence number) 順序號碼

ack:(acknowledge number) 確認號碼

首先由Client（客戶端）發出請求連線即 SYN=1 ACK=0 (請看頭欄位的介紹), TCP規定SYN=1時不能攜帶資料，但要消耗一個序號,因此宣告自己的序號是 seq=x
然後 Server 進行回覆確認，即 SYN=1 ACK=1 seq=y, ack=x+1,
再然後 Client 再進行一次確認，但不用SYN 了，這時即為 ACK=1, seq=x+1, ack=y+1.然後連線建立。

有人會困惑為什麼要進行三次握手呢（兩次確認）？這主要是為了防止已失效的請求連線報文忽然又傳送到了，從而產生錯誤。如何產生這種情況的呢？假定A向B傳送一個連線請求，由於一些原因，導致A發出的連線請求在一個網路節點逗留了比較多的時間。此時A會將此連線請求作為無效處理又重新向B發起了一次新的連線請求，B正常收到此連線請求後建立了連線，資料傳輸完成後釋放了連線。如果此時A發出的第一次請求又到達了B，B會以為A又發起了一次連線請求，如果是兩次握手此時連線就建立了，B會一直等待A傳送資料，從而白白浪費B的資源。三次握手的話，由於A沒有發起連線請求，也就不會理會B的連線響應，B沒有收到A的確認連線，就會關閉掉本次連線。

可能還有人困惑大寫ACK和小寫ack是有什麼區別，為什麼兩個值還不一樣。大寫ACK是一種TCP協議規定的標識，小寫ack是 acknowledge number 為確認號碼，值是seq + 1。

81 深入理解ES6箭頭函式的this以及各類this

https://blog.csdn.net/yangbingbinga/article/details/61424363

普通函式中的this:

1. this總是代表它的直接呼叫者(js的this是執行上下文), 例如 obj.func ,那麼func中的this就是obj

2.在預設情況(非嚴格模式下,未使用 'use strict'),沒找到直接呼叫者,則this指的是 window (約定俗成)

3.在嚴格模式下,沒有直接呼叫者的函式中的this是 undefined

4.使用call,apply,bind(ES5新增)繫結的,this指的是繫結的物件

箭頭函式中的this

箭頭函式沒有自己的this, 它的this是繼承而來; 預設指向在定義它時所處的物件(宿主物件),而不是執行時的物件, 定義它的時候,可能環境是window; 箭頭函式可以方便地讓我們在 setTimeout ,setInterval中方便的使用this

要整明白這些, 我們需要首先了解一下作用域鏈:

當在函式中使用一個變數的時候,首先在本函式內部查詢該變數,如果找不到則找其父級函式,

最後直到window,全域性變數預設掛載在window物件下

1.全域性變數預設掛載在window物件下

<script>

var aa = 2;

alert(window.aa);

(function () {

aa = 3;

})();

alert(window.aa);

</script>

我們僅僅宣告瞭一個全域性變數aa,但是列印出window.aa卻和aa保持一致,為什麼呢?

眼見為實, 我們使用console.dir(window) 列印 window物件看看

我們可以看到在window屬性中,看到 aa 屬性了;此外,函式也適用於此情況,全域性函式也會掛在在window物件下

我們常見的window的屬性和方法有: alert, location，document，parseInt，setTimeout，setInterval等,window的屬性預設可以省略window字首!

2.在普通函式中,this指向它的直接呼叫者;如果找不到直接呼叫者,則是window

來看一些例子

示例1

function test() {

console.log(this);

}

test();

</script>

結果是: window

原因: test()是一個全域性函式,也就是說是掛在window物件下的,所以test()等價於 window.test() ,所以此時的this是window

示例2

var obj = {

say: function () {

setTimeout(function () {

console.log(this)

});

}

obj.say();

</script>

結果是: window

匿名函式,定時器中的函式,由於沒有預設的宿主物件,所以預設this指向window

問題: 如果想要在setTimeout/setInterval中使用這個物件的this引用呢?

用一個變數提前把正確的 this引用儲存起來, 我們通常使用that = this, 或者 _this = this來儲存我們需要的this指標!

var obj = {

func: function() {},

say: function () {

var that = this; //此時的this就是obj物件

setTimeout(function () {

console.log(this)

that.func()

});

}

obj.say();

</script>

我們也可以使用 func.bind(this) 給回撥函式直接繫結宿主物件, bind繫結宿主物件後依然返回這個函式, 這是更優雅的做法

var obj = {

func: function() {},

say: function () {

// 此時的this就是obj物件

setTimeout(function () {

console.log(this)

this.func()

}.bind(this));

}

obj.say(); // obj

</script>

示例3(改變自360面試題):

window.val = 1;

var obj = {

val: 2,

dbl: function () {

this.val *= 2;

val *= 2;

console.log(val);

console.log(this.val);

}

};

// 說出下面的輸出結果

obj.dbl();

var func = obj.dbl;

func();

結果是: 2 4 8 8

<1> 12行程式碼呼叫

val變數在沒有指定物件字首,預設從函式中找,找不到則從window中找全域性變數

即 val *=2 就是 window.val *= 2

this.val預設指的是 obj.val ;因為 dbl()第一次被obj直接呼叫

<2>14行程式碼呼叫

func() 沒有任何字首,類似於全域性函式,即 window.func呼叫,所以

第二次呼叫的時候, this指的是window, val指的是window.val

第二次的結果受第一次的影響

3.在嚴格模式下的this

function test() {

'use strict';

console.log(this);

}

test();

</script>

結果是: undefined

4.箭頭函式中的 this

var obj = {

say: function () {

setTimeout(() => {

console.log(this)

});

}

obj.say(); // obj

</script>

此時的 this繼承自obj, 指的是定義它的物件obj, 而不是 window!

示例(多層巢狀的箭頭函式):

var obj = {

say: function () {

var f1 = () => {

console.log(this); // obj

setTimeout(() => {

console.log(this); // obj

})

}

f1();

}

obj.say()

</script>

因為f1定義時所處的函式中的 this是指的 obj, setTimeout中的箭頭函式this繼承自f1, 所以不管有多層巢狀,都是 obj

示例(複雜情況: 普通函式和箭頭函式混雜巢狀)

var obj = {

say: function () {

var f1 = function () {

console.log(this); // window, f1呼叫時,沒有宿主物件,預設是window

setTimeout(() => {

console.log(this); // window

})

};

f1();

}

obj.say()

</script>

結果: 都是 window,因為箭頭函式在定義的時候它所處的環境相當於是window, 所以在箭頭函式內部的this函式window

示例(嚴格模式下的混雜巢狀)

var obj = {

say: function () {

'use strict';

var f1 = function () {

console.log(this); // undefined

setTimeout(() => {

console.log(this); // undefined

})

};

f1();

}

obj.say()

</script>

結果都是undefined

說明: 嚴格模式下,沒有宿主呼叫的函式中的this是undefined!!!所以箭頭函式中的也是undefined!

總結:

使用箭頭函式,可以讓我們解決一些在匿名函式中 this指向不正確的問題; 但是要注意在和普通函式混合的時候,this的指向可能是window !

另外一個精簡版的理解：

箭頭函式需要注意的地方

*當要求動態上下文的時候，就不能夠使用箭頭函式，也就是this的固定化。

1、在使用=>定義函式的時候，this的指向是定義時所在的物件，而不是使用時所在的物件；
2、不能夠用作建構函式，這就是說，不能夠使用new命令，否則就會丟擲一個錯誤；
3、不能夠使用arguments物件；
4、不能使用yield命令；

下面來看一道面試題，重點說明下第一個知識點：

class Animal {

constructor() {

this.type = "animal";

}

say(val) {

setTimeout(function () {

console.log(this); //window

console.log(this.type + " says " + val);

}, 1000)

}

var animal = new Animal();

animal.say("hi"); //undefined says hi

【擴充】

《JavaScript高階程式設計》第二版中，寫到：“超時呼叫的程式碼都是在全域性作用域中執行的，因此函式中this的值在非嚴格模式下指向window物件，在嚴格模式下是undefined”。也就是說在非嚴格模式下，setTimeout中所執行函式中的this，永遠指向window！！

我們再來看看箭頭函式（=>）的情況：

class Animal {

constructor() {

this.type = "animal";

}

say(val) {

setTimeout(() => {

console.log(this); //Animal

console.log(this.type + ' says ' + val);

}, 1000)

}

var animal = new Animal();

animal.say("hi"); //animal says hi

【特點】

1.不需要function關鍵字來建立函式

2.省略return關鍵字

3.繼承當前上下文的 this 關鍵字

82 前端需要注意哪些SEO

1.合理的title、description、keywords：搜尋對著三項的權重逐個減小，title值強調重點即可，重要關鍵詞出現不要超過2次，而且要靠前，不同頁面title要有所不同；description把頁面內容高度概括，長度合適，不可過分堆砌關鍵詞，不同頁面description有所不同；keywords列舉出重要關鍵詞即可

2.語義化的HTML程式碼，符合W3C規範：語義化程式碼讓搜尋引擎容易理解網頁

3.重要內容HTML程式碼放在最前：搜尋引擎抓取HTML順序是從上到下，有的搜尋引擎對抓取長度有限制，保證重要內容一定會被抓取

4.重要內容不要用js輸出：爬蟲不會執行js獲取內容

5.少用iframe：搜尋引擎不會抓取iframe中的內容

6.非裝飾性圖片必須加alt

7.提高網站速度：網站速度是搜尋引擎排序的一個重要指標

CSDN關於SEO:

由於上一家公司主營業務包括SEO，平時會接觸到SEO的相關知識，建站期間也會有很多相關的注意事項。在此結合自己的理解做個總結與分享，所識有限，還可能會有誤解之處，但也希望給大家樹立SEO的意識，因為做好SEO，可以提高網站在搜尋引擎中的排名，帶來更多流量，才會獲得更多的業務和詢盤。

在這裡主要想講的有以下三點：

第一，什麼是SEO?

搜尋引擎優化（Search Engine Optimization）,簡稱SEO。是按照搜尋引擎給出的優化建議，以增強網站核心價值為目標，從網站結構、內容建設方案、使用者互動傳播等角度進行合理規劃，以改善網站在搜尋引擎中的表現，吸引更多搜尋引擎使用者訪問網站。SEO與搜尋引擎，互相促進，互利互助。
要想更好理解以上一段廢話，首先需要理解關於搜尋引擎的兩個概念。

1、索引擎工作原理

可以將搜尋引擎比喻為一個偌大的圖書館，裡面所有的圖書都已經分門別類排列整齊了，分類分成大分類（可以理解為書架）小分類（可以理解為書架上擱架）以及具體到最小的分類（書的名字）。圖書館每天都在增加新的圖書，那麼一個新的網站就等於一本書，我們進入搜尋引擎輸入的關鍵詞就是圖書館裡面分類的名字或者直接是書名，通過搜尋引擎這個龐大的圖書館系統可以很快的找到我們需要的內容。那麼什麼書歸置於什麼分類下，如何擺到更容易被找到的位置就需要理解下面的內容了。

2、搜尋引擎蜘蛛工作原理

搜尋引擎蜘蛛是搜尋引擎工程師開發出的模擬蜘蛛在蜘蛛網爬行的一個程式，因為類似蜘蛛的行為，就稱為搜尋引擎蜘蛛，用來抓取網頁資訊，分門別類的儲存在上面所說的圖書館裡，有需要的時候再進行調取。所以為了讓蜘蛛更容易抓取網頁內容，就要投其所好，才能為我所用。

第二，我們為什麼需要SEO?

那麼我們為什麼需要做SEO呢，就是為了提高網站的權重，增強搜尋引擎友好度，以達到提高排名，增加流量，改善使用者體驗，促進銷售的作用。

1、什麼樣的網站需要被搜尋引擎檢索到？

我有百度過關鍵詞“合肥房產網”，出來的結果是好居網排名21位，也就是說翻到第三頁第一個才是我們的網站。如果我是一位準備買房或者賣房的使用者，我用百度搜尋也不太可能會翻到第三頁才決定我要找誰給我買或者賣這個房子吧。就算我們的服務我們的產品是最好的，但是使用者搜尋不到也是白搭，這就是SEO的作用所在，通過更高的排名，讓潛在使用者可以更便捷的找到我們。

2、什麼樣的網站可以更好的被搜尋引擎檢索到？

對搜尋引擎越友好，網站權重越高，排名就越高，就更容易被檢索到。從擬人化的角度來看待搜尋引擎蜘蛛，可以得出一些結論。首先你需要投其所好，網站結構脈絡需要符合蜘蛛閱讀的習慣，程式碼雜亂無章，蜘蛛看著都頭疼，就無法給他留個好印象了；其次，網站深度不能太深，從首頁到目標頁跳轉最好不能超過四次，再多的話蜘蛛就頭暈了，轉不出來，下次他就不再光顧，我們只能往後站；再次，當蜘蛛進入一個網站，半天載入不出來，他每天這麼繁重的工作量，哪裡會有時間慢慢等載入完成，相信印象也不會有多好了；最後，內容是一個網站存在的基礎，蜘蛛循著一個關鍵詞來到我們的網站，轉了一圈，發現跟他想找的東西風馬牛不相及，他可就頭大了，直接就打入冷宮吧。
看到這裡相信大家會對SEO充滿好奇了吧，到底怎樣才能做好SEO呢？雖然說SEO更多的是運營的工作，布關鍵詞發外鏈是一項繁重而長期的工程，但是作為網站建設人員，我們也有一些點可以注意，一樣可以對SEO有所幫助，下面就是從前端的角度對網站進行的一些優化。

第三，從前端角度出發有哪些注意事項有利於SEO?

1、提高頁面載入速度。能用css解決的不用背景圖片，背景圖片也儘量壓縮大小，可以幾個icons放在一個圖片上，使用background-position找到需要的圖片位置。可以減少HTTP請求數，提高網頁載入速度。
2、結構、表現和行為的分離。另外一個重要的拖慢網頁載入速度的原因就是將css和JS都堆積在HTML頁面上，每次看到有人直接在頁面上編寫CSS和JS我都很痛心疾首。通過外鏈的方式能大大加快網頁載入速度的，css檔案可以放在head裡，JS檔案可以放置在body的最下方，在不影響閱讀的情況下再去載入JS檔案。
3、優化網站分級結構。在每個內頁加麵包屑導航是很有必要的，可以讓蜘蛛進入頁面之後不至於迷路，有條件的話，最好能單獨加個Sitemap頁面，將網站結構一目瞭然地展示在蜘蛛面前，更有利於蜘蛛抓取資訊。
4、集中網站權重。由於蜘蛛分配到每個頁面的權重是一定的，這些權重也將平均分配到每個a連結上，那麼為了集中網站權重，可以使用”rel=nofollow”屬性，它告訴蜘蛛無需抓取目標頁,可以將權重分給其他的連結。
5、文字強調標籤的使用。當著重強調某個關鍵詞需要加粗表示，選用strong標籤比使用b標籤要更有強調作用。
6、 a標籤的title屬性的使用。在不影響頁面功能的情況下，可以儘量給a標籤加上title屬性，可以更有利於蜘蛛抓取資訊。
7、圖片alt屬性的使用。這個屬性可以在圖片載入不出來的時候顯示在頁面上相關的文字資訊，作用同上。
8、 H標籤的使用。主要是H1標籤的使用需要特別注意，因為它自帶權重，一個頁面有且最多隻能有一個H1標籤，放在該頁面最重要的標題上面，如首頁的logo上可以加H1標籤。

其實還有很多也沒法一一列舉出來，只是舉出幾個相比比較常用和重要的點吧。由於對SEO也只是知道皮毛，有很多不對之處還望海涵。

83 web開發中會話跟蹤的方法有哪些

1) cookie

2) session

3) url重寫

4) 隱藏input

5) ip地址

84 <img>的title和alt有什麼區別

1.title是global attributes之一，用於為元素提供附加的advisory information。通常當滑鼠滑動到元素上的時候顯示。

2.alt是<img>的特有屬性，是圖片內容的等價描述，用於圖片無法載入時顯示、讀屏器閱讀圖片。可提圖片高可訪問性，除了純裝飾圖片外都必須設定有意義的值，搜尋引擎會重點分析。

85 doctype是什麼,舉例常見doctype及特點

<!doctype>宣告必須處於HTML文件的頭部，在<html>標籤之前，HTML5中不區分大小寫
<!doctype>宣告不是一個HTML標籤，是一個用於告訴瀏覽器當前HTMl版本的指令
現代瀏覽器的html佈局引擎通過檢查doctype決定使用相容模式還是標準模式對文件進行渲染，一些瀏覽器有一個接近標準模型。
在HTML4.01中<!doctype>宣告指向一個DTD，由於HTML4.01基於SGML，所以DTD指定了標記規則以保證瀏覽器正確渲染內容
HTML5不基於SGML，所以不用指定DTD

常見dotype：

HTML4.01 strict：不允許使用表現性、廢棄元素（如font）以及frameset。宣告：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML4.01 Transitional:允許使用表現性、廢棄元素（如font），不允許使用frameset。宣告：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML4.01 Frameset:允許表現性元素，廢氣元素以及frameset。宣告：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML1.0 Strict:不使用允許表現性、廢棄元素以及frameset。文件必須是結構良好的XML文件。宣告：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML1.0 Transitional:允許使用表現性、廢棄元素，不允許frameset，文件必須是結構良好的XMl文件。宣告： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset:允許使用表現性、廢棄元素以及frameset，文件必須是結構良好的XML文件。宣告：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
HTML 5: <!doctype html>

HTML全域性屬性(global attribute)有哪些

參考資料：MDN: html global attribute或者W3C HTML global-attributes

accesskey:設定快捷鍵，提供快速訪問元素如aaa在windows下的firefox中按alt + shift + a可啟用元素
class:為元素設定類標識，多個類名用空格分開，CSS和javascript可通過class屬性獲取元素
contenteditable: 指定元素內容是否可編輯
contextmenu: 自定義滑鼠右鍵彈出選單內容
data-*: 為元素增加自定義屬性
dir: 設定元素文字方向
draggable: 設定元素是否可拖拽
dropzone: 設定元素拖放型別： copy, move, link
hidden: 表示一個元素是否與文件。樣式上會導致元素不顯示，但是不能用這個屬性實現樣式效果
id: 元素id，文件內唯一
lang: 元素內容的的語言
spellcheck: 是否啟動拼寫和語法檢查
style: 行內css樣式
tabindex: 設定元素可以獲得焦點，通過tab可以導航
title: 元素相關的建議資訊
translate: 元素和子孫節點內容是否需要本地化

86 什麼是web語義化,有什麼好處

web語義化是指通過HTML標記表示頁面包含的資訊，包含了HTML標籤的語義化和css命名的語義化。 HTML標籤的語義化是指：通過使用包含語義的標籤（如h1-h6）恰當地表示文件結構 css命名的語義化是指：為html標籤新增有意義的class，id補充未表達的語義，如Microformat通過新增符合規則的class描述資訊為什麼需要語義化：

1.去掉樣式後頁面呈現清晰的結構

2.盲人使用讀屏器更好地閱讀

3.搜尋引擎更好地理解頁面，有利於收錄

4.便團隊專案的可持續運作及維護

87 HTTP method

一臺伺服器要與HTTP1.1相容，只要為資源實現GET和HEAD方法即可

1.GET是最常用的方法，通常用於請求伺服器傳送某個資源。

2.HEAD與GET類似，但伺服器在響應中值返回首部，不返回實體的主體部分

3.PUT讓伺服器用請求的主體部分來建立一個由所請求的URL命名的新文件，或者，如果那個URL已經存在的話，就用幹這個主體替代它

4.POST起初是用來向伺服器輸入資料的。實際上，通常會用它來支援HTML的表單。表單中填好的資料通常會被送給伺服器，然後由伺服器將其傳送到要去的地方。

5.TRACE會在目的伺服器端發起一個環回診斷，最後一站的伺服器會彈回一個6.TRACE響應並在響應主體中攜帶它收到的原始請求報文。TRACE方法主要用於診斷，用於驗證請求是否如願穿過了請求/響應鏈。

7.OPTIONS方法請求web伺服器告知其支援的各種功能。可以查詢伺服器支援哪些方法或者對某些特殊資源支援哪些方法。

DELETE請求伺服器刪除請求URL指定的資源

88 聖盃佈局和雙飛翼佈局以及全域性佈局的方式

聖盃佈局以及雙飛翼佈局

真實名稱: 統稱—”三欄佈局”

聖盃佈局：

利用relative 和 margin-left 以及 margin-right實現三欄佈局。

結構層：

檢視層：

先從#main塊開始，到#left到#right ,在#left 和 #right設定margin-left 和 margin-right 以及left之前他們渲染出來的圖形如下：

效果圖：

89 移動端效能優化

1.儘量使用css3動畫，開啟硬體加速。

2.適當使用touch事件代替click事件。

3.避免使用css3漸變陰影效果。

4.可以用transform: translateZ(0)來開啟硬體加速。

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

6.不濫用Web字型。Web字型需要下載，解析，重繪當前頁面，儘量減少使用。

7.合理使用requestAnimationFrame動畫代替setTimeout

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

PC端的在移動端同樣適用

90 棧和佇列的區別?

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

2.佇列先進先出，棧先進後出。

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

91 棧和堆的區別？

1.棧區（stack）— 由編譯器自動分配釋放，存放函式的引數值，區域性變數的值等。

2.堆區（heap） — 一般由程式設計師分配釋放，若程式設計師不釋放，程式結束時可能由OS回收。

3.堆（資料結構）：堆可以被看成是一棵樹，如：堆排序；

4.棧（資料結構）：一種先進後出的資料結構。

92 你覺得jQuery或zepto原始碼有哪些寫的好的地方

jQuery原始碼封裝在一個匿名函式的自執行環境中，有助於防止變數的全域性汙染，然後通過傳入window物件引數，可以使window物件作為區域性變數使用，好處是當jquery中訪問window物件的時候，就不用將作用域鏈退回到頂層作用域了，從而可以更快的訪問window物件。同樣，傳入undefined引數，可以縮短查詢undefined時的作用域鏈。

(function( window, undefined ) {

//用一個函式域包起來，就是所謂的沙箱

//在這裡邊var定義的變數，屬於這個函式域內的區域性變數，避免汙染全域性

//把當前沙箱需要的外部變數通過函式引數引入進來

//只要保證引數對內提供的介面的一致性，你還可以隨意替換傳進來的這個引數

window.jQuery = window.$ = jQuery;

})( window );

jquery將一些原型屬性和方法封裝在了jquery.prototype中，為了縮短名稱，又賦值給了jquery.fn，這是很形象的寫法。

有一些陣列或物件的方法經常能使用到，jQuery將其儲存為區域性變數以提高訪問速度。

jquery實現的鏈式呼叫可以節約程式碼，所返回的都是同一個物件，可以提高程式碼效率。

93 ES6的瞭解

新增模板字串（為JavaScript提供了簡單的字串插值功能）、箭頭函式（操作符左邊為輸入的引數，而右邊則是進行的操作以及返回的值Inputs=>outputs。）、for-of（用來遍歷資料—例如陣列中的值。）arguments物件可被不定引數和預設引數完美代替。ES6將promise物件納入規範，提供了原生的Promise物件。增加了let和const命令，用來宣告變數。增加了塊級作用域。let命令實際上就增加了塊級作用域。ES6規定，var命令和function命令宣告的全域性變數，屬於全域性物件的屬性；let命令、const命令、class命令宣告的全域性變數，不屬於全域性物件的屬性。。還有就是引入module模組的概念

94 關於Http 2.0 你知道多少？

HTTP/2引入了“服務端推（server push）”的概念，它允許服務端在客戶端需要資料之前就主動地將資料傳送到客戶端快取中，從而提高效能。

HTTP/2提供更多的加密支援

HTTP/2使用多路技術，允許多個訊息在一個連線上同時交差。

它增加了頭壓縮（header compression），因此即使非常小的請求，其請求和響應的header都只會佔用很小比例的頻寬。

95 什麼是 FOUC（無樣式內容閃爍）？你如何來避免 FOUC？

FOUC - Flash Of Unstyled Content 文件樣式閃爍

而引用CSS檔案的@import就是造成這個問題的罪魁禍首。IE會先載入整個HTML文件的DOM，然後再去匯入外部的CSS檔案，因此，在頁面DOM載入完成到CSS匯入完成中間會有一段時間頁面上的內容是沒有樣式的，這段時間的長短跟網速，電腦速度都有關係。

解決方法簡單的出奇，只要在<head>之間加入一個<link>或者<script>元素就可以了。

96 請解釋什麼是事件代理

事件代理（Event Delegation），又稱之為事件委託。是 JavaScript 中常用繫結事件的常用技巧。顧名思義，“事件代理”即是把原本需要繫結的事件委託給父元素，讓父元素擔當事件監聽的職務。事件代理的原理是DOM元素的事件冒泡。使用事件代理的好處是可以提高效能。

97 attribute和property的區別是什麼？

attribute是dom元素在文件中作為html標籤擁有的屬性；

property就是dom元素在js中作為物件擁有的屬性。

所以：

對於html的標準屬性來說，attribute和property是同步的，是會自動更新的，

但是對於自定義的屬性來說，他們是不同步的

98 說說網路分層裡七層模型是哪七層

應用層：應用層、表示層、會話層（從上往下）（HTTP、FTP、SMTP、DNS）
傳輸層（TCP和UDP）
網路層（IP）
物理和資料鏈路層（乙太網）

每一層的作用如下：

物理層：通過媒介傳輸位元,確定機械及電氣規範（位元Bit）

資料鏈路層：將位元組裝成幀和點到點的傳遞（幀Frame）

網路層：負責資料包從源到宿的傳遞和網際互連（包PackeT）

傳輸層：提供端到端的可靠報文傳遞和錯誤恢復（段Segment）

會話層：建立、管理和終止會話（會話協議資料單元SPDU）

表示層：對資料進行翻譯、加密和壓縮（表示協議資料單元PPDU）

應用層：允許訪問OSI環境的手段（應用協議資料單元APDU）

各種協議

ICMP協議：因特網控制報文協議。它是TCP/IP協議族的一個子協議，用於在IP主機、路由器之間傳遞控制訊息。
TFTP協議：是TCP/IP協議族中的一個用來在客戶機與伺服器之間進行簡單檔案傳輸的協議，提供不復雜、開銷不大的檔案傳輸服務。
HTTP協議：超文字傳輸協議，是一個屬於應用層的物件導向的協議，由於其簡捷、快速的方式，適用於分散式超媒體資訊系統。
DHCP協議：動態主機配置協議，是一種讓系統得以連線到網路上，並獲取所需要的配置引數手段

99 說說mongoDB和MySQL的區別

MySQL是傳統的關係型資料庫，MongoDB則是非關係型資料庫

mongodb以BSON結構（二進位制）進行儲存，對海量資料儲存有著很明顯的優勢。

對比傳統關係型資料庫,NoSQL有著非常顯著的效能和擴充套件性優勢，與關係型資料庫相比，MongoDB的優點有：
①弱一致性（最終一致），更能保證使用者的訪問速度：
②文件結構的儲存方式，能夠更便捷的獲取資料。

100 講講304快取的原理

伺服器首先產生ETag，伺服器可在稍後使用它來判斷頁面是否已經被修改。本質上，客戶端通過將該記號傳回伺服器要求伺服器驗證其（客戶端）快取。

304是HTTP狀態碼，伺服器用來標識這個檔案沒修改，不返回內容，瀏覽器在接收到個狀態碼後，會使用瀏覽器已快取的檔案

客戶端請求一個頁面（A）。伺服器返回頁面A，並在給A加上一個ETag。客戶端展現該頁面，並將頁面連同ETag一起快取。客戶再次請求頁面A，並將上次請求時伺服器返回的ETag一起傳遞給伺服器。伺服器檢查該ETag，並判斷出該頁面自上次客戶端請求之後還未被修改，直接返回響應304（未修改——Not Modified）和一個空的響應體。

101 什麼樣的前端程式碼是好的

高複用低耦合，這樣檔案小，好維護，而且好擴充套件。

102 談談你對預載入的理解？

Web預載入指的是在網頁全載入完成之前，在頁面優先顯示一些主要內容，以提高使用者體驗。對於一個較龐大的網站，如果沒有使用預載入技術，使用者介面就會長時間顯示一片空白，直到資源載入完成，頁面才會顯示內容。

例如，可以通過js預先從服務載入圖片資源(動態建立Image，設定src屬性)，只要瀏覽器把圖片下載到本地，就會被快取，再次請求相當的src時就會優先尋找瀏覽器快取，提高訪問速度。

103 快取和預載入的區別是什麼？

快取就是把請求過的資料快取起來，下次請求的時候直接使用快取內容，提高響應速度

預載入指的是提前把需要的內容載入完成，訪問的時候可以明天提高響應效率，比如圖片的預載入（可以提前載入一定數量的圖片，當使用者訪問圖片的時候一般只看前幾張，由於是預載入好的，所以速度比較快）

104 CDN是什麼？

CDN的全稱：是Content DeliveryNetwork，即內容分發網路，加速的意思，那麼網站CND服務就是網站加速服務。

CDN加速原理：CDN加速將網站的內容快取在網路邊緣（離使用者接入網路最近的地方），然後在使用者訪問網站內容的時候，通過排程系統將使用者的請求路由或者引導到離使用者接入網路最近或者訪問效果最佳的快取伺服器上，有該快取伺服器為使用者提供內容服務；相對於直接訪問源站，這種方式縮短了使用者和內容之間的網路距離，從而達到加速的效果。

CDN的特點：

1、本地加速提高了企業站點(尤其含有大量圖片和靜態頁面站點)的訪問速度，並大大提高以上性質站點的穩定性

2、映象服務消除了不同運營商之間互聯的瓶頸造成的影響，實現了跨運營商的網路加速，保證不同網路中的使用者都能得到良好的訪問質量。

3、遠端加速遠端訪問使用者根據DNS負載均衡技術智慧自動選擇Cache伺服器，選擇最快的Cache伺服器，加快遠端訪問的速度

4、頻寬優化自動生成伺服器的遠端Mirror(映象)cache伺服器，遠端使用者訪問時從cache伺服器上讀取資料，減少遠端訪問的頻寬、分擔網路流量、減輕原站點WEB伺服器負載等功能。

5、叢集抗攻擊廣泛分佈的CDN節點加上節點之間的智慧冗於機制，可以有效地預防黑客入侵以及降低各種D.D.o.S攻擊對網站的影響，同時保證較好的服務質量。

105 瀏覽器一次可以從一個域名下請求多少資源？

瀏覽器的併發請求數目限制是針對同一域名的，同一時間針對同一域名下的請求有一定數量限制，不同瀏覽器這個限制的數目不一樣，超過限制數目的請求會被阻塞；

目前的話，所有瀏覽器的併發數目一般限制在10以內。

106 什麼是垃圾回收機制（GC）？

早期的計算機語言，比如C和C++，需要開發者手動的來跟蹤記憶體，這種機制的優點是記憶體分配和釋放的效率很高。但是它也有著它的缺點，程式設計師很容易不小心忘記釋放記憶體，從而造成記憶體的洩露。

新的程式語言，比如JAVA, C#， javascript, 都提供了所謂“垃圾回收的機制”，執行時自身會執行相應的垃圾回收機制。程式設計師只需要申請記憶體，而不需要關注記憶體的釋放。垃圾回收器(GC)會在適當的時候將已經終止生命週期的變數的記憶體給釋放掉。GC的優點就在於它大大簡化了應用層開發的複雜度，降低了記憶體洩露的風險。

107 http和tcp有什麼區別？

TPC/IP協議是傳輸層協議，主要解決資料如何在網路中傳輸，是一種“經過三次握手”的可靠的傳輸方式；

HTTP協議即超文字傳送協議(Hypertext Transfer Protocol )，是應用層協議，是Web聯網的基礎，也是手機聯網常用的協議之一，HTTP協議是建立在TCP協議之上的一種應用。

108 你知道有哪些方法可以提高網站的效能？

我們從兩個方面來講：

1.資源載入

CSS頂部, JS底部

CSS JS檔案壓縮

儘量使用圖片使用精靈圖，字型圖示

圖片載入可通過懶載入的方式。

總之就是減少資源體積減少資源請求次數。

2.程式碼效能

Css:

使用CSS縮寫，減少程式碼量；

減少查詢層級：如.header .logo要好過.header .top .logo；

減少查詢範圍：如.header>li要好過.header li；

避免TAG標籤與CLASS或ID並存：如a.top、button#submit；

刪除重複的CSS；

….

Html:

減少DOM節點：加速頁面渲染；

正確的閉合標籤：如避免使用<div/>，瀏覽器會多一個將它解析成<div\></div\>的過程；

減少頁面重繪。比如給圖片加上正確的寬高值：這可以減少頁面重繪，

……

Js：

儘量少用全域性變數；

使用事件代理繫結事件，如將事件繫結在body上進行代理；

避免頻繁操作DOM節點；

減少物件查詢，如a.b.c.d這種查詢方式非常耗效能，儘可能把它定義在變數裡；

109 什麼是Keep-Alive模式？

我們知道HTTP協議採用“請求-應答”模式，當使用普通模式，即非KeepAlive模式時，每個請求/應答客戶和伺服器都要新建一個連線，完成之後立即斷開連線（HTTP協議為無連線的協議）；當使用Keep-Alive模式（又稱持久連線、連線重用）時，Keep-Alive功能使客戶端到伺服器端的連線持續有效，當出現對伺服器的後繼請求時，Keep-Alive功能避免了建立或者重新建立連線。

http 1.0中預設是關閉的，需要在http頭加入"Connection: Keep-Alive"，才能啟用Keep-Alive；http 1.1中預設啟用Keep-Alive，如果加入"Connection: close "，才關閉。目前大部分瀏覽器都是用http1.1協議，也就是說預設都會發起Keep-Alive的連線請求了，所以是否能完成一個完整的Keep-Alive連線就看伺服器設定情況。

110 啟用Keep-Alive的優點

從上面的分析來看，啟用Keep-Alive模式肯定更高效，效能更高。因為避免了建立/釋放連線的開銷。

111 看下列程式碼，<p>標籤內的文字是什麼顏色的？

<style>

.classA{color: blue};

.classB{color: red};

</style>

<body>

</body>

答案：紅色

112 你面前有一座高塔，這座高塔有N(N > 100)個臺階，你每次只能往前邁1個或者2個臺階，請寫出程式計算總共有多少種走法？

這個案例滿足斐波那契定律 1，1，2，3，5，8，13，21, 34, 55, 89, 144

varn1 = 1;

var n2 = 1;

var n3 = n1 + n2;

for (var i = 3; i <= n; i++) {

n3 = n1 + n2;

n1 = n2;//往後推一項

n2 = n3;//往後推一項

}

console.log(n3);

113 當前一段程式碼輸出結果是什麼？

var z = 10;

function foo(){

console.log(z);

}

(function(funArg){

var z = 20;

funArg();

})(foo);

答案：10

這個其實還是考察函式的作用域和閉包的知識，因為foo函式是在一個自執行匿名函式裡呼叫，在這裡面宣告的變數其實在函式foo體並不會訪問到，所以在去找爸爸，全域性宣告的z，即輸出 10

114 對Node的優點和缺點提出了自己的看法？

優點：

1. 因為Node是基於事件驅動和無阻塞的，所以非常適合處理併發請求，因此構建在Node上的代理伺服器相比其他技術實現（如Ruby）的伺服器表現要好得多。

2. 與Node代理伺服器互動的客戶端程式碼是由javascript語言編寫的，因此客戶端和伺服器端都用同一種語言編寫，這是非常美妙的事情。

缺點：

1. Node是一個相對新的開源專案，所以不太穩定，它總是一直在變。

2. 缺少足夠多的第三方庫支援。看起來，就像是Ruby/Rails當年的樣子（第三方庫現在已經很豐富了，所以這個缺點可以說不存在了）。

115 對前端介面工程師這個職位是怎麼樣理解的？它的前景會怎麼樣？

前端是最貼近使用者的程式設計師，比後端、資料庫、產品經理、運營、安全都近。

1. 實現介面互動

2. 提升使用者體驗

3. 有了Node.js，前端可以實現服務端的一些事情

前景：

1. 前端是最貼近使用者的程式設計師，前端的能力就是能讓產品從 90分進化到 100 分，甚至更好

2. 參與專案，快速高質量完成實現效果圖，精確到1px；

3. 與團隊成員，UI設計，產品經理的溝通；

4. 做好的頁面結構，頁面重構和使用者體驗；

5. 處理hack，相容、寫出優美的程式碼格式；

6. 針對伺服器的優化、擁抱最新前端技術。

116 平時如何管理你的專案？

1. 先期團隊必須確定好全域性樣式（globe.css），編碼模式(utf-8) 等

2. 編寫習慣必須一致（例如都是採用繼承式的寫法，單樣式都寫成一行）

3. 標註樣式編寫人，各模組都及時標註（標註關鍵樣式呼叫的地方）

4. 頁面進行標註（例如頁面模組開始和結束）

5. CSS 跟 HTML 分資料夾並行存放，命名都得統一（例如 style.css）

6. JS 分資料夾存放命名以該 JS 功能為準的英文翻譯

7. 圖片採用整合的images.png png8 格式檔案使用儘量整合在一起使用方便將來的管理

117 說說最近最流行的一些東西吧？常去的哪些網站？

最流行的一些東西：

1. Node.js

2. Mongodb

3. npm

4. MVVM

5. MEAN

6. three.js

7. React

常去的網站：

1. 牛客網

2. Github

3. CSDN

118 前端的安全問題？

1. XSS

2. sql注入

3. CSRF：是跨站請求偽造，很明顯根據剛剛的解釋，他的核心也就是請求偽造，通過偽造身份提交POST和GET請求來進行跨域的攻擊

完成CSRF需要兩個步驟：

1. 登陸受信任的網站A，在本地生成 COOKIE

2. 在不登出A的情況下，或者本地 COOKIE 沒有過期的情況下，訪問危險網站B。

119 javascript裡面的繼承怎麼實現，如何避免原型鏈上面的物件共享

用建構函式和原型鏈的混合模式去實現繼承，避免物件共享可以參考經典的extend()函式，很多前端框架都有封裝的，就是用一個空函式當做中間變數

120 Flash、Ajax各自的優缺點，在使用中如何取捨？

Flash：

1. Flash適合處理多媒體、向量圖形、訪問機器

2. 對CSS、處理文字上不足，不容易被搜尋

Ajax：

1. Ajax對CSS、文字支援很好，支援搜尋

2. 多媒體、向量圖形、機器訪問不足

共同點：

1. 與伺服器的無重新整理傳遞訊息

2. 可以檢測使用者離線和線上狀態

2. 操作DOM

121 什麼是 "use strict"; ? 使用它的好處和壞處分別是什麼？

ECMAscript 5新增了第二種執行模式："嚴格模式"（strictmode）。顧名思義，這種模式使得Javascript在更嚴格的條件下執行。

設立"嚴格模式"的目的，主要有以下幾個：

1. 消除Javascript語法的一些不合理、不嚴謹之處，減少一些怪異行為;

2. 消除程式碼執行的一些不安全之處，保證程式碼執行的安全；

3. 提高編譯器效率，增加執行速度；

4. 為未來新版本的Javascript做好鋪墊。

注：經過測試IE6,7,8,9 均不支援嚴格模式。

缺點：

122 哪些地方會出現css阻塞，哪些地方會出現js阻塞？

js 的阻塞特性：所有瀏覽器在下載 JS 的時候，會阻止一切其他活動，比如其他資源的下載，內容的呈現等等。直到 JS 下載、解析、執行完畢後才開始繼續並行下載其他資源並呈現內容。為了提高使用者體驗，新一代瀏覽器都支援並行下載 JS，但是 JS 下載仍然會阻塞其它資源的下載（例如.圖片，css檔案等）。

由於瀏覽器為了防止出現 JS 修改 DOM 樹，需要重新構建DOM 樹的情況，所以就會阻塞其他的下載和呈現。

嵌入 JS 會阻塞所有內容的呈現，而外部 JS 只會阻塞其後內容的顯示，2 種方式都會阻塞其後資源的下載。也就是說外部樣式不會阻塞外部指令碼的載入，但會阻塞外部指令碼的執行。

CSS 怎麼會阻塞載入了？CSS 本來是可以並行下載的，在什麼情況下會出現阻塞載入了(在測試觀察中，IE6 下 CSS 都是阻塞載入）

當 CSS 後面跟著嵌入的 JS 的時候，該 CSS 就會出現阻塞後面資源下載的情況。而當把嵌入 JS 放到 CSS 前面，就不會出現阻塞的情況了。

根本原因：因為瀏覽器會維持 html 中 css 和 js 的順序，樣式表必須在嵌入的 JS 執行前先載入、解析完。而嵌入的 JS 會阻塞後面的資源載入，所以就會出現上面 CSS 阻塞下載的情況。

嵌入JS應該放在什麼位置？

1. 放在底部，雖然放在底部照樣會阻塞所有呈現，但不會阻塞資源下載。

2. 如果嵌入JS放在head中，請把嵌入JS放在CSS頭部。

3. 使用defer（只支援IE）

4. 不要在嵌入的JS中呼叫執行時間較長的函式，如果一定要用，可以用 setTimeout 來呼叫

Javascript無阻塞載入具體方式：

1. 將指令碼放在底部。<link>還是放在head中，用以保證在js載入前，能載入出正常顯示的頁面。<script>標籤放在</body>前。

2. 阻塞指令碼：由於每個<script>標籤下載時阻塞頁面解析過程，所以限制頁面的<script>總數也可以改善效能。適用於內聯指令碼和外部指令碼。

3. 非阻塞指令碼：等頁面完成載入後，再載入js程式碼。也就是，在 window.onload 事件發出後開始下載程式碼。

4. defer屬性：支援IE4和fierfox3.5更高版本瀏覽器

5. 動態指令碼元素：文件物件模型（DOM）允許你使用js動態建立HTML的幾乎全部文件內容。程式碼如下：

var script=document.createElement("script");

script.type="text/javascript";

script.src="file.js";

document.getElementsByTagName("head")[0].appendChild(script);

</script>

此技術的重點在於：無論在何處啟動下載，檔案額下載和執行都不會阻塞其他頁面處理過程，即使在head裡（除了用於下載檔案的 http 連結）。

123 寫一個通用的事件偵聽器函式

// event(事件)工具集，來源：github.com/markyun
markyun.Event = {
    //頁面載入完成後
    readyEvent: function(fn) {
       if (fn==null) {
           fn=document;
       }
       var oldonload = window.onload;
       if (typeof window.onload != 'function') {
           window.onload = fn;
       } else {
           window.onload = function() {
               oldonload();
               fn();
           };
       }
    },
    //視能力分別使用dom0||dom2||IE方式 來繫結事件
    //引數： 操作的元素,事件名稱 ,事件處理程式
    addEvent: function(element, type, handler) {
       if (element.addEventListener) {
           //事件型別、需要執行的函式、是否捕捉
           element.addEventListener(type,handler, false);
       } else if (element.attachEvent) {
           element.attachEvent('on' + type, function(){
               handler.call(element);
           });
       } else {
           element['on' + type] = handler;
       }
    },
    //移除事件
    removeEvent: function(element, type, handler) {
       if (element.removeEnentListener) {
           element.removeEnentListener(type,handler, false);
       } else if (element.datachEvent) {
           element.detachEvent('on' + type, handler);
       } else {
           element['on' + type] = null;
       }
    }, 
    //阻止事件 (主要是事件冒泡，因為IE不支援事件捕獲)
    stopPropagation: function(ev) {
       if (ev.stopPropagation) {
           ev.stopPropagation();
       } else {
           ev.cancelBubble = true;
       }
    },
    //取消事件的預設行為
    preventDefault: function(event) {
       if (event.preventDefault) {
           event.preventDefault();
       } else {
           event.returnValue = false;
       }
    },
    //獲取事件目標
    getTarget: function(event) {
       return event.target || event.srcElement;
    },
    //獲取event物件的引用，取到事件的所有資訊，確保隨時能使用event；
    getEvent: function(e) {
       var ev = e || window.event;
       if (!ev) {
           var c = this.getEvent.caller;
           while (c) {
               ev = c.arguments[0];
               if (ev && Event ==ev.constructor) {
                   break;
               }
               c = c.caller;
           }
       }
       return ev;
    }
};

124 Node.js 的適用場景

1. 高併發

2. 聊天

3. 實時訊息推送

125 JavaScript 原型，原型鏈 ? 有什麼特點？

1. 原型物件也是普通的物件，是物件一個自帶隱式的__proto__ 屬性，原型也有可能有自己的原型，如果一個原型物件的原型不為 null 的話，我們就稱之為原型鏈

2. 原型鏈是由一些用來繼承和共享屬性的物件組成的（有限的）物件鏈

126 怎麼重構頁面？

1. 編寫 CSS

2. 讓頁面結構更合理化，提升使用者體驗

3. 實現良好的頁面效果和提升效能

127 WEB應用從伺服器主動推送Data到客戶端有那些方式？

1. html5 websocket

2. WebSocket 通過 Flash

3. XHR長時間連線

4. XHR MultipartStreaming

5. 不可見的Iframe

6.<script>標籤的長時間連線(可跨域)

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

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

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

3.ev.stopPropagation();

注意舊ie的方法：ev.cancelBubble = true;

129 js物件的深度克隆程式碼實現

function clone(Obj){
    varbuf;   
    if(Obj instanceof Array) {
       buf = [];  // 建立一個空的陣列
       var i = Obj.length;
       while (i--) {
           buf[i] = clone(Obj[i]);
       }
       return buf;
    } elseif (Obj instanceof Object){
       buf = {};  // 建立一個空物件
       for (var k in Obj) {  // 為這個物件新增新的屬性
           buf[k] = clone(Obj[k]);
       }
       return buf;
    }else{
       return Obj;
    }
}

130 對網站重構的理解

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

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

1. 表格(table)佈局改為 DIV + CSS
2. 使網站前端相容於現代瀏覽器(針對於不合規範的CSS、如對 IE6 有效的)
3. 對於移動平臺的優化
4. 針對於 SEO 進行優化
5. 深層次的網站重構應該考慮的方面
6. 減少程式碼間的耦合
7. 讓程式碼保持彈性
8. 嚴格按規範編寫程式碼
9. 設計可擴充套件的API
10. 代替舊有的框架、語言(如VB)
11. 增強使用者體驗
12. 通常來說對於速度的優化也包含在重構中
13. 壓縮JS、CSS、image等前端資源(通常是由伺服器來解決)
14. 程式的效能優化(如資料讀寫)
15. 採用CDN來加速資源載入
16. 對於JS DOM的優化
17. HTTP伺服器的檔案快取

131 如何獲取UA

<script> 
function whatBrowser(){  
    document.Browser.Name.value=navigator.appName; 
    document.Browser.Version.value=navigator.appVersion; 
    document.Browser.Code.value=navigator.appCodeName; 
    document.Browser.Agent.value=navigator.userAgent; 
}
</script>

....更新當中

轉載請註明來源

Web前端經典面試試題及答案（參考連結）
2018-06-06
Web前端面試
那些web前端經典面試題大全及答案
2018-01-16
Web前端面試題
前端面試經典題目彙總（持續更新中）
2019-02-16
前端面試
18年最新經典web前端面試題
2018-09-26
Web前端面試題
前端經典面試題（有答案）
2023-03-06
前端面試題
SQL經典面試題及答案
2013-08-02
SQL面試題
前端面試問題（持續更新）
2017-09-22
前端面試
c/c++經典面試試題及標準答案
2014-05-27
C++面試
jQuery經典面試題及答案精選
2014-09-04
jQuery面試題
前端面試問題二（持續更新）
2019-02-28
前端面試
sql 經典面試題及答案(選課表)
2018-08-09
SQL面試題
經典Java面試題彙總及答案解析
2020-10-22
Java面試題
【前端面試】Vue面試題總結(持續更新中)
2022-07-17
前端Vue面試題
Web前端面試寶典（最新）
2018-03-04
Web前端面試
AI面試題（持續更新）
2020-11-09
AI面試題
Hbase面試題(持續更新)
2020-11-28
面試題
100+經典Java面試題及答案解析
2014-08-06
Java面試題
前端面試題總結——HTML(持續更新中)
2019-06-18
前端面試題HTML
2019“寒冬”前端面試必備（持續更新...）
2019-05-08
前端面試
Web前端面試題目及答案彙總
2016-03-15
Web前端面試題
前端經典面試題
2024-08-21
前端面試題
前端面試題總結——綜合問題(持續更新中)
2019-02-16
前端面試題
2018Web前端面試試題總結及答案
2018-07-01
Web前端面試
面試心得與總結-——答案整理_4 持續更新
2016-08-22
面試
Runtime經典面試題(附答案)
2019-04-21
面試題
Python經典面試題（附答案）！
2021-04-07
Python面試題
PHP經典面試題,有答案哦
2021-05-25
PHP面試題
2019 Python最新面試題及答案16道題
2021-09-11
Python面試題
2019 Vue 面試題彙總（持續更新中...）
2019-05-01
Vue面試題
2019年最新Java面試題及答案整理（上）
2019-01-29
Java面試題
前端面試的一些題目(持續更新中)
2019-03-20
前端面試
前端面試題總結——Html5（持續更新中）
2019-06-18
前端面試題HTML
Oracle面試試題及答案
2007-11-21
Oracle面試
前端面試題2019持續整理彙總
2018-02-26
前端面試題
Spring面試題（持續更新中）
2020-10-18
Spring面試題
2019最新前端面試寶典
2019-03-30
前端面試
京東前端二面高頻手寫面試題（持續更新中）
2023-03-06
前端面試題
PHP面試題總結-持續更新中
2021-07-20
PHP面試題

2019最新Web前端經典面試試題及答案，持續更新

相關文章