

首页  思维导图  详情



前端技术知识体系

2022-05-28 19:32:38   0  举报





AI智能生成

前端面试知识体系

前端

面试

知识体系

面试技巧

web前端

模版推荐

作者其他创作

大纲/内容

安全性

xss跨站点脚本攻击

csrf跨站点伪造

sql注入

网络基础

http/https原理与区别

http协议传输过程

DNS解析

前端工程化

对前端工程化的理解

研发、构建、部署、性能优化、规范化

nodejs

运用的实例

nodejs

算法

函数柯里化

是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术

排序

递归

最新技术研究

vuejs3

微前端

技术主管的工作职责

技术层面

开发规范

代码规范

git规范

开发流程

技术规划 | 架构

开发任务分解分配

技术评审

代码审核

风险识别

管理层面

目的：达成组织目标，实现组织利益最大化

向上 | 向下 | 团队内部 | 团队之间 | 个人

面试原则

结合项目谈技术

不要讲太多，不要过渡引申

自我介绍

你好，我叫xxx，11年毕业后一直从事前端开发工作，至今有10年的开发经验。我在xxxx工作了四年，作为技术骨干，参与并主导打造xxx项目，该项目前期采用jquery+iframe框架，后来业务需要对架构升级，引入了vuejs，并主导了对整体性能的优化工作；之后进入xxx，参与公司战略项目群xxx的前端架构与开发，用到的技术以vuejs为主。我有多年的技术团队管理经验，具备跨团队协调能力，沟通能力强，能从事技术开发工作，也敢于挑战高难度任务。今天面试贵司岗位，有信心能把工作做好。谢谢您。

html/js/css基础

1、基本概念：作用域(链)、面向对象、继承，promise、async/await

2、es6

3、eventLoop事件循环

浏览器js

宏任务

主代码块 > setImmediate > MessageChannel > setTimeout / setInterval requestAnimationFrame

微任务

process.nextTick > Promise.then > MutationObserver

nodejs环境

4、布局

居中布局、三格布局的几种方式

BFC

flex

上下左右居中

定宽定高

不定宽高

多端布局适配的方式

5、浏览器渲染过程

回流

重绘

vuejs框架

底层逻辑

实例化过程

初始化

生成虚拟dom

挂载

生命周期

8个生命周期函数

数据双向绑定

应用

组件传值

props/emit

event-bus

attrs

refs

parent/children

vuex

浏览器缓存

强缓存

expires有效期；max-age最大有效时间

协商缓存

last-modify/if-modify-since；etag/if-no-match

路由

方式

路由模式

history

子主题 3

实例

监听组件销毁

应用虚拟dom原理设计制作低代码平台

常见问题

理解mvvm原理

响应式数据原理

vue中如何检测数组变化

2.0：监听改变数组的方法来实现对元素变化的监听，直接改变数组存在的元素无法监听，原因是性能与收益不成正比。

3.0：通过proxy来监听很好的回避了2.0的问题，为什么？

为何vuejs采用异步渲染

nextTick实现原理

vuejs生命周期

ajax放在哪个生命周期中

何时需要使用beforeDestroy

vue父子组件生命周期调用顺序

vue中computed的特点

watch中deep:true是如何实现的

vuejs中事件绑定原理

v-html会导致哪些问题

v-if与v-show的区别

v-for与v-show为何不能连用

v-model实现原理，如何实现自定义v-model

组建中的data为什么是一个函数

vuejs组件如何通信

什么是作用域插槽

用vnode来描述一个dom结构

diff算法的时间复杂度

简述vue中diff算法原理

v-for中为什么要用key

简述组件渲染和更新过程

vue中模板编译原理

vuejs中常见性能优化

vue中相同逻辑如何抽离

为什么要用异步组件

对keep-alive的了解

实现hash路由和history路由

vue-router中导航守卫有哪些

action和mutation的区别

简述vuex工作原理

vue3.0有哪些改进

Vue3采用了Type Script来编写

支持 Composition API

Vue3中响应式数据原理改成proxy

vdom的对比算法更新，只更新vdom的绑定了动态数据的部分

webpack打包

webpack与gulp区别

webpack原理与流程

webpack配置

插件配置与开发

组件配置与开发

性能优化

性能优化的技术点

一般处理方式

ssr服务端渲染

方式

nuxt

好处

原理

性能测试工具

性能优化实际案例

万家云诊所的性能优化

1、架构层面升级

业务拆分

引入vuejs

2、dns缓存，部署静态资源服务器

3、减少请求次数：文件合并

4、缓存、cookie优化、文件压缩（accept-encoding：gzip）

5、异步加载、懒加载

6、js/css位置调整、减少重绘/回流

7、服务端渲染

8、webpack层面：图片压缩、提取公共代码、优化sourcemap

兼容性与多端适配

兼容性案例

苹果手机，input弹窗导致输入框上顶

多端适配方法

媒体查询

flex弹性布局、响应式布局

viewport缩放

rem相对单位

vw/vh方案+saas预处理

//iPhone 6尺寸作为设计稿基准 $vm_base:375; @function vw($px){ @return ($px/375)*100vw; } 设置相应的vw之后就可以使用vw作为css单位，如： .title{ font-size:vw(16); }

 Collect

Get Started

前端知识体系

 Collect

Get Started

大数据技术知识体系

 Collect

Get Started

产品经理技术知识体系

 Collect

Get Started

Web前端知识体系大全





0 条评论

下一页