前言

本次主要神策数据公司9.16下午四点武汉前端面经总结

问题总结

cookie、localStorage 和 sessionStorage 三者的区别？

应用场景？

cookie最常见就是用来实现登录持久化，保存身份认证信息。服务器可以在请求返回时候加上一个set cookie的响应头，于是以后请求同一个域名或者cookie中指定的domain时候都会带上这个cookie。

第三方cookie，当浏览器地址栏的域名和cookie的域不一样的这种cookie被称为第三方cookie，可以用于追踪用户浏览行为，投放广告。

seesionStorage可以保存一些不希望因为页面刷新而丢失的数据。

localStorage可以跨会话访问到数据，适合存储文档，和用户的偏好设置。

localStorage会存在跨域问题吗？

会，localStorage受同源策略的限制，所以存在跨域问题。举个例子，比如我用Chrome浏览天猫网站，在搜索栏搜索‘云安全’，过几天我用Chrome进了淘宝网，点击搜索栏想要获取到‘云安全’这个搜索记录，这个时候就需要用到localStroage的跨域存储。
localstorage跨域解决方案

关于cookie的其他问题？

cookie的18个问题

不同的浏览器共享cookie吗?

不同的浏览器互相不通信，彼此是独立的cookie。因此，我们在一个浏览器上登陆了某个网站，换到另一个浏览器上的时候需要重新登陆。

Cookie是否可以跨域？

Cookie是不可跨域的，每个Cookie都会绑定单一的域名，无法在别的域名下获取使用，一级域名和二级域名之间通过domain是允许共享使用的。例如baidu.com是一级域名，asdx.iisp.com则是二级域名。
再比如说，我们请求https://www.google.com/时，浏览器会自动把google.com的Cookie带过去给google的服务器，而不会把https://www.baidu.com/的Cookie带过去给google的服务器。

这就意味着，由于域名不同，用户向系统A登录后，系统A返回给浏览器的Cookie，用户再请求系统B的时候不会将系统A的Cookie带过去。

如何实现Cookie跨域？

cookie跨域那些事儿
服务端将Cookie写到客户端后，客户端对Cookie进行解析，将Token解析出来，此后请求都把这个Token带上就行了
多个域名共享Cookie，在写到客户端的时候设置Cookie的domain。
将Token保存在SessionStroage中（不依赖Cookie就没有跨域的问题了）

为什么Cookie不安全？

因为Cookie存储在浏览器端，一些不法分子可能通过抓包工具等截获cookie。

如何解决Cookie安全性问题？

• 设置cookie的有效期的时候，尽量不要设置过长。
• 设置HttpOnly属性为true。防止JS脚本读取cookie信息，可以防止XSS攻击。
• 对cookie进行加密。
• 用户第一次登录的时候，将IP和cookie进行加密后，然后保存为一个token，每次请求时都将cookie和IP组合起来加密进行对比，只有完全对应才能验证成功。
• session和cookie同时使用。
• 尽可能使用HTTPS

单条cookie记录能够存储的最大数据量为4KB左右，超过就会存不进cookie。但是业务需要我们往cookie里面存很多的数据，那我们怎么解决这个问题呢？

localstorage是html5新增的一个功能，用于本地存储。主要解决cookie存储量小的问题，
可以使用token，或者发多个cookie增大你要往服务器发的消息，
从cookie的声明周期上考虑
Cookie的生命周期与传递策略

路由的两种模式？

hash：通过监听浏览器的 onhashchange() 事件变化,查找对应的路由规则
history：利用了HTML5 中新增的两个特性⽅法 pushState() 和 replaceState() 方法

多页面的缺点？

1.页面跳转时不可避免的会出现白屏；2. 从a页面跳转到b页面时，难免有会有重复的部分（例如页头和页脚一般都是通用的），而这些重复部分显然也会造成不必要的流量浪费。这些问题在pc端都是不问题，但是在移动设备上就是大问题了，为了提升用户的体验，让用户更快的看到页面，节约流量，程序员们发明了单页应用技术。

单页应用的实现方式-路由

地址栏中的内容变化了，主体内容有对应的更新，但是整体页面不去刷新。就是我们说的前端路由技术。
路由就是一套规则：根据地址栏中地址来决定页面主体上的内容显示。例如：当地址是/list时，内容就是列表页的内容。当地址是/detail时，内容就是详情页的内容，依次类推。

实现路由功能由两种方式：
hash模式。它主要是监听浏览器的hashchange事件。
history模式。它主要是调用history的pushState,replaceState方法，监听popstate事件。

你觉得前端这块需要掌握哪些知识范畴?

HTML5+css3+JavaScript是web开发的基础。Html是网页结构的负责人， CSS是网页样式的负责人， JS是逻辑交互的负责人。前二者更像标记语言，没有逻辑，因此 JS是前端的首要任务。HTML 5中的大多数新技术需要与 JS结合使用。每一个人的学习进度都不同。这一阶段主要是多个模拟站，熟悉基础，尝试用 CSS编写响应页面，深入了解 JS，例如原型链，闭包，设计模式等等。要通过实践逐步了解和掌握，需要不断积累。
vue+elementUI
webpack(代码渲染)
vue-cli （npm run serve）

vue封装一个有哪几个关键点?

vue组件三要素

• props参数
• slot定制插槽
• event自定义事件

独立性（组件的封装）
数据传递（父传子，子传父，兄弟）
扩展性（vue-cli）

html常用的一些标签?这些标签的关键属性，form有没有了解过?

HTML常用标签总结

表单标签的格式：

< form action="url" method=get|post name="myform" >< /form>

name：表单提交时的名称
action：提交到的地址
method：提交方式，默认为get

post和get之间的区别是什么呢？
1.数据提交方式，get把提交的数据url可以看到，post看不到
2.get一般用于提交少量数据，post用来提交大量数据
3.get最多提交1K数据，post理论上没有限制
4.get提交的数据在浏览器历史记录中，安全性不好

一个完整的表单包含三个基本组成部分：表单标签、表单域、表单按钮
1.表单标签是指< form>标签本身，它是一个包含表单元素的区域，使用< form>< /form>定义
2.表单域是< form>标签中用来收集用户输入的每一项，通常用input标签来定义，input标签有不同的类型，对应用户不同的数据。
3.表单按钮是用来提交< form>表单中的所有信息到服务器

css 常用的属性，以及他的关键样式，属性?

CSS常用属性和盒子模型

js是面向对象的语言吗，继承是怎么实现的?

我们知道javascript提供了很多特征使其在很多方面的行为类似面向对象的语言， 但是 javascript并不是人们常说的纯粹的面向对象的语言，因为它不支持某些特征，其中一个重要的特征是继承。

javascript是个弱类型语言，是基于对象的语言，它能模拟出来面向对象的形式，不能说它能面向对象。

从另一个角度说，说起面向对象，有三个特性，封装，继承，多态，但是js能实现封装，但是继承是类特有的，也就是说js能模拟出来。这个不能说js语言面向对象。
彻底弄清js继承的几种实现方式

promise处理回调以及Async/Await替代promise的六大理由？

promise处理回调