刷前端面经笔记（五）

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.原生ＪＳ都有哪些方式可以实现两个页面间的通信？