高级前端工程师面试题

1、vue/react项目结构
    vue: 1.build 文件夹,用来存放项目构建脚本
            2.config 中存放项目的一些基本配置信息,最常用的就是端口转发
            3.node_modules 这个目录存放的是项目的所有依赖,即 npm install 命令下载下来的文件
            4.src 这个目录下存放项目的源码,即开发者写的代码放在这里
                4.1 assets 目录用来存放资产文件
                4.2 components 目录用来存放组件(一些可复用,非独立的页面),当然开发者也可以在 components 中直接创建完整页面。
                4.3 router 目录中,存放了路由的js文件
                4.4 App.vue 是一个Vue组件,也是项目的第一个Vue组件
                4.5 main.js相当于Java中的main方法,是整个项目的入口js
                4.6 store 存放vuex
            5.static 用来存放静态资源
            6.index.html 则是项目的首页,入口页,也是整个项目唯一的HTML页面
            7.package.json 中定义了项目的所有依赖,包括开发时依赖和发布时依赖
    react:1.public // 公共资源文件
              2.favicon.ico      // 是浏览器tab上图标,也是这个项目的一个标志,也可以说是代表一个公司的标志。可以替换。
              3.index.html      // 主文件
              4.manifest.json    // 编译配置文件
              5.node_modules        // 项目依赖包文件夹
              6.src                  // 我们的项目的源码编写文件(里面的文件可根据喜好,随意更改)
                  6.1 component        // 组件文件,存放所有的组件
                      6.1.1PageHome // 组件文件夹(每个组件都有自己的css和js文件或者图片等,所以每个组件都创建一个文件夹,习惯首字母大写)
                          6.1.1.1 index.js      // 组件文件夹
                          6.1.1.2index.css      // 组件文件夹
                  6.2 App.js          // 入口组件,其他组件会被包裹此组件中,此组件通过index.js再插入 index.html 文件里,形成单页面应用;
                  6.3 index.js        // 存放的是这个项目的核心内容,也就是我们的主要工作区域。其中,index.js文件是和index.html进行关联的文件的唯一接口,类似vue里面的main.js。
              7.package-lock.json    // npm5 新增文件,优化性能
              8.package.json        // 项目依赖包配置文件(node配置文件)

2、什么是promise,应用场景。如何通过promise封装原生ajax。
        首先Promise是ES6中新引出的异步解决方案,从语法上来说他是一个构造函数,可以实例化对象,封装异步操作,获取成功/失败的结果,优点是支持链式调用,可以解决回调地狱问题
        1. Promise实列有三个状态:- pending (进行中)- resolved (成功)- rejected(失败)
            当要处理某个任务的时候,promise的状态是pending,任务完成是状态就变成了resolved,任务失败状态就变成了rejected。
        2.Promise实列有俩个过程:- pending -- resolved (进行到成功)- pending -- rejected (进行到失败)状态一旦改变就不能在变成其他的状态。
        3. Promise方法:常用的方法有5中:then()、catch()、all()、race()、finally()。
            3.1.then() 接受俩个俩个回调函数作为参数,第一个参数表示成功的时候去执行,第二参数表示失败的时候去执行,返回的时一个新的promise的实列。
            3.2.catch() 相当于then方法的第二个参数。
            3.3.all() 接受一个数组作为自己的参数,数组中每一项都是一个promise对象,当数组的每一个promise状态时resolved时,all方法的状态才会变成resolved,有一个变成rejected,
                  那么all方法的状态就会变成rejected。
            3.4.race() 他和all方法一样,接受一个数组作为自己的参数,但是不同的时他时以第一完成的promise的状态来定义直接的状态,假设第一个状态时resolved,
                  那么race方法的状态就是resolved,反之相反。
            3.5.finally() 他是不管promise时什么状态都会执行的都会去执行的,他不接受任何的参数。
        4.Promise的优点:- 对象的状态不受外界的影响,只有异步的操作结果才能改变他的状态。- 一旦状态改变就不会在变,任何时候都可以得到这个结果,就如他的名字一样promise(承诺)。
        5.Promise的缺点:- 无法去取消promise,只要创建就会执行,无法中途去终止。- 如果不设置回调函数去接受,promise内部会报错,不会映射到外部
           - 处在pending(进行中)时 ,外部无法得知进展到那一步

3、输入网址到实现的过程
    重定向
    查看缓存
    DNS解析,获取IP地址
    TCP连接建立
    发送报文请求
    响应报文数据
    浏览器解析数据
    渲染

