8月份比较新的前端面试题
分类:前端面试题 热度:

  最近参加了几场面试,积累了一些高频面试题,我把面试题分为两类,一种是基础试题:主要考察前端技基础是否扎实,是否能够将前端知识体系串联。一种是开放式问题:考察业务积累,是否有自己的思考,思考问题的方式,这类问题没有标准答案。
 
  基础题
 
  题目的答案提供了一个思考的方向,答案不一定正确全面,有错误的地方欢迎大家请在评论中指出,共同进步。
 
  怎么去设计一个组件封装
 
  组件封装的目的是为了重用,提高开发效率和代码质量
 
  低耦合,单一职责,可复用性,可维护性
 
  前端组件化设计思路
 
  js异步加载的方式
 
  渲染引擎遇到script标签会停下来,等到执行完脚本,继续向下渲染
 
  defer是“渲染完再执行”,async是“下载完就执行”,defer如果有多个脚本,会按照在页面中出现的顺序加载,多个async脚本不能保证加载顺序
 
  加载es6模块的时候设置type=module,异步加载不会造成阻塞浏览器,页面渲染完再执行,可以同时加上async属性,异步执行脚本(利用顶层的this等于undefined这个语法点,可以侦测当前代码是否在ES6模块之中)
 
  css动画和js动画的差异
 
  代码复杂度,js动画代码相对复杂一些
 
  动画运行时,对动画的控制程度上,js能够让动画,暂停,取消,终止,css动画不能添加事件
 
  动画性能看,js动画多了一个js解析的过程,性能不如css动画好
 
  XSS与CSRF两种跨站攻击
 
  xss跨站脚本攻击,主要是前端层面的,用户在输入层面插入攻击脚本,改变页面的显示,或则窃取网站cookie,预防方法:不相信用户的所有操作,对用户输入进行一个转义,不允许js对cookie的读写
 
  csrf跨站请求伪造,以你的名义,发送恶意请求,通过cookie加参数等形式过滤
 
  我们没法彻底杜绝攻击,只能提高攻击门槛
 
  事件委托,目的,功能,写法
 
  把一个或者一组元素的事件委托到它的父层或者更外层元素上
 
  优点,减少内存消耗,动态绑定事件
 
  target是触发事件的最具体的元素,currenttarget是绑定事件的元素(在函数中一般等于this)
 
  JavaScript事件委托详解
 
  线程,进程
 
  线程是最小的执行单元,进程是最小的资源管理单元
 
  一个线程只能属于一个进程,而一个进程可以有多个线程,但至少有一个线程
 
  负载均衡
 
  当系统面临大量用户访问,负载过高的时候,通常会使用增加服务器数量来进行横向扩展,使用集群和负载均衡提高整个系统的处理能力
 
  服务器集群负载均衡原理?
 
  什么是CDN缓存
 
  CDN是一种部署策略,根据不同的地区部署类似nginx这种服务服务,会缓存静态资源。前端在项目优化的时候,习惯在讲台资源上加上一个hash值,每次更新的时候去改变这个hash,hash值变化的时候,服务会去重新取资源
 
  (CDN)是一个经策略性部署的整体系统,包括分布式存储、负载均衡、网络请求的重定向和内容管理4个要件
 
  CDN_百度百科
 
  闭包的写法,闭包的作用,闭包的缺点
 
  使用闭包的目的——隐藏变量,间接访问一个变量,在定义函数的词法作用域外,调用函数
 
  闭包的内存泄露,是IE的一个bug,闭包使用完成之后,收回不了闭包的引用,导致内存泄露
 
  「每日一题」JS中的闭包是什么?
 
  闭包造成内存泄露的实验
 
  跨域问题,谁限制的跨域,怎么解决
 
  浏览器的同源策略导致了跨域
 
  用于隔离潜在恶意文件的重要安全机制
 
  [jsonp,允许script加载第三方资源]https://segmentfault.com/a/11…
 
  nginx反向代理(nginx服务内部配置Access-Control-Allow-Origin*)
 
  cors前后端协作设置请求头部,Access-Control-Allow-Origin等头部信息
 
  iframe嵌套通讯,postmessage
 
  javascript中常见的内存泄露陷阱
 
  内存泄露会导致一系列问题,比如:运行缓慢,崩溃,高延迟
 
  内存泄露是指你用不到(访问不到)的变量,依然占居着内存空间,不能被再次利用起来
 
  意外的全局变量,这些都是不会被回收的变量(除非设置null或者被重新赋值),特别是那些用来临时存储大量信息的变量
 
  周期函数一直在运行,处理函数并不会被回收,jq在移除节点前都会,将事件监听移除
 
  js代码中有对DOM节点的引用,dom节点被移除的时候,引用还维持
 
  JavaScript中4种常见的内存泄露陷阱
 
  babel把ES6转成ES5或者ES3之类的原理是什么
 
  它就是个编译器,输入语言是ES6+,编译目标语言是ES5
 
  babel官方工作原理
 
  解析:将代码字符串解析成抽象语法树
 
  变换:对抽象语法树进行变换操作
 
  再建:根据变换后的抽象语法树再生成代码字符串
 
  Promise模拟终止
 
  当新对象保持“pending”状态时,原Promise链将会中止执行。
 
  returnnewPromise(()=>{});//返回“pending”状态的Promise对象
 
  从如何停掉Promise链说起(promise内存泄漏问题)
 
  promise放在trycatch里面有什么结果
 
  Promise对象的错误具有冒泡性质,会一直向后传递,直到被捕获为止,也即是说,错误总会被下一个catch语句捕获
 
  当Promise链中抛出一个错误时,错误信息沿着链路向后传递,直至被捕获
 
  网站性能优化
 
  http请求方面,减少请求数量,请求体积,对应的做法是,对项目资源进行压缩,控制项目资源的dns解析在2到4个域名,提取公告的样式,公共的组件,雪碧图,缓存资源,
 
  压缩资源,提取公共资源压缩,提取css,js公共方法
 
  不要缩放图片,使用雪碧图,使用字体图表(阿里矢量图库)
 
  使用CDN,抛开无用的cookie
 
  减少重绘重排,CSS属性读写分离,最好不要用js修改样式,dom离线更新,渲染前指定图片的大小
 
  js代码层面的优化,减少对字符串的计算,合理使用闭包,首屏的js资源加载放在最底部
 
  js自定义事件实现
 
  原生提供了3个方法实现自定义事件
 
  createEvent,设置事件类型,是html事件还是鼠标事件
 
  initEvent初始化事件,事件名称,是否允许冒泡,是否阻止自定义事件
 
  dispatchEvent触发事件
 
  angular双向数据绑定与vue数据的双向数据绑定
 
  二者都是MVVM模式开发的典型代表
 
  angular是通过脏检测实现,angular会将UI事件,请求事件,settimeout这类延迟,的对象放入到事件监测的脏队列,当数据变化的时候,触发$diget方法进行数据的更新,视图的渲染
 
  vue通过数据属性的数据劫持和发布订阅的模式实现,大致可以理解成由3个模块组成,observer完成对数据的劫持,compile完成对模板片段的渲染,watcher作为桥梁连接二者,订阅数据变化及更新视图
 
  get与post通讯的区别
 
  Get请求能缓存,Post不能
 
  Post相对Get安全一点点,因为Get请求都包含在URL里,且会被浏览器保存历史纪录,Post不会,但是在抓包的情况下都是一样的。
 
  Post可以通过requestbody来传输比Get更多的数据,Get没有这个技术
 
  URL有长度限制,会影响Get请求,但是这个长度限制是浏览器规定的,不是RFC规定的
 
  Post支持更多的编码类型且不对数据类型限制
 
  有没有去研究webpack的一些原理和机制,怎么实现的
 
  解析webpack配置参数,合并从shell传入和webpack.config.js文件里配置的参数,生产最后的配置结果。
 
  注册所有配置的插件,好让插件监听webpack构建生命周期的事件节点,以做出对应的反应。
 
  从配置的entry入口文件开始解析文件构建AST语法树,找出每个文件所依赖的文件,递归下去。
 
  在解析文件递归的过程中根据文件类型和loader配置找出合适的loader用来对文件进行转换。
 
  递归完后得到每个文件的最终结果,根据entry配置生成代码块chunk。
 
  输出所有chunk到文件系统。
 
  ES6模块与CommonJS模块的差异
 
  CommonJs模块输出的是一个值的拷贝,ES6模块输出的是一个值的引用
 
  CommonJS模块是运行时加载,ES6模块是编译时输出接口
 
  ES6输入的模块变量,只是一个符号链接,所以这个变量是只读的,对它进行重新赋值就会报错
 
  模块加载AMD,CMD,CommonJSModules/2.0规范
 
  这些规范的目的都是为了JavaScript的模块化开发,特别是在浏览器端的
 
  对于依赖的模块,AMD是提前执行,CMD是延迟执行
 
  CMD推崇依赖就近,AMD推崇依赖前置
 
  Node事件循环,js事件循环差异
 
  Node.js的事件循环分为6个阶段
 
  浏览器和Node环境下,microtask任务队列的执行时机不同
 
  Node.js中,microtask在事件循环的各个阶段之间执行
 
  浏览器端,microtask在事件循环的macrotask执行完之后执行
 
  递归的调用process.nextTick()会导致I/Ostarving,官方推荐使用setImmediate()
 
  浅拷贝和深拷贝的问题
 
  深拷贝和浅拷贝是只针对Object和Array这样的复杂类型的
 
  也就是说a和b指向了同一块内存,所以修改其中任意的值,另一个值都会随之变化,这就是浅拷贝
 
  浅拷贝,”Object.assign()方法用于将所有可枚举的属性的值从一个或多个源对象复制到目标对象。它将返回目标对象
 
  深拷贝,JSON.parse()和JSON.stringify()给了我们一个基本的解决办法。但是函数不能被正确处理
