刷前端面經筆記（五）

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

1）content方面
減小HTTP請求：合併文件、CSS精靈圖
減小DNS查詢：DNS緩存、將資源分佈到恰當數量的主機名
減小DOM元素數量
２）Server方面
使用CDN
配置ETag
對組件使用Gzip壓縮
３）Cookie方面
減小cookie大小
４）CSS方面
將樣式表放到頁面頂部
不使用CSS表達式
使用<link>不使用@import
５）JavaScript方面
將腳本放到頁面底部
將JavaScript和CSS從外部引入
壓縮JavaScript和CSS
刪除不須要的腳本
減小DOM訪問
6）圖片方面
優化CSS精靈
不要再HTML中拉伸圖片

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.原生ＪＳ都有哪些方式能夠實現兩個頁面間的通訊？

１）經過url地址欄傳遞參數；
例如：點擊列表中的每一條數據，跳轉到一個詳情頁面，在URL中傳遞不一樣的參數區分不一樣的頁面；
２）經過本地存儲cookie、localStorage、sessionStorage；
例如京東的登錄，把登錄後得到的頁面信息存儲到本地，其餘頁面須要用戶信息的話就從本地的存儲數據中獲取；
３）使用iframe
例如在Ａ頁面中嵌入Ｂ頁面，在Ａ中能夠經過一些屬性和實現方法和Ｂ頁面的通訊；
４）利用postMessage實現頁面間的通訊
例如父窗口往子窗口傳遞信息，子窗口往父窗口傳遞信息