1.XML和JSON的區(qū)別条霜？

1）數(shù)據(jù)體積方面
JSON相對于XML來講幸缕，數(shù)據(jù)的體積小，傳遞的速度更快些
2）數(shù)據(jù)描述方面
JSON和JavaScript交互更加方便凤覆，更容易解析處理握童，更容易交互
3）數(shù)據(jù)描述方面
JSON對數(shù)據(jù)的描述性比XML差
4）傳輸速度方面
JSON的速度要遠(yuǎn)遠(yuǎn)快于XML

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

合理的title叛赚、description澡绩、keywords：搜索對著三項(xiàng)的權(quán)重逐個(gè)減少稽揭，title值強(qiáng)調(diào)重點(diǎn)即可，重要關(guān)鍵詞不要超過兩次肥卡，而且要靠前溪掀，不同頁面的title要有所不同；
description把頁面的內(nèi)容高度概括步鉴，長度合適揪胃，不可過分分堆砌關(guān)鍵詞，不同頁面的description有所不同氛琢；
keywords列舉重要關(guān)鍵詞即可喊递；

// title標(biāo)題
<title>標(biāo)題</title>
// keywords 關(guān)鍵詞
<meta name="description" content="關(guān)鍵詞1,關(guān)鍵詞2,關(guān)鍵詞3">
// description 內(nèi)容摘要
<meta name="description" content="網(wǎng)頁的簡述">

語義化的HTML代碼，符合W3C規(guī)范：語義化代碼讓搜索引擎容易理解網(wǎng)頁阳似；
重要內(nèi)容的HTML代碼放在最前：搜索引擎抓取HTML順序是從上到下骚勘，有的搜索引擎對抓取長度有限制，所以要保證重要內(nèi)容一定會(huì)被抓却樽唷俏讹；
重要內(nèi)容不要用JS輸出：爬蟲不會(huì)執(zhí)行JS獲取內(nèi)容；
少用iframe：搜索引擎不會(huì)抓取iframe中的內(nèi)容畜吊；
非裝飾性圖片必須加alt泽疆；
提高網(wǎng)站速度：網(wǎng)站速度是搜素引擎排序的一個(gè)重要指標(biāo)；

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

1）GET方法
發(fā)送一個(gè)請求來取得服務(wù)器上的某一資源
2）POST方法
向URL指定的資源提交數(shù)據(jù)或附加新的數(shù)據(jù)
3）PUT方法
跟POST方法很像殉疼，也是想服務(wù)器提交數(shù)據(jù)。但是捌年，它們之間有不同瓢娜。PUT指定了資源在服務(wù)器上的位置，而POST沒有
4）HEAD方法
只請求頁面的首部
5）DELETE方法
刪除服務(wù)器上的某資源
6）OPTIONS方法
它用于獲取當(dāng)前URL所支持的方法延窜。如果請求成功，會(huì)有一個(gè)Allow的頭包含類似“GET,POST”這樣的信息
7）TRACE方法
TRACE方法被用于激發(fā)一個(gè)遠(yuǎn)程的抹锄，應(yīng)用層的請求消息回路
8）CONNECT方法
把請求連接轉(zhuǎn)換到透明的TCP/IP通道

4.如何進(jìn)行網(wǎng)頁性能優(yōu)化逆瑞？

1）content方面
減少HTTP請求：合并文件、CSS精靈圖
減少DNS查詢：DNS緩存伙单、將資源分布到恰當(dāng)數(shù)量的主機(jī)名
減少DOM元素?cái)?shù)量
２）Server方面
使用CDN
配置ETag
對組件使用Gzip壓縮
３）Cookie方面
減少cookie大小
４）CSS方面
將樣式表放到頁面頂部
不使用CSS表達(dá)式
使用<link>不使用@import
５）JavaScript方面
將腳本放到頁面底部
將JavaScript和CSS從外部引入
壓縮JavaScript和CSS
刪除不需要的腳本
減少DOM訪問
6）圖片方面
優(yōu)化CSS精靈
不要再HTML中拉伸圖片

