刚入职半个月，无缝对接的加入了新公司，完美。抽空整理了下最近遇到的面试题，面试公司包括：阿里，腾讯，美的，顺丰，平安金服。base是深圳，后三个都比较顺利拿到了offer，离大厂还有点差距，加油鸭～
因为是初级前端，面试题可能过于基础，有错误望指出?。
有些问题当场没有很全面的答出，后续上网查资料补齐了，可能会有很多雷同，哈哈
有很多题目在这个网站能看到，强推一波：";
 

 


 //o是形参，对象的引用，依旧指向原地址，相当于 var o = webSite;赋值改变对象的属性
 //变量o指向新的地址 以后的变动和旧地址无关，题目打印的是外部";
 

 


 

11、 一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？

1、浏览器会开启一个线程来处理这个请求，对 URL 分析判断如果是 http 协议就按照 Web 方式来处理;
2、调用浏览器内核中的对应方法，比如 WebView 中的 loadUrl 方法;
3、通过DNS解析获取网址的IP地址，设置 UA 等信息发出第二个GET请求;
4、进行HTTP协议会话，客户端发送报头(请求报头);
7、处理结束回馈报头，此处如果浏览器访问过，缓存上有对应资源，会与服务器最后修改时间对比，一致则返回304;
8、浏览器开始下载html文档(响应报头，状态码200)，同时使用缓存;
9、文档树建立，根据标记请求所需指定MIME类型的文件（比如css、js）,同时设置了cookie;
10、页面开始渲染DOM，JS根据DOM API操作DOM,执行事件绑定等，页面显示完成。

12、ajax实现原理及方法使用

 

 原生ajax的请求步骤
 
//规定请求的类型、URL 以及是否异步处理请求。
//发送信息至服务器时内容编码类型
//接受服务器响应数据
 

便于diff算法的更新，key的唯一性，能让算法更快的找到需要更新的dom，需要注意的是，key要唯一，不然会出现很隐蔽性的更新问题。

14、vue双向绑定的原理是什么？

双向数据绑定是基于Object.defineProperty()重新定义get和set方法实现的。修改触发set方法赋值，获取触发get方法取值，并通过数据劫持发布信息。

处理数据动态变化后，dom还未及时更新的问题。$nextTick就可以获取到数据更新后最新的dom变化

16、浅谈前端工程化、模块化、组件化

1、将前端项目当成一项系统工程进行分析、组织和构建从而达到项目结构清晰、分工明确、团队配合默契、开发效率提高的目的
 

1、可以简单的认为模块化和组件化是工程化的表现形式
 

 es6带来了语言原生的模块化方案：
 


 

 

 a、直接使用sort()方法，默认的排序方法会将数组元素转换为字符串，然后比较字符串中字符的UTF-16编码顺序来进行排序。
 
 

 b、sort，可以接收一个函数，返回值是比较两个数的相对顺序的值
 
 

31、箭头函数与普通函数的区别

 

 a、箭头函数是匿名函数，不能作为构造函数，不能使用new
 
 

 b、箭头函数不绑定arguments，取而代之用rest参数...解决
 
 

 c、箭头函数不绑定this，会捕获其所在的上下文的this值，作为自己的this值
 
 

 d、箭头函数通过call()或apply()方法调用一个函数时，只传入了一个参数，对 this 并没有影响。
 
 

 e、箭头函数没有原型属性
 
 

 

// 引入方式 1 对应导出方式 1
// 引入方式2 对应导出方式 2
 

25、什么是虚拟dom，优势是什么，存储在哪

1、具备跨平台的优势-由于 Virtual DOM 是以 JavaScript 对象为基础而不依赖真实平台环境，所以使它具有了跨平台的能力，比如说浏览器平台、Weex、Node 等。
2、提升渲染性能-Virtual DOM的优势不在于单次的操作，而是在大量、频繁的数据更新下，能够对视图进行合理、高效的更新。
为了实现高效的DOM操作，一套高效的虚拟DOM diff算法显得很有必要。通过找出本次DOM需要更新的节点来更新，其他的不更新。
3、是一个js对象，存储在内存中。

