js

1.介紹js的基本資料型別，

（1）最基本型：Boolean、Number、String
（2）參考型別：object、Array、function
（3）特殊型別：Undefined、Null
（4）ES6 新增：Symbol(創建后獨一無二且不可變的資料型別 )

延升：如何判斷資料型別？

typeof 運算子
instanceof 運算子
Object.prototype.toString 方法

typeof 123          // "number"
typeof '123'        // "string"
typeof false        // "boolean"
typeof [1,2,3,4]    // "object"
typeof {name:'john', age:34}    // "object"
typeof null         // "object"
typeof undefined    // "undefined"
typeof function f() {}  // "function"

2.介紹js有哪些內置物件？

資料封裝類物件：Object、Array、Boolean、Number 和 String
其他物件：Function、Arguments、Math、Date、RegExp、Error

3.說幾條寫JavaScript的基本規范？

（1）不要在同一行宣告多個變數；
（2）請使用 === | !== 來比較true/false或者數值；
（3）使用物件字面量替代new Array這種形式；
（4）不要使用全域函式；
（5）Switch陳述句必須帶有default分支；
（6）函式不應該有時候有回傳值，有時候沒有回傳值；
（7）For回圈必須使用大括號；
（8）If陳述句必須使用大括號；
（9）for-in回圈中的變數應該使用var關鍵字明確限定作用域，從而避免作用域污染，

4.JavaScript原型，原型鏈？有什么特點？

定義：

每個物件都會在其內部初始化一個屬性，就是prototype(原型)，當我們訪問一個物件的屬性時，如果這個物件內部不存在這個屬性，那么他就會去prototype里找這個屬性，這個prototype又會有自己的prototype，于是就這樣一直找下去，也就是我們平時所說的原型鏈的概念，

關系： instance.constructor.prototype = instance.proto

特點：

JavaScript物件是通過參考來傳遞的，我們創建的每個新物件物體中并沒有一份屬于自己的原型副本，當我們修改原型時，與之相關的物件也會繼承這一改變，
當我們需要一個屬性的時，Javascript引擎會先看當前物件中是否有這個屬性，如果沒有的話，
就會查找他的Prototype物件是否有這個屬性，如此遞推下去，一直檢索到 Object 內建物件，

function Func(){}
Func.prototype.name = "Sean";
Func.prototype.getInfo = function() {
    return this.name;
}
var person = new Func();  //參考var person = Object.create(oldObject);
console.log(person.getInfo());  // "Sean" 它擁有了Func的屬性和方法
console.log(Func.prototype);   // Func { name="Sean", getInfo=function()}

5.JavaScript有幾種型別的值？，你能畫一下他們的記憶體圖嗎？

（1）堆疊：原始資料型別（Undefined，Null，Boolean，Number、String）
（2）堆：參考資料型別（物件、陣列和函式）

區別：存盤位置不同；

原始資料型別直接存盤在堆疊(stack)中的簡單資料段，占據空間小、大小固定，屬于被頻繁使用資料，所以放入堆疊中存盤；
參考資料型別存盤在堆(heap)中的物件,占據空間大、大小不固定，如果存盤在堆疊中，將會影響程式運行的性能；參考資料型別在堆疊中存盤了指標，該指標指向堆中該物體的起始地址，當解釋器尋找參考值時，會首先檢索其在堆疊中的地址，取得地址后從堆中獲得物體，

記憶體圖：

6.如何實作陣列的隨機排序？

var arr = [1,2,3,4,5,6,7,8,9,10];

方法一：

function randSort1(arr){
    for(var i = 0,len = arr.length;i < len; i++ ){
        var rand = parseInt(Math.random()*len);
        var temp = arr[rand];
        arr[rand] = arr[i];
        arr[i] = temp;
    }
    return arr;
}

方法二：

function randSort2(arr){
    var mixedArray = [];
    while(arr.length > 0){
        var randomIndex = parseInt(Math.random()*arr.length);
        mixedArray.push(arr[randomIndex]);
        arr.splice(randomIndex, 1);
    }
    return mixedArray;
}

