前端面试问题小结

1.跨域

介绍

为了保证使用者信息的安全,防止恶意网站篡改用户数据

只要协议、域名、端口有任何一个不同,都被当作是不同的域,之间的请求就是跨域操作

解决

1).CORS(跨域资源访问)

后端设置

Access-Control-Allow-Origin: origin | ‘‘ 允许某个指定的域访问,表示不限制域。

Access-Control-Allow-Methods: ‘GET,POST,PUT,DELETE’ 允许哪些类型的请求

Access-Control-Allow-Headers: ‘x-token’ 允许的自定义Header。

2).代理

通过同源的api调用跨域的api, 服务端没有跨域的问题

3).jsonp

2.CSRF和XSS

XSS:跨站脚本(Cross-site scripting,通常简称为XSS)是一种网站应用程序的安全漏洞攻击,是代码注入的一种。它允许恶意用户将代码注入到网页上,其他用户在观看网页时就会受到影响。这类攻击通常包含了HTML以及用户端脚本语言。

CSRF:跨站请求伪造(英语:Cross-site request forgery),也被称为 one-click attack 或者 session riding,通常缩写为 CSRF 或者 XSRF, 是一种挟制用户在当前已登录的Web应用程序上执行非本意的操作的攻击方法。

很多同学会搞不明白XSS与CSRF的区别,虽然这两个关键词时常抱团出现,但他们两个是不同维度的东西(或者说他们的目的是不一样的)。
XSS更偏向于方法论,CSRF更偏向于一种形式,只要是伪造用户发起的请求,都可成为CSRF攻击。

3.浏览器的渲染过程

DOM -> CSSOM -> render -> layout -> print

4.虚拟DOM、Diff算法、vuex和redux、weex和reactNative

1).虚拟DOM

把DOM存入内存, 不直接操作真实的DOM 先修改虚拟DOM 再把更改后的变化同步到真实DOM

ps.虚拟DOM的推出 使weex & reactNative等用JS写UI ios、Android或者web 负责渲染的方式让一套代码三端通用成功可能!

2).Diff算法

在标准diff机制下:在同一位置对比前后的dom节点,发现节点改变了,会继续比较该节点的子节点,一层层对比,找到不同的节点,然后更新节点。

在react的diff算法下,在同一位置对比前后dom节点,只要发现不同,就会删除操作前的domm节点(包括其子节点),替换为操作后的dom节点。

在vue的diff算法下,有无设置key
尽量不要跨层级的修改dom
设置key可以最大化的利用节点
不要盲目相信diff的效率,在必要时可以手工优化

5.常用的ES6

1.函数参数默认值
2.模板字符串
3.解构赋值
4.对象属性简写
5.箭头函数
6.Promise
7.Let与Const
8.类
9.模块化

6.SSR(服务端渲染) weex

js代码打包成bundle 然后用 各个端的渲染器来渲染相应的页面

7.遇到的问题,以及解决

8.typescipt

9.cancel request

10.与后端配合

前端比较倾向于展示所需要的数据, 后端比较倾向于输出模型相关的数据 两者其实是有冲突的
常规的是前端拿到模型相关的数据 如果做数据清洗 转换为展示所需的数据

可以将数据清洗的部分抽取出来 做一个node的中间层