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访问
6）图片方面
优化CSS精灵
不要再HTML中拉伸图片
6.语义化的理解
ＨＴＭＬ语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；
在没有CSS样式情况下也以一种文档格式显示，并且是容易阅读的；
搜索引擎的爬虫依赖于标记来确定上下文的各个关键字的权重，利于SEO；
使阅读源代码的人更容易将网站分块，便于阅读维护理解；
7.ＷＥＢ标准以及Ｗ３Ｃ标准是什么
标签闭合、标签小写、不乱嵌套、使用外链ＣＳＳ和ＪＳ、结构行为表现的分离
８.说说对作用域链的理解
作用域链的作用是保证执行环境里有权访问的变量和函数是有序的，作用域链的变量只能向上访问，变量访问到ｗｉｎｄｏｗ对象即被终止，作用域链向下访问变量是不被允许的；
即作用域就是变量与函数的可访问范围，即作用域控制这变量与函数的可见性和生命周期；
９.如何实现瀑布流
１）瀑布流布局的要求要进行布置的元素等宽；
然后计算元素的宽度，
与浏览器宽度之比，得到需要布置的列数；
２）创建一个数组，长度为列数，
里面的值为以已布置元素的总高度（最开始为０）；
３）然后将未布置的元素的依次布置到高度最小的那一列，
就得到了瀑布流布局；
４）滚动加载，ｓｃｒｏｌｌ事件得到ｓｃｒｏｌｌＴｏｐ，
与最后盒子的ｏｆｆｓｅｔＴｏｐ对比，
符合条件就不断滚动加载。
瀑布流布局核心代码：
/** * 实现瀑布流的布局 * @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; }
１０.原生ＪＳ都有哪些方式可以实现两个页面间的通信？
１）通过ｕｒｌ地址栏传递参数；
例如：点击列表中的每一条数据，跳转到一个详情页面，在ＵＲＬ中传递不同的参数区分不同的页面；
２）通过本地存储ｃｏｏｋｉｅ、ｌｏｃａｌＳｔｏｒａｇｅ、ｓｅｓｓｉｏｎＳｔｏｒａｇｅ；
例如京东的登陆，把登陆后获得的页面信息存储到本地，其他页面需要用户信息的话就从本地的存储数据中获取；
３）使用ｉｆｒａｍｅ
例如在Ａ页面中嵌入Ｂ页面，在Ａ中可以通过一些属性和实现方法和Ｂ页面的通信；
４）利用ｐｏｓｔＭｅｓｓａｇｅ实现页面间的通信
例如父窗口往子窗口传递信息，子窗口往父窗口传递信息