4、组件的通信方式有哪个,应用场景。
    props / $emit 适用 父子组件通信
    ref / children / parent 适用 父子组件通信
    eventBus 适用于 父子、隔代、兄弟组件通信
    listeners 适用于 隔代组件通信
    provide / inject 适用于 隔代组件通信
    Vuex 适用于 父子、隔代、兄弟组件通信

5、节流与防抖的原理和应用场景。
    节流:就是限制一个动作在一段时间内只能执行一次
    防抖:就是 当一个动作连续触发,只执行最后一次。

6、什么是dom、bom、dom事件流。详细的介绍一下bom对象模型包含什么
    dom:文档对象模型。
    bom:浏览器对象模型。
    DOM的事件事件流
        捕获阶段:事件对象通过目标的祖先从窗口传播到目标的父对象。这个阶段称为捕获阶段。
        目标阶段:事件对象到达触发事件对象的目标。这个阶段也被称为目标阶段。如果事件类型没有事件冒泡,则事件对象将在完成此阶段后停止。
        冒泡阶段:事件对象以相反的顺序通过目标依次向祖先进行传播,从目标的父对象开始,到窗口结束。这个阶段也称为冒泡阶段。
    bom:screen / window / navigator / location / document / history

7、有哪些循环数组的方法,效率如何?
    for( 效率最高)、foreach、map、filter、every、some、find(效率最低)、findIndex、findLastIndex、for in (效率较低) 、for of

8、什么是面向对象?了解哪些继承方式?
    封装、继承、多态
    继承:原型链、构造函数、组合、class类

9、vue项目,首次加载白屏时间较长的优化方式有哪些?
    1、减小项目体积html、css、js等
    2、减少接口请求、静态资源、图片、字体包等
    3、路由懒加载、组件懒加载
    4、第三方库按需引入
    5、第三方库通过cdn请求
    6、减少需要加载/需要执行的脚本组织渲染。

10、页面卡顿可以通过哪些方面排查原因?
    1、接口请求速度
    2、是否有阻塞渲染的复杂逻辑
    3、是否有较大量的dom渲染或较多消耗渲染的css如c3动画、阴影等新属性。没有必要的渲染是对性能的极大浪费。
    4、是否有高频的重排重绘动作
    5、是否是高频事件绑定导致。
    6、内存泄漏(变量、对象、游离的dom)、内存占用

11、项目优化从哪些方面入手?
    1、代码优化:工具类封装、公共组件封装、代码极简化、代码注释。
            接口优化、加载优化、css封装/压缩、静态资源合理利用(精灵图等)
            框架使用的优化。
    2、业务优化:产品设计,代码实现方案,交互设计、布局优化、懒加载/骨架屏等提升用户体验。
    3、技术升级:引进新的技术库,如vite打包、less/sass css预处理、ts等

12、通过哪些方式对项目性能监测?
    1、通过network监测资源加载的情况,通过瀑布流进行分析
        浅灰:查询中
        深灰:停滞,代理转发,请求发送
        橙色:初始连接
        绿色:等待中
        蓝色:内容下载
    2、通过Performance进行性能排查,找出“慢”的原因,内存泄漏等
    3、通过性能测试工具 Pingdom、Load Impact、WebPage Test、Octa Gate Site Timer、Free Speed Test、vue-devtools

13、什么是内存泄漏,内存泄漏造成的原因。如何排查和解决内存泄漏。
    内存泄漏是指由于疏忽或错误造成程序未能释放已经不在使用的内存
    内存泄漏并非指内存存在物理上的消失,而是应用程序分配某段内存后,由于设计错误,导致在释放该内存之前就失去了对该内存的控制,
    简单理解:无用的内存还在占用,得不到释放和归还,比较严重的时候,无用的内存还会增加,从而导致整个系统卡顿,甚至崩溃.
    造成内存泄漏的原因:1、被遗忘的计时器,写在函数内部,闭包内的
                                        2、意外的全局变量{目前eslint会提示语法错误}
                                        3、被遗忘的事件监听器,使用监听器后要移除监听器
                                        4、被遗忘的ES6 set成员
                                        5、被遗忘的订阅发布事件监听器
                                        6、被遗忘的订阅发布事件监听器
                                        7、被遗忘的闭包
    排查:通过Performance加代码审查

14、在之前的工作中做过最有成就的事是什么?

15、在之前的工作中,有对项目做过哪些优化?

16、有什么一直困扰你的技术问题?

17、职业规划和发展方向。

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

推荐阅读更多精彩内容