面試知識點總結

最近面試幾家前端職位，想知道目前的前端面試題是偏向哪一塊，都主要問到的是ES6語法，閉包，原型鏈，繼承那一塊。而且將面試題的知識點彙總一下。有助於下次面試。

1.HTML

HTML5新特性，語義化

HTML5新增了許多標籤<header>,<main>,<footer>,<nav><section>,<article>,<aside>,還用了<canvas>繪圖,<video>視頻,<audio>音頻.本地儲存localstorage,sessionstorage,定位,離線緩存等。
HTML5新特性
優勢：

SEO(搜索引擎優化);結構更加清晰，方便維護.

瀏覽器的標準模式和怪異模式

在W3C尚未制定出標準以前,不一樣的瀏覽器有屬於本身一套標準.不一樣瀏覽器會根據本身的規則渲染頁面.那麼渲染出來的頁面就不一樣,爲怪異模式。那麼W3C制定出一系列標準規則以後。瀏覽器按這套規則渲染頁面那就是標準模式

xhtml和html的區別

1.xhtml裏面的標籤必須閉合。
2.xhtml裏面的標籤必須小寫。
3.xhtml裏面必須嵌套元素是正確的。

使用data-的好處

1.自定義屬性能夠統一化。
2.之後維護更加的方便,頁面結構清晰
3.element.dataset.獲取信息 <element data-*="somevalue">

<div data-main="main"></div>
var main = document.querySeletor('div');
console.log(div.dataset.main); //main

meta標籤

meta標籤通常表述當前文檔的屬性.例如做者關鍵字等等信息。
詳細瞭解參考https://www.cnblogs.com/reaf/...

canvas

canvas是一個HTML5提供的繪圖API,經過getContent()方法獲取畫筆纔可繪圖。與svg的最大差異是svg使用一個 XML 文檔來描述繪圖.

HTML廢棄的標籤

<iframe><font><s>等等。感受也沒什麼用,通常都不多用獲得的標籤。

IE6 bug，和一些定位寫法

1.雙邊距bug：當元素使用float事後，使用margin都會有兩倍邊距，須要明確其元素類型來解決邊距問題. display:inline或display:block;
2.相對父容器絕對定位bug
ie6不少bug能夠經過觸發layout來解決。不管設置zoom:1或者設置寬高都能觸發。
參考連接
IE6中的常見BUG
IE6相對父容器絕對定位的bug及其解決辦法

css js放置位置和緣由

通常來講css和js都是經過外部引入的。這樣方便維護管理。
因爲瀏覽器的加載順序,css放在head標籤中,js會阻塞html加載。我建議頁面效果顯示的js放在body以前，交互，事件的js能夠放在後面。

什麼是漸進式渲染

瀏覽器的渲染：過程與原理
What is progressive rendering?

html模板語言

通常日常的數據渲染,須要用字符串與數據一個個拼接而成,但後期維護很麻煩。因而有了html模板。不一樣的html模板能夠寫法也不一樣。es6有一種是叫模板字符串 數據經過#{}並接而成.

meta viewport

meta介紹參考
經常使用的meta

2 CSS

CSS3新特性，僞類，僞元素

css3增長了不少新的特性,但兼容的話通常在IE9+,例如box-sizing,CSS選擇器,背景background-size,邊框陰影,圓角等等.
僞類一個冒號: 僞元素兩個冒號:: 權重級別不同
:first-child :hover :active
::before ::after 兼容性很差
僞類僞元素
通常用於真正的內容用僞類,但僞元素用於好比圖標之類的沒有什麼實質的內容。
僞類與僞元素差異

CSS實現隱藏頁面的方式

display:none元素隱藏.頁面寬高不顯示.不佔頁面位置.
opactiy: 0 只是將透明度設置爲0,但佔頁面位置.
visibilty: hidden 也是隱藏元素

link和@import引入css的區別

link標籤引用在head標籤裏面,@import 引用於在CSS樣式表中。
加載順序問題.link是在頁面加載的時候能夠同時加載CSS ,@import須要在加載頁面內容以後才加載
link兼容性比@import好些。