方法三：

arr.sort(function(){
    return Math.random() - 0.5;
})

7.Javascript如何實作繼承？

構造繼承
原型繼承
實體繼承
拷貝繼承

原型prototype機制或apply和call方法去實作較簡單，建議使用建構式與原型混合方式，

function Parent(){
    this.name = 'wang';
}

function Child(){
    this.age = 28;
}
Child.prototype = new Parent(); //繼承了Parent，通過原型

var demo = new Child();
console.log(demo.age); // 28
console.log(demo.name); //wang

8.javascript創建物件的幾種方式？

（1）物件字面量的方式

person = {
    firstname:"Mark",
    lastname:"Yun",
    age:25,
    eyecolor:"black"
};

（2）用function來模擬無參的建構式

function Person(){}
var person = new Person();//定義一個function，如果使用new"實體化",該function可以看作是一個Class
person.name = "Mark";
person.age = "25";
person.work = function(){
    alert(person.name + " hello...");
}
person.work(); //Mark hello...

（3）用function來模擬參建構式來實作（用this關鍵字定義構造的背景關系屬性）

function Pet(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(); // 我叫麥兜,我喜歡coding,是個程式員

（4）用工廠方式來創建（內置物件）

var wcDog = new Object();
wcDog.name = "旺財";
wcDog.age = 3;
wcDog.work = function(){
    alert("我是"+ wcDog.name +",汪汪汪......");
}
wcDog.work(); //我是旺財,汪汪汪......

（5）用原型方式來創建

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

（6）用混合方式來創建

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(); //我是凱美瑞，我現在賣27萬元

9.Javascript作用鏈域?

全域函式無法查看區域函式的內部細節，但區域函式可以查看其上層的函式細節，直至全域細節，當需要從區域函式查找某一屬性或方法時，如果當前作用域沒有找到，就會上溯到上層作用域查找，直至全域函式，這種組織形式就是作用域鏈，

10.談談This物件的理解，

this總是指向函式的直接呼叫者（而非間接呼叫者）；
全域環境下，this始終指向的是window物件；

<script>
    console.log(this);  //指向window物件
</script>

在全域作用域下直接呼叫函式，this指向window；

function func(){
    console.log(this); //this指向的還是window物件
}
func();

物件函式呼叫，哪個物件呼叫就指向哪個物件；

<script>
    var btnOK = document.getElementById("btnOK");
    btnOK.οnclick = function(){
        console.log(this); //this指向的是btnOK物件
    }
</script>

如果有new關鍵字，this指向new出來的那個物件；

var Show = function(){
    this.myName = "Mr.Cao"; //這里的this指向的是obj物件
}
var obj = new Show();

使用call或apply改變this的指向

var Go = function(){
    this.address = "深圳";
}
var Show = function(){
    console.log(this.address); //深圳
}
var go = new Go();
Show.call(go); //改變Show方法的this指向go物件

箭頭函式體內的this物件，就是定義時所在的物件，而不是使用時所在的物件，
在事件中，this指向觸發這個事件的物件，特殊的是，IE中的attachEvent中的this總是指向全域物件Window；

11.eval是做什么的？

它的功能是把對應的字串決議成JS代碼并運行；
應該避免使用eval，不安全，非常耗性能（2次，一次決議成js陳述句，一次執行），
由JSON字串轉換為JSON物件的時候可以用eval，var obj =eval('('+ str +')');

12.什么是window物件？什么是document物件？

window物件是指瀏覽器打開的視窗，
document物件是Documentd物件（HTML 檔案物件）的一個只讀參考，window物件的一個屬性，

13.null，undefined 的區別？

null 表示一個物件是“沒有值”的值，也就是值為“空”；
undefined 表示一個變數宣告了沒有初始化(賦值)；
undefined不是一個有效的JSON，而null是；
undefined的型別(typeof)是undefined；
null的型別(typeof)是object；

注意：在驗證null時，一定要使用　=== ，因為 == 無法分別 null 和　undefined

null == undefined  // true
null === undefined // false

14.寫一個通用的事件偵聽器函式，

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.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 = https://www.cnblogs.com/hongplum/archive/2021/04/15/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;
 	}
 };

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

