最新前端面试题(2018-08-21)

扒来最新的面试题:基础

基础
  • 怎么去设计一个组件封装(这也是我刚接触vue所头大的问题)
    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、当系统面临大量用户访问,负载过高的时候,通常会使用增加服务器数量来进行横向扩展,使用集群和负载均衡提高整个系统的处理能力
    2、服务器集群负载均衡原理?

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

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

  • 跨域问题,谁限制的跨域,怎么解决
    参考我另一篇总结;https://www.jianshu.com/p/ef1785f1bb97

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

  • babel把ES6转成ES5或者ES3之类的原理是什么
    1、它就是个编译器,输入语言是ES6+,编译目标语言是ES5
    2、babel 官方工作原理
    3、解析:将代码字符串解析成抽象语法树
    4、变换:对抽象语法树进行变换操作
    5、再建:根据变换后的抽象语法树再生成代码字符串

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

  • promise 放在try catch里面有什么结果
    1、Promise 对象的错误具有冒泡性质,会一直向后传递,直到被捕获为止,也即是说,错误总会被下一个catch语句捕获
    2、当Promise链中抛出一个错误时,错误信息沿着链路向后传递,直至被捕获

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

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

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

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

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

  • ES6模块与CommonJS模块的差异
    1、CommonJs 模块输出的是一个值的拷贝,ES6模块输出的是一个值的引用
    2、CommonJS 模块是运行时加载,ES6模块是编译时输出接口
    3、ES6输入的模块变量,只是一个符号链接,所以这个变量是只读的,对它进行重新赋值就会报错

  • Node 事件循环,js 事件循环差异
    1、Node.js 的事件循环分为6个阶段
    2、浏览器和Node 环境下,microtask 任务队列的执行时机不同
    Node.js中,microtask 在事件循环的各个阶段之间执行
    浏览器端,microtask 在事件循环的 macrotask 执行完之后执行
    3、递归的调用process.nextTick()会导致I/O starving,官方推荐使用setImmediate()

  • 浅拷贝和深拷贝的问题
    1、深拷贝和浅拷贝是只针对Object和Array这样的复杂类型的
    2、也就是说a和b指向了同一块内存,所以修改其中任意的值,另一个值都会随之变化,这就是浅拷贝
    3、浅拷贝, ”Object.assign() 方法用于将所有可枚举的属性的值从一个或多个源对象复制到目标对象。它将返回目标对象
    4、深拷贝,JSON.parse()和JSON.stringify()给了我们一个基本的解决办法。但是函数不能被正确处理

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,445评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,889评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,047评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,760评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,745评论 5 367
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,638评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,011评论 3 398
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,669评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,923评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,655评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,740评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,406评论 4 320
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,995评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,961评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,197评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,023评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,483评论 2 342

推荐阅读更多精彩内容