刷前端面经笔记（五）

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实现页面间的通信
例如父窗口往子窗口传递信息，子窗口往父窗口传递信息