（1）我們在網頁中的某個操作（有的操作對應多個事件），例如：當我們點擊一個按鈕就會產生一個事件，是可以被 JavaScript 偵測到的行為，
（2）事件處理機制：IE是事件冒泡、Firefox同時支持兩種事件模型，也就是：捕獲型事件和冒泡型事件；
（3）ev.stopPropagation();（舊ie的方法 ev.cancelBubble = true;）

16.什么是閉包（closure），為什么要用它？

閉包是指有權訪問另一個函式作用域中變數的函式，創建閉包的最常見的方式就是在一個函式內創建另一個函式，通過另一個函式訪問這個函式的區域變數,利用閉包可以突破作用鏈域，將函式內部的變數和方法傳遞到外部，

閉包的特性：

函式內再嵌套函式
內部函式可以參考外層的引數和變數
引數和變數不會被垃圾回識訓制回收

用途：

//li節點的onclick事件都能正確的彈出當前被點擊的li索引
<ul id="testUL">
    <li> index = 0</li>
    <li> index = 1</li>
    <li> index = 2</li>
    <li> index = 3</li>
</ul>

<script type="text/javascript">
    var nodes = document.getElementsByTagName("li");
    for(i = 0;i<nodes.length;i+= 1){
        nodes[i].onclick = (function(i){ //不用閉包的話，值每次都是4
            return function() {
                console.log(i); //0 1 2 3
            } 
        })(i);
    }
</script>

function say667() {
 	var num = 666;
 	var sayNumber = function() {
 		console.log(num);
 	}
 	num++;
 	return sayNumber;
}

var sayNumber = say667();
sayNumber(); //667

執行say667()后,say667()閉包內部變數會存在,而閉包內部函式的內部變數不會存在，使得Javascript的垃圾回識訓制GC不會識訓say667()所占用的資源；因為say667()的內部函式的執行需要依賴say667()中的變數；這就是是閉包作用，

17.javascript 代碼中的"use strict;"是什么意思？使用它區別是什么？

use strict是一種ECMAscript 5 添加的（嚴格）運行模式,這種模式使得 Javascript 在更嚴格的條件下運行，使JS編碼更加規范化的模式,消除Javascript語法的一些不合理、不嚴謹之處，減少一些怪異行為，

默認支持的糟糕特性都會被禁用，比如不能用with，也不能在意外的情況下給全域變數賦值；
全域變數的顯示宣告,函式必須宣告在頂層，不允許在非函式代碼塊內宣告函式,arguments.callee也不允許使用；
消除代碼運行的一些不安全之處，保證代碼運行的安全，限制函式中的arguments修改，嚴格模式下的eval函式的行為和非嚴格模式的也不相同；
提高編譯器效率，增加運行速度；
為未來新版本的Javascript標準化做鋪墊，

18.new運算子具體干了什么呢？

（1）創建一個空物件，并且 this 變數參考該物件，同時還繼承了該函式的原型，
（2）屬性和方法被加入到 this 參考的物件中，
（3）新創建的物件由 this 所參考，并且最后隱式的回傳 this ，

var obj  = {};
obj.__proto__ = Base.prototype;
Base.call(obj);

19.Javascript中，有一個函式，執行時物件查找時，永遠不會去查找原型，這個函式是？

hasOwnProperty

javaScript中hasOwnProperty函式方法是回傳一個布林值，指出一個物件是否具有指定名稱的屬性，此方法無法檢查該物件的原型鏈中是否具有該屬性；該屬性必須是物件本身的一個成員，

使用方法：

object.hasOwnProperty(proName)
// 其中引數object是必選項，一個物件的實體，
// proName是必選項，一個屬性名稱的字串值，

如果 object 具有指定名稱的屬性，那么JavaScript中hasOwnProperty函式方法回傳 true，反之則回傳 false，

20.js延遲加載的方式有哪些？