flexbox彈性盒子

通常使用於移動端和高級瀏覽器.運用了彈性佈局那麼float,clear,vertical-align都會失效。
有分主軸和交叉軸。

實現兩欄佈局有哪些方法？

1.float方法實現
2.flex佈局實現

CSS優先級

通常以引用的樣式來講 內聯樣式 > 內部樣式 > 外部樣式（就近原則）

權重級別
important 最高級
行內 +1000
id +100
屬性選擇器,類,僞類 +10
元素,僞元素 +1
通用符* 0
CSS權重

3.JS

js的基本類型有哪些？引用類型有哪些？null和undefined的區別?string包裝對象和基本類型區別

基本類型: null,undefined,number,string,boolean
引用類型: object => function,(number,string,boolean)包裝對象,Date等等。
基本類型屬於棧
引用類型屬於堆

null和undefined的區別
null是訪問一個還沒有存在的對象時所返回的值。 轉換成數值類型爲 0
undefined是訪問一個未初始化的變量時返回的值。 轉換數值類型爲NaN.

包裝對象與基本類型的區別
沒法在基本類型上添加方法屬性。
包裝對象能夠添加屬性。
輕鬆理解JS基本包裝對象

判斷是不是Array類型
1.經過instanceof 判斷原型對象是否指向Array構造對象
arr instanceof Array // true
2.對象的constructor屬性
arr.constructor = Array // true

解釋一下事件冒泡和事件捕獲
通常一個事件觸發時候會進行事件流，而事件流有兩個階段一個就是從外到裏爲捕獲階段，從裏到外是冒泡階段。

阻止冒泡方法

function stop(e){
    if(e.stopPropagation){
    e.stopPropagation();
    }else{
    e.cancelBubble = true;
    }
}

對閉包的理解？何時構成閉包？閉包的實現方法？閉包的優缺點
閉包是外部能訪問內部變量的函數。通常來講內部定義的函數能訪問到外部的變量。但外部沒法訪問內部函數裏面定義的變量。

function a(){
var i = 0;
 function b(){
  console.log(i)
  return b;
 }
}

這樣就造成了閉包，當外部定義個變量時候，接收a函數的返回值,執行這個函數就能獲取到這個變量。
優勢 解決外部沒法獲取內部函數的值
缺點 閉包會使得這個變量一直佔據內存中。

this有哪些使用場景

this 指向用於三種場景
1.在構造函數中方法使用this，這this指向實例。
2.事件中使用this,這this指向對應的dom元素
3.全局方法使用this。會執行window.若是是node環境下。指向global

call，apply，bind

call，apply 都是改變函數執行上下文。
call與apply就一個區別就是傳入參數的問題。call是一個個傳入，apply是以數組的形式傳入。
而bind是返回一個函數副本。他不會執行函數。須要本身手動執行函數。
聊一聊call、apply、bind的區別

顯示原型和隱式原型，手繪原型鏈，原型鏈是什麼？爲何要有原型鏈
http://www.cnblogs.com/wangfu...

建立對象的多種方式

1.直接用字面量建立

var obj = {}

2.構造函數建立

function obj(){}
var obj1 = new obj;

3.直接經過new object()建立
4.工廠函數建立

JS建立對象幾種不一樣方法詳解

變量提高

在Javascript中，變量聲明和函數聲明會最早執行。
函數聲明大於變量聲明
例如

function a(){}
var a;
console.log(a) // function a(){}

函數聲明

function a(){}

函數表達式

var a = function(){} 等同於 var a = 1;

宿主對象和原生對象（內部對象）的區別
宿主對象 是瀏覽器提供的對象 BOM如Window和Document等 DOM對象
原生對象（內部對象）是指JS內置的對象 String Number Boolean Date
還有本身定義的對象 自定義對象。

document load和document DOMContentLoaded兩個事件的區別

document DOMContentLoaded是DOM加載完畢會執行這個函數 等同於JQ中的$(function(){})
document load 是JS加載完成才執行這個函數

typeof可以獲得哪些值

"number"、"string"、"boolean"、"object"、"function" 和 "undefined"
注意 typeof null , array,{} 都檢測出object

