1.web storage和cookie的区别?
Web Storage的概念和cookie类似,
区别是它是为了更大容量存储设计的。
Cookie的大小是受限的,
而且每次你请求一个新的页面的时候Cookie都会被发送过去,
这样无形中浪费了带宽,
另外cookie还须要指定做用域,
不能够跨域调用
除此以外,
WebStorage拥有setItem,getItem,removeItem,clear等方法,
不像cookie须要前端开发者本身封装setCookie,getCookie
可是cookie也是不能够或缺的:
cookie的做用是与服务器进行交互,
做为HTTP规范的一部分而存在 ,
而Web Storage仅仅是为了在本地“存储”数据而生
浏览器的支持除了IE7及如下不支持外,
其余标准浏览器都彻底支持(ie及FF需在web服务器里运行),
值得一提的是IE老是办好事,
例如IE七、IE6中的userData其实就是javascript本地存储的解决方案。
经过简单的代码封装能够统一到全部的浏览器都支持web storage
localStorage和sessionStorage都具备相同的操做方法,
例如setItem、getItem和removeItem等
复制代码
2.描述 cookies、sessionStorage 和 localStorage 的区别?
与服务器交互:
cookie 是网站为了标示用户身份而储存在用户本地终端上的数据(一般通过加密)
cookie 始终会在同源 http 请求头中携带(即便不须要),在浏览器和服务器间来回传递
sessionStorage 和 localStorage 不会自动把数据发给服务器,仅在本地保存
存储大小:
cookie 数据根据不一样浏览器限制,大小通常不能超过 4k
sessionStorage 和 localStorage 虽然也有存储大小的限制,但比cookie大得多,能够达到5M或更大
有期时间:
localStorage 存储持久数据,浏览器关闭后数据不丢失除非主动删除数据
sessionStorage 数据在当前浏览器窗口关闭后自动删除
cookie 设置的cookie过时时间以前一直有效,与浏览器是否关闭无关
复制代码
3.前端须要注意哪些SEO?
合理的title、description、keywords:
搜索对着三项的权重逐个减少,
title值强调重点便可,
重要关键词出现不要超过2次,
并且要靠前,不一样页面title要有所不一样;
description把页面内容高度归纳,
长度合适,不可过度堆砌关键词,
不一样页面description有所不一样;
keywords列举出重要关键词便可
语义化的HTML代码,
符合W3C规范:
语义化代码让搜索引擎容易理解网页
重要内容HTML代码放在最前:
搜索引擎抓取HTML顺序是从上到下,
有的搜索引擎对抓取长度有限制,
保证重要内容必定会被抓取
重要内容不要用js输出:
爬虫不会执行js获取内容
少用iframe:
搜索引擎不会抓取iframe中的内容
非装饰性图片必须加alt.
提升网站速度:
网站速度是搜索引擎排序的一个重要指标
复制代码
4.如何作SEO优化?
标题与关键词
设置有吸引力切合实际的标题,标题中要包含所作的关键词
网站结构目录
最好不要超过三级,每级有“面包屑导航”,使网站成树状结构分布
页面元素
给图片标注"Alt"可让搜索引擎更友好的收录
网站内容
每月天天有规律的更新网站的内容,会使搜索引擎更加喜欢
友情连接
对方必定要是正规网站,天天有专业的团队或者我的维护更新
内链的布置
使网站造成相似蜘蛛网的结构,不会出现单独链接的页面或连接
流量分析
经过统计工具(百度统计,CNZZ)分析流量来源,指导下一步的SEO
复制代码
5.Class、extends是什么,有什么做用?
ES6 的class能够看做只是一个ES5生成实例对象的构造函数的语法糖。
它参考了java语言,定义了一个类的概念,
让对象原型写法更加清晰,
对象实例化更像是一种面向对象编程。
Class类能够经过extends实现继承。
它和ES5构造函数的不一样点
类的内部定义的全部方法,都是不可枚举的
///ES5
function ES5Fun (x, y) {
this.x = x;
this.y = y;
}
ES5Fun.prototype.toString = function () {
return '(' + this.x + ', ' + this.y + ')';
}
var p = new ES5Fun(1, 3);
p.toString();
Object.keys(ES5Fun.prototype); //['toString']
//ES6
class ES6Fun {
constructor (x, y) {
this.x = x;
this.y = y;
}
toString () {
return '(' + this.x + ', ' + this.y + ')';
}
}
Object.keys(ES6Fun.prototype); //[]
ES6的class类必须用new命令操做,
而ES5的构造函数不用new也能够执行。
ES6的class类不存在变量提高,
必须先定义class以后才能实例化,
不像ES5中能够将构造函数写在实例化以后。
ES5 的继承,实质是先创造子类的实例对象this,
而后再将父类的方法添加到this上面。
ES6 的继承机制彻底不一样,
实质是先将父类实例对象的属性和方法,
加到this上面(因此必须先调用super方法),
而后再用子类的构造函数修改this。
复制代码