defer和async
動態創建DOM方式（用得最多）
按需異步載入js

21.Ajax 是什么? 如何創建一個Ajax？

ajax的全稱：Asynchronous Javascript And XML，
異步傳輸 + js + xml ，
所謂異步，簡單解釋就是：向服務器發送請求的時候，我們不必等待結果，而是可以同時做其他的事情，等到有了結果它自己會根據設定進行后續操作，與此同時，頁面是不會發生整頁重繪的，提高了用戶體驗，

（1）創建XMLHttpRequest物件,也就是創建一個異步呼叫物件
（2）創建一個新的HTTP請求,并指定該HTTP請求的方法、URL及驗證資訊
（3）設定回應HTTP請求狀態變化的函式
（4）發送HTTP請求
（5）獲取異步呼叫回傳的資料
（6）使用JavaScript和DOM實作區域重繪

22.Ajax 如何解決瀏覽器快取問題？

（1）在ajax發送請求前加上 anyAjaxObj.setRequestHeader("If-Modified-Since","0")；
（2）在ajax發送請求前加上 anyAjaxObj.setRequestHeader("Cache-Control","no-cache")；
（3）在URL后面加上一個亂數： "fresh=" + Math.random()；
（4）在URL后面加上時間戳："nowtime=" + new Date().getTime()；
（5）如果是使用jQuery，$.ajaxSetup({cache:false})，這樣頁面的所有ajax都會執行這條陳述句就是不需要保存快取記錄，

23.同步和異步的區別？

同步的概念應該是來自于OS中關于同步的概念:不同行程為協同完成某項作業而在先后次序上調整(通過阻塞,喚醒等方式).同步強調的是順序性.誰先誰后.異步則不存在這種順序性.
同步：瀏覽器訪問服務器請求，用戶看得到頁面重繪，重新發請求,等請求完，頁面重繪，新內容出現，用戶看到新內容,進行下一步操作，
異步：瀏覽器訪問服務器請求，用戶正常操作，瀏覽器后端進行請求，等請求完，頁面不重繪，新內容也會出現，用戶看到新內容，

24.AMD、CMD規范區別？

對于依賴的模塊，AMD 是提前執行，CMD 是延遲執行，不過 RequireJS 從 2.0 開始，也改成可以延遲執行（根據寫法不同，處理方式不同），CMD 推崇 as lazy as possible.
CMD 推崇依賴就近，AMD 推崇依賴前置，

// CMD
define(function(require, exports, module) {
    var a = require('./a')
    a.doSomething()
    // 此處略去 100 行
    var b = require('./b') // 依賴可以就近書寫
    b.doSomething()
    // ...
})

// AMD 默認推薦
define(['./a', './b'], function(a, b) { // 依賴必須一開始就寫好
    a.doSomething()
    // 此處略去 100 行
    b.doSomething()
    // ...
})

詳細了解可查看博主的另一篇文章前端模塊化

25.DOM操作——怎樣添加、移除、移動、復制、創建和查找節點?

（1）創建新節點

createDocumentFragment()    //創建一個DOM片段
createElement()    //創建一個具體的元素
createTextNode()   //創建一個文本節點

（2）添加、移除、替換、插入

appendChild() //添加
removeChild() //移除
replaceChild() //替換
insertBefore() //在已有的子節點前插入一個新的子節點

（3）查找

getElementsByTagName() //通過標簽名稱
getElementsByName()    //通過元素的Name屬性的值(IE容錯能力較強，會得到一個陣列，其中包括id等于name值的)
getElementById()       //通過元素Id，唯一性

26.如何判斷當前腳本運行在瀏覽器還是node環境中？

this === window ? 'browser' : 'node';
// 通過判斷Global物件是否為window，如果不為window，當前腳本沒有運行在瀏覽器中

27.那些操作會造成記憶體泄漏？