1、Entry：入口，Webpack 执行构建的第一步将从 Entry 开始，可抽象成输入。
2、Module：模块，在 Webpack 里一切皆模块，一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。
3、Chunk：代码块，一个 Chunk 由多个模块组合而成，用于代码合并与分割。
4、Loader：模块转换器，用于把模块原内容按照需求转换成新内容。
5、Plugin：扩展插件，在 Webpack 构建流程中的特定时机会广播出对应的事件，插件可以监听这些事件的发生，在特定时机做对应的事情。
6、Output：打包后文件输出的位置。

1、客户端使用https的url访问web服务器,要求与服务器建立ssl连接
2、web服务器收到客户端请求后, 会将网站的证书(包含公钥)传送一份给客户端
3、客户端收到网站证书后会检查证书的颁发机构以及过期时间, 如果没有问题就随机产生一个秘钥
4、客户端利用公钥将会话秘钥加密, 并传送给服务端, 服务端利用自己的私钥解密出会话秘钥
5、之后服务器与客户端使用秘钥加密传输

29、如何防范CSRF攻击，XSS攻击

2、输入检查-不要相信用户的所有输入
3、输出检查-存的时候转义或者编码

1、组件化将页面视为一个容器,页面上各个独立部分例如:头部、导航、焦点图、侧边栏、底部等视为独立组件,不同的页面根据内容的需要,去盛放相关组件即可组成完整的页面。
2、模块化和组件化一个最直接的好处就是复用

1、@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。
2、加载页面时，link引入的CSS被同时加载，@import引入的CSS将在页面加载完毕后加载。
3、link标签作为HTML元素，不存在兼容性问题，而@import是CSS2.1才有的语法，故老版本浏览器（IE5之前）不能识别。
4、可以通过JS操作DOM，来插入link标签改变样式；由于DOM方法是基于文档的，无法使用@import方式插入样式。

18、请写一个正则15-20位的大写字母或数字

19、如下代码输出是什么

20、如下代码输出是什么

21、如下代码输出的是什么

setTimeout 和 setInterval的运行机制是将指定的代码移出本次执行，等到下一轮 Event Loop 时，再检查是否到了指定时间。如果到了，就执行对应的代码；如果不到，就等到再下一轮 Event Loop时重新判断。
这意味着，setTimeout指定的代码，必须等到本次执行的所有同步代码都执行完，才会执行。
new Promise是立即执行，先打印2，3，然后5，再执行then打印4，最后是1
 

2、在性能上，AngularJS依赖对数据做脏检查，所以Watcher越多越慢。

22、vue项目优化的手段有哪些

 
2、图片，资源放cdn
3、页面图片较多进行懒加载
 

模型（Model）：数据保存
视图（View）：用户界面。
 

 


Model 将新的数据发送到 View，用户得到反馈

1. 各部分之间的通信，都是双向的。
3. View 非常薄，不部署任何业务逻辑，称为"被动视图"（Passive View），即没有任何主动性，而 Presenter非常厚，所有逻辑都部署在那里。

View的变动，自动反映在 ViewModel，反之亦然。

1、需要频繁操作dom
2、容易引起重绘和回流，影响页面性能

1、mvvm模式，采用虚拟dom不需要频繁操作dom，通过双向绑定，用数据驱动页面变化，页面变化对应数据也发生变化，只需要关注数据层的业务逻辑，而无需关注视图层的更新。可以尽量减少无用的更新操作，提高dom渲染效率。
2、组件化开发，页面由若干个组建组成，可复用性高。
3、社区环境好，各类资源文档十分齐全。
4、通过Object.defineProperty() 方法，监控对数据的操作，从而可以自动触发数据同步。

2、一切都是组件，组件实例之间可以嵌套。
3、使用独特的jsx语法。