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实现页面间的通信
例如父窗口往子窗口传递信息，子窗口往父窗口传递信息
欢迎关注
网友评论