JS常见面试题

1. 基础知识扎实

   a. 知道JavaScript prototype、闭包、事件怎么回事儿

   b. 多少了解HTTP协议和Web Server怎么工作

   c. 知道CSS display、float、z-index、BFC

   d. 了解浏览器渲染页面原理

   e. 模板引擎

2. 对新技术有兴趣

   a. 前端代码模块化与构建，gulp、webpack等

   b. NodeJS

   c. MVVM

   d. React、Vue、backbone、angular随便说说

3. 一定的工程能力

   a. 了解门后端语言，最起码知道后端同学在说什么

   b. 了解些web 安全知识

   c. 性能优化

   d. 前端代码工作及发布体系

4. 随时准备自我介绍和浏览器从输入URL到渲染出页面发生了什么

5. 另外我们很喜欢表达能力不错的人，毕竟工作职责不是有个新人培训和前端技术布道

 

1.怎么去设计一个组件封装

组件封装的目的是为了重用，提高开发效率和代码质量低耦合，单一职责，可复用性，可维护性前端组件化设计思路

2.js 异步加载的方式

渲染引擎遇到 script 标签会停下来，等到执行完脚本，继续向下渲染defer 是“渲染完再执行”，async 是“下载完就执行”，defer 如果有多个脚本，会按照在页面中出现的顺序加载，多个async 脚本不能保证加载顺序加载 es6模块的时候设置 type=module，异步加载不会造成阻塞浏览器，页面渲染完再执行，可以同时加上async属性，异步执行脚本（利用顶层的this等于undefined这个语法点，可以侦测当前代码是否在 ES6 模块之中）

3.css 动画和 js 动画的差异

代码复杂度，js 动画代码相对复杂一些动画运行时，对动画的控制程度上，js 能够让动画，暂停，取消，终止，css动画不能添加事件动画性能看，js 动画多了一个js 解析的过程，性能不如 css 动画好

4.XSS 与 CSRF 两种跨站攻击

xss 跨站脚本攻击，主要是前端层面的，用户在输入层面插入攻击脚本，改变页面的显示，或则窃取网站 cookie，预防方法：不相信用户的所有操作，对用户输入进行一个转义，不允许 js 对 cookie 的读写csrf 跨站请求伪造，以你的名义，发送恶意请求，通过 cookie 加参数等形式过滤我们没法彻底杜绝攻击，只能提高攻击门槛

5.事件委托，目的，功能，写法

把一个或者一组元素的事件委托到它的父层或者更外层元素上优点，减少内存消耗，动态绑定事件target 是触发事件的最具体的元素，currenttarget是绑定事件的元素(在函数中一般等于this)JavaScript 事件委托详解

6.线程，进程

线程是最小的执行单元，进程是最小的资源管理单元一个线程只能属于一个进程，而一个进程可以有多个线程，但至少有一个线程

7.负载均衡

当系统面临大量用户访问，负载过高的时候，通常会使用增加服务器数量来进行横向扩展，使用集群和负载均衡提高整个系统的处理能力服务器集群负载均衡原理？

8.什么是CDN缓存

CDN 是一种部署策略，根据不同的地区部署类似nginx 这种服务服务，会缓存静态资源。前端在项目优化的时候，习惯在讲台资源上加上一个 hash 值，每次更新的时候去改变这个 hash，hash 值变化的时候，服务会去重新取资源(CDN)是一个经策略性部署的整体系统，包括分布式存储、负载均衡、网络请求的重定向和内容管理4个要件CDN_百度百科

9.闭包的写法，闭包的作用，闭包的缺点

使用闭包的目的——隐藏变量，间接访问一个变量,在定义函数的词法作用域外，调用函数闭包的内存泄露，是IE的一个 bug，闭包使用完成之后，收回不了闭包的引用，导致内存泄露「每日一题」JS 中的闭包是什么？闭包造成内存泄露的实验

10.跨域问题，谁限制的跨域，怎么解决

浏览器的同源策略导致了跨域用于隔离潜在恶意文件的重要安全机制[jsonp ，允许 script 加载第三方资源]https://segmentfault.com/a/11…nginx 反向代理（nginx 服务内部配置 Access-Control-Allow-Origin *）cors 前后端协作设置请求头部，Access-Control-Allow-Origin 等头部信息iframe 嵌套通讯，postmessage