什麼是「use strict」,好處和壞處

好處: 1.使得JS語法更加規範化。目前的ES6是嚴格模式。2.能早點發現代碼的錯誤問題，提升代碼的安全性。
壞處: 通常網站都會將JS代碼進行壓縮，可是有些JS代碼有嚴格模式，而有些代碼沒有嚴格模式。當他們合併在一塊兒，會浪費字節。

函數做用域是什麼？js 的做用域有幾種？

函數做用域是函數裏面有做用域，好比在函數體中定義個變量，在外部訪問不到這個變量的。
JS做用域中有三種。全局做用域，函數做用域，塊級做用域。es6語法才支持塊級做用域。

弄懂JavaScript的做用域和閉包

數組經常使用API 字符串api

Array
增： arr.push() arr.unshift()
刪： arr.pop() arr.shift()
改： arr.reverse() arr.sort() arr.concat() arr.join() arr.slice() arr.splice() arr.toString()
查： arr.indexOf() arr.lastIndexOf()
數組經常使用API

String
字符串經常使用API

淺拷貝和深拷貝

http://www.jb51.net/article/9...

編寫一個通用的事件監聽函數

https://blog.csdn.net/github_...

web端cookie的設置和獲取

原生事件綁定（跨瀏覽器），dom0和dom2的區別？

dom0
ele.onclick = handler;ele.onclick=null;最古老的一種方式
優勢：全瀏覽器兼容
缺點：同一事件只能綁定/解綁一個事件處理器

ele.add/removeEventListener(eventType, handler, catch);
和IE方式：ele.attach/detachEvent(‘on’+eventType, handler);
優勢：支持綁定/解綁多個事件處理器
缺點：須要作兼容性判斷。

JS原生事件處理（跨瀏覽器）

如何實現圖片滾動懶加載

懶加載原理是圖片還沒到可視區域時先用一張很小的圖片來當背景，若是滾動到可視區域時，再加載圖片路徑。
滾動加載圖片（懶加載）實現原理

cookie獲取設置刪除

https://blog.csdn.net/qiqingj...

DOM事件的綁定的幾種方式

三種綁定事件的方式
1.直接在DOM 上面綁定
2.經過腳本里面綁定
3.經過監聽事件綁定
https://www.cnblogs.com/mylov...

js的設計模式知道哪些

工廠模式 Factory Pattern,
單例模式 Singleton Pattern,
模塊模式,
發佈訂閱模式，
中介者模式 Mediator Pattern，
代理模式 Proxy Pattern

https://www.cnblogs.com/tugen...

4.ES6

談一談 promise

promise對象主要處理回調函數的對象。實例化一個promise對象以後有三種狀態 pending: 初始狀態，既不是成功，也不是失敗狀態。
fulfilled: 意味着操做成功完成，rejected: 意味着操做失敗。
實例化promise對象有兩個參數 resolve 和 reject 。

promise實例化生成以後能夠經過then() 和catch()鏈式調用自定義方法。
參考網站

面試題

圖片過多的時候如何優化

1.圖標不少的時候能夠用雪碧圖
2.圖片過大時候能夠壓縮一下。
3.小圖標若是不用雪碧圖能夠考慮用base64編碼
4.圖片緩存

怎麼將字符串中的字符用空格隔開

function aaa(str){
return str.split("").join(" ");
}
aaa('123'); // 1 2 3

怎麼獲取checkbox的元素,用JS怎麼寫

document.getElementsByName("") 獲取全部name屬性的元素
其次還有document.getElementsByTagName() 獲取標籤元素
document.getElementById 獲取ID
document.getElementsByClassName 獲取類名

JS JQ 增刪改查方法

JS
createElement //建立一個元素
createTextNode //建立一個文本節點

JQ
$("<div>123</div>")

添加，移除，插入
JS
insertBefore() // 被選元素的前面插入
appendChild() // 被選元素的後面插入
removeChild() // 刪除

JQ append() //被選元素插入內容 prepend() remove() insertAfter() //被選元素的前面插入 instetBefore()