記憶體泄漏指任何物件在您不再擁有或需要它之后仍然存在，
垃圾回收器定期掃描物件，并計算參考了每個物件的其他物件的數量，如果一個物件的參考數量為 0（沒有其他物件參考過該物件），或對該物件的惟一參考是回圈的，那么該物件的記憶體即可回收，
setTimeout 的第一個引數使用字串而非函式的話，會引發記憶體泄漏，
閉包、控制臺日志、回圈（在兩個物件彼此參考且彼此保留時，就會產生一個回圈）

28.Webpack熱更新實作原理？

（1）Webpack編譯期，為需要熱更新的 entry 注入熱更新代碼(EventSource通信)
（2）頁面首次打開后，服務端與客戶端通過 EventSource 建立通信渠道，把下一次的 hash 回傳前端
（3）客戶端獲取到hash，這個hash將作為下一次請求服務端 hot-update.js 和 hot-update.json的hash
（4）修改頁面代碼后，Webpack 監聽到檔案修改后，開始編譯，編譯完成后，發送 build 訊息給客戶端
（5）客戶端獲取到hash，成功后客戶端構造hot-update.js script鏈接，然后插入主檔案
（6）hot-update.js 插入成功后，執行hotAPI 的 createRecord 和 reload方法，獲取到 Vue 組件的 render方法，重新 render 組件，繼而實作 UI 無重繪更新，

ES6相關

1.Object.is() 與原來的比較運算子“ ===”、“ ==”的區別？

兩等號判等，會在比較時進行型別轉換；

123 == '123'  // true
null == undefined  // true
1 == true  // true
0 == false  // true
[] == false  // true

三等號判等(判斷嚴格)，比較時不進行隱式型別轉換,（型別不同則會回傳false）；

123 === '123'  // false
null === undefined  // false
1 === true  // false
0 === false  // false
[] === false  // false

NaN === NaN  // false
+0 === -0  // true

Object.is 在三等號判等的基礎上特別處理了 NaN 、-0 和 +0 ，保證 -0 和 +0 不再相同，
但 Object.is(NaN, NaN) 會回傳 true.

Object.is(NaN, NaN)  // true
Object.is(-0, +0)  // false

Object.is 應被認為有其特殊的用途，而不能用它認為它比其它的相等對比更寬松或嚴格，

2.Set 和 Map 資料結構

（1）set它類似于陣列，但是成員的值都是唯一的，沒有重復的值，
（2）WeakSet 的成員只能是物件，而不能是其他型別的值，

WeakSet 中的物件都是弱參考，即垃圾回識訓制不考慮WeakSet對該物件的參考，也就是說，如果其他物件都不再參考該物件，那么垃圾回識訓制會自動回收該物件所占用的記憶體，不考慮該物件還存在于 WeakSet 之中，
（3）map 值—值對應的關系，“鍵”的范圍不限于字串，各種型別的值（包括物件）都可以當作鍵
Map 的鍵實際上是跟記憶體地址系結的，只要記憶體地址不一樣，就視為兩個鍵，如果Map的鍵是簡單型別的值（數字、字串、布林值），則只要兩個值嚴格相等，Map 將其視為一個鍵，

（4）weakmap WeakMap與Map的區別有兩點：

首先，WeakMap只接受物件作為鍵名（null除外），不接受其他型別的值作為鍵名，
其次，WeakMap的鍵名所指向的物件，不計入垃圾回識訓制，

注意：WeakMap 弱參考的只是鍵名，而不是鍵值，鍵值依然是正常參考，

3.Proxy

Proxy 可以理解成，在目標物件之前架設一層“攔截”，外界對該物件的訪問，都必須先通過這層攔截，因此提供了一種機制，可以對外界的訪問進行過濾和改寫，Proxy這個詞的原意是代理，用在這里表示由它來“代理”某些操作，可以譯為“代理器”，

const target = {
    m: function () {
        console.log(this === proxy);
    }
};
const handler = {};
const proxy = new Proxy(target, handler);
target.m() // false
proxy.m()  // true

雖然 Proxy 可以代理針對目標物件的訪問，但它不是目標物件的透明代理，即不做任何攔截的情況下，也無法保證與目標物件的行為一致，主要原因就是在 Proxy 代理的情況下，目標物件內部的this關鍵字會指向 Proxy 代理，