上一篇:Ajax的优缺点及工作原理? 下一篇:没有了
猜你喜欢
热门排行
精彩图文
  • 8月份比较新的前端面试题
    8月份比较新的前端面试题
    最近参加了几场面试,积累了一些高频面试题,我把面试题分为两类,一种是基础试题:主要考察前端技基础是否扎实,是否能够将前端知识体系串联。一种
  • Ajax的优缺点及工作原理?
    Ajax的优缺点及工作原理?
    Ajax的优缺点及工作原理? 定义和用法: AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。Ajax 是一种用于创建快速动态网页的技术。Ajax 是一种在无
  • JQuery有几种选择器?
    JQuery有几种选择器?
    JQuery有几种选择器? 1)、基本选择器:#id,class,element,*; (2)、层次选择器:parent child,prev + next ,prev ~ siblings (3)、基本 过滤器 选择器::first,:last ,:not ,
  • 怎样添加、移除、移动、复制、创建和查找节点
    怎样添加、移除、移动、复制、创建和查找节点
    怎样添加、移除、移动、复制、创建和查找节点? 1)创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元素 createTextNode() //创
  • 腾讯前端面试题
    腾讯前端面试题
    腾讯面试对基础比较看重,然后需要你有两三个比较好的项目,一面重视面试者对前端基础的把握,还要手写代码,不过不难,二面部门的leader面,这一面