刷前端面經筆記（五）

摘要： 1.XML和JSON的區別？ 1）資料體積方面 JSON 相對於 XML 來講，資料的體積小，傳遞的速度更快些 2）資料描述方面 JSON 和 JavaScript 互動更加方便，更容易解析處理，更容易互動 3）資料描述方面 JSON 對資料的描述性比 XML...

1.XML和JSON的區別？

1）資料體積方面

JSON 相對於 XML 來講，資料的體積小，傳遞的速度更快些

2）資料描述方面

JSON 和 JavaScript 互動更加方便，更容易解析處理，更容易互動

3）資料描述方面

JSON 對資料的描述性比 XML 差

4）傳輸速度方面

JSON 的速度要遠遠快於 XML

2.前端需要注意哪些SEO？

合理的 title 、 description 、 keywords ：搜尋對著三項的權重逐個減少， title 值強調重點即可，重要關鍵詞不要超過兩次，而且要靠前，不同頁面的 title 要有所不同；

description 把頁面的內容高度概括，長度合適，不可過分分堆砌關鍵詞，不同頁面的 description 有所不同；

keywords 列舉重要關鍵詞即可；

// title標題
<title>標題</title>
// keywords 關鍵詞
<meta name="description" content="關鍵詞1,關鍵詞2,關鍵詞3">
// description 內容摘要
<meta name="description" content="網頁的簡述">

語義化的 HTML 程式碼，符合 W3C 規範：語義化程式碼讓搜尋引擎容易理解網頁；

重要內容的 HTML 程式碼放在最前：搜尋引擎抓取 HTML 順序是從上到下，有的搜尋引擎對抓取長度有限制，所以要保證重要內容一定會被抓取；

重要內容不要用 JS 輸出：爬蟲不會執行 JS 獲取內容；

少用 iframe ：搜尋引擎不會抓取 iframe 中的內容；

非裝飾性圖片必須加 alt ；

提高網站速度：網站速度是搜素引擎排序的一個重要指標；

3.HTTP的幾種請求方法用途？

1） GET 方法

傳送一個請求來取得伺服器上的某一資源

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.如何進行網頁效能優化？

5.語義化的理解

HTML 語義化就是讓頁面的內容結構化，便於對瀏覽器、搜尋引擎解析；

在沒有 CSS 樣式情況下也以一種文件格式顯示，並且是容易閱讀的；

搜尋引擎的爬蟲依賴於標記來確定上下文的各個關鍵字的權重，利於 SEO ；

使閱讀原始碼的人更容易將網站分塊，便於閱讀維護理解；

6.WEB標準以及W3C標準是什麼

標籤閉合、標籤小寫、不亂巢狀、使用外鏈 CSS 和 JS 、結構行為表現的分離

7.說說對作用域鏈的理解

作用域鏈的作用是保證執行環境裡有權訪問的變數和函式是有序的，作用域鏈的變數只能向上訪問，變數訪問到 window 物件即被終止，作用域鏈向下訪問變數是不被允許的；

即作用域就是變數與函式的可訪問範圍，即作用域控制這變數與函式的可見性和生命週期；

8.如何實現瀑布流

１）瀑布流佈局的要求要進行佈置的元素等寬；

然後計算元素的寬度，

與瀏覽器寬度之比，得到需要佈置的列數；

２）建立一個數組，長度為列數，

裡面的值為以已佈置元素的總高度（最開始為 ０ ）；

３）然後將未佈置的元素的依次佈置到高度最小的那一列，

就得到了瀑布流佈局；

４）滾動載入， scroll 事件得到 scrollTop ，

與最後盒子的 offsetTop 對比，

符合條件就不斷滾動載入。

瀑布流佈局核心程式碼：

/**
 * 實現瀑布流的佈局
 * @param {string}parentBox
 * @param {string}childBox
 */
function waterFull(parentBox, childBox) {
// 1. 求出父盒子的寬度
//1.1 獲取所有的子盒子
var allBox = $(parentBox).
getElementsByClassName(childBox);
// console.log(allBox);

// 1.2 求出子盒子的寬度
var boxWidth = allBox[0].offsetWidth;
// console.log(boxWidth);

// 1.3 獲取視窗的寬度
var clientW = document.
documentElement.clientWidth;
// console.log(clientW);

// 1.4 求出總列數
var cols = Math.floor(clientW / boxWidth);
// console.log(cols);

// 1.5 父盒子居中
$(parentBox).style.width = cols * boxWidth + 'px';
$(parentBox).style.margin = '0 auto';

// 2. 子盒子定位
//2.1 定義變數
var heightArr = [], boxHeight = 0, 
minBoxHeight = 0, minBoxIndex = 0;

// 2.2 遍歷所有的子盒子
for (var i = 0; i < allBox.length; i++) {
// 2.2.1 求出每一個子盒子的高度
boxHeight = allBox[i].offsetHeight;
// console.log(boxHeight);
// 2.2.2 取出第一行盒子的高度放入高度陣列中
if (i < cols) { // 第一行
heightArr.push(boxHeight);
} else { // 剩餘行的盒子
// 2.2.3 取出陣列中最矮的高度
minBoxHeight = _.min(heightArr);
// 2.2.4 求出最矮高度對應的索引
minBoxIndex = getMinBoxIndex(heightArr, minBoxHeight);
// 2.2.5 盒子定位
allBox[i].style.position = 'absolute';
allBox[i].style.left = minBoxIndex * boxWidth + 'px';
allBox[i].style.top = minBoxHeight + 'px';
// 2.2.6 更新最矮的高度
heightArr[minBoxIndex] += boxHeight;

}
}
}

/**
 * 根據內容取出在陣列中對應的索引
 * @param {object}arr
 * @param {number}val
 * @returns {boolean}
 */

function getMinBoxIndex(arr, val) {
for (var i = 0; i < arr.length; i++) {
if (arr[i] === val) return i;
}
}

/**
 * 判斷是否具備載入子盒子的條件
 * @returns {boolean}
 */
function checkWillLoadImage() {
// 1. 獲取最後一個盒子
var allBox = $('main').getElementsByClassName('box');
var lastBox = allBox[allBox.length - 1];

// 2. 求出高度
var lastBoxDis = lastBox.offsetHeight * 0.5 + lastBox.offsetTop;

// 3. 求出視窗的高度
var clientH = document.documentElement.clientHeight;

// 4. 求出頁面滾動產生的高度
var scrollTopH = scroll().top;

// 5. 對比
return lastBoxDis <= clientH + scrollTopH;
}

9.原生ＪＳ都有哪些方式可以實現兩個頁面間的通訊？