撩课-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 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(, );
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。