2021 前端面试
H5
-
DTD的作用是什么?什么是怪异模式?什么是标准模式?二者有什么差别(举例)?产生的历史原因是什么?使用时需要注意什么?
-
HTML5是什么?有哪些新特性?新增了哪些语义化标签?新增了哪些表单元素?和h5有啥关系?
-
你是如何理解 HTML 语义化的?
-
meta viewport 是做什么用的,怎么写?
-
HTML 和 XHTML 有什么区别?
-
使用 data-* 属性有什么用?
-
<script>、<script async> 和 <script defer>
的区别。 -
白屏和FOUC是什么?为什么通常推荐将 CSS
<link>
放置在</head>
之间,而将 JS<script>
放置在</body>
之前?有没有例外的情况? -
浏览器渲染机制?什么是回流(reflow)、重绘(repaint)?
CSS
- 两种盒模型分别说一下。
- 如何垂直居中?
- Flex 怎么用,常用属性有哪些?
- Grid布局用过吗?
- 必考:BFC 是什么?背 BFC 触发条件,MDN 写了。但是不用全部背下来,面试官只知道其中几个:
- CSS 选择器优先级
- CSS 中 class 和 ID 的区别
- CSS reset 和 CSS normalize是什么?
- 浮动 (Floats)元素有哪些特性?
- 清除浮动说一下
- z-index和叠加上下文是如何形成的?在同一个层叠上下文中才能比较z-index的大小。
- CSS sprites是什么
- 字体图标和svg图标用过吗
- 你日常工作是如何处理浏览器兼容的?
- 如何为有功能限制的浏览器提供网页?
- 渐进增强,优雅降级是什么?(提到兼容面试官没问也要把这两个词说出来)。
- 有哪些的隐藏内容的方法?
- 栅格系统是什么
- 你用过媒体查询吗?
- 如何优化网页的打印样式?如果设计中使用了非标准的字体,你该如何去实现?
- 浏览器是如何判断元素是否匹配某个 CSS 选择器?
- 伪元素 (pseudo-elements) 有什么用?
- 列出你所知道的 display 属性的全部值
- inline 和 inline-block 的区别
- relative、fixed、absolute 和 static 元素的区别?
- 响应式设计 (responsive design) 和自适应设计 (adaptive design) 不同?
- 为什么提倡使用 translate() 而非 不是 absolute?
- 如果实现一个高性能的CSS动画效果?
- 圣杯布局,双飞翼布局了解吗
HTTP
- 讲一讲TCP协议的三次握手和四次挥手流程
- 为什么TCP建立连接协议是三次握手,而关闭连接却是四次握手呢?为什么不能用两次握手进行连接?
- OSI有哪七层模型?TCP/IP是哪四层模型
- 传输层有哪些协议
- 应用层有哪些协议,常用端口
- 常见Http方法有哪些?使用场景分别是什么?
- GET与POST有什么区别?
- 在HTML的form 标签里,method支持哪些类型?
- 状态码 200、301、302、304、403、404、500、503分别代表什么?
- Web安全中有哪些常见的攻击方式?
- 一次完整的Http请求所经历哪些步骤?
- URI和URL的区别?
- HTTP请求报文与响应报文的格式?Http首部包含哪些字段?举例说明
- Websockt是什么?和HTTP有什么区别?
- 常见的鉴权方式有哪些
- 谈谈Session/Cookie机制,如何实现会话跟踪
- 谈谈JWT鉴权原理
- 谈谈Auth2鉴权原理
- 浏览器是如何控制缓存的
- 什么是非持久连接,什么是持久连接?
- 服务端推送有哪些技术
- 谈谈Comet(长轮询)的原理
- HTTPS的原理是什么?
Keep-Alive: timeout=5, max=100
是什么意思?- HTTP1.0,HTTP1.1,HTTP2.0,HTTP3区别(HTTP1.1版本新特性?HTTP2快在哪里?HTTP3变了什么?)
打包
- 除了Webpack外你还用过哪些构建工具?
- Webpack与Grunt、Gulp有什么区别?
- Webpack的构建流程是什么
- 有哪些常见的Loader?他们是解决什么问题的?
- 有哪些常见的Plugin?他们是解决什么问题的?
- Loader 和 Plugin 有什么差别
- 有没有写过Loader
- 有没有写过Plugin
- compiler与complilation有什么区别?
- 有哪些代码分离的方法
- 什么是 Tree Shaking
- 如何利用Webpack来优化前端性能
- 如何提高Webpack的构建速度
- 打包文件大怎么解决
Vue
- watch、computed、methods区别是什么
- v-show与v-if区别是什么
- 列表遍历时key作用?
- Vue有哪些生命周期钩子函数?有什么用?
- Vue父子组件生命周期调用顺序
- Vue如何实现组件通信
- data为什么是函数
- Vue数据响应式原理
- nextTick怎么用?原理是什么
- 组件data为什么是函数
- diff算法和时间复杂度
- Vue中的keep-alive有什么用
- Vuex怎么用
- VueRouter怎么用
- VueRouter中hash和history模式的原理
- VueRouter如何做登录跳转
- Vuex的原理,有哪些概念
- Vue3有哪些变化
React
- 什么是虚拟DOM
- setState更新的原理
- 什么是 React Context
- React Class 组件的生命周期
- 函数组件如何体现生命周期
- React Diff 原理
- React 项目引入CSS有什么方法
- Diff算法时间复杂度
- React Fiber是什么
- React Hooks 原理与使用
- Mobx/Redux/RxJS里涉及的概念
- React和Vue比较
- 有没有自己实现过React
- 有没有自己实现过Hooks
- 项目中有没有使用过TypeScript
移动端
- px、em、rem、vw、百分比的区别
- 物理像素、逻辑像素、CSS像素、PPI、设备像素比是什么
- 移动端页面为什么要加
- 图片高清怎么做
- 如何实现0.5px边框/细边框
- 移动端如何做适配有哪些方案
- 聊聊viewport缩放方案
- 聊聊动态REM方案
- 聊聊vw适配方案
- 300ms延时的原因和解决
- fastclick是什么原理
性能
- 前端性能优化经验
- 如何做首屏渲染优化
- 白屏优化
- 长列表优化方案
非技术问题
- 做个自我介绍
- 介绍最难的项目
- 项目如何做优化
- 如何做技术选型
- 读过源码吗
- 有没有造过轮子
- 你是怎么学前端的
- 你的职业规划
- 你有什么要问的