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总是办好事,
例如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(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。