前端面试的一些整理
1.自我介绍
可以从以下几点来分析:
第一点，性格特点
第二点，优点和缺点
第三点，兴趣爱好
第四点，专业技能
第五点，价值观
对于语言组织的话:
可以先自报家门，然后简明扼要的说明学历、工作经历等重要情况，最后表明来意。
2.未来的规划(3-5年)
摘自知乎
- 自我认知。你对自己是否了解？了解得足够充分靠谱吗?
- 动机和价值观。你是否能接受“我们并不一定能给你公平的职业发展机会”这个现实？
- 组织承诺。你到底能在我们这儿踏实干几年？(稳定性)
如何组织语言:
如果你真想说说自己的规划，建议不要描述太外在的东西，比如职位、薪酬、管理幅度等等。因为你并不知道对方会对你有怎样的期待。
大部分情况下，员工在国内企业内的成长不像国外，你达到几年考核合格就一定给你晋升。也就是说，作为 HR 并不敢给你承诺几年一定能到什么级别。他们更希望看到你能有一颗踏实的心:当承诺暂时无法兑现时，也能坚守在这份岗位上。 所以，好的回答，既能看到你有事业心(成就动机)，又能看到你有平和的心态(不必担心你一言不合就裸辞),要贴合公司的发展。
再次强调:对于未来的规划，尽量不要主动谈及外在的职位与收入，着重表现内在的积累与成长。
3.实习学到的东西
面试动机是什么？
学习能力(悟性)
如何回答:
体现出学习能力
思考问题与解决问题的方式
善于总结，不要害怕犯错，但不能重复犯错，深刻地了解自己的优缺点并为之改变。
做好每一件小事
4.前端是做什么的
可以从工作流程方向
从用户角度
1.原型链传递过程
函数(Function)才会有prototype属性，对象(除Object)拥有__proto__
JavaScript深入之从原型到原型链
2.this
a.不在严格模式下，且 this 的值不是由该调用设置的，所以 this 的值默认指向全局对象。
b.在严格模式下，this将保持他进入执行环境时的值,会默认为undefined。
c.如果要想把 this 的值从一个环境传到另一个，就要用 call 或者 apply 方法。它们的第一个参数是作为‘this’使用的对象，其中call后续参数作为参数传递给函数调用，apply第二个参数是一个数组，数组里的元素用作函数调用中的参数
d.bind 方法:调用f.bind(someObject)会创建一个与f具有相同函数体和作用域的函数，但是在这个新函数中，this将永久地被绑定到了bind的第一个参数，无论这个函数是如何被调用的。并且bind只生效一次。
3.闭包
a.性能考量
如果不是某些特定任务需要使用闭包，在其它函数中创建函数是不明智的，因为闭包在处理速度和内存消耗方面对脚本性能具有负面影响。
例如，在创建新的对象或者类时，方法通常应该关联于对象的原型，而不是定义到对象的构造器中。原因是这将导致每次构造器被调用时，方法都会被重新赋值一次(也就是，每个对象的创建。)
4.js异步机制
5.浏览器渲染机制
a.浏览器会将HTML解析成一个DOM树，DOM 树的构建过程是一个深度遍历过程:当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。
b.将CSS解析成 CSS Rule Tree 。
c.根据DOM树和CSSOM来构造 Rendering Tree。注意:Rendering Tree 渲染树并不等同于 DOM 树，因为一些像Header或display:none的东西就没必要放在渲染树中了。
d.有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系。下一步操作称之为layout，顾名思义就是计算出每个节点在屏幕中的位置。
e.再下一步就是绘制，即遍历render树，并使用UI后端层绘制每个节点。
主要概念:
DOM Tree:浏览器将HTML解析成树形的数据结构。
CSS Rule Tree:浏览器将CSS解析成树形的数据结构。
Render Tree: DOM和CSSOM合并后生成Render Tree。
layout: 有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系，从而去计算出每个节点在屏幕中的位置。
painting: 按照算出来的规则，通过显卡，把内容画到屏幕上。
reflow（回流）:当浏览器发现某个部分发生了点变化影响了布局，需要倒回去重新渲染，内行称这个回退的过程叫 reflow。reflow 会从 这个 root frame 开始递归往下，依次计算所有的结点几何尺寸和位置。reflow 几乎是无法避免的。现在界面上流行的一些效果，比如树状目录的折叠、展开（实质上是元素的显 示与隐藏）等，都将引起浏览器的 reflow。鼠标滑过、点击……只要这些行为引起了页面上某些元素的占位面积、定位方式、边距等属性的变化，都会引起它内部、周围甚至整个页面的重新渲 染。通常我们都无法预估浏览器到底会 reflow 哪一部分的代码，它们都彼此相互影响着。
repaint（重绘）:改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性时，屏幕的一部分要重画，但是元素的几何尺寸没有变。
注意:
(1)display:none 的节点不会被加入Render Tree，而visibility: hidden 则会，所以，如果某个节点最开始是不显示的，设为display:none是更优的。
(2)display:none 会触发 reflow，而visibility:hidden 只会触发 repaint，因为没有发现位置变化。
(3)有些情况下，比如修改了元素的样式，浏览器并不会立刻reflow 或 repaint 一次，而是会把这样的操作积攒一批，然后做一次 reflow，这又叫异步 reflow 或增量异步 reflow。但是在有些情况下，比如resize 窗口，改变了页面默认的字体等。对于这些操作，浏览器会马上进行 reflow。
附博客:
浏览器渲染原理及流程
前端工程师需要明白的「浏览器渲染」
6.前端跨域问题
同域:域名,端口,协议相同.
跨域:浏览器对于javascript的同源策略的限制,例如a.cn下面的js不能调用b.cn中的js,对象或数据(因为a.cn和b.cn是不同域),所以跨域就出现了.
1、通过jsonp跨域
2、document.domain + iframe跨域
3、location.hash + iframe
4、window.name + iframe跨域
5、postMessage跨域
6、跨域资源共享（CORS）
7、nginx代理跨域
8、nodejs中间件代理跨域
9、WebSocket协议跨域
关于跨域,以及跨域的几种方式
前端常见跨域解决方案（全）
7.网页安全(常见的攻击以及防范)
XSS(跨站脚本攻击)
特点:注入恶意的HTML/JavaScript代码到用户浏览的网页上，从而达到Cookie资料窃取、会话劫持、钓鱼欺骗等攻击。
防御:
a.HttpOnly,浏览器禁止页面的JS访问带有HttpOnly属性的Cookie。
b.输入检查 XSS Filter,对输入内容做格式检查，类似“白名单”，可以让一些基于特殊字符的攻击失效。在客户端JS和服务器端代码中实现相同的输入检查(服务器端必须有)。
c.XSS的本质是“HTML注入”，用户的数据被当成了HTML代码一部分来执行，从而混淆了原本的语义，产生了新的语义。使用HtmlEncode、JavascriptEncode、URLEncode
CSRF(跨站请求伪造)
本质:重要操作的所有参数都是可以被攻击者猜测到的。攻击者预测出URL的所有参数与参数值，才能成功地构造一个伪造的请求。
防御:
验证码、Referer Check 检查请求是否来自合法的源(可被伪造)。
token存放在session或者cookie中
前端框架防范措施:
React默认会转义所有字符串。
前端安全(XSS、CSRF防御)
8.伪元素与伪类区别
伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息
伪元素本质上是创建了一个有内容的虚拟容器
CSS3中伪类和伪元素的语法不同:伪类一个冒号，伪元素的由两个冒开头
可以同时使用多个伪类，而只能同时使用一个伪元素
CSS3伪类和伪元素的特性和区别
9.redux是什么