前端面試題整理

OWHFra 7年前發布 | 13K 次閱讀前端技術 JavaScript

1、前端需要注意哪些 SEO
2、 <img> 的 title 和 alt 有什么區別
3、 HTTP 的幾種請求方法用途
4、從瀏覽器地址欄輸入 url 到顯示頁面的步驟
5、如何進行網站性能優化
6、HTTP狀態碼及其含義
7、語義化的理解
8、介紹一下你對瀏覽器內核的理解
9、 html5 有哪些新特性、移除了那些元素？
10、 HTML5 的離線儲存怎么使用，工作原理能不能解釋一下？
11、瀏覽器是怎么對 HTML5 的離線儲存資源進行管理和加載的呢
12、請描述一下 cookies ， sessionStorage 和 localStorage 的區別
13、 iframe 有那些缺點？
14、 WEB 標準以及W3C標準是什么?
15、 xhtml 和 html 有什么區別?
16、 Doctype 作用? 嚴格模式與混雜模式如何區分？它們有何意義?
17、行內元素有哪些？塊級元素有哪些？空( void )元素有那些？行內元素和塊級元素有什么區別？
18、 HTML 全局屬性( global attribute )有哪些

$CSS部分

1、 css sprite 是什么,有什么優缺點
2、 display: none; 與 visibility: hidden ;的區別
3、 link 與 @import 的區別
4、什么是 FOUC? 如何避免
5、如何創建塊級格式化上下文( block formatting context ), BFC 有什么用
7、清除浮動的幾種方式，各自的優缺點
8、為什么要初始化 CSS 樣式?
9、 css3 有哪些新特性
10、 display 有哪些值？說明他們的作用
11、介紹一下標準的CSS的盒子模型？低版本IE的盒子模型有什么不同的？
12、 CSS 優先級算法如何計算？
13、對 BFC 規范的理解？
14、談談浮動和清除浮動
15、 position 的值， relative 和absolute`定位原點是
16、 display:inline-block 什么時候不會顯示間隙？(攜程)
17、 PNG,GIF,JPG 的區別及如何選

$JavaScript

1、閉包
2、說說你對作用域鏈的理解
3、 JavaScript 原型，原型鏈 ? 有什么特點？
4、請解釋什么是事件代理
5、 Javascript 如何實現繼承？
6、談談 This 對象的理解
7、事件模型
8、 new 操作符具體干了什么呢?
9、 Ajax 原理
11、模塊化開發怎么做？
12、異步加載 JS 的方式有哪些？
13、那些操作會造成內存泄漏？
14、 XML 和 JSON 的區別？
15、談談你對 webpack 的看法
17、常見 web 安全及防護原理
18、用過哪些設計模式？
19、為什么要有同源限制？
20、 offsetWidth/offsetHeight , clientWidth/clientHeight 與 scrollWidth/scrollHeight 的區別
21、 javascript 有哪些方法定義對象
22、常見兼容性問題？
22、說說你對 promise 的了解
23、你覺得 jQuery 源碼有哪些寫的好的地方
25、 Node 的應用場景
26、談談你對 AMD 、 CMD 的理解
27、那些操作會造成內存泄漏？
28、 web 開發中會話跟蹤的方法有哪些
29、介紹 js 的基本數據類型
30、介紹 js 有哪些內置對象？
31、說幾條寫 JavaScript 的基本規范？
32、 JavaScript 有幾種類型的值？，你能畫一下他們的內存圖嗎？
33、 javascript 創建對象的幾種方式？
34、 eval 是做什么的？
35、 null，undefined 的區別？
36、 [“1”, “2”, “3”].map(parseInt) 答案是多少？
37、 javascript 代碼中的 ”use strict” ;是什么意思 ? 使用它區別是什么？
38、 JSON 的了解？
39、js延遲加載的方式有哪些？
40、同步和異步的區別?
41、漸進增強和優雅降級
42、 defer 和 async
43、說說嚴格模式的限制
44、 attribute 和 property 的區別是什么？
45、談談你對 ES6 的理解

$編程題

1、寫一個通用的事件偵聽器函數
2、如何判斷一個對象是否為數組
3、冒泡排序
4、快速排序
5、編寫一個方法求一個字符串的字節長度

$其他

1、談談你對重構的理解
2、什么樣的前端代碼是好的
3、對前端工程師這個職位是怎么樣理解的？它的前景會怎么樣？
4、你覺得前端工程的價值體現在哪
5、平時如何管理你的項目？

人事面

面試完你還有什么問題要問的嗎
你有什么愛好?
你最大的優點和缺點是什么?
你為什么會選擇這個行業，職位?
你覺得你適合從事這個崗位嗎?
你有什么職業規劃?
你對工資有什么要求?
如何看待前端開發？
未來三到五年的規劃是怎樣的？

一些問題

你的項目中技術難點是什么？
遇到了什么問題？
你是怎么解決的？
最近在看哪些前端方面的書？
平時是如何學習前端開發的？
為什么大型應用需要從多個域名請求資源？
什么樣的頁面具有良好的用戶體驗？
是否了解 Web 注入攻擊，說下原理，最- 常見的兩種攻擊（ XSS 和 CSRF ）了解到什么程度

$HTML， HTTP，web綜合問題

1、前端需要注意哪些SEO

合理的 title 、 description 、 keywords ：搜索對著三項的權重逐個減小，title值強調重點即可，重要關鍵詞出現不要超過2次，而且要靠前，不同頁面 title 要有所不同； description 把頁面內容高度概括，長度合適，不可過分堆砌關鍵詞，不同頁面 description 有所不同； keywords 列舉出重要關鍵詞即可
語義化的 HTML 代碼，符合W3C規范：語義化代碼讓搜索引擎容易理解網頁
重要內容 HTML 代碼放在最前：搜索引擎抓取 HTML 順序是從上到下，有的搜索引擎對抓取長度有限制，保證重要內容一定會被抓取
重要內容不要用 js 輸出：爬蟲不會執行js獲取內容
少用 iframe ：搜索引擎不會抓取 iframe 中的內容
非裝飾性圖片必須加 alt
提高網站速度：網站速度是搜索引擎排序的一個重要指標

2、 <img> 的 title 和 alt 有什么區別

通常當鼠標滑動到元素上的時候顯示
alt 是 <img> 的特有屬性，是圖片內容的等價描述，用于圖片無法加載時顯示、讀屏器閱讀圖片。可提圖片高可訪問性，除了純裝飾圖片外都必須設置有意義的值，搜索引擎會重點分析。

3、HTTP的幾種請求方法用途

1、 GET 方法
- 發送一個請求來取得服務器上的某一資源
</li>

2、 POST 方法

向 URL 指定的資源提交數據或附加新的數據

3、 PUT 方法

跟 POST 方法很像，也是想服務器提交數據。但是，它們之間有不同。PUT指定了資源在服務器上的位置，而 POST 沒有

4、 HEAD 方法

只請求頁面的首部

5、 DELETE 方法

刪除服務器上的某資源

6、 OPTIONS 方法

它用于獲取當前 URL 所支持的方法。如果請求成功，會有一個 Allow 的頭包含類似 “GET,POST” 這樣的信息

7、 TRACE 方法

TRACE 方法被用于激發一個遠程的，應用層的請求消息回路

8、 CONNECT 方法

把請求連接轉換到透明的 TCP/IP 通道

4、從瀏覽器地址欄輸入url到顯示頁面的步驟

瀏覽器根據請求的 URL 交給 DNS 域名解析，找到真實 IP ，向服務器發起請求；
服務器交給后臺處理完成后返回數據，瀏覽器接收文件（ HTML、JS、CSS 、圖象等）；
瀏覽器對加載到的資源（ HTML、JS、CSS 等）進行語法解析，建立相應的內部數據結構（如 HTML 的 DOM ）；
載入解析到的資源文件，渲染頁面，完成。

5、如何進行網站性能優化

content 方面
1. 減少 HTTP 請求：合并文件、 CSS 精靈、 inline Image
2. 減少 DNS 查詢： DNS 緩存、將資源分布到恰當數量的主機名
3. 減少 DOM 元素數量
Server 方面
1. 使用 CDN
2. 配置 ETag
3. 對組件使用 Gzip 壓縮
Cookie 方面
1. 減小 cookie 大小
css 方面
1. 將樣式表放到頁面頂部
2. 不使用 CSS 表達式
3. 使用 <link> 不使用 @import
Javascript 方面
1. 將腳本放到頁面底部
2. 將 javascript 和 css 從外部引入
3. 壓縮 javascript 和 css
4. 刪除不需要的腳本
5. 減少 DOM 訪問
圖片方面
1. 優化圖片：根據實際顏色需要選擇色深、壓縮
2. 優化 css 精靈
3. 不要在 HTML 中拉伸圖片

6、HTTP狀態碼及其含義

1XX ：信息狀態碼
- 100 Continue 繼續，一般在發送 post 請求時，已發送了 http header 之后服務端將返回此信息，表示確認，之后發送具體參數信息
</li>

2XX ：成功狀態碼

200 OK 正常返回信息
201 Created 請求成功并且服務器創建了新的資源
202 Accepted 服務器已接受請求，但尚未處理

3XX ：重定向

301 Moved Permanently 請求的網頁已永久移動到新位置。
302 Found 臨時性重定向。
303 See Other 臨時性重定向，且總是使用 GET 請求新的 URI 。
304 Not Modified 自從上次請求后，請求的網頁未修改過。

4XX ：客戶端錯誤

400 Bad Request 服務器無法理解請求的格式，客戶端不應當嘗試再次使用相同的內容發起請求。
401 Unauthorized 請求未授權。
403 Forbidden 禁止訪問。
404 Not Found 找不到如何與 URI 相匹配的資源。

5XX: 服務器錯誤

500 Internal Server Error 最常見的服務器端錯誤。
503 Service Unavailable 服務器端暫時無法處理請求（可能是過載或維護）。

7、語義化的理解

用正確的標簽做正確的事情！
html 語義化就是讓頁面的內容結構化，便于對瀏覽器、搜索引擎解析；
在沒有樣式 CSS 情況下也以一種文檔格式顯示，并且是容易閱讀的。
搜索引擎的爬蟲依賴于標記來確定上下文和各個關鍵字的權重，利于 SEO 。
使閱讀源代碼的人對網站更容易將網站分塊，便于閱讀維護理解

8、介紹一下你對瀏覽器內核的理解？

主要分成兩部分：渲染引擎( layout engineer 或 Rendering Engine )和 JS 引擎
渲染引擎：負責取得網頁的內容（ HTML 、 XML 、圖像等等）、整理訊息（例如加入 CSS 等），以及計算網頁的顯示方式，然后會輸出至顯示器或打印機。瀏覽器的內核的不同對于網頁的語法解釋會有不同，所以渲染的效果也不相同。所有網頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網絡內容的應用程序都需要內核
JS 引擎則：解析和執行 javascript 來實現網頁的動態效果
最開始渲染引擎和 JS 引擎并沒有區分的很明確，后來JS引擎越來越獨立，內核就傾向于只指渲染引擎

9、html5有哪些新特性、移除了那些元素？

HTML5 現在已經不是 SGML 的子集，主要是關于圖像，位置，存儲，多任務等功能的增加
- 繪畫 canvas
- 用于媒介回放的 video 和 audio 元素
- 本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉后數據不丟失
- sessionStorage 的數據在瀏覽器關閉后自動刪除
- 語意化更好的內容元素，比如 article 、 footer 、 header 、 nav 、 section
- 表單控件， calendar 、 date 、 time 、 email 、 url 、 search
- 新的技術 webworker , websocket , Geolocation
</li>

移除的元素：

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

支持 HTML5 新標簽：

IE8/IE7/IE6 支持通過 document.createElement 方法產生的標簽
可以利用這一特性讓這些瀏覽器支持HTML5 新標簽
瀏覽器支持新標簽后，還需要添加標簽默認的樣式
當然也可以直接使用成熟的框架、比如 html5shim

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

在用戶沒有與因特網連接時，可以正常訪問站點或應用，在用戶與因特網連接時，更新用戶機器上的緩存文件
原理： HTML5 的離線存儲是基于一個新建的 .appcache 文件的緩存機制(不是存儲技術)，通過這個文件上的解析清單離線存儲資源，這些資源就會像 cookie 一樣被存儲了下來。之后當網絡在處于離線狀態下時，瀏覽器會通過被離線存儲的數據進行頁面展示

如何使用：

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

</li> </ul>

CACHE MANIFEST
v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html
</pre> 
  
11、瀏覽器是怎么對 HTML5 的離線儲存資源進行管理和加載的呢 
   
    在線的情況下，瀏覽器發現 html 頭部有 manifest 屬性，它會請求 manifest 文件，如果是第一次訪問 app ，那么瀏覽器就會根據manifest文件的內容下載相應的資源并且進行離線存儲。如果已經訪問過 app 并且資源已經離線存儲了，那么瀏覽器就會使用離線的資源加載頁面，然后瀏覽器會對比新的 manifest 文件與舊的 manifes t文件，如果文件沒有發生改變，就不做任何操作，如果文件改變了，那么就會重新下載文件中的資源并進行離線存儲。
  
    離線的情況下，瀏覽器就直接使用離線存儲的資源。
  
   
  12、請描述一下 cookies ， sessionStorage 和 localStorage 的區別？ 
   
   cookie 是網站為了標示用戶身份而儲存在用戶本地終端（Client Side）上的數據（通常經過加密） 
   cookie數據始終在同源的http請求中攜帶（即使不需要），記會在瀏覽器和服務器間來回傳遞 
   sessionStorage 和 localStorage 不會自動把數據發給服務器，僅在本地保存 
    存儲大小： 
     
     cookie 數據大小不能超過4k 
     sessionStorage 和 localStorage 雖然也有存儲大小的限制，但比 cookie 大得多，可以達到5M或更大 
     </li> 
   
 有期時間： 
     
     localStorage 存儲持久數據，瀏覽器關閉后數據不丟失除非主動刪除數據 
     sessionStorage 數據在當前瀏覽器窗口關閉后自動刪除 
     cookie 設置的 cookie 過期時間之前一直有效，即使窗口或瀏覽器關閉 
    </ul> </li> 
  </ul> 
  13、iframe有那些缺點？ 
   
   iframe 會阻塞主頁面的 Onload 事件 
   搜索引擎的檢索程序無法解讀這種頁面，不利于 SEO 
   iframe 和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的并行加載 
   使用 iframe 之前需要考慮這兩個缺點。如果需要使用 iframe ，最好是通過 javascript 動態給 iframe 添加 src 屬性值，這樣可以繞開以上兩個問題 
   
  14、WEB標準以及W3C標準是什么? 
   
   標簽閉合、標簽小寫、不亂嵌套、使用外鏈 css 和 js 、結構行為表現的分離 
   
  15、xhtml和html有什么區別? 
   
    一個是功能上的差別 
     
     主要是 XHTML 可兼容各大瀏覽器、手機以及 PDA ，并且瀏覽器也能快速正確地編譯網頁 
     </li> 
   
 另外是書寫習慣的差別 
     
     XHTML 元素必須被正確地嵌套，閉合，區分大小寫，文檔必須擁有根元素 
    </ul> </li> 
  </ul> 
  16、Doctype作用? 嚴格模式與混雜模式如何區分？它們有何意義? 
   
   頁面被加載的時， link 會同時被加載，而 @imort 頁面被加載的時， link 會同時被加載，而 @import 引用的 CSS 會等到頁面被加載完再加載
 import 只在 IE5 以上才能識別，而 link 是 XHTML 標簽，無兼容問題
 link 方式的樣式的權重 高于 @import 的權重 
   <!DOCTYPE> 聲明位于文檔中的最前面，處于 <html> 標簽之前。告知瀏覽器的解析器， 用什么文檔類型 規范來解析這個文檔 
   嚴格模式的排版和 JS 運作模式是 以該瀏覽器支持的最高標準運行 
   在混雜模式中，頁面以寬松的向后兼容的方式顯示。模擬老式瀏覽器的行為以防止站點無法工作。 DOCTYPE 不存在或格式不正確會導致文檔以混雜模式呈現 
   
  17、行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？行內元素和塊級元素有什么區別？ 
   
   行內元素有： a b span img input select strong 
   塊級元素有： div ul ol li dl dt dd h1 h2 h3 h4…p 
   空元素： <br> <hr> <img> <input> <link> <meta> 
   行內元素不可以設置寬高，不獨占一行 
   塊級元素可以設置寬高，獨占一行 
   
  18、HTML全局屬性(global attribute)有哪些 
   
   class :為元素設置類標識 
   data-* : 為元素增加自定義屬性 
   draggable : 設置元素是否可拖拽 
   id : 元素 id ，文檔內唯一 
   lang : 元素內容的的語言 
   style : 行內 css 樣式 
   title : 元素相關的建議信息 
   
  $CSS部分 
  1、css sprite是什么,有什么優缺點 
   
    概念：將多個小圖片拼接到一個圖片中。通過 background-position 和元素尺寸調節需要顯示的背景圖案。
  
    優點： 
     
     減少 HTTP 請求數，極大地提高頁面加載速度 
     增加圖片信息重復度，提高壓縮比，減少圖片大小 
     更換風格方便，只需在一張或幾張圖片上修改顏色或樣式即可實現 
     </li> 
   
 缺點： 
     
     圖片合并麻煩 
     維護麻煩，修改一個圖片可能需要從新布局整個圖片，樣式 
    </ul> </li> 
  </ul> 
  2、 display: none; 與 visibility: hidden; 的區別 
   
    聯系：它們都能讓元素不可見
  
    區別： 
     
     display:none ;會讓元素完全從渲染樹中消失，渲染的時候不占據任何空間； visibility: hidden ;不會讓元素從渲染樹消失，渲染師元素繼續占據空間，只是內容不可見 
     display: none ;是非繼承屬性，子孫節點消失由于元素從渲染樹消失造成，通過修改子孫節點屬性無法顯示 ；visibility: hidden; 是繼承屬性，子孫節點消失由于繼承了 hidden ，通過設置 visibility: visible; 可以讓子孫節點顯式 
     修改常規流中元素的 display 通常會造成文檔重排。修改 visibility 屬性只會造成本元素的重繪。 
     讀屏器不會讀取 display: none ;元素內容；會讀取 visibility: hidden; 元素內容 
     </li> 
  </ul> 
  3、 link 與 @import 的區別 
   
   link 是 HTML 方式， @import 是CSS方式 
   link 最大限度支持并行下載， @import 過多嵌套導致串行下載，出現 FOUC 
   link 可以通過 rel="alternate stylesheet" 指定候選樣式 
   瀏覽器對 link 支持早于 @import ，可以使用 @import 對老瀏覽器隱藏樣式 
   @import 必須在樣式規則之前，可以在css文件中引用其他文件 
   總體來說： link 優于 @import 
   
  4、什么是FOUC?如何避免 
   
   Flash Of Unstyled Content ：用戶定義樣式表加載之前瀏覽器使用默認樣式顯示文檔，用戶樣式加載渲染之后再從新顯示文檔，造成頁面閃爍。 
   解決方法 ：把樣式表放到文檔的 head 
   
  5、如何創建塊級格式化上下文(block formatting context),BFC有什么用 
   
    創建規則： 
     
     根元素 
     浮動元素（ float 不是 none ） 
     絕對定位元素（ position 取值為 absolute 或 fixed ） 
     display 取值為 inline-block , table-cell , table-caption , flex , inline-flex 之一的元素 
     overflow 不是 visible 的元素 
     </li> 
   
 作用： 
     
     可以包含浮動元素 
     不被浮動元素覆蓋 
     阻止父子元素的 margin 折疊 
    </ul> </li> 
  </ul> 
  6、display,float,position的關系 
   
   如果 display 為 none ，那么 position 和 float 都不起作用，這種情況下元素不產生框 
   否則，如果 position 值為 absolute 或者 fixed ，框就是絕對定位的， float 的計算值為 none ， display 根據下面的表格進行調整。 
   否則，如果 float 不是 none ，框是浮動的， display 根據下表進行調整 
   否則，如果元素是根元素， display 根據下表進行調整 
   其他情況下 display 的值為指定值 
   總結起來：  絕對定位、浮動、根元素都需要調整 display  
   
  7、清除浮動的幾種方式，各自的優缺點 
   
   使用空標簽清除浮動 clear:both （缺點，增加無意義的標簽） 
   使用 overflow:auto （使用 zoom:1 用于兼容 IE ，缺點：內部寬高超過父級 div 時，會出現滾動條） 
   用 afert 偽元素清除浮動( IE8 以上和非 IE 瀏覽器才支持，目前：大型網站都有使用 
   
  8、為什么要初始化CSS樣式? 
   
   因為瀏覽器的兼容問題，不同瀏覽器對有些標簽的默認值是不同的，如果沒對 CSS 初始化往往會出現瀏覽器之間的頁面顯示差異。 
   當然，初始化樣式會對 SEO 有一定的影響，但魚和熊掌不可兼得，但力求影響最小的情況下初始化 
   
  9、css3有哪些新特性 
   
   新增各種 css 選擇器 
   圓角 border-radius 
   多列布局 
   陰影和反射 
   文字特效 text-shadow 
   線性漸變 
   旋轉 transform 
   
  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> 元素。 
   :after 在元素之前添加內容,也可以用來做清除浮動。 
   :before 在元素之后添加內容 
   :enabled 
   :disabled 控制表單控件的禁用狀態。 
   :checked 單選框或復選框被選中 
   
  10、display有哪些值？說明他們的作用 
   
   block 象塊類型元素一樣顯示。 
   none 缺省值。象行內元素類型一樣顯示。 
   inline-block 象行內元素一樣顯示，但其內容象塊類型元素一樣顯示。 
   list-item 象塊類型元素一樣顯示，并添加樣式列表標記。 
   table 此元素會作為塊級表格來顯示 
   inherit 規定應該從父元素繼承 display 屬性的值 
   
  11、介紹一下標準的CSS的盒子模型？低版本IE的盒子模型有什么不同的？ 
   
   有兩種， IE 盒子模型、 W3C 盒子模型； 
   盒模型： 內容(content)、填充( padding )、邊界( margin )、 邊框( border )； 
   區 別： IE 的c ontent 部分把 border 和 padding 計算了進去; 
   
  12、CSS優先級算法如何計算？ 
   
   優先級就近原則，同權重情況下樣式定義最近者為準 
   載入樣式以最后載入的定位為準 
   優先級為: !important > id > class > tag important 比 內聯優先級高 
   
  13、對BFC規范的理解？ 
   
   它決定了元素如何對其內容進行定位,以及與其他元素的關系和相互作用 
   
  14、談談浮動和清除浮動 
   
   浮動的框可以向左或向右移動，直到他的外邊緣碰到包含框或另一個浮動框的邊框為止。由于浮動框不在文檔的普通流中，所以文檔的普通流的塊框表現得就像浮動框不存在一樣。浮動的塊框會漂浮在文檔普通流的塊框上 
   
  15、position的值， relative和absolute定位原點是 
   
   absolute ：生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位 
   fixed ：生成絕對定位的元素，相對于瀏覽器窗口進行定位 
   relative ：生成相對定位的元素，相對于其正常位置進行定位 
   static 默認值。沒有定位，元素出現在正常的流中 
   inherit 規定從父元素繼承 position 屬性的值 
   
  16、display:inline-block 什么時候不會顯示間隙？(攜程) 
   
   移除空格 
   使用 margin 負值 
   使用 font-size:0 
   letter-spacing 
   word-spacing 
   
  17、PNG,GIF,JPG的區別及如何選 
   
    GIF 
     
     8 位像素， 256 色 
     無損壓縮 
     支持簡單動畫 
     支持 boolean 透明 
     適合簡單動畫 
     </li> 
   
 JPEG 
     
     顏色限于 256 
     有損壓縮 
     可控制壓縮質量 
     不支持透明 
     適合照片 
    </ul> </li> 
   PNG 
     
     有 PNG8 和 truecolor PNG 
     PNG8 類似 GIF 顏色上限為 256 ，文件小，支持 alpha 透明度，無動畫 
     適合圖標、背景、按鈕 
    </ul> </li> 
  </ul> 
  $JavaScript 
  1、閉包 
   
    閉包是指有權訪問另一個函數作用域中變量的函數，創建閉包的最常見的方式就是在一個函數內創建另一個函數，通過另一個函數訪問這個函數的局部變量,利用閉包可以突破作用鏈域
  
    閉包的特性： 
     
     函數內再嵌套函數 
     內部函數可以引用外層的參數和變量 
     參數和變量不會被垃圾回收機制回收 
     </li> 
  </ul> 
  說說你對閉包的理解 
   
   使用閉包主要是為了設計私有的方法和變量。閉包的優點是可以避免全局變量的污染，缺點是閉包會常駐內存，會增大內存使用量，使用不當很容易造成內存泄露。在js中，函數即閉包，只有函數才會產生作用域的概念 
   
  2、說說你對作用域鏈的理解 
   
   作用域鏈的作用是保證執行環境里有權訪問的變量和函數是有序的，作用域鏈的變量只能向上訪問，變量訪問到 window 對象即被終止，作用域鏈向下訪問變量是不被允許的 
   簡單的說，作用域就是變量與函數的可訪問范圍，即作用域控制著變量與函數的可見性和生命周期 
   
  3、JavaScript原型，原型鏈 ? 有什么特點？ 
   
   每個對象都會在其內部初始化一個屬性，就是 prototype (原型)，當我們訪問一個對象的屬性時 
   如果這個對象內部不存在這個屬性，那么他就會去 prototype 里找這個屬性，這 個prototype 又會有自己的 prototype ，于是就這樣一直找下去，也就是我們平時所說的原型鏈的概念 
   關系： instance.constructor.prototype = instance.__proto__ 
    特點： 
     
     JavaScript 對象是通過引用來傳遞的，我們創建的每個新對象實體中并沒有一份屬于自己的原型副本。當我們修改原型時，與之相關的對象也會繼承這一改變 
     </li> 
   
 當我們需要一個屬性的時， Javascript 引擎會先看當前對象中是否有這個屬性， 如果沒有的
  
   就會查找他的 Prototype 對象是否有這個屬性，如此遞推下去，一直檢索到 Object 內建對象 
  </ul> 
  4、請解釋什么是事件代理 
   
   事件代理（ Event Delegation ），又稱之為事件委托。是 JavaScript 中常用綁定事件的常用技巧。顧名思義，“事件代理”即是把原本需要綁定的事件委托給父元素，讓父元素擔當事件監聽的職務。事件代理的原理是DOM元素的事件冒泡。使用事件代理的好處是可以提高性能 
   可以大量節省內存占用，減少事件注冊，比如在 table 上代理所有 td 的 click 事件就非常棒 
   可以實現當新增子對象時無需再次對其綁定 
   
  5、Javascript如何實現繼承？ 
   
   構造繼承 
   原型繼承 
   實例繼承 
    拷貝繼承
  
    原型 prototype 機制或 apply 和 call 方法去實現較簡單，建議使用構造函數與原型混合方式
  
   
  functionParent(){
       this.name = 'wang';
   }
functionChild(){
       this.age = 28;
   }
   Child.prototype = new Parent();//繼承了Parent，通過原型
var demo = new Child();
   alert(demo.age);
   alert(demo.name);//得到被繼承的屬性
 }
</pre> 
  
6、談談This對象的理解 
   
   this 總是指向函數的直接調用者（而非間接調用者） 
   如果有 new 關鍵字， this 指向 new 出來的那個對象 
   在事件中， this 指向觸發這個事件的對象，特殊的是， IE 中的 attachEvent 中的 this 總是指向全局對象 Window 
   
  7、事件模型 
   
   冒泡型事件：當你使用事件冒泡時，子級元素先觸發，父級元素后觸發 
   捕獲型事件：當你使用事件捕獲時，父級元素先觸發，子級元素后觸發 
   DOM 事件流：同時支持兩種事件模型：捕獲型事件和冒泡型事件 
   阻止冒泡：在 W3c 中，使用 stopPropagation（） 方法；在IE下設置 cancelBubble = true 
   阻止捕獲：阻止事件的默認行為，例如 click - <a> 后的跳轉。在 W3c 中，使用 preventDefault（） 方法，在 IE 下設置 window.event.returnValue = false 
   
  8、new操作符具體干了什么呢? 
   
   創建一個空對象，并且 this 變量引用該對象，同時還繼承了該函數的原型 
   屬性和方法被加入到 this 引用的對象中 
   新創建的對象由 this 所引用，并且最后隱式的返回 this 
   
  9、Ajax原理 
   
   Ajax 的原理簡單來說是在用戶和服務器之間加了—個中間層( AJAX 引擎)，通過 XmlHttpRequest 對象來向服務器發異步請求，從服務器獲得數據，然后用 javascrip t來操作 DOM 而更新頁面。使用戶操作與服務器響應異步化。這其中最關鍵的一步就是從服務器獲得請求數據 
   Ajax 的過程只涉及 JavaScript 、 XMLHttpRequest 和 DOM 。 XMLHttpRequest 是 aja x的核心機制 
   
  // 1. 創建連接
   var xhr = null;
   xhr = new XMLHttpRequest()
   // 2. 連接服務器
   xhr.open('get', url, true)
   // 3. 發送請求
   xhr.send(null);
   // 4. 接受請求
   xhr.onreadystatechange = function(){
       if(xhr.readyState == 4){
           if(xhr.status == 200){
               success(xhr.responseText);
           } else { // fail
               fail && fail(xhr.status);
           }
       }
   }
 
  10、如何解決跨域問題? 
   
   jsonp 、 iframe 、 window.name 、 window.postMessage 、服務器上設置代理頁面 
   
  11、模塊化開發怎么做？ 
   
   立即執行函數,不暴露私有成員 
   
  var module1 = (function(){
                var _count = 0;
                var m1 = function(){
                        //...
                };
                var m2 = function(){
                        //...
                };
                return {
                        m1 : m1,
                        m2 : m2
                };
        })();
 
  12、異步加載JS的方式有哪些？ 
   
   defer，只支持 IE 
   async ： 
   創建 script ，插入到 DOM 中，加載完畢后 callBack 
   
  13、那些操作會造成內存泄漏？ 
   
   內存泄漏指任何對象在您不再擁有或需要它之后仍然存在 
   setTimeout 的第一個參數使用字符串而非函數的話，會引發內存泄漏 
   閉包使用不當 
   
  14、XML和JSON的區別？ 
   
    數據體積方面 
     
     JSON 相對 于XML 來講，數據的體積小，傳遞的速度更快些。 
     </li> 
   
 數據交互方面 
     
     JSON 與 JavaScript 的交互更加方便，更容易解析處理，更好的數據交互 
    </ul> </li> 
    數據描述方面 
     
     JSON 對數據的描述性比 XML 較差 
    </ul> </li> 
    傳輸速度方面 
     
     JSON 的速度要遠遠快于 XML 
    </ul> </li> 
  </ul> 
  15、談談你對webpack的看法 
   
   WebPack 是一個模塊打包工具，你可以使用 WebPack 管理你的模塊依賴，并編繹輸出模塊們所需的靜態文件。它能夠很好地管理、打包 Web 開發中所用到的 HTML 、 Javascript 、 CSS 以及各種靜態文件（圖片、字體等），讓開發過程更加高效。對于不同類型的資源， webpack 有對應的模塊加載器。 webpack 模塊打包器會分析模塊間的依賴關系，最后 生成了優化且合并后的靜態資源 
   
  16、說說你對AMD和Commonjs的理解 
   
   CommonJS 是服務器端模塊的規范， Node.js 采用了這個規范。 CommonJS 規范加載模塊是同步的，也就是說，只有加載完成，才能執行后面的操作。 AMD 規范則是非同步加載模塊，允許指定回調函數 
   AMD 推薦的風格通過返回一個對象做為模塊對象， CommonJS 的風格通過對 module.exports 或 exports 的屬性賦值來達到暴露模塊對象的目的 
   
  17、常見web安全及防護原理 
   
    sql 注入原理 
     
     就是通過把 SQL 命令插入到 Web 表單遞交或輸入域名或頁面請求的查詢字符串，最終達到欺騙服務器執行惡意的SQL命令 
     </li> 
   
 總的來說有以下幾點 
     
     永遠不要信任用戶的輸入，要對用戶的輸入進行校驗，可以通過正則表達式，或限制長度，對單引號和雙 "-" 進行轉換等 
     永遠不要使用動態拼裝SQL，可以使用參數化的 SQL 或者直接使用存儲過程進行數據查詢存取 
     永遠不要使用管理員權限的數據庫連接，為每個應用使用單獨的權限有限的數據庫連接 
     不要把機密信息明文存放，請加密或者 hash 掉密碼和敏感的信息 
    </ul> </li> 
  </ul> 
  XSS原理及防范 
   
   Xss(cross-site scripting) 攻擊指的是攻擊者往 Web 頁面里插入惡意 html 標簽或者 javascript 代碼。比如：攻擊者在論壇中放一個看似安全的鏈接，騙取用戶點擊后，竊取 cookie 中的用戶私密信息；或者攻擊者在論壇中加一個惡意表單，當用戶提交表單的時候，卻把信息傳送到攻擊者的服務器中，而不是用戶原本以為的信任站點 
   
  XSS防范方法 
   
   首先代碼里對用戶輸入的地方和變量都需要仔細檢查長度和對 ”<”,”>”,”;”,”’” 等字符做過濾；其次任何內容寫到頁面之前都必須加以encode，避免不小心把 html tag 弄出來。這一個層面做好，至少可以堵住超過一半的XSS 攻擊 
   
  XSS與CSRF有什么區別嗎？ 
   
    XSS 是獲取信息，不需要提前知道其他用戶頁面的代碼和數據包。 CSRF 是代替用戶完成指定的動作，需要知道其他用戶頁面的代碼和數據包。要完成一次 CSRF 攻擊，受害者必須依次完成兩個步驟
  
    登錄受信任網站 A ，并在本地生成 Cookie
  
   在不登出 A 的情況下，訪問危險網站 B 
   
  CSRF的防御 
   
   服務端的 CSRF 方式方法很多樣，但總的思想都是一致的，就是在客戶端頁面增加偽隨機數 
   通過驗證碼的方法 
   
  18、用過哪些設計模式？ 
   
    工廠模式： 
     
     工廠模式解決了重復實例化的問題，但還有一個問題,那就是識別問題，因為根本無法 
     主要好處就是可以消除對象間的耦合，通過使用工程方法而不是 new 關鍵字 
     </li> 
   
 構造函數模式 
     
     使用構造函數的方法，即解決了重復實例化的問題，又解決了對象識別的問題，該模式與工廠模式的不同之處在于 
     直接將屬性和方法賦值給 this 對象; 
    </ul> </li> 
  </ul> 
  19、為什么要有同源限制？ 
   
   同源策略指的是：協議，域名，端口相同，同源策略是一種安全協議 
   舉例說明：比如一個黑客程序，他利用 Iframe 把真正的銀行登錄頁面嵌到他的頁面上，當你使用真實的用戶名，密碼登錄時，他的頁面就可以通過 Javascript 讀取到你的表單中 input 中的內容，這樣用戶名，密碼就輕松到手了。 
   
  20、offsetWidth/offsetHeight,clientWidth/clientHeight與scrollWidth/scrollHeight的區別 
   
   offsetWidth/offsetHeight 返回值包含 content + padding + border ，效果與e.getBoundingClientRect()相同 
   clientWidth/clientHeight 返回值只包含 content + padding ，如果有滾動條，也 不包含滾動條 
   scrollWidth/scrollHeight 返回值包含 content + padding + 溢出內容的尺寸 
   
  21、javascript有哪些方法定義對象 
   
   對象字面量： var obj = {}; 
   構造函數： var obj = new Object(); 
   Object.create(): var obj = Object.create(Object.prototype); 
   
  22、常見兼容性問題？ 
   
   png24 位的圖片在iE6瀏覽器上出現背景，解決方案是做成 PNG8 
   瀏覽器默認的 margin 和 padding 不同。解決方案是加一個全局的 *{margin:0;padding:0;} 來統一,，但是全局效率很低，一般是如下這樣解決： 
   
  body,ul,li,ol,dl,dt,dd,form,input,h1,h2,h3,h4,h5,h6,p{
margin:0;
padding:0;
}
 
   
   IE 下, event 對象有 x , y 屬性,但是沒有 pageX , pageY 屬性 
   Firefox 下, event 對象有 pageX , pageY 屬性,但是沒有 x,y 屬性. 
   
  22、說說你對promise的了解 
   
    依照 Promise/A+ 的定義， Promise 有四種狀態： 
     
      pending: 初始狀態, 非 fulfilled 或 rejected.
  
      fulfilled: 成功的操作.
  
      rejected: 失敗的操作.
  
      settled: Promise 已被 fulfilled 或 rejected ，且不是 pending
  
     </li> 
   
 另外， fulfilled 與 rejected 一起合稱 settled
  
   Promise 對象用來進行延遲( deferred ) 和異步( asynchronous ) 計算 
  </ul> 
  Promise 的構造函數 
   
   構造一個 Promise ，最基本的用法如下： 
   
  var promise = new Promise(function(resolve, reject){

    if (...) {  // succeed

        resolve(result);

    } else {   // fails

        reject(Error(errMessage));

    }
});

</pre> 
  
 
    Promise 實例擁有 then 方法（具有 then 方法的對象，通常被稱為 thenable ）。它的使用方法如下：
 promise.then(onFulfilled, onRejected)
  
    接收兩個函數作為參數，一個在 fulfilled 的時候被調用，一個在 rejected 的時候被調用，接收參數就是 future ， onFulfilled 對應 resolve , onRejected 對應 reject
  
   
  23、你覺得jQuery源碼有哪些寫的好的地方 
   
   jquery 源碼封裝在一個匿名函數的自執行環境中，有助于防止變量的全局污染，然后通過傳入 window 對象參數，可以使 window 對象作為局部變量使用，好處是當 jquery 中訪問 window 對象的時候，就不用將作用域鏈退回到頂層作用域了，從而可以更快的訪問window對象。同樣，傳入 undefined 參數，可以縮短查找 undefined 時的作用域鏈 
   jquery 將一些原型屬性和方法封裝在了 jquery.prototype 中，為了縮短名稱，又賦值給了 jquery.fn ，這是很形象的寫法 
   有一些數組或對象的方法經常能使用到， jQuery 將其保存為局部變量以提高訪問速度 
   jquery 實現的鏈式調用可以節約代碼，所返回的都是同一個對象，可以提高代碼效率 
   
  24、vue、react、angular 
   
    Vue.js
 一個用于創建 web 交互界面的庫，是一個精簡的 MVVM 。它通過雙向數據綁定把 View 層和 Model 層連接了起來。實際的 DOM 封裝和輸出格式都被抽象為了 Directives 和 Filters
  
    AngularJS
 是一個比較完善的前端 MVVM 框架，包含模板，數據雙向綁定，路由，模塊化，服務，依賴注入等所有功能，模板功能強大豐富，自帶了豐富的 Angular 指令
  
    react
 React 僅僅是 VIEW 層是 非死book 公司。推出的一個用于構建 UI 的一個庫，能夠實現服務器端的渲染。用了 virtual dom ，所以性能很好。
  
   
  25、Node的應用場景 
   
    特點： 
     
     1、它是一個 Javascript 運行環境 
     2、依賴于 Chrome V8 引擎進行代碼解釋 
     3、事件驅動 
     4、非阻塞 I/O 
     5、單進程，單線程 
     </li> 
   
 優點： 
     
     高并發（最重要的優點） 
    </ul> </li> 
    缺點： 
     
     1、只支持單 核CPU ，不能充分利用 CPU 
     2、可靠性低，一旦代碼某個環節崩潰，整個系統都崩潰 
    </ul> </li> 
  </ul> 
  26、談談你對AMD、CMD的理解 
   
    CommonJS 是服務器端模塊的規范， Node.js 采用了這個規范。 CommonJS 規范加載模塊是同步的，也就是說，只有加載完成，才能執行后面的操作。 AMD 規范則是非同步加載模塊，允許指定回調函數
  
    AMD 推薦的風格通過返回一個對象做為模塊對象， CommonJS 的風格通過對 module.exports 或 exports 的屬性賦值來達到暴露模塊對象的目的
  
   
  27、那些操作會造成內存泄漏？ 
   
   內存泄漏指任何對象在您不再擁有或需要它之后仍然存在 
   setTimeout 的第一個參數使用字符串而非函數的話，會引發內存泄漏 
   閉包、控制臺日志、循環（在兩個對象彼此引用且彼此保留時，就會產生一個循環） 
   
  28、web開發中會話跟蹤的方法有哪些 
   
   cookie 
   session 
   url 重寫 
   隱藏 input 
   ip 地址 
   
  29、介紹js的基本數據類型 
   
   Undefined 、 Null 、 Boolean 、 Number 、 String 
   
  30、介紹js有哪些內置對象？ 
   
   Object 是 JavaScript 中所有對象的父對象 
   數據封裝類對象： Object 、 Array 、 Boolean 、 Number 和 String 
   其他對象： Function 、 Arguments 、 Math 、 Date 、 RegExp 、 Error 
   
  31、說幾條寫JavaScript的基本規范？ 
   
   不要在同一行聲明多個變量 
   請使用 ===/!== 來比較 true/false 或者數值 
   使用對象字面量替代 new Array 這種形式 
   不要使用全局函數 
   Switch 語句必須帶有 default 分支 
   If 語句必須使用大括號 
   for-in 循環中的變量 應該使用 var 關鍵字明確限定作用域，從而避免作用域污 
   
  32、JavaScript有幾種類型的值？，你能畫一下他們的內存圖嗎？ 
   
   棧：原始數據類型（ Undefined ， Null ， Boolean ， Numbe r、 String ） 
   堆：引用數據類型（對象、數組和函數） 
   兩種類型的區別是：存儲位置不同； 
   原始數據類型直接存儲在棧( stack )中的簡單數據段，占據空間小、大小固定，屬于被頻繁使用數據，所以放入棧中存儲； 
   引用數據類型存儲在堆( heap )中的對象,占據空間大、大小不固定,如果存儲在棧中，將會影響程序運行的性能；引用數據類型在棧中存儲了指針，該指針指向堆中該實體的起始地址。當解釋器尋找引用值時，會首先檢索其 
   在棧中的地址，取得地址后從堆中獲得實體 
   
   
  33、javascript創建對象的幾種方式？ 
  javascript 創建對象簡單的說,無非就是使用內置對象或各種自定義對象，當然還可以用 JSON ；但寫法有很多種，也能混合使用 
   
   對象字面量的方式 
   
  person={firstname:"Mark",lastname:"Yun",age:25,eyecolor:"black"};
 
   
   用 function 來模擬無參的構造函數 
   
   functionPerson(){}
    var person=new Person();//定義一個function，如果使用new"實例化",該function可以看作是一個Class
        person.name="Mark";
        person.age="25";
        person.work=function(){
        alert(person.name+" hello...");
    }
person.work();
 
   
   用 function 來模擬參構造函數來實現（用 this 關鍵字定義構造的上下文屬性） 
   
  functionPet(name,age,hobby){
       this.name=name;//this作用域：當前對象
       this.age=age;
       this.hobby=hobby;
       this.eat=function(){
          alert("我叫"+this.name+",我喜歡"+this.hobby+",是個程序員");
       }
    }
    var maidou =new Pet("麥兜",25,"coding");//實例化、創建對象
    maidou.eat();//調用eat方法
 
   
   用工廠方式來創建（內置對象） 
   
  var wcDog =new Object();
     wcDog.name="旺財";
     wcDog.age=3;
     wcDog.work=function(){
       alert("我是"+wcDog.name+",汪汪汪......");
     }
     wcDog.work();
 
   
   用原型方式來創建 
   
  function Dog(){

 }
 Dog.prototype.name="旺財";
 Dog.prototype.eat=function(){
 alert(this.name+"是個吃貨");
 }
 var wangcai =new Dog();
 wangcai.eat();

</pre> 
  
 
   用混合方式來創建 
   
  function Car(name,price){
     this.name=name;
     this.price=price; 
   }
    Car.prototype.sell=function(){
      alert("我是"+this.name+"，我現在賣"+this.price+"萬元");
     }
   var camry =new Car("凱美瑞",27);
   camry.sell();
 
  34、eval是做什么的？ 
   
   它的功能是把對應的字符串解析成 JS 代碼并運行 
   應該避免使用 eval ，不安全，非常耗性能（ 2 次，一次解析成 js 語句，一次執行） 
   由 JSON 字符串轉換為JSON對象的時候可以用 eval，var obj =eval('('+ str +')') 
   
  35、null，undefined 的區別？ 
   
   undefined 表示不存在這個值。 
   undefined :是一個表示”無”的原始值或者說表示”缺少值”，就是此處應該有一個值，但是還沒有定義。當嘗試讀取時會返回 undefined 
    例如變量被聲明了，但沒有賦值時，就等于 undefined
  
    null 表示一個對象被定義了，值為“空值”
  
   null : 是一個對象(空對象, 沒有任何屬性和方法) 
    例如作為函數的參數，表示該函數的參數不是對象；
  
    在驗證 null 時，一定要使用 === ，因為 == 無法分別 null 和 undefined
  
   
  36、[“1”, “2”, “3”].map(parseInt) 答案是多少？ 
   
   [1, NaN, NaN] 因為 parseInt 需要兩個參數 (val, radix) ，其中 radix 表示解析時用的基數。 
   map 傳了 3 個 (element, index, array) ，對應的 radix 不合法導致解析失敗。 
   
  37、javascript 代碼中的”use strict”;是什么意思 ? 使用它區別是什么？ 
   
   use strict 是一種 ECMAscript 5 添加的（嚴格）運行模式,這種模式使得 Javascript 在更嚴格的條件下運行,使 JS 編碼更加規范化的模式,消除 Javascript 語法的一些不合理、不嚴謹之處，減少一些怪異行為 
   
  38、JSON 的了解？** 
   
   JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式 
    它是基于 JavaScript 的一個子集。數據格式簡單, 易于讀寫, 占用帶寬小
  
    JSON 字符串轉換為JSON對象:
  
   
  var obj =eval('('+ str +')');
var obj = str.parseJSON();
var obj = JSON.parse(str);
 
   
   JSON 對象轉換為JSON字符串： 
   
  var last=obj.toJSONString();
var last=JSON.stringify(obj);
 
  39、js延遲加載的方式有哪些？ 
   
   defer 和 async 、動態創建 DOM 方式（用得最多）、按需異步載入 js 
   
  40、同步和異步的區別? 
   
   同步：瀏覽器訪問服務器請求，用戶看得到頁面刷新，重新發請求,等請求完，頁面刷新，新內容出現，用戶看到新內容,進行下一步操作 
   異步：瀏覽器訪問服務器請求，用戶正常操作，瀏覽器后端進行請求。等請求完，頁面不刷新，新內容也會出現，用戶看到新內容 
   
  41、漸進增強和優雅降級 
   
    漸進增強 ：針對低版本瀏覽器進行構建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。
  
    優雅降級 ：一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容
  
   
  42、defer和async 
   
   defer 并行加載 js 文件，會按照頁面上 script 標簽的順序執行 
   async 并行加載 js 文件，下載完成立即執行，不會按照頁面上 script 標簽的順序執行 
   
  43、說說嚴格模式的限制 
   
   變量必須聲明后再使用 
   函數的參數不能有同名屬性，否則報錯 
   不能使用 with 語句 
   禁止 this 指向全局對象 
   
  44、attribute和property的區別是什么？ 
   
   attribute 是 dom 元素在文檔中作為 html 標簽擁有的屬性； 
   property 就是 dom 元素在 js 中作為對象擁有的屬性。 
   對于 html 的標準屬性來說， attribute 和 property 是同步的，是會自動更新的 
   但是對于自定義的屬性來說，他們是不同步的 
   
  45、談談你對ES6的理解 
   
   新增模板字符串（為 JavaScript 提供了簡單的字符串插值功能） 
   箭頭函數 
   for-of （用來遍歷數據—例如數組中的值。） 
   arguments 對象可被不定參數和默認參數完美代替。 
   ES6 將p romise 對象納入規范，提供了原生的 Promise 對象。 
   增加了 let 和 const 命令，用來聲明變量。 
   增加了塊級作用域。 
   let 命令實際上就增加了塊級作用域。 
   還有就是引入 module 模塊的概念 
   
  $編程題 
  1、寫一個通用的事件偵聽器函數 
  // event(事件)工具集，來源：github.com/markyun
   markyun.Event = {

   // 視能力分別使用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.removeEventListener) {
           element.removeEventListener(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;
   }

</pre> 
  
2、如何判斷一個對象是否為數組 
  functionisArray(arg){
    if (typeof arg === 'object') {
        return Object.prototype.toString.call(arg) === '[object Array]';
    }
    return false;
}
 
  3、冒泡排序 
   
   每次比較相鄰的兩個數，如果后一個比前一個小，換位置 
   
  var arr = [3, 1, 4, 6, 5, 7, 2];
functionbubbleSort(arr){
for (var i = 0; i < arr.length - 1; i++) {
    for(var j = 0; j < arr.length - 1; j++) {
        if(arr[j + 1] < arr[j]) {
            var temp;
            temp = arr[j];
            arr[j] = arr[j + 1];
            arr[j + 1] = temp;
        }
    }
}
return arr;
}
console.log(bubbleSort(arr));
</pre> 
  
4、快速排序 
   
   采用二分法，取出中間數，數組每次和中間數比較，小的放到左邊，大的放到右邊 
   
  var arr = [3, 1, 4, 6, 5, 7, 2];
functionquickSort(arr){
    if(arr.length == 0) {
        return [];    // 返回空數組
    }

var cIndex = Math.floor(arr.length / 2);
var c = arr.splice(cIndex, 1);
var l = [];
var r = [];

for (var i = 0; i < arr.length; i++) {
    if(arr[i] < c) {
        l.push(arr[i]);
    } else {
        r.push(arr[i]);
    }
}

return quickSort(l).concat(c, quickSort(r));

}
console.log(quickSort(arr));
</pre> 
  
5、編寫一個方法 求一個字符串的字節長度 
   
   假設：一個英文字符占用一個字節，一個中文字符占用兩個字節 
   
  functionGetBytes(str){

    var len = str.length;

    var bytes = len;

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

        if (str.charCodeAt(i) > 255) bytes++;

    }

    return bytes;

}


alert(GetBytes("你好,as"));
</pre> 
  
$其他 
  1、談談你對重構的理解 
   
   網站重構：在不改變外部行為的前提下，簡化結構、添加可讀性，而在網站前端保持一致的行為。也就是說是在不改變UI的情況下，對網站進行優化， 在擴展的同時保持一致的UI 
    對于傳統的網站來說重構通常是： 
     
      表格( table )布局改為 DIV+CSS
  
      使網站前端兼容于現代瀏覽器(針對于不合規范的 CSS 、如對IE6有效的)
  
      對于移動平臺的優化
  
      針對于 SEO 進行優化
  
     </li> 
  </ul> 
  2、什么樣的前端代碼是好的 
   
   高復用低耦合，這樣文件小，好維護，而且好擴展。 
   
  3、對前端工程師這個職位是怎么樣理解的？它的前景會怎么樣？ 
   
    前端是最貼近用戶的程序員，比后端、數據庫、產品經理、運營、安全都近 
     
     實現界面交互 
     提升用戶體驗 
     有了Node.js，前端可以實現服務端的一些事情 
     </li> 
   
 前端是最貼近用戶的程序員，前端的能力就是能讓產品從 90分進化到 100 分，甚至更好，
  
  </ul> 
   
    與團隊成員， UI 設計，產品經理的溝通；
  
    做好的頁面結構，頁面重構和用戶體驗；
  
   
  4、你覺得前端工程的價值體現在哪 
   
    為簡化用戶使用提供技術支持（交互部分）
  
    為多個瀏覽器兼容性提供支持
  
    為提高用戶瀏覽速度（瀏覽器性能）提供支持
  
    為跨平臺或者其他基于webkit或其他渲染引擎的應用提供支持
  
    為展示數據提供支持（數據接口）
  
   
  5、平時如何管理你的項目？ 
   
    先期團隊必須確定好全局樣式（ globe.css ），編碼模式( utf-8 ) 等；
  
    編寫習慣必須一致（例如都是采用繼承式的寫法，單樣式都寫成一行）；
  
    標注樣式編寫人，各模塊都及時標注（標注關鍵樣式調用的地方）；
  
    頁面進行標注（例如 頁面 模塊 開始和結束）；
  
    CSS 跟 HTML 分文件夾并行存放，命名都得統一（例如 style.css ）；
  
    JS 分文件夾存放 命名以該 JS 功能為準的英文翻譯。
  
    圖片采用整合的 images.png png8 格式文件使用 - 盡量整合在一起使用方便將來的管理
  
   
  人事面 
   
   面試完你還有什么問題要問的嗎 
   你有什么愛好? 
   你最大的優點和缺點是什么? 
   你為什么會選擇這個行業，職位? 
   你覺得你適合從事這個崗位嗎? 
   你有什么職業規劃? 
   你對工資有什么要求? 
   如何看待前端開發？ 
   未來三到五年的規劃是怎樣的？ 
   
    
  來自：http://blog.poetries.top/2017/03/12/front-end-interview-summary/

本文由用戶 OWHFra 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1489379282885.html

前端技術 JavaScript

前端面試題整理

$CSS部分

$JavaScript

$編程題

$其他

人事面

一些問題

$HTML， HTTP，web綜合問題

1、前端需要注意哪些SEO

2、 <img> 的 title 和 alt 有什么區別

3、HTTP的幾種請求方法用途

4、從瀏覽器地址欄輸入url到顯示頁面的步驟

5、如何進行網站性能優化

6、HTTP狀態碼及其含義

7、語義化的理解

8、介紹一下你對瀏覽器內核的理解？

9、html5有哪些新特性、移除了那些元素？

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

v0.11

11、瀏覽器是怎么對 HTML5 的離線儲存資源進行管理和加載的呢

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

13、iframe有那些缺點？

14、WEB標準以及W3C標準是什么?

15、xhtml和html有什么區別?

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

17、行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？行內元素和塊級元素有什么區別？

18、HTML全局屬性(global attribute)有哪些

$CSS部分

1、css sprite是什么,有什么優缺點

2、 display: none; 與 visibility: hidden; 的區別

3、 link 與 @import 的區別

4、什么是FOUC?如何避免

5、如何創建塊級格式化上下文(block formatting context),BFC有什么用

6、display,float,position的關系

7、清除浮動的幾種方式，各自的優缺點

8、為什么要初始化CSS樣式?

9、css3有哪些新特性

10、display有哪些值？說明他們的作用

11、介紹一下標準的CSS的盒子模型？低版本IE的盒子模型有什么不同的？

12、CSS優先級算法如何計算？

13、對BFC規范的理解？

14、談談浮動和清除浮動

15、position的值， relative和absolute定位原點是

16、display:inline-block 什么時候不會顯示間隙？(攜程)

17、PNG,GIF,JPG的區別及如何選

$JavaScript

1、閉包

2、說說你對作用域鏈的理解

3、JavaScript原型，原型鏈 ? 有什么特點？

4、請解釋什么是事件代理

5、Javascript如何實現繼承？

6、談談This對象的理解

7、事件模型

8、new操作符具體干了什么呢?

9、Ajax原理

10、如何解決跨域問題?

11、模塊化開發怎么做？

12、異步加載JS的方式有哪些？

13、那些操作會造成內存泄漏？

14、XML和JSON的區別？

15、談談你對webpack的看法

16、說說你對AMD和Commonjs的理解

17、常見web安全及防護原理

18、用過哪些設計模式？

19、為什么要有同源限制？

20、offsetWidth/offsetHeight,clientWidth/clientHeight與scrollWidth/scrollHeight的區別

21、javascript有哪些方法定義對象

22、常見兼容性問題？

22、說說你對promise的了解

23、你覺得jQuery源碼有哪些寫的好的地方

24、vue、react、angular

25、Node的應用場景

26、談談你對AMD、CMD的理解

27、那些操作會造成內存泄漏？

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

29、介紹js的基本數據類型

30、介紹js有哪些內置對象？

31、說幾條寫JavaScript的基本規范？

32、JavaScript有幾種類型的值？，你能畫一下他們的內存圖嗎？

33、javascript創建對象的幾種方式？

17、行內元素有哪些？塊級元素有哪些？空(void)元素有那些？行內元素和塊級元素有什么區別？

5、編寫一個方法求一個字符串的字節長度