面试官常问的一些初中级前端知识点

简介: 面试官常问的一些初中级前端知识点

CSS

1. 介绍下 CSS 盒子模型

回答到以下两点就可以:

  • 一个盒子由四个部分组成:content、padding、border、margin。两种盒子模型:W3C 标准盒子模型、IE 怪异盒子模型
  • 标准盒子模型 width / height 只是内容高度,不包含 padding 和 border 值;IE 怪异盒子模型 width / height 包含了 padding 和 border 值

2. flexbox 布局的属性和使用场景

关于 flex 常用的属性,我们可以划分为容器属性和容器成员属性

容器属性有:

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

容器成员属性如下:

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

使用场景:实现元素水平垂直方向的居中,以及在两栏三栏自适应布局

3. 移动端自适应方案

  • rem 方案
  • vw、vh

需要理解细节实现以及开发中单位如何转化,有兴趣可以看这篇文章移动端自适应指北

Javascript

1. ES6 常用的一些特性

  1. 解构赋值

js

复制代码

const { a = 2 } = { a: null } const { a = 2 } = { a: undefined }

上面两个 a 的值是什么

  1. let、var、const 的区别
  2. 怎么优化 const value = a && a.b && a.b.c,这边主要参考 ?. 用法

2. JS 类型检测的方法

  • typeof
  • instanceOf
  • Object.prototype.toString()

需要理解各个检查方法的输出

3.本地存储方式

  • cookie
  • sessionStorage
  • localStorage
  • indexedDB

各个存储方式的特点,以及使用场景。

4. 如何判断一个元素是否在可视区域中?

  • offsetTop、scrollTop
  • getBoundingClientRect,这个 API 的读取值如下

  • Intersection Observer

此 API 提供了一种异步观察目标元素与祖先元素或顶级文档视图交叉处变化的方法,简单的来说就是可以检测子元素在父元素中的可见性

5. JS 模块化方案

  • 立即执行函数
  • CommonJS
  • AMD、CMD、UMD
  • ES6 Module

大部分情况下主要问 CommonJS 和 ES6 Module 的使用和区别,有时也会问问其他方案。

6. Webpack 常使用的 Loader 和 Plugin

常见的 Loader:

  • style-loader: 将 css 添加到DOM的内联样式标签 style 里
  • css-loader :允许将 css 文件通过 require 的方式引入,并返回 css 代码
  • less-loader: 处理 less
  • sass-loader: 处理 sass
  • postcss-loader: 用 postcss 来处理 CSS
  • file-loader: 分发文件到 output 目录并返回相对路径,wepakck5 asset/resource 内置支持
  • url-loader: 和 file-loader 类似,但是当文件小于设定的 limit 时可以返回一个 Data Url,wepakck5 asset/inline 内置支持
  • babel-loader: 用 babel 来转换 ES6 文件到 ES

常见的 Plugin

  • html-webpack-plugin:在打包结束后,⾃动生成⼀个 html ⽂文件,并把打包生成的 js 模块引⼊到该 html 中
  • clean-webpack-plugin:删除(清理)构建目录,webpack5 已内置功能 output.clean
  • mini-css-extract-plugin:提取 CSS 到一个单独的文件中
  • copy-webpack-plugin:复制文件或目录到执行区域,如 vue 的打包过程中,如果我们将一些文件放到 public 的目录下,那么这个目录会被复制到 dist 文件夹中

7. React key 的作用

React 存在 Diff 算法,而元素 key 属性的作用是用于判断元素是新创建的还是被移动的元素,从而减少不必要的元素渲染。

进一步可以了解下 React Diff 算法的三个特点

  • tree 层级:DOM 节点跨层级的操作不做优化,只会对相同层级的节点进行比较
  • conponent 层级:如果是同一个类的组件,则会继续往下 diff 运算,如果不是一个类的组件,那么直接删除这个组件下的所有子节点,创建新的
  • element 层级:对于比较同一层级的节点们,每个节点在对应的层级用唯一的 key 作为标识

8. React 事件机制

主要问 React 事件的目的和与原生事件触发的先后顺序。

