前端面試總結（面向校招）
一.Vue相關
1.vue中的MVVM模式（優勢？）即Model-View-ViewModel
javascript
Model表明數據模型，也能夠在Model中定義數據修改和操做的業務邏輯。php
View表明UI組件，它負責將數據模型轉化成UI展示出來。 css
ViewModel監聽模型數據的改變和控制視圖行爲、處理用戶交互，簡單理解就是一個同步Viewhtml
Vue是以數據爲驅動的，Vue自身將DOM和數據進行綁定，一旦建立綁定，DOM和數據將保持同步，每當數據發生變化，DOM會跟着變化。前端
ViewModel經過雙向數據綁定把View層和Model層鏈接了起來，而View和Model之間的同步工做徹底是自動的，無需人爲干涉，所以開發者只需關注業務邏輯，不須要手動操做DOM,不須要關注數據狀態的同步問題，複雜的數據狀態維護徹底由MVVM來統一管理。vue
DOM Listeners和Data Bindings是實現雙向綁定的關鍵。DOM Listeners監聽頁面全部VieDOM元素的變化，當發生變化，Model層的數據隨之變化；Data Bindings監聽Model層的數據，當數據發生變化，View層的DOM元素隨之變化。html5
優勢：1.分離視圖（View）和模型（Model）,下降代碼耦合2.提升可測試性3.自動更新domjava
2.Vue實現數據雙向綁定的原理node
vue實現數據雙向綁定主要是：採用數據劫持結合發佈者-訂閱者模式的方式，經過Object.defineProperty（）來劫持各個屬性的setter，getter，在數據變更時發佈消息給訂閱者，觸發相應監聽回調。git
<body>
<div id="app"><input type="text" id="txt">
<p id="show"></p>
</div>
</body>
<script type="text/javascript">
var obj = {}
Object.defineProperty(obj, 'txt', {
get: function () {
return obj
},
set: function (newValue) {
document.getElementById('txt').value = newValuedocument.getElementById('show').innerHTML =
newValue
}
})
document.getElementById('txt').addEventListener('keyup', function (e) {
obj.txt = e.target.value
})
</script>
複製代碼
3.Vue組件間的參數傳遞
1.父組件與子組件傳值父組件傳給子組件：子組件經過props方法接受數據;
2.非父子組件間的數據傳遞，兄弟組件傳值eventBus，就是建立一個事件中心，至關於中轉站，能夠用它來傳遞事件和接收事件。項目比較小時，用這個比較合適。
4.vue等單頁面應用及其優缺點
5.vue中 key 值的做用？
1 .Vue.set(object, key, value) -適用於添加單個屬性
2 Object.assign() -適用於添加多個屬性
7.watch 和computed
watch是一個對象，鍵是須要觀察的表達式，值是對應回調函數,當表達式的值發生變化後，會調用對應的回調函數完成響應的監視操做；
computed計算屬性是基於它們的依賴進行緩存的，只有在它的依賴發生改變時纔會從新求值。computed中的屬性不能與data中的屬性同名，不然會報錯。
小題總結：
1.什麼是vue生命週期？
答：Vue實例從建立到銷燬的過程，就是生命週期。從開始建立、初始化數據、編譯模板、掛載Dom→渲染、更新→渲染、銷燬等一系列過程，稱之爲Vue的生命週期。
2.vue生命週期的做用是什麼？
3.vue生命週期總共有幾個階段？
4.第一次頁面加載會觸發哪幾個鉤子？
5.DOM渲染在 哪一個週期中就已經完成？
6. css只在當前組件起做用
2. v-if 和 v-show 區別
3. vue.js的兩個核心是什麼？
4. vue幾種經常使用的指令
5.如何定義過濾器：{{msg| flut }}
6. Vue的路由實現：hash模式 和 history模式
7. vue-cli如何新增自定義指令
8.組件：
1 全局組件 2 局部組件，
1.全局：全局組件在全部的vue實例中均可以使用
Vue.component('my-component', {data(){return ‘data必須是一個函數’}})
2.局部：components: {'my-component': {template:}}
二.ES6部分
1.箭頭函數：
2.Symbol()
每一個從Symbol()返回的值都是惟一的（目的：做爲對象屬性的標識符）直接使用Symbol()建立新的symbol變量，可選用一個字符串用於描述。當參數爲對象時，將調用對象的toString()方法。var sym = Symbol({name:'ConardLi'}); // Symbol([object Object])
var o = new Object
o[Symbol.iterator] = function() {
var v = 0
return {
next: function() {
return { value: v++, done: v > 10 }
}
}
};
for(var v of o){
console.log(v)} // 0,1...9
複製代碼
3.Promise
4.for...in循環實際是爲循環可枚舉對象而設計的，for...of循環並不能直接使用在普通的對象上，但若是咱們按對象所擁有的屬性進行循環，可以使用內置的Object.keys(obj)方法.
5. generator中斷執行代碼的特性，控制異步代碼的執行順序：（Generator函數返回的Iterator對象）
三.HTTP協議相關 TCP/UDP OSI模型 進程/線程
http（超文本傳輸協議）協議的特色：無鏈接，無狀態，簡單快速，靈活
無鏈接：限制每次鏈接只處理一個請求。服務器處理完客戶的請求，並收到客戶的應答後，即斷開鏈接。採用這種方式能夠節省傳輸時間。將資源釋放出來服務其餘客戶端。
無狀態是指協議對於事務處理沒有記憶能力，服務器不知道客戶端是什麼狀態。即咱們給服務器發送 HTTP 請求以後，服務器根據請求，會給咱們發送數據過來，可是，發送完，不會記錄任何信息。
組成：請求（請求行，請求頭（key:val），空行，請求體） 響應報文（狀態行，響應頭，空行，響應體）
get post區別：
GET和POST最大的區別主要是GET請求是冪等性（對同一URL的多個請求應該返回一樣的結果。）的，POST請求不是.
url長度限制的緣由：瀏覽器。早期的瀏覽器會對URL長度作限制，服務器。URL長了，對服務器處理也是一種負擔。
常見狀態碼：
301：表示永久重定向，表示請求的資源分配了新url，之後應使用新url
302：表示臨時性重定向，請求的資源臨時分配了新url，本次請求暫且使用新url。
302：與301的區別是，302表示臨時性重定向，重定向的url還有可能還會改變。
303：表示請求的資源路徑發生改變，使用GET方法請求新url。她與302的功能同樣，可是明確指出使用GET方法請求新url。
304：客戶端發送附帶條件的請求時（if-matched,if-modified-since,if-none-match,if-range,if-unmodified-since任一個）服務器端容許請求訪問資源，但因發生請求未知足條件的狀況後，直接返回304Modified（服務器端資源未改變，可直接使用客戶端未過時的緩存）
400 ：表示請求的報文中存在語法錯誤，好比url含有非法字符
http1.1 / http2.0相關
HTTP 1.1支持長鏈接和請求的流水線處理，在一個TCP鏈接上能夠傳送多個HTTP請求和響應，減小了創建和關閉鏈接的消耗和延遲，在HTTP1.1中默認開啓Connection： keep-alive，必定程度上彌補了HTTP1.0每次請求都要建立鏈接的缺點。
影響http網絡請求的緣由：帶寬，延遲（瀏覽器阻塞，DNS查詢，TCP鏈接）
新的二進制格式，HTTP1.x的解析是基於文本。基於文本協議的格式解析存在自然缺陷，文本的表現形式有多樣性，要作到健壯性考慮的場景必然不少，二進制則不一樣，只認0和1的組合。基於這種考慮HTTP2.0的協議解析決定採用二進制格式，實現方便且健壯。
多路複用，即鏈接共享，即每個request都是是用做鏈接共享機制的。一個request對應一個id，這樣一個鏈接上能夠有多個request，每一個鏈接的request能夠隨機的混雜在一塊兒，接收方能夠根據request的 id將request再歸屬到各自不一樣的服務端請求裏面。
header壓縮，HTTP1.x的header帶有大量信息，並且每次都要重複發送，HTTP2.0使用encoder來減小須要傳輸的header大小，通信雙方各自cache一份header fields表，既避免了重複header的傳輸，又減少了須要傳輸的大小。
服務端推送 同SPDY同樣，HTTP2.0也具備server push功能。
HTTPS和HTTP的區別主要以下：
一、https協議須要到ca申請證書（做用：可實現網站身份驗證和數據加密傳輸雙重功能。），通常免費證書較少，於是須要必定費用。
二、http是超文本傳輸協議，信息是明文傳輸，https則是具備安全性的ssl加密傳輸協議。
三、http和https使用的是徹底不一樣的鏈接方式，用的端口也不同，前者是80，後者是443。
四、http的鏈接很簡單，是無狀態的；HTTPS協議是由SSL+HTTP協議構建的可進行加密傳輸、身份認證的網絡協議，比http協議安全。
TCP三次握手與四次揮手(ACK：確認序號有效，SYN：發起一個新鏈接,FIN:釋放一個鏈接,序號：Seq序號）
TCP三次握手：1) Client向server發送SYN；2) Server接收到SYN，回覆Client一個SYN-ACK；3) Client接收到SYN_ACK，回覆Server一個ACK。
四次揮手：第一次揮手：客戶端發送一個FIN，用來關閉客戶端到服務器的數據傳送,此時客戶端還可 以接受數據。第二次揮手：服務器收到FIN包後，發送一個ACK給對方而且帶上本身的序列號seq,服務端就進入了CLOSE-WAIT（關閉等待）狀態。第三次揮手：服務器發送一個FIN，用來關閉服務器到客戶端的數據傳送,服務器就進入了LAST-ACK（最後確認）狀態，等待客戶端的確認第四次揮手：客戶端收到FIN後，發送一個ACK給服務器，客戶端就進入了TIME-WAIT（時間等待）狀態。通過2∗MSL（最長報文段壽命）的時間後，當客戶端撤銷相應的TCB後，才進入CLOSED狀態。服務器只要收到了客戶端發出的確認，當即進入CLOSED狀態。
TCP(傳輸控制協議)/UDP(用戶數據報協議)的區別
一、TCP面向鏈接（如打電話要先撥號創建鏈接）;UDP是無鏈接的，即發送數據以前不須要創建鏈接
二、TCP提供可靠的服務。也就是說，經過TCP鏈接傳送的數據，無差錯，不丟失，不重複，且按序到達;UDP盡最大努力交付，即不保 證可靠交付
3.TCP面向字節流，其實是TCP把數據當作一連串無結構的字節流;UDP是面向報文的每一條TCP鏈接只能是點到點的UDP支持一對一，一對多，多對一和多對多的交互通訊
4.TCP首部開銷20字節;UDP的首部開銷小，只有8個字節
5.TCP的邏輯通訊信道是全雙工的可靠信道，UDP則是不可靠信道
OSI：
應用層:FTP（文件傳輸協議）DNS（域名解析協議）SMTP（簡單郵件傳輸協議）POP3（簡單郵件下載協議）http:超文本傳輸協議、https：安全超文本傳輸協議
表示層 數據格式化，代碼轉換，數據加密 沒有協議
會話層 解除或創建與別的接點的聯繫 沒有協議
傳輸層 提供端對端的接口 TCP，UDP
網絡層 爲數據包選擇路由 IP，ICMP，RIP，OSPF，BGP，IGMP
數據鏈路層 傳輸有地址的幀以及錯誤檢測功能 ARP，RARP（地址解析協議，逆向地址xxxx）
物理層 以二進制數據形式在物理媒體上傳輸數據
TCP/IP五層協議：物理層、數據鏈路層、網絡層、傳輸層、 應用層。
進行和線程的區別：
進程是資源（CPU、內存等）分配的基本單位，它是程序執行時的一個實例。程序運行時系統就會建立一個進程，併爲它分配資源，而後把該進程放入進程就緒隊列，進程調度器選中它的時候就會爲它分配CPU時間，程序開始真正運行。
線程是程序執行時的最小單位，它是進程的一個執行流，是CPU調度和分派的基本單位，一個進程能夠由不少個線程組成，線程間共享進程的全部資源，每一個線程有本身的堆棧和局部變量。線程由CPU獨立調度執行，在多CPU環境下就容許多個線程同時運行。一樣多線程也能夠實現併發操做，每一個請求分配一個線程來處理。
區別：
- 進程是資源分配的最小單位，線程是程序執行的最小單位。
- 進程有本身的獨立地址空間，每啓動一個進程，系統就會爲它分配地址空間，創建數據表來維護代碼段、堆棧段和數據段，這種操做很是昂貴。而線程是共享進程中的數據的，使用相同的地址空間，所以CPU切換一個線程的花費遠比進程要小不少，同時建立一個線程的開銷也比進程要小不少。
- 線程之間的通訊更方便，同一進程下的線程共享全局變量、靜態變量等數據，而進程之間的通訊須要以通訊的方式（IPC)進行。不過如何處理好同步與互斥是編寫多線程程序的難點。
- 可是多進程程序更健壯，多線程程序只要有一個線程死掉，整個進程也死掉了，而一個進程死掉並不會對另一個進程形成影響，由於進程有本身獨立的地址空間。
Service Worker 一個介於客戶端和服務器之間的一個代理服務器。可以實現的最主要的功能——靜態資源緩存
四.原型原型鏈相關
1.字面量var o = {} var o1 = new Object({})
2.顯示的構造函數
3. var p = {} , var o = Object.create(p) ---> o.__proto__ == p
（普通函數.__proto__==Function.prototype,普通函數是Function的一個實例）
instanceof：判斷實例的__proto__和構造函數的prototype是否引用的同一個地址
new運算符
（1）建立一個新對象，繼承自構造函數的prototype
（2）構造函數執行，this和新對象相關聯（this指向這個新實例）
（3）若是構造函數返回一個對象（var o = Object.create(func.prototype)），那麼這個對會取代new出來的結果，若是沒有返回對象（沒有返回，或返回原始類型）那麼返回新建立的象
五.面向對象
function Animal1(name){
this.name = name
}
es6: class Anima2l { constructor(){this.name = name }複製代碼
var anim = new Animal1() / new Animal2複製代碼
（1）藉助構造函數實現繼承
function Parent1(){
this.name = ‘parent1’
}
function Child1(){
Parent1.call(this);
this.type = ‘child1’
}複製代碼
function Parent2() {
this.name = 'parent2';this.list = [1, 2, 3];
}function Child2() {
this.type = 'child2'
}
Child2.prototype = new Parent2();
Child2.prototype.constructor = Child2;
var s1 = new Child2();var s2 = new Child2();
s1.list.push(4);
console.log(s2.list) // [1,2,3,4]s1.__proto__ === s2.__proto__ //true複製代碼
function Parent3() {
this.name = 'parent3';
this.list = [1, 2, 3];
}
function Child3() {
Parent3.call(this);
this.type = 'child3'
}
//建立一個空對象，對象的原型指向
Child3.prototype = Object.create(Parent3.prototype)
Child3.prototype.constructor = Child3;複製代碼
（4）ES6的繼承
class Parent6{
constructor(name){
this.name = name}
say(){console.log(this.name)}}
class Son6 extends Parent6{
constructor(name,age){
super(name);this.age = age;
}}複製代碼
六.通訊類
1.什麼是同源策略及限制
（2）DOM沒法得到。
2.先後端如何通訊
Ajax(同源下)
Web Socket CROS
3.如何建立Ajax
var xhr = new XMLHttpRequest(); xhr.open('GET', url, true); xhr.send(); xhr.onreadystatechange(function () { if (xhr.status == 4 && (xhr.state == 200 || xhr.state == 206)) { } else { } }) // Promise封裝json
const getJson = function (url) {
const promise = new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.onreadystatechange = function () {
if (xhr.status == 4 && (xhr.state == 200 || xhr.state == 206)) {
resolve(this.response);
} else {
reject(new Error(this.statusText))
}
}
xhr.send();
});
return promise;
}
getJSON("/posts.json").then(function (json) {
console.log('Contents: ', json);
}, function (error) {
console.error('出錯了', error);
});
複製代碼
4.跨域的幾種方式
JSONP
function jsonp(url, callback) {
var oScript = document.createElement('script');
//判斷有沒有傳第二個參數
if (typeof callback === 'function') {
url = url.split('?')[0];
var fnName = 'JsonpFn' + (new Date()).getTime();
url += '?callback=' + fnName;
window[fnName] = callback;
}
oScript.src = url;
document.body.appendChild(oScript);
document.body.removeChild(oScript)
}
var url = 'http://localhost/JSONP/php/jsonp.php?callback'
jsonp(url, function (data) {
console.log('匿名函數', data)
})
複製代碼
HASH(#後面的東西,hash改變，頁面不會刷新)
postMessage
WebSoket
CROS(支持跨域的Ajax)
5.什麼是cookie？cookie是如何操做的，與session的區別？
---------------------
* 首先由服務器經過響應頭把Cookie傳輸給客戶端，客戶端會將Cookie保存起來。
* 當客戶端再次請求同一服務器時，客戶端會在請求頭中添加該服務器保存的Cookie，發送給服務器。
* Cookie就是服務器保存在客戶端的數據！
* Cookie就是一個鍵值對！！！
cookie.setMaxAge(60*60);//過時時間爲1小時
---------------------
Cookie是把用戶的數據寫給用戶的瀏覽器。
Session技術把用戶的數據寫到用戶獨佔的session中。
Session對象由服務器建立，開發人員能夠調用request對象的getSession方法獲得session對象
6.1. //字符串轉對象 JSON.parse(json)
// 對象轉字符串 JSON.stringify(json)
七.安全相關
CSRF:跨站請求僞造
XSS:跨域腳本攻擊（反射型（非持久型）、存儲型（持久型）、基於DOM。）
1.HttpOnly防止劫取Cookie
2.輸入檢查
3.輸出檢查
八.渲染機制，js運行機制，頁面性能，錯誤監控
DOCTYPE：聲明文檔類型DTD <!DOCTYPE html> 4.1的嚴格模式（不能使用廢棄元素）和非嚴格模式
js運行機制console.log(‘a’);setTimeout(()=>{console.log(‘b’)},0);while(1){}/只輸出a異步任務的放入時間和執行時間
1.資源壓縮合並，減小http請求(1.精靈圖 2.內聯圖片 & base64 3. 合併腳本和樣式表)
nodejs 提供了html-minifier工具(或者使用在線網站進行文件合併)
html壓縮 css壓縮 js壓縮（壓縮無用的空格 css語義合併 無效的字符）
2.使用CDN（內容分發網絡）經過將靜態資源(例如javascript，css，圖片）緩存到離用戶很近的相同網絡運營商的CDN節點上，不但能提高用戶的訪問速度，還能節省服務器的帶寬消耗，下降負載。
3.非核心代碼異步加載 動態腳本加載,defer,async(只適用於外部腳本，腳本會被延遲到整個頁面都解析完畢後再運行：defer屬性，至關於告訴瀏覽器當即下載，但延遲執行它是按照加載順序執行腳本的。標記爲async的腳本並不保證按照它們的前後順序執行,只要它加載完了就會馬上執行)
4.利用瀏覽器緩存
5.預解析DNS：預先告知瀏覽器某些資源可能在未來會被使用到。 經過 DNS 預解析來告訴瀏覽器將來咱們可能從某個特定的 URL 獲取資源，當瀏覽器真正使用到該域中的某個資源時就能夠儘快地完成 DNS 解析。
---------------------------------------------------------------------------------------------
content 方面
- 減小 HTTP 請求：合併文件、CSS 精靈、inline Image
- 減小 DNS 查詢：DNS 查詢完成以前瀏覽器不能從這個主機下載任何任何文件。方法：DNS 緩存、將資源分佈到恰當數量的主機名，平衡並行下載和 DNS 查詢
- 避免重定向：多餘的中間訪問
- 使 Ajax 可緩存
- 非必須組件延遲加載
- 將來所需組件預加載
- 減小 DOM 元素數量
- 將資源放到不一樣的域下：瀏覽器同時從一個域下載資源的數目有限，增長域能夠提升並行下載量
- 減小 iframe 數量
- 不要 404
Server 方面
- 使用 CDN
- 添加 Expires 或者 Cache-Control 響應頭
- 對組件使用 Gzip 壓縮
- 配置 ETag
- Flush Buffer Early
- Ajax 使用 GET 進行請求
- 避免空 src 的 img 標籤
Cookie 方面
- 減少 cookie 大小
- 引入資源的域名不要包含 cookie
css 方面
- 將樣式表放到頁面頂部
- 不使用 CSS 表達式
- 使用不使用@import
- 不使用 IE 的 Filter
Javascript 方面
- 將腳本放到頁面底部
- 將 javascript 和 css 從外部引入
- 壓縮 javascript 和 css
- 刪除不須要的腳本
- 減小 DOM 訪問
- 合理設計事件監聽器
圖片方面
- 優化圖片：根據實際顏色須要選擇色深、壓縮
- 優化 css 精靈
- 不要在 HTML 中拉伸圖片
- 保證 favicon.ico 小而且可緩存
錯誤監控
try..catch window.onerrer
object.onerror
document.getElementById("debounce").addEventListener("click",debounce(sayDebounce));
function debounce(fn) {
let timeout = null;
return function () {
clearTimeout(timeout);
timeout = setTimeout(() => {
fn.apply(this, arguments);}, 1000);};}
function sayDebounce() {console.log("防抖成功！");}
//節流function throttle(func) {
var canRun = true;return function () {
if(canRun == false)return ;
canRun = false;
setTimeout(()=>{func.apply(this,arguments);canRun = true;},1000);}}複製代碼
九.垃圾回收：
2.閉包帶來的內存泄漏
3.用一個變量暫存節點,接下來使用的時候就不從DOM中去獲取.可是在移除DOM節點的時候卻忘記了解除暫存的變量對DOM節點的引用,也會形成內存泄漏
4.沒有清理定時器。
十.js變量及存儲：
存放在堆內存中（存儲的值大小不定，可動態調整，空間較大，運行效率低，沒法直接操做內部存儲，使用引用地址存取，經過代碼進行分配空間）
ECMAScript中全部的函數的參數都是按值傳遞的；
null和undefined的區別：
null表示把一個變量賦值爲null,表示爲空值，null轉換爲數字爲0
undefined表示沒有被賦值的屬性，就等於undefined，undefined轉換爲數字爲NaN
typeof null ->Object typeof undefined -> undefiend
0.1+0.2 !== 0.3?
裝箱：把基本數據類型轉換爲對應的包裝類型。
十一.DOM相關
事件流
事件流又稱爲事件傳播，DOM2級事件規定的事件流包括三個階段：事件捕獲階段(capture phase)、處於目標階段(target phase)和事件冒泡階段(bubbling phase)。
<body>
<!--行內綁定：腳本模型-->
<button onclick="javascrpt:alert('Hello')">Hello1</button>
<!--內聯模型-->
<button onclick="showHello()">Hello2</button>
<!--動態綁定-->
<button id="btn3">Hello3</button>
</body>
<script>
/*DOM0：同一個元素，同類事件只能添加一個，若是添加多個，
* 後面添加的會覆蓋以前添加的*/
function shoeHello() {
alert("Hello");
}
var btn3 = document.getElementById("btn3");
btn3.onclick = function () {
alert("Hello");
}
/*DOM2:能夠給同一個元素添加多個同類事件*/
btn3.addEventListener("click",function () {
alert("hello1");
});
btn3.addEventListener("click",function () {
alert("hello2");
})
if (btn3.attachEvent){
/*IE*/
btn3.attachEvent("onclick",function () {
alert("IE Hello1");
})
}else {
/*W3C*/
btn3.addEventListener("click",function () {
alert("W3C Hello");
})
}
</script>複製代碼
事件級別
DOM0：element.onclick = function(){}
DOM2：element.addEventListener(‘click’,function(){}),false)//第三個參數：冒泡仍是捕獲
DOM3：element.addEventListener(‘click’,function(){}) //默認false爲冒泡
事件委託
事件委託就是利用事件冒泡，只指定一個事件處理程序，就能夠管理某一類型的全部事件.
在綁定大量事件的時候每每選擇事件委託。
<ul id="parent">
<li class="child">one</li>
<li class="child">two</li>
<li class="child">three</li>
...
</ul>
<script type="text/javascript">
//父元素
var dom= document.getElementById('parent');
//父元素綁定事件，代理子元素的點擊事件
dom.onclick= function(event) {
var event= event || window.event;
var curTarget= event.target || event.srcElement;
if (curTarget.tagName.toLowerCase() == 'li') {
//事件處理
}
}
</script>複製代碼
優勢:
- 節省內存佔用，減小事件註冊
- 新增子對象時無需再次對其綁定事件，適合動態添加元素
侷限性:
- focus、blur 之類的事件自己沒有事件冒泡機制，因此沒法委託
- mousemove、mouseout 這樣的事件，雖然有事件冒泡，可是隻能不斷經過位置去計算定位，對性能消耗高，不適合事件委託
Event對象：
DocumentFragment：文檔片斷接口，表示一個沒有父級文件的最小文檔對象
var fragment = document.createDocumentFragment();
for (let i = 0;i<10;i++){
let node = document.createElement("p");
node.innerHTML = i;
fragment.appendChild(node);
}
document.body.appendChild(fragment);複製代碼
十二.前端須要注意哪些 SEO
- 合理的 title、description、keywords：搜索對着三項的權重逐個減少，title 值強調重點便可，重要關鍵詞出現不要超過 2 次，並且要靠前，不一樣頁面 title 要有所不一樣；description 把頁面內容高度歸納，長度合適，不可過度堆砌關鍵詞，不一樣頁面 description 有所不一樣；keywords 列舉出重要關鍵詞便可
- 語義化的 HTML 代碼，符合 W3C 規範：語義化代碼讓搜索引擎容易理解網頁
- 重要內容 HTML 代碼放在最前：搜索引擎抓取 HTML 順序是從上到下，有的搜索引擎對抓取長度有限制，保證重要內容必定會被抓取
- 重要內容不要用 js 輸出：爬蟲不會執行 js 獲取內容
- 少用 iframe：搜索引擎不會抓取 iframe 中的內容
- 非裝飾性圖片必須加 alt
- 提升網站速度：網站速度是搜索引擎排序的一個重要指標
css hack 原理及經常使用 hack
原理：利用不一樣瀏覽器對 CSS 的支持和解析結果不同編寫針對特定瀏覽器樣式。常見的 hack 有 1）屬性 hack。2）選擇器 hack。3）IE 條件註釋
- IE 條件註釋：適用於[IE5, IE9]常見格式以下
<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->複製代碼
十三.html5相關
------------------------------------------------------------------------------------------------
一、Doctype做用？標準模式與兼容模式有什麼區別？
- 聲明位於HTML文檔的第一行，處於標籤以前。用來告知瀏覽器的解析器用什麼文檔標準解析這個文檔。DOCTYPE不存在或格式不正確會致使文檔以兼容模式呈現
- 標準模式：排版和js運做方式都是以該瀏覽器支持的最高標準運行。
- 兼容模式：頁面以寬鬆的向後兼容的方式顯示，模擬老式瀏覽器的行爲以防止站點沒法運行。
- 例子：一、width不一樣 在嚴格模式中，width是內容寬度(content)，可是在兼容模式中，width是(元素的實際寬度),(怪異盒模型是margin以外是width的範圍)
- ------------------------------------------------------------------------------------------
<!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>
- HTML4.01 strict：不容許使用表現性、廢棄元素（如 font）以及 frameset。聲明：
二、html5爲何只須要寫
HTML5不基於SGML，所以不須要對DTD進行引用，可是須要doctype來規範瀏覽器的行爲
因此，html5只有一種：<!DOCTYPE> 可是html4.01有三種，分別是strict（不包含展現性和棄用元素，不容許框架集）、transitional（包含展現性和棄用元素，不容許框架集）、frameset（容許框架集）
3.html5有哪些新特性、移除了那些元素
繪畫canvas
用於媒介回放的video和audio元素
本地離線存儲localStorage，長期存儲，瀏覽器關閉以後數據不丟失
sessionStorage的數據在瀏覽器關閉後自動刪除
語意化更好的內容元素，好比 article、footer、header、nav、section
表單控件，calendar、date、time、email、url、search;
新的技術webworker, websocket, Geolocation;
移除的元素：
純表現的元素：basefont，big，center，font, s，strike，tt，u;
對可用性產生負面影響的元素：frame，frameset，noframes；複製代碼
4.iframe有那些缺點？
- iframe會阻塞主頁面的Onload事件；
- 搜索引擎的檢索程序沒法解讀這種頁面，不利於SEO;
- iframe和主頁面共享鏈接池，而瀏覽器對相同域的鏈接有限制，因此會影響頁面的並行加載。
- 使用iframe以前須要考慮這兩個缺點。若是須要使用iframe，最好是經過javascript
- 動態給iframe添加src屬性值，這樣能夠繞開以上兩個問題。
6.display: none;與visibility: hidden;的區別
聯繫：它們都能讓元素不可見
區別：
- display:none;會讓元素徹底從渲染樹中消失，渲染的時候不佔據任何空間；visibility: hidden;不會讓元素從渲染樹消失，渲染時元素繼續佔據空間，只是內容不可見。
- display: none;是非繼承屬性，子孫節點消失因爲元素從渲染樹消失形成，經過修改子孫節點屬性沒法顯示；visibility: hidden;是繼承屬性，子孫節點因爲繼承了 hidden 而消失，經過設置 visibility: visible，可讓子孫節點顯示。
- 修改常規流中元素的 display 一般會形成文檔重排。修改 visibility 屬性只會形成本元素的重繪。
- 讀屏器不會讀取 display: none;元素內容；會讀取 visibility: hidden;元素內容
7.什麼是 FOUC?如何避免
Flash Of Unstyled Content：用戶定義樣式表加載以前瀏覽器使用默認樣式顯示文檔，用戶樣式加載渲染以後再重新顯示文檔，形成頁面閃爍。解決方法：把樣式表放到文檔的head
8.如何建立塊級格式化上下文(block formatting context),BFC 有什麼用
建立規則：
- 根元素
- 浮動元素（
float不是none） - 絕對定位元素（
position取值爲absolute或fixed） display取值爲inline-block,table-cell,table-caption,flex,inline-flex,grid之一的元素overflow不是visible的元素
做用：
- BFC這個元素的垂直方向會發生重疊
- BFC區域不會與浮動元素的box重疊
- BFC在頁面裏是一個獨立的容器，外面的元素不會影響裏面的元素
- 計算BFC高度時，浮動元素也會參與計算
9.外邊距摺疊(collapsing margins)
毗鄰的兩個或多個margin會合併成一個 margin，叫作外邊距摺疊。規則以下：
- 兩個或多個毗鄰的普通流中的塊元素垂直方向上的 margin 會摺疊
- 浮動元素/inline-block 元素/絕對定位元素的 margin 不會和垂直方向上的其餘元素的 margin 摺疊
- 建立了塊級格式化上下文的元素，不會和它的子元素髮生 margin 摺疊
- 元素自身的 margin-bottom 和 margin-top 相鄰時也會摺疊
10.meta標籤
meta經常使用於定義頁面的說明，關鍵字，最後修改日期，和其它的元數據。這些元數據將服務於瀏覽器（如何佈局或重載頁面）搜索引擎和其它網絡服務。<meta name=" " content=" ">
1. keywords 用於告訴搜索引擎，你網頁的關鍵字
<meta name="keywords" content="這是要搜索的關鍵字">
複製代碼
2.description用於告訴搜索引擎，你網站的主要內容
<meta name="description" content="網站的主要內容"> 複製代碼
3.author -- >做者
4.Set-Cookie(cookie設定)
說明：若是網頁過時。那麼這個網頁存在本地的cookies也會被自動刪除。
<meta http-equiv="Set-Cookie" content="name, date"> //格式
<meta http-equiv="Set-Cookie" content="User=Lxxyx; path=/; expires=Sunday, 10-Jan-16 10:00:00 GMT"> //具體範例複製代碼
5.viewport移動端適配
<meta name="viewport" content="width=device-width, initial-scale=1.0">複製代碼
十四.src和href的區別？
src是指向外部資源的位置，指向的內容會嵌入到文檔中當前標籤所在的位置，在請求src資源時會將其指向的資源下載並應用到文檔內，如js腳本，img圖片和frame等元素。當瀏覽器解析到該元素時，會暫停其餘資源的下載和處理，知道將該資源加載、編譯、執行完畢，因此通常js腳本會放在底部而不是頭部。
href是指向網絡資源所在位置（的超連接），用來創建和當前元素或文檔之間的鏈接，當瀏覽器識別到它他指向的文件時，就會並行下載資源，不會中止對當前文檔的處理
十五.輸入URL到頁面解析的過程：
dns解析，TCP連接，發送http請求，服務器響應請求並返回http報文，瀏覽器渲染界面，連接結束。
-處理HTML標記並構建DOM樹。
-處理CSS標記並構建CSSOM樹。
-將DOM與CSSOM合併成一個渲染樹。(render tree)
-根據渲染樹來佈局，以計算每一個節點的幾何信息。（生成佈局）
-將各個節點繪製到屏幕上。
儘可能使用class進行樣式修改，而不是直接操做樣式
減小DOM的操做，可以使用字符串一次性插入
十六. cookies，sessionStorage 和 localStorage 的區別？
cookie是網站爲了標示用戶身份而儲存在用戶本地終端（Client Side）上的數據（一般通過加密）。
- cookie數據始終在同源的http請求中攜帶（即便不須要），記會在瀏覽器和服務器間來回傳遞。
- sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。
存儲大小：
- cookie數據大小不能超過4k。
- sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，能夠達到5M或更大。
有期時間：
- localStorage 存儲持久數據，瀏覽器關閉後數據不丟失除非主動刪除數據；
- sessionStorage 數據在當前瀏覽器窗口關閉後自動刪除。
- cookie 設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉
十七.移動端適配問題
1.PPI | DPI，屏幕每英寸的像素數量，即像素密度。
公式： DPI= 對角線分辨率 / 屏幕尺寸(勾股定理求對角線分辨率)
2.設備像素比dpr DPR = 設備像素 / CSS像素
設備像素（物理像素）和CSS像素的比值(設備獨立像素)。
DPR也有對應的javascript屬性window.devicePixelRatio
3.meta標籤 <meta name="viewport" content="name1=value1,name2=value2">
| Name | Value | Description |
|---|---|---|
| width | 正整數或device-width | 設置佈局視口的寬度，單位爲像素 |
| height | 正整數或device-height | 定義佈局視口的高度，單位爲像素（未實行） |
| initial-scale | [0.0-10.0] | 定義初始頁面（佈局視口）縮放值 |
| minimum-scale | [0.0-10.0] | 定義用戶縮小最小比例，它必須小於或等於maximum-scale設置 |
| maximum-scale | [0.0-10.0] | 定義用戶放大最大比例，它必須大於或等於minimum-scale設置 |
| user-scalable | yes/no | 定義是否容許用戶手動縮放頁面，默認值yes |
問題：
1.圖片模糊問題
緣由：位圖由一個個像素點構成，在dpr > 1的屏幕上，位圖的一個像素可能由多個物理像素來渲染，然而這些物理像素點並不能被準確的分配上對應位圖像素的顏色，只能取近似值。
解決：儘量讓一個屏幕像素來渲染一個圖片像素，因此，針對不一樣DPR的屏幕，咱們須要展現不一樣分辨率的圖片。（1） media查詢（只適用於背景圖）
（2）image-set : background-image: image-set( url(test.png) 1x, url(test-2x.png) 2x );
(只適用於背景圖)複製代碼
（3）img標籤的srcset屬性：<img src="conardLi_1x.png" srcset=" conardLi_2x.png 2x, conardLi_3x.png 3x">
（4）SVG的全稱是可縮放矢量圖，文本文件，放大不會失真
2.橫屏檢測
//js方法
window.addEventListener("resize", ()=>{
if (window.orientation === 180 || window.orientation === 0) {
// 正常方向或屏幕旋轉180度
console.log('豎屏');
};
if (window.orientation === 90 || window.orientation === -90 ){
// 屏幕順時鐘旋轉90度或屏幕逆時針旋轉90度
console.log('橫屏');
}
});
//css方法
window.addEventListener("resize", ()=>{
if (window.orientation === 180 || window.orientation === 0) {
// 正常方向或屏幕旋轉180度
console.log('豎屏');
};
if (window.orientation === 90 || window.orientation === -90 ){
// 屏幕順時鐘旋轉90度或屏幕逆時針旋轉90度
console.log('橫屏');
}
});
複製代碼
3.vw,vh
vw(Viewport's width)：1vw等於視覺視口的1%vh(Viewport's height):1vh爲視覺視口高度的1%vmin:vw和vh中的較小值vmax: 選取vw和vh中的較大值
缺點：
px轉換成vw不必定能徹底整除，所以有必定的像素差。- 好比當容器使用
vw，margin採用px時，很容易形成總體寬度超過100vw，從而影響佈局效果。固然咱們也是能夠避免的，例如使用padding代替margin，結合calc()函數使用
4. 1px問題
（1）border-image (2)background-image (3)僞類 + transform（4）svg(5)viewport
.border_1px:before{
content: '';
position: absolute;
top: 0;
height: 1px;
width: 100%;
background-color: #000;
transform-origin: 50% 0%;
}
@media only screen and (-webkit-min-device-pixel-ratio:2){
.border_1px:before{
transform: scaleY(0.5);
}
}
@media only screen and (-webkit-min-device-pixel-ratio:3){
.border_1px:before{
transform: scaleY(0.33);
}
}複製代碼
十八.if中的函數提高
(function(){
console.log(a);
if(false){
console.log(a());
function a(){
console.log('true');
}
}
a();
})();
複製代碼
chrome運行結果：
undefined
Uncaught TypeError: a is not a function
函數提高發生在全部代碼執行以前，因此，儘管a 的定義過程寫在了 if 分支中，可是理論上或者說ES6以前， 它是不會影響函數聲明提高的，而如今，在做用域頂部 console.log(a) 輸出 undefined , 而執行 a() 發生TypeError。 咱們稍做以下修改：
(function(){
console.log(a);
if(true){
console.log(a());
function a(){
console.log('true');
}
}
a();
})();
複製代碼
chrome運行結果：
undefined
true
true
再作一次修改：
(function(){
'use strict';
if(true){
console.log(a());
function a(){
console.log('true');
}
}
console.log(a);
})();
複製代碼
chrome運行結果：
true
Uncaught ReferenceError: a is not defined
現代瀏覽器的JS引擎已經支持塊做用域了， 只是在非嚴格模式下，只有函數名變量聲明會提高到當前閉包的頂部，這也是無論if 分支是否成立，在它以前 console.log(a) 都會輸出 undefined 的緣由。 而函數定義提高只提高到了if 的塊做用域內，這就是在if 爲真時，在if塊內且在函數聲明以前 console.log(a()) 會輸出 true 的緣由。 可是在嚴格模式下， 函數名變量的提高也只提高到了if 塊的頂部。這就是在嚴格模式下，在if 塊外部對a 進行RHS引用是報 TypeError 的緣由。
十九.ES6新增的語法
1. let const
2.模板字符串
3.箭頭函數
4.symbol
5.set,map
6.promise
7.async await
8.class
9.擴展運算符
10.結構解析
11.函數默認值
12.for of
二十.git的常見命令
1.分佈式開發，多我的員協調工做 2.有效的監聽誰作的修改 3.本地 <->遠程
------------------------------------------------------------------------------------------------
HR面
１.職業競爭力
２.職業規劃
（１）但願本身作什麼，但願公司給你一個什麼樣的平臺
（２）你喜歡什麼樣的公司
（３）你但願在短時間內達到什麼水平
- 1. 2018web前端校招面試總結
- 2. 2019校招 前端面試題總結
- 3. 前端面試題(校招)
- 4. 校招-順豐前端面經總結
- 5. 面向校招 HTTP與前端緩存知識點總結
- 6. 面向校招：HTTP與前端緩存知識點總結
- 7. 校招前端筆試面試回顧
- 8. 2019 秋招前端面試總結
- 9. 前端秋招面試總結
- 10. 前端校招準備--HTTP相關面試題總結
- 更多相關文章...
- • PHP 面向對象 - PHP教程
- • Lua 面向對象 - Lua 教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • 算法總結-雙指針
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 2018web前端校招面試總結
- 2. 2019校招 前端面試題總結
- 3. 前端面試題(校招)
- 4. 校招-順豐前端面經總結
- 5. 面向校招 HTTP與前端緩存知識點總結
- 6. 面向校招：HTTP與前端緩存知識點總結
- 7. 校招前端筆試面試回顧
- 8. 2019 秋招前端面試總結
- 9. 前端秋招面試總結
- 10. 前端校招準備--HTTP相關面試題總結