原创 常见web前端面试题（包含答案）

　　入职互联网技术岗位都有一个特点，需要参加面试以及笔试。而这两个过程中都有很多涉及到技术的问题。所以博学谷为大家整理了部分常见的web前端面试题，并完善了其中答案，希望对求知的小伙伴有所帮助。

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

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

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

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

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

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

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

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

　　闭包的写法，闭包的作用，闭包的缺点
　　1.使用闭包的目的--隐藏变量，间接访问一个变量,在定义函数的词法作用域外，调用函数
　　2.闭包的内存泄露，是IE的一个 bug，闭包使用完成之后，收回不了闭包的引用，导致内存泄露
　　3.闭包造成内存泄露的实验

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

　　如果需要更多的web前端面试题，可以持续关注博学谷网站，我们会持续整理。同时其他学科例如Java、python、区块链等热门语言的面试题也会陆续与大家分享出来。