4.promise

Promise 是異步編程的一種解決方案，Promise物件代表一個異步操作，有三種狀態：pending（進行中）、fulfilled（已成功）和rejected（已失敗），

特點：
（1）物件的狀態不受外界影響，只有異步操作的結果，可以決定當前是哪一種狀態，任何其他操作都無法改變這個狀態，
（2）一旦狀態改變，就不會再變，任何時候都可以得到這個結果，Promise物件的狀態改變，只有兩種可能：從pending變為fulfilled和從pending變為rejected，

局限性：

無法取消Promise，一旦新建它就會立即執行，無法中途取消，
如果不設定回呼函式，Promise內部拋出的錯誤，不會反應到外部，
當處于pending狀態時，無法得知目前進展到哪一個階段（剛剛開始還是即將完成），
當接收到一個代表錯誤的 HTTP 狀態碼時，從 fetch() 回傳的 Promise 不會被標記為 reject，即使回應的 HTTP 狀態碼是 404 或 500，相反，它會將 Promise 狀態標記為 resolve （但是會將 resolve 的回傳值的 ok 屬性設定為 false ），僅當網路故障時或請求被阻止時，才會標記為 reject，

其他問題

1.get和post區別

GET產生一個TCP資料包；POST產生兩個TCP資料包，并不是所有瀏覽器都會在POST中發送兩次包，Firefox就只發送一次，
GET在瀏覽器回退時是無害的，而POST會再次提交請求，
GET是表單提交的默認方法，
GET請求引數會被完整保留在瀏覽器歷史記錄里，而POST中的引數不會被保留，
GET比POST更不安全，因為引數直接暴露在URL上，所以不能用來傳遞敏感資訊，
GET的引數放在url中的嗎，然而post是放在請求體中的，

2.說一說seo（搜索引擎優化）

對于自身網頁而言：

網頁頭部添加TDK，即 title、description、keywords 這三個標簽，
使用語意化的標簽，如main,article,header,footer,nav,aside,section,time,mark,video,audio等，符合 W3C 規范：語意化代碼讓搜索引擎容易理解網頁，
重要的內容不要放在js代碼中，搜索引擎不會爬取js代碼，
提高網站性能

其他的一些方面：

使用https協議–安全小綠鎖，
網址靜態化，短網址，偽靜態，
增加網站外鏈，
全站地圖sitemap，即告訴搜索引擎怎么爬取你的網站，
以百度為例，主動提交百度收錄，添加robots機器人（其實也就是一個txt檔案，告訴百度引擎想讓他爬什么，不能爬什么，）

3.頁面重構怎么操作？

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

傳統的網站重構

表格(table)布局改為DIV+CSS，使網站前端兼容于現代瀏覽器(針對于不合規范的CSS、如對IE6有效的)
對于移動平臺的優化
針對于SEO進行優化

深層次的網站重構

減少代碼間的耦合
讓代碼保持彈性
嚴格按規范撰寫代碼
設計可擴展的API
代替舊有的框架、語言(如VB)
增強用戶體驗

速度的優化

壓縮JS、CSS、image等前端資源(通常是由服務器來解決)
程式的性能優化(如資料讀寫)
采用CDN來加速資源加載
對于JS DOM的優化
HTTP服務器的檔案快取

4.什么叫優雅降級和漸進增強？

優雅降級：Web站點在所有新式瀏覽器中都能正常作業，如果用戶使用的是老式瀏覽器，則代碼會針對舊版本的IE進行降級處理了,使之在舊式瀏覽器上以某種形式降級體驗卻不至于完全不能用，

如：border-shadow

漸進增強：從被所有瀏覽器支持的基本功能開始，逐步地添加那些只有新版本瀏覽器才支持的功能,向頁面增加不影響基礎瀏覽器的額外樣式和功能的，當瀏覽器支持時，它們會自動地呈現出來并發揮作用，

如：默認使用flash上傳，但如果瀏覽器支持HTML5的檔案上傳功能，則使用HTML5實作更好的體驗；

