前端面試題整合（JS進階篇）（二）-有解無憂

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

AJAX全稱是Asychronous JavaScript And Xml（異步的 JavaScript 和 XML）
它的作用是用來實作客戶端與服務器端的異步通信效果，實作頁面的區域重繪，早期的瀏覽器并不能原生支持ajax，可以使用隱藏幀（iframe）方式變相實作異步效果，后來的瀏覽器提供了對ajax的原生支持
其主要通過XMLHttpRequest(標準瀏覽器)、ActiveXObject(IE瀏覽器)物件實作異步通信效果
實作方式（gitee上的案例）：

var xhr =null;//創建物件 
if(window.XMLHttpRequest){
	xhr = new XMLHttpRequest();
}else{
	xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open(“方式”,”地址”,”標志位”);//初始化請求 
xhr.setRequestHeader(“”,””);//設定http頭資訊 
xhr.onreadystatechange =function(){}//指定回呼函式 
xhr.send();//發送請求

Ajax的優缺點

優點：

通過異步模式，提升了用戶體驗
優化了瀏覽器和服務器之間的傳輸，按需獲取資料，減少不必要的資料往返，減少了帶寬占用
Ajax在客戶端運行，承擔了一部分本來由服務器承擔的作業，減少了大用戶量下的服務器負載，

缺點：

ajax不支持瀏覽器back按鈕
安全問題 AJAX暴露了與服務器互動的細節
對搜索引擎的支持比較弱
破壞了程式的例外機制，

一個頁面從輸入 URL 到頁面加載顯示完成，發生了什么？

當發送一個 URL 請求時，不管這個 URL 是 Web 頁面的 URL 還是 Web 頁面上每個資源的 URL，瀏覽器都會開啟一個執行緒來處理這個請求，同時在遠程 DNS 服務器上啟動一個 DNS 查詢，這能使瀏覽器獲得請求對應的 IP 地址，
瀏覽器與遠程 Web 服務器通過 TCP 三次握手協商來建立一個 TCP/IP 連接，該握手包括一個同步報文，一個同步-應答報文和一個應答報文，這三個報文在瀏覽器和服務器之間傳遞，該握手首先由客戶端嘗試建立起通信，而后服務器應答并接受客戶端的請求，最后由客戶端發出該請求已經被接受的報文，
一旦 TCP/IP 連接建立，瀏覽器會通過該連接向遠程服務器發送 HTTP 的 GET 請求，遠程服務器找到資源并使用 HTTP 回應回傳該資源，值為 200 的 HTTP 回應狀態表示一個正確的回應，
此時，Web 服務器提供資源服務，客戶端開始下載資源，
后續HTML頁面決議參照前端面試題整合（JS進階篇）（一）的 “html頁面怎么決議的？它加載順序是什么？”

JQuery一個物件為何可以同時系結多個事件

低層實作方式是使用addEventListner或attachEvent兼容不同的瀏覽器實作事件的系結，這樣可以給同一個物件注冊多個事件

對頁面某個節點的拖曳

1. 給需要拖拽的節點系結mousedown, mousemove, mouseup事件
2. mousedown事件觸發后，開始拖拽
3. mousemove時，需要通過event.clientX和clientY獲取拖拽位置，并實時更新位置
4. mouseup時，拖拽結束
5. 需要注意瀏覽器邊界的情況

gitee上的案例

        function mouseMove(ele, parent) {
            ele.addEventListener('mousedown', moveHandler);
            ele.style.position = 'absolute'
            function moveHandler(e) {
                if (e.type === 'mousedown') {
                    parent.ele = this;
                    parent.point = {
                        x: e.offsetX,
                        y: e.offsetY
                    }
                    parent.addEventListener('mousemove', moveHandler);
                    parent.addEventListener('mouseup', moveHandler);
                } else if (e.type === 'mousemove') {
                    this.ele.style.left = e.x - this.point.x + "px";
                    this.ele.style.top = e.y - this.point.y + "px";
                } else if (e.type === 'mouseup') {
                    parent.removeEventListener("mousemove", moveHandler);
                    parent.ele = null;
                    parent.point = null;
                }
            }
        }

new運算子具體干了什么

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

以下是模擬操作：

new TestObj('str')=function(){
    let obj={};  //創建一個空物件
    obj.__proto__=TestObj.prototype;
    //把該物件的原型指向建構式的原型物件，就建立起原型了：obj->Animal.prototype->Object.prototype->null
    return TestObj.call(obj,arguments);// 系結this到實體化的物件上
}

前端開發的優化問題

（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布局慢，

fetch和Ajax有什么不同

XMLHttpRequest 是一個設計粗糙的 API，不符合關注分離（Separation of Concerns）的原則，配置和呼叫方式非常混亂，而且基于事件的異步模型寫起來也沒有現代的 Promise，generator/yield，async/await 友好
fetch 是瀏覽器提供的一個新的 web API，它用來代替 Ajax（XMLHttpRequest），其提供了更優雅的介面，更靈活強大的功能，
Fetch 優點主要有：語法簡潔，更加語意化，基于標準 Promise 實作，支持 async/await

如何撰寫高性能的Javascript

使用 DocumentFragment 優化多次 append
通過模板元素 clone，替代 createElement
使用一次 innerHTML 賦值代替構建 dom 元素
使用 firstChild 和 nextSibling 代替 childNodes 遍歷 dom 元素
使用 Array 做為 StringBuffer ，代替字串拼接的操作
將回圈控制量保存到區域變數
順序無關的遍歷時，用 while 替代 for
將條件分支，按可能性順序從高到低排列
在同一條件子的多（ >2 ）條件分支時，使用 switch 優于 if
使用三目運算子替代條件分支
需要不斷執行的時候，優先考慮使用 setInterval

定時器setInterval有一個有名函式fn，setInterval（fn,500）與setInterval（fn(),500）有什么區別？

第一個是重復執行每500毫秒執行一次，后面一個只執行一次，

簡述一下瀏覽器內核

瀏覽器內核又可以分成兩部分：渲染引擎和 JS 引擎，它負責取得網頁的內容（HTML、XML、影像等等）、整理訊息（例如加入 CSS 等），以及計算網頁的顯示方式，然后會輸出至顯示幕或列印機，JS 引擎則是決議 Javascript 語言，執行 javascript 語言來實作網頁的動態效果，

JavaScript的資料物件有哪些屬性值？

writable：這個屬性的值是否可以改
configurable：這個屬性的配置是否可以洗掉，修改
enumerable：這個屬性是否能在for…in回圈中遍歷出來或在Object.keys中列舉出來
value：屬性值，

懶加載（瀑布流）的實作原理

意義：懶加載的主要目的是作為服務器前端優化，減少請求數或延遲請求數實作原理：先加載一部分資料，當觸發某個條件時利用異步加載剩余的資料，新得到的資料，不會影響有資料的顯示，同時最大程度上減少服務器的資源消耗
實作方式：
（1）延遲加載，使用setTimeOut或setInterval進行加載延遲
（2）符合某些條件，或觸發了某些事件才開始異步下載
（3）可視區加載

我的懶加載文章，以及原始碼地址

js實作陣列去重

雙層回圈，外層回圈元素，內層回圈時比較值，如果有相同的值則跳過，不相同則push進陣列

        class MyArray extends Array {
            constructor() {
                super(...arguments)
            }
            distinct() {
                var myArr = this,
                    list = []
                for (var i = 0; i < myArr.length; i++) {
                    for (var j = i + 1; j < myArr.length; j++) {
                        if (myArr[i] === myArr[j]) {
                            j = ++i;
                        }
                    }
                    list.push(myArr[i]);
                }
                return list;
            }
        }
        var _arr = new MyArray(4, 5, 6, 7, 7, 7, 1, 1, 1, 2, 2, 2, 5, 8, 5, 2, 4, 4, 4, 6, 9);
        console.log(_arr.distinct()); //[7, 1, 8, 5, 2, 4, 6, 9]

利用物件的屬性不能相同的特點進行去重

        class MyArray extends Array {
            constructor() {
                super(...arguments)
            }
            distinct() {
                var myArr = this,
                    list = [],
                    obj = {}
                for (var i = 0; i < myArr.length; i++) {
                    obj[myArr[i]] || (obj[myArr[i]] = 1,
                        list.push(myArr[i])) //如果能查找到，證明陣列元素重復了
                }
                return list;
            }
        }
        var _arr = new MyArray(4, 5, 6, 7, 7, 7, 1, 1, 1, 2, 2, 2, 5, 8, 5, 2, 4, 4, 4, 6, 9);
        console.log(_arr.distinct()); //[4, 5, 6, 7, 1, 2, 8, 9]

Set資料結構，它類似于陣列，其成員的值都是唯一的

        function dedupe(array) {
            return Array.from(new Set(array));
        }
        console.log(dedupe([1, 1, 2, 3])) //[1,2,3]

實作快速排序和冒泡排序

快速排序：選取位置在陣列中間的一個數，然后比它小的放在left[]的一個新陣列里面，比他大的放在right[]的一個新陣列里面，以此類推，重復執行這個程序，利用遞回的思想，直至執行到left[]和right[]里面都只有一個數
冒泡排序：兩兩比較，前面的比后面的大，則換位，第一輪list.length-1次，挑出最大的；第二輪list.length-1-1次，挑出第二大的，以此往復

        class MyArray extends Array {
            constructor() {
                super(...arguments)
            }
            quickSort(list) { //快速排序
                var myArr = this,
                    listConfig = {
                        midItem: myArr[parseInt(myArr.length / 2)],
                        leftList: new MyArray(),
                        rightList: new MyArray()
                    }
                if (myArr.length <= 1) {
                    return myArr
                };
                for (var i = 0; i < myArr.length; i++) {
                    myArr[i] < listConfig.midItem ? listConfig.leftList.push(myArr[i]) : myArr[i] > listConfig
                        .midItem ? listConfig.rightList.push(myArr[i]) : '';
                }
                return listConfig.leftList.quickSort().concat([listConfig.midItem], listConfig.rightList
                    .quickSort()); //遞回
            }
            bubbleSort() { //冒泡排序
                for (var i = 0; i < this.length - 1; i++) {
                    for (var j = 0; j < this.length - 1 - i; j++) {
                        if (this[j] > this[j + 1]) {
                            var item = this[j];
                            this[j] = this[j + 1];
                            this[j + 1] = item;
                        }
                    }
                }
                return this
            }
        }
        var quickSortArray = new MyArray(19, 15, 18, 17, 11, 21, 14, 61, 13, 10, 25);
        var bubbleSortArray = new MyArray(9, 5, 8, 7, 1, 2, 4, 6, 3, 10, 25);
        console.log(quickSortArray.quickSort()); //[10, 11, 13, 14, 15, 17, 18, 19, 21, 25, 61]
        console.log(bubbleSortArray.bubbleSort()); //[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 25]

談談節流和防抖，如何實作

節流：使頻繁執行的函式，定時執行，高頻率函式執行時，使執行率減少，每n秒才能執行一次，打個比方：每隔1秒鐘，會執行5次滾動條滾動事件，我只讓它每一秒執行一次（案例：網站中的回傳頂部）

防抖：使頻繁執行的函式，延時執行，高頻率函式執行時，n秒內只執行一次，在事件內多次執行會延時，打個比方：用戶在輸入框中輸入字符，當用戶一直在輸入時，我們做個延時，當用戶輸入完畢后會有一段時間停頓，若這個停頓時間大于我們的我們延時時間，我們就進行下一步操作，反之則不進行并且一直延時（案例：搜索引擎搜索輸入框）

區別：對于高頻率執行函式，節流是每隔規定時間都會執行一次，防抖是只在規定時間外的最后一次執行

實作程序：

        var count = 0
        class OptimizeEvent {
            constructor() {}
            throttle(fn, time) { //節流
                var canDo = true
                return function (e) {
                    if (!canDo) {
                        return false
                    }
                    canDo = false
                    setTimeout(() => {
                        fn.call(this)
                        canDo = true
                    }, time)
                }
            }
            debounce(fn, time) { //防抖
                var _timer = null
                return function () {
                    if (_timer) {
                        clearTimeout(_timer)
                        _timer = null
                    }
                    _timer = setTimeout(fn, time)
                }
            }
        }
        var _event = new OptimizeEvent()
        inputBox.addEventListener('input', _event.debounce(function () {
            showBox.textContent = inputBox.value
        }, 1000))
        document.addEventListener('scroll', _event.throttle(function () {
            console.log(count++)
        }, 1000))

談談深拷貝的實作

深拷貝相對淺拷貝不同的是，深拷貝內所有參考型別屬性值都是在新開辟的記憶體地址，被拷貝的原資料發生改變時不會影響復制后的物件，

常見方法

JSON.parse(),JSON.stringify()
jQury的$.extend(true,{},obj)
lodash的_.cloneDeep

我的深復制文章


			function deepClone(org, tag) {
				var tag = tag || {}; //初始化要復制的物件
				var name = Object.getOwnPropertyNames(org); //獲取該物件的屬性名，以字串陣列回傳
				for (var i = 0; i < name.length; i++) { //遍歷物件
					var desc = Object.getOwnPropertyDescriptor(org, name[i]); //獲取物件的屬性描述物件，無參考關系，回傳另一個物件，改變時原物件不發生變化(復制的關鍵)
					if (typeof desc.value === 'object' && desc.value !== null) { //若遍歷的每一項非空且為物件，則為參考值，則進行下一步
						var obj = desc.value.toString() === '[object Object]' ? {} : []; //判斷是陣列還是物件
						Object.defineProperty(tag, name[i], { //設定物件屬性值，前三個的值是回傳true或false
							configurable: desc.configurable, //是否可洗掉可替換
							enumerable: desc.enumerable, //是否可列舉可遍歷
							writable: desc.writable, //是否可寫入
							value: obj //物件的值
						});
						copyObj(desc.value, obj); //再次執行函式
					} else {
						Object.defineProperty(tag, name[i], desc); //否則直接將該物件的屬性值進行復制(原始值)
					}
				}
				return tag;
			}

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

標籤：其他

上一篇：ES 6新特性（Day07）

下一篇：檔案流、盒子模型、內邊距、外邊距、盒子模型水平方向的布局、盒子模型垂直方向的布局、盒子模型外邊距的折疊、行內元素的盒模型（萌新必看，大佬隨便）