React 团队在源码中实现了一套事件机制来代替原生浏览器事件,其目的是:

  1. 抹平事件对象在不同浏览器上的差异,如:在不同浏览器下阻止事件冒泡(SyntheticEvent 合成事件);
  2. 与底层架构上的任务调度「优先级机制」衔接

React 采用事件委托方式,将冒泡和捕获事件统一绑定在 document, React17 及以后,不再将事件委托到 document 上,而是委托在渲染 React 应用的根 DOM 容器中

9. React useEffect 的使用

对于 useEffect,常问的几点是:

  1. useEffect 的使用,两个参数的作用
  2. useEffect 怎么模拟 componentDidMount 和 componentDidUpdate
  3. 为什么不建议 useEffect 的把第一个函数参数为设置为 async 函数

10. React useRef 的使用

useRef 这块主要问平时的使用

  1. 获取 DOM 元素,或者配置 forwardRef 获取组件示例
  2. 保存变量,相当于组件的实例变量

11. JSBrige

因为公司项目很多是手机端 h5,所有少不了和原生交互,这块知识点也会问问。

通用知识

1. 谈谈 HTTP 缓存

主要问 HTTP 缓存相关的知识,要了解浏览器请求什么时候会返回 disk cache、304、200。

具体可以看这篇文章图解 HTTP 缓存

2. 使用过哪些设计模式

前端开发中用的比较多的就是策略模式、单例模式、发布订阅、外观模式

总结

面试的题目大都是开发中会使用到的,回答的时候要讲重点,逻辑清晰即可。

给大家推荐一个实用面试题库

前端面试题库 (面试必备)            推荐:★★★★★

地址:前端面试题库

相关文章
|
4月前
|
缓存 前端开发 中间件
[go 面试] 前端请求到后端API的中间件流程解析
[go 面试] 前端请求到后端API的中间件流程解析
|
1月前
|
缓存 前端开发 JavaScript
"面试通关秘籍:深度解析浏览器面试必考问题,从重绘回流到事件委托,让你一举拿下前端 Offer!"
【10月更文挑战第23天】在前端开发面试中,浏览器相关知识是必考内容。本文总结了四个常见问题:浏览器渲染机制、重绘与回流、性能优化及事件委托。通过具体示例和对比分析,帮助求职者更好地理解和准备面试。掌握这些知识点,有助于提升面试表现和实际工作能力。
66 1
|
2月前
|
Android开发
Android面试高频知识点(1) 图解Android事件分发机制
Android面试高频知识点(1) 图解Android事件分发机制
|
2月前
|
消息中间件 存储 Java
Android面试高频知识点(2) 详解Android消息处理机制(Handler)
Android面试高频知识点(2) 详解Android消息处理机制(Handler)
|
2月前
|
XML 前端开发 Android开发
Android面试高频知识点(3) 详解Android View的绘制流程
Android面试高频知识点(3) 详解Android View的绘制流程
Android面试高频知识点(3) 详解Android View的绘制流程
|
2月前
|
消息中间件 Android开发 索引
Android面试高频知识点(4) 详解Activity的启动流程
Android面试高频知识点(4) 详解Activity的启动流程
31 3
|
2月前
|
XML 前端开发 Android开发
Android面试高频知识点(3) 详解Android View的绘制流程
Android面试高频知识点(3) 详解Android View的绘制流程
29 2
|
2月前
|
消息中间件 存储 Java
Android面试高频知识点(2) 详解Android消息处理机制(Handler)
Android面试高频知识点(2) 详解Android消息处理机制(Handler)
58 1
|
2月前
|
Android开发
Android面试高频知识点(1) 图解 Android 事件分发机制
Android面试高频知识点(1) 图解 Android 事件分发机制
45 1
|
3月前
|
Web App开发 前端开发 Linux
「offer来了」浅谈前端面试中开发环境常考知识点
该文章归纳了前端开发环境中常见的面试知识点,特别是围绕Git的使用进行了详细介绍,包括Git的基本概念、常用命令以及在团队协作中的最佳实践,同时还涉及了Chrome调试工具和Linux命令行的基础操作。
「offer来了」浅谈前端面试中开发环境常考知识点