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、职业规划和发展方向。