5.語義化的理解

HTML語義化就是讓頁面的內(nèi)容結(jié)構(gòu)化获高，便于對瀏覽器、搜索引擎解析吻育；
在沒有CSS樣式情況下也以一種文檔格式顯示念秧，并且是容易閱讀的；
搜索引擎的爬蟲依賴于標(biāo)記來確定上下文的各個(gè)關(guān)鍵字的權(quán)重布疼，利于SEO摊趾；
使閱讀源代碼的人更容易將網(wǎng)站分塊币狠，便于閱讀維護(hù)理解；

6.WEB標(biāo)準(zhǔn)以及W3C標(biāo)準(zhǔn)是什么

標(biāo)簽閉合砾层、標(biāo)簽小寫漩绵、不亂嵌套、使用外鏈CSS和JS肛炮、結(jié)構(gòu)行為表現(xiàn)的分離

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

作用域鏈的作用是保證執(zhí)行環(huán)境里有權(quán)訪問的變量和函數(shù)是有序的止吐，作用域鏈的變量只能向上訪問，變量訪問到window對象即被終止侨糟，作用域鏈向下訪問變量是不被允許的碍扔；
即作用域就是變量與函數(shù)的可訪問范圍，即作用域控制這變量與函數(shù)的可見性和生命周期秕重；

8.如何實(shí)現(xiàn)瀑布流

１）瀑布流布局的要求要進(jìn)行布置的元素等寬不同；
然后計(jì)算元素的寬度，
與瀏覽器寬度之比悲幅，得到需要布置的列數(shù)套鹅；
２）創(chuàng)建一個(gè)數(shù)組，長度為列數(shù)汰具，
里面的值為以已布置元素的總高度（最開始為０）卓鹿；
３）然后將未布置的元素的依次布置到高度最小的那一列，
就得到了瀑布流布局留荔；
４）滾動(dòng)加載吟孙，scroll事件得到scrollTop，
與最后盒子的offsetTop對比聚蝶，
符合條件就不斷滾動(dòng)加載杰妓。
瀑布流布局核心代碼：

/**
 * 實(shí)現(xiàn)瀑布流的布局
 * @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 求出總列數(shù)
    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 求出每一個(gè)子盒子的高度
        boxHeight = allBox[i].offsetHeight;
        // console.log(boxHeight);
        // 2.2.2 取出第一行盒子的高度放入高度數(shù)組中
        if (i < cols) { // 第一行
            heightArr.push(boxHeight);
        } else { // 剩余行的盒子
            // 2.2.3 取出數(shù)組中最矮的高度
            minBoxHeight = _.min(heightArr);
            // 2.2.4 求出最矮高度對應(yīng)的索引
            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;

        }
    }
}

/**
 * 根據(jù)內(nèi)容取出在數(shù)組中對應(yīng)的索引
 * @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. 獲取最后一個(gè)盒子
    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. 求出頁面滾動(dòng)產(chǎn)生的高度
    var scrollTopH = scroll().top;

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

9.原生ＪＳ都有哪些方式可以實(shí)現(xiàn)兩個(gè)頁面間的通信？

１）通過url地址欄傳遞參數(shù)碘勉；
例如：點(diǎn)擊列表中的每一條數(shù)據(jù)巷挥，跳轉(zhuǎn)到一個(gè)詳情頁面，在URL中傳遞不同的參數(shù)區(qū)分不同的頁面验靡；
２）通過本地存儲cookie倍宾、localStorage、sessionStorage胜嗓；
例如京東的登陸高职，把登陸后獲得的頁面信息存儲到本地，其他頁面需要用戶信息的話就從本地的存儲數(shù)據(jù)中獲却侵荨怔锌；
３）使用iframe
例如在Ａ頁面中嵌入Ｂ頁面，在Ａ中可以通過一些屬性和實(shí)現(xiàn)方法和Ｂ頁面的通信；
４）利用postMessage實(shí)現(xiàn)頁面間的通信
例如父窗口往子窗口傳遞信息埃元，子窗口往父窗口傳遞信息

歡迎關(guān)注