web前端工程师面试题

web前端工程师面试题

CSS面试题

1.盒模型

2.如何让一个盒子水平垂直居中？

3.css 优先级确定

4.解释下浮动和它的工作原理，清除浮动的方法？

5.CSS隐藏元素的几种方法

6.如何实现浏览器内多个标签页之间的通信?

7.简要说一下CSS的元素分类

8.link @import 导入 css

9.画三角形
10.BFC（Block Formatting Context） 是什么？应用？

JavaScript基础面试题

1.栈和堆的区别？

2.Javascript实现继承的几种方式？

3.Javascript创建对象的几种方式？

4.Javascript作用链域

5.什么是闭包（closure），为什么要用它？
6. javascript 代码中的"use strict";是什么意思 ? 使用它区别是什么？

7.深拷贝和浅拷贝

8.JS延迟加载的方式有哪些？

9.什么是跨域问题 ，如何解决跨域问题?

10.模块化开发怎么做？

11.DOM操作

12.什么是Cookie 隔离？

13.响应事件
14.flash和js通过什么类如何交互?

15.JS垃圾回收机制？

Vue框架面试题

1.对于MVVM的理解？

2.Vue的生命周期

3.Vue组件间的参数传递

4.Vue实现数据双向绑定的原理

5.Vue的路由实现：hash模式 和 history模式

6.vue路由的钩子函数

7.请问 v-if 和 v-show 有什么区别？

8.对于Vue是一套渐进式框架的理解

9.Vue 组件间通信有哪几种方式？

10.vue中子组件调用父组件的方法

11.怎么定义vue-router的动态路由？怎么获取传过来的值？

12.请介绍一下你对vue-router的理解？

13.vue-router有哪几种路由守卫?

14.vuex有哪几种属性？

15.vuex的State特性是？

16.vue-cli如何新增自定义指令？

17.vue等单页面应用及其优缺点

浏览器面试题

1.跨标签页通讯

2.浏览器架构

3.浏览器下事件循环(Event Loop)

4.从输入 url 到展示的过程

5.重绘与回流

6.存储

7.Web Worker

8.V8 垃圾回收机制

9.内存泄露

服务端与网络

1.http/https 协议

2.常见状态码

3.get/ post

4.Websocket
5.TCP 三次握手

6.TCP 四次挥手

7.Node 的 Event Loop: 6 个阶段

8.跨域

9.安全

Webpack 相关

1.原理简述
2.Loader
3.Plugin
4.编译优化

算法

1.五大算法

2.基础排序算法

3.高级排序算法

4.递归运用(斐波那契数列)： 爬楼梯问题

5.数据树

6.天平找次品

进阶知识
React框架

1.Fiber

2.生命周期

3.setState

4.HOC(高阶组件)

5.Redux

6.React Hooks

7.SSR 服务端渲染

8.函数式编程

一. 说说输入URL回车后的过程
1.读取缓存：

搜索自身的 DNS 缓存。(如果 DNS 缓存中找到IP 地址就跳过了接下来查找 IP 地址步骤，直接访问该 IP 地址。)

2.DNS 解析:将域名解析成 IP 地址

3.TCP 连接：TCP 三次握手，简易描述三次握手

客户端：服务端你在么？

服务端：客户端我在，你要连接我么？

客户端：是的服务端，我要链接。

连接打通，可以开始请求来

4.发送 HTTP 请求

5.服务器处理请求并返回 HTTP 报文

6.浏览器解析渲染页面

7.断开连接：TCP 四次挥手

关于第六步浏览器解析渲染页面又可以聊聊如果返回的是html页面
根据 HTML 解析出 DOM 树
根据 CSS 解析生成 CSS 规则树

结合 DOM 树和 CSS 规则树，生成渲染树
根据渲染树计算每一个节点的信息
根据计算好的信息绘制

二、JavaScript的深拷贝浅拷贝是指什么，有什么区别？
浅拷贝：浅拷贝通过ES6新特性Object.assign()或者通过扩展运算法…来达到浅拷贝的目的，浅拷贝修改
副本，不会影响原数据，
但缺点是浅拷贝只能拷贝第一层的数据，且都是值类型数据，如果有引用型数据，修改
副本会影响原数据。