5.你有用過哪些前端性能優化的方法？

（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）圖片預加載，將樣式表放在頂部，將腳本放在底部加上時間戳，
（8）避免在頁面的主體布局中使用table，table要等其中的內容完全下載之后才會顯示出來，顯示比div+css布局慢，

對普通的網站有一個統一的思路，就是盡量向前端優化、減少資料庫操作、減少磁盤IO，向前端優化指的是，在不影響功能和體驗的情況下，能在瀏覽器執行的不要在服務端執行，能在快取服務器上直接回傳的不要到應用服務器，程式能直接取得的結果不要到外部取得，本機內能取得的資料不要到遠程取，記憶體能取到的不要到磁盤取，快取中有的不要去資料庫查詢，減少資料庫操作指減少更新次數、快取結果減少查詢次數、將資料庫執行的操作盡可能的讓你的程式完成（例如join查詢），減少磁盤IO指盡量不使用檔案系統作為快取、減少讀寫檔案次數等，程式優化永遠要優化慢的部分，換語言是無法“優化”的，

6.http狀態碼有那些？分別代表是什么意思？

100 Continue 繼續，一般在發送post請求時，已發送了http，header之后服務端將回傳此資訊，表示確認，之后發送具體引數資訊
200 OK 正常回傳資訊
201 Created 請求成功并且服務器創建了新的資源
202 Accepted 服務器已接受請求，但尚未處理
301 Moved Permanently 請求的網頁已永久移動到新位置，
302 Found 臨時性重定向，
303 See Other 臨時性重定向，且總是使用 GET 請求新的 URI，
304 Not Modified 自從上次請求后，請求的網頁未修改過，
400 Bad Request 服務器無法理解請求的格式，客戶端不應當嘗試再次使用相同的內容發起請求，
401 Unauthorized 請求未授權，
403 Forbidden 禁止訪問，
404 Not Found 找不到如何與 URI 相匹配的資源，
500 Internal Server Error 最常見的服務器端錯誤，
503 Service Unavailable 服務器端暫時無法處理請求（可能是過載或維護），

7.一個頁面從輸入 URL到頁面加載顯示完成，這個程序中都發生了什么？

詳細版：

（1）瀏覽器會開啟一個執行緒來處理這個請求，對 URL 分析判斷如果是 http 協議就按照 Web 方式來處理;
（2）呼叫瀏覽器內核中的對應方法，比如 WebView 中的 loadUrl 方法;
（3）通過DNS決議獲取網址的IP地址，設定 UA 等資訊發出第二個GET請求;
（4）進行HTTP協議會話，客戶端發送報頭(請求報頭);
（5）進入到web服務器上的 Web Server，如 Apache、Tomcat、Node.JS 等服務器;
（6）進入部署好的后端應用，如 PHP、Java、JavaScript、Python 等，找到對應的請求處理;
（7）處理結束回饋報頭，此處如果瀏覽器訪問過，快取上有對應資源，會與服務器最后修改時間對比，一致則回傳304;
（8）瀏覽器開始下載html檔案(回應報頭，狀態碼200)，同時使用快取;
（9）檔案樹建立，根據標記請求所需指定MIME型別的檔案（比如css、js）,同時設定了cookie;
（10）頁面開始渲染DOM，JS根據DOM API操作DOM,執行事件系結等，頁面顯示完成，

簡潔版：

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

高手可以根據自己擅長的領域自由發揮，從URL規范、HTTP協議、DNS、CDN、資料庫查詢、到瀏覽器流式決議、CSS規則構建、layout、paint、onload/domready、JS執行、JS API系結等等；

前端框架

考察前端框架之類的，如自己把握比較好的一門，Vue，ReactReact，Angular，或者基于此類的一些框架，uniapp,ElementUI等等，本文暫時不做此類記錄，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/276606.html

標籤：其他

上一篇：02.ElementUI原始碼學習:babel配置

下一篇：如何解決在執行gulp任務中出現的錯誤ReferenceError: primordials is not defined

前端開發面試題 — javascript篇

js