11.javascript 中常见的内存泄露陷阱

内存泄露会导致一系列问题，比如：运行缓慢，崩溃，高延迟内存泄露是指你用不到（访问不到）的变量，依然占居着内存空间，不能被再次利用起来意外的全局变量，这些都是不会被回收的变量（除非设置 null 或者被重新赋值），特别是那些用来临时存储大量信息的变量周期函数一直在运行，处理函数并不会被回收，jq 在移除节点前都会，将事件监听移除js 代码中有对 DOM 节点的引用，dom 节点被移除的时候，引用还维持JavaScript 中 4 种常见的内存泄露陷阱

12.babel把ES6转成ES5或者ES3之类的原理是什么

它就是个编译器，输入语言是ES6+，编译目标语言是ES5babel 官方工作原理解析：将代码字符串解析成抽象语法树变换：对抽象语法树进行变换操作再建：根据变换后的抽象语法树再生成代码字符串

13.Promise 模拟终止

当新对象保持“pending”状态时，原Promise链将会中止执行。return new Promise(()=>{}); // 返回“pending”状态的Promise对象从如何停掉 Promise 链说起(promise内存泄漏问题)

14.promise 放在try catch里面有什么结果

Promise 对象的错误具有冒泡性质，会一直向后传递，直到被捕获为止，也即是说，错误总会被下一个catch语句捕获当Promise链中抛出一个错误时，错误信息沿着链路向后传递，直至被捕获

15.网站性能优化

http 请求方面，减少请求数量，请求体积，对应的做法是，对项目资源进行压缩，控制项目资源的 dns 解析在2到4个域名，提取公告的样式，公共的组件，雪碧图，缓存资源，压缩资源，提取公共资源压缩，提取 css ，js 公共方法不要缩放图片，使用雪碧图，使用字体图表（阿里矢量图库）使用 CDN，抛开无用的 cookie减少重绘重排，CSS属性读写分离，最好不要用js 修改样式，dom 离线更新，渲染前指定图片的大小js 代码层面的优化，减少对字符串的计算，合理使用闭包，首屏的js 资源加载放在最底部

16.js 自定义事件实现

原生提供了3个方法实现自定义事件createEvent，设置事件类型，是 html 事件还是 鼠标事件initEvent 初始化事件，事件名称，是否允许冒泡，是否阻止自定义事件dispatchEvent 触发事件

17.angular 双向数据绑定与vue数据的双向数据绑定

二者都是 MVVM 模式开发的典型代表angular 是通过脏检测实现，angular 会将 UI 事件，请求事件，settimeout 这类延迟，的对象放入到事件监测的脏队列，当数据变化的时候，触发 $diget 方法进行数据的更新，视图的渲染vue 通过数据属性的数据劫持和发布订阅的模式实现，大致可以理解成由3个模块组成，observer 完成对数据的劫持，compile 完成对模板片段的渲染，watcher 作为桥梁连接二者，订阅数据变化及更新视图

18.get与post 通讯的区别

Get 请求能缓存，Post 不能Post 相对 Get 安全一点点，因为Get 请求都包含在 URL 里，且会被浏览器保存历史纪录，Post 不会，但是在抓包的情况下都是一样的。Post 可以通过 request body来传输比 Get 更多的数据，Get 没有这个技术URL有长度限制，会影响 Get 请求，但是这个长度限制是浏览器规定的，不是 RFC 规定的Post 支持更多的编码类型且不对数据类型限制

19.有没有去研究webpack的一些原理和机制，怎么实现的

解析webpack配置参数，合并从shell传入和webpack.config.js文件里配置的参数，生产最后的配置结果。注册所有配置的插件，好让插件监听webpack构建生命周期的事件节点，以做出对应的反应。从配置的entry入口文件开始解析文件构建AST语法树，找出每个文件所依赖的文件，递归下去。在解析文件递归的过程中根据文件类型和loader配置找出合适的loader用来对文件进行转换。递归完后得到每个文件的最终结果，根据entry配置生成代码块chunk。输出所有chunk到文件系统。