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

时间:2022-12-15 18:57:28

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。