撩课-Web大前台每天5道面试题-Day31

1.web storage和cookie的区别?

Web Storage的概念和cookie类似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中白费了带宽，另外cookie还需要指定作用域，不可以跨域调用除此之外，WebStorage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前台开发者自己封装setCookie，getCookie但是cookie也是不可以或者缺的：cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生浏览器的支持除了IE７及以下不支持外，其余标准浏览器都完全支持(ie及FF需在web服务器里运行)，值得一提的是IE总是办好事，例如IE7、IE6中的userData其实就是javascript本地存储的处理方案。通过简单的代码封装可以统一到所有的浏览器都支持web storagelocalStorage和sessionStorage都具备相同的操作方法，例如setItem、getItem和removeItem等

2.形容 cookies、sessionStorage 和 localStorage 的区别？

与服务器交互：cookie 是网站为了标示客户身份而储存在客户本地终端上的数据（通常经过加密）cookie 始终会在同源 http 请求头中携带（即便不需要），在浏览器和服务器间来回传递sessionStorage 和 localStorage 不会自动把数据发给服务器，仅在本地保存存储大小：cookie 数据根据不同浏览器限制，大小一般不能超过 4ksessionStorage 和 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构造函数的不同点类的内部定义的所有方法，都是不可枚举的///ES5function 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']//ES6class 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。