深拷贝：通过利用JSON.parse(JSON.stringify())来实现深拷贝的目的，但利用JSON拷贝也是有缺点的，

当要拷贝的数据中含有undefined/function/symbol类型是无法进行拷贝的，
当然我们想项目开发中需要
深拷贝的数据一般不会含有以上三种类型，
如有需要可以自己在封装一个函数来实现。

引申问题：什么是引用类型？实现深拷贝函数的思路是什么？

三、说说CSS实现垂直居中有哪些方式？

1. 子元素 line-height 值为父元素 height 值
2. table布局，display: table-cell;
3. flex布局，align-items: center;
4. 绝对定位，top: 50%;transform: translate( 0, -50%);
   5.display: inline-block;和vertical-align: middle同时使用。

四、前端安全XSS和CSRF分别指什么？如何预防？

1. XSS:跨站脚本攻击
2. CSRF:跨站请求伪造

五、谈谈前端工程化、模块化、组件化

1. 前端工程化
   将前端项目当成一项系统工程进行分析、组织和构建从而达到项目结构清晰、分工明确、团队配合默契、开发效率提高的目的；
   工程化思维就是“结构、样式和动作分离”。如目录分为assets,components,router,util
2. 前端模块化
   可以简单的认为模块化和组件化是工程化的表现形式
   JS模块化方案很多有AMD/CommonJS/UMD/ES6 Module等,CSS模块化开发大多是在less、sass、stylus
   3.前端组件化
   组件化将页面视为一个容器,页面上各个独立部分例如:头部、导航、焦点图、侧边栏、底部等视为独立组件,
   不同的页面根据内容的需要,去盛放相关组件即可组成完整的页面。
   模块化和组件化一个最直接的好处就是复用+分治

六、 说说Vue双向绑定怎么实现的？
Vue是采用数据劫持配合发布者-订阅者模式，通过Object.defineProperty来()来劫持各个属性的getter和setter
在数据发生变化的时候，
发布消息给依赖收集器，去通知观察者，做出对应的回调函数去更新视图。

具体就是：
MVVM作为绑定的入口，整合Observe,Compil和Watcher三者，
通过Observe来监听model的变化
通过Compil来解析编译模版指令，最终利用Watcher搭起Observe和Compil之前的通信桥梁

从而达到数据变化 => 更新视图，视图交互变化(input) => 数据model变更的双向绑定效果。

引申问题：vue3.0的双向绑定有什么改变，优点是什么？

七、谈谈babel的作用，流程是什么？
Babel是一个工具，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，
以便能够运行在当前和旧版本的浏览器或其他环境中
流程：
解析: 将代码(其实就是字符串)转换成 AST( 抽象语法树)
转换: 访问 AST 的节点进行变换操作生成新的 AST
生成: 以新的 AST 为基础生成代码

八、说说前端性能优化方案
多个方面来说明前端性能优化

常规：

webapck优化与开启gzip压缩

1.babel-loader用 include 或 exclude 来帮我们避免不必要的转译，不转译node_moudules中的js文件

其次在缓存当前转译的js文件，设置loader: 'babel-loader?cacheDirectory=true'

2.文件采用按需加载等等

3.具体的做法非常简单，只需要你在你的 request headers 中加上这么一句：
accept-encoding:gzip

4.图片优化，采用svg图片或者字体图标

5.浏览器缓存机制，它又分为强缓存和协商缓存
缓存：

本地存储——从 Cookie 到 Web Storage、IndexedDB

说明一下SessionStorage和localStorage还有cookie的区别和优缺点

跨界：

React Native,Flutter，HTTP2，3等等。

九、遇到白屏问题如何分析和解决？
检测白屏：

1. 检测页面关键DOM的是否渲染

2. 通用的DOM渲染监听

3. H5截图（canvas绘图）检测

4. native截图（容器截屏）检测

5. 利用performance.getEntries(“paint”)获取fp/fcp来感知渲染

原因分析：

1. 网络状态

2. 脚本报错

3. js，css和浏览器或者webview兼容性问题

解决方案：

1. 骨架屏

2. 启用服务端渲染SSR

3. 首屏静态html

4. 离线包或者PWA

十、你在工作中遇到哪些复杂问题，解决方法是什么?