2021前端面试题精编.docx





《2021前端面试题精编.docx》由会员分享,可在线阅读,更多相关《2021前端面试题精编.docx(229页珍藏版)》请在淘文阁 - 分享文档赚钱的网站上搜索。
1、前端初级工程师面试题精编解析大全前言历时半年,我们整理了这份市面上最全面的前端初级工程师面试题解析大全。包含了腾讯、百度、小米、阿里、乐视、美团、58、猎豹、360、新浪、搜狐等一线互联网公司面试被问到的题目。熟悉本文中列出的知识点会大大增加通过前两轮技术面试的几率。前端面试题集锦HTML 篇141. 你是怎么理解 HTML 语义化142. 你用过哪些 HTML5 标签153. meta viewport 是做什么用的,怎么写?164. H5 是什么165. label 标签的作用166. 行内元素有哪些?块级元素有哪些? 空(void)元素有那些?177. a 标签中 如何禁用 href 跳
2、转页面 或 定位链接178. canvas 在标签上设置宽高 和在 style 中设置宽高有什么区别179. 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?1710. iframe 有哪些缺点?1811. HTML5 新特性1812. HTML5 离线储存1813. 浏览器是怎么对 HTML5 的离线储存资源进行管理和加载的呢?1914. Doctype 作用? 严格模式与混杂模式如何区分?它们有何意义?1915. HTML 与 XHTML二者有什么区别20前端面试题集锦CSS 篇201. 页面渲染时,dom 元素所采用的 布局模型,可通过 box-sizing 进行设置。根据计算
3、宽高的区域可分为:202. ie 盒模型算上 border、padding 及自身(不算 margin),标准的只算上自身窗体的大小 css 设置方法如下:203. 几种获得宽高的方式204. 拓展各种获得宽高的方式212295. 边距重叠解决方案(BFC) BFC 原理216. css reset 和 normalize.css 有什么区别:217. 居中方法:228. css 优先确定级:239. 如何清除浮动:2310. 自适应布局:2411. 画三角形:2412. link import 导入 css:2413. 长宽比方案:2414. display 相关:2515. CSS 优化:
4、2516. CSS 开启 GPU 加速2517. 开启 GPU 硬件加速可能触发的问题:2518. CSS 中 link 与import 的区别:2519. CSS 选择器列表优先级及权重:2620. display:none 和 visibility:hidden 的区别:2621. position 的 absolute 与 fixed 共同点与不同点:2622. 介绍一下 CSS 的盒子模型:2623. CSS 选择符有哪些?2724. 哪些属性可以继承?2725. 优先级算法如何计算?2726. CSS3 新增伪类有哪些:2727. 列出 display 的值,说明他们的作用:2828
5、. position 的值,relative 和 absolute 分别是相对于谁进行定位的:2829. CSS3 有哪些新特性:2830. 为什么要初始化 CSS 样式2831. canvas 在标签上设置宽高 和在 style 中设置宽高有什么区别:2932. 什么是 css HACK?2933. Less/Sass/Scss 的区别2934. css 与 js 动画差异:3035. CSS 预处理器(Sass/Less/Postcss):3036. CSS 动画:3037. 去除浮动影响,防止父级高度塌陷:3138. 选择器优先级:3139. 居中布局:3140. 层叠上下文:3141.
6、BFC:3242. 介绍一下标准的 CSS 的盒子模型?与低版本 IE 的盒子模型有什么不同的?3243. box-sizing 属性?3344. CSS 选择器有哪些?哪些属性可以继承?3345. CSS 优先级算法如何计算?3346. 如何居中 div?如何居中一个浮动元素?如何让绝对定位的 div 居中?3347. display 有哪些值?说明他们的作用?3448. position 的值?3449. 文字阴影:3450. font-face 属性:3551. 圆角(边框半径): 3552. 边框图片:3553.盒阴影:3554. 媒体查询:3555. 请解释一下 CSS3 的 fle
7、xbox(弹性盒布局模型),以及适用场景?3556. 用纯 CSS 创建一个三角形的原理是什么?3657. 一个满屏品字布局如何设计?3658. 为什么要初始化 CSS 样式3659. absolute 的 containing block 计算方式跟正常流有什么不同?3660. 解释 css sprites ,如何使用?3761. 阐述一下 CSS Sprites:3763. style 标签写在 body 后与 body 前有什么区别3764. png、jpg、gif 这些图片格式解释一下,分别什么时候用。有没有了解过 webp3865. display:inline-block 什么时候
8、会显示间隙?3866. li 与 li 之间有看不见的空白间隔是什么原因引起的?有什么解决办法?3867. 如果需要手动写动画,你认为最小时间间隔是多久,为什么?3868. 让页面里的字体变清晰,变细用 CSS 怎么做?3969. 你对 line-height 是如何理解的?3970. :before 和 :after 中双冒号和单冒号有什么区别?解释一下这 2 个伪元素的作用 3971. 视差滚动效果?3972. 什么是响应式设计?响应式设计的基本原理是什么?如何兼容低版本的 IE?4073. 全屏滚动的原理是什么?用到了 CSS 的哪些属性?4074. 元素竖向的百分比设定是相对于容器的高
9、度吗?4075. margin 和 padding 分别适合什么场景使用?4076. 在网页中的应该使用奇数还是偶数的字体?为什么呢?4177. 浏览器是怎样解析 CSS 选择器的?4178. CSS 优化、提高性能的方法有哪些?4179. 使用 CSS 预处理器吗?4180. 移动端的布局用过媒体查询吗?4281. 设置元素浮动后,该元素的 display 值是多少?4282. 上下 margin 重合的问题4283. 为什么会出现浮动和什么时候需要清除浮动?清除浮动的方式?4284. 对 BFC 规范(块级格式化上下文:block formatting context)的理解?4385.
10、position 跟 display、overflow、float 这些特性相互叠加后会怎么样?4386. CSS 里的 visibility 属性有个 collapse 属性值?在不同浏览器下以后什么区别?4487. absolute 的 containing block 计算方式跟正常流有什么不同?4488. 常见的兼容性问题?4489. 请解释一下 CSS3 的 flexbox(弹性盒布局模型),以及适用场景?4590. 解释下 CSS sprites,以及你要如何在页面或网站中使用它:4691. 一个页面从输入 URL 到页面加载显示完成,这个过程都发生了什么:4692. 哪些地方会出
11、现 CSS 堵塞,哪些地方会出现 JS 堵塞:46前端面试题集锦JavaScript471. 请你谈谈 Cookie 的优缺点472. Array.prototype.slice.call(arr,2)方法的作用是:483. 以下代码执行后,控制台的输出是:484、简单说一下浏览器本地存储是怎样的485.原型 / 构造函数 / 实例496.原型链:507. 执行上下文(EC)508. 变量对象509. 作用域链5110.闭包5111. 对象的拷贝5112. new 运算符的执行过程5213. instanceof 原理5214. 代码的复用5215.继承5316. 类型转换5317. 类型判断
12、5318. 模块化5419. 防抖与节流5420. 函数执行改变 this5521.ES6/ES75622. AST5723. babel 编译原理5724. 函数柯里化5725. get 请求传参长度的误区5726. 补充 get 和 post 请求在缓存方面的区别5827. 说一下闭包5828. 说一下类的创建和继承5829. 如何解决异步回调地狱6230. 说说前端中的事件流6231. 如何让事件先冒泡后捕获6232. 说一下事件委托6233. 说一下图片的懒加载和预加载6334. mouseover 和 mouseenter 的区别6335. js 的 new 操作符做了哪些事情633
13、6. 改变函数内部 this 指针的指向函数(bind,apply,call 的区别)6337. js 的 各 种 位 置 , 比 如 clientHeight,scrollHeight,offsetHeight , 以 及 scrollTop, offsetTop,clientTop 的区别?6438. js 拖拽功能的实现6439. 异步加载 js 的方法6440. Ajax 解决浏览器缓存问题6541. js 的防抖6542. js 节流6643. JS 中的垃圾回收机制6744. eval 是做什么的6845. 如何理解前端模块化6946. 说一下 Commonjs、AMD 和 CMD
14、6946. 对象深度克隆的简单实现7047. 实现一个 once 函数,传入函数参数只执行一次7048. 将原生的 ajax 封装成 promise7049. js 监听对象属性的改变7150. 如何实现一个私有变量,用 getName 方法可以访问,不能直接访问7151. setTimeout、setInterval 和 requestAnimationFrame 之间的区别7252. 实现一个两列等高布局,讲讲思路7353. 自己实现一个 bind 函数7354. 用 setTimeout()方法来模拟 setInterval()与 setInterval()之间的什么区别?7455. j
15、s 怎么控制一次加载一张图片,加载完后再加载下一张7456. 如何实现 sleep 的效果(es5 或者 es6)7557. Function._proto_(getPrototypeOf)是什么?7658. 实现 js 中所有对象的深度克隆(包装对象,Date 对象,正则对象)7659. 简单实现 Node 的 Events 模块7860. 箭头函数中 this 指向举例8061. js 判断类型8062. 数组常用方法8063. 数组去重8164. 闭包有什么用8165. 事件代理在捕获阶段的实际应用8166. 去除字符串首尾空格8267. 性能优化8268. 来讲讲 JS 的闭包吧826
16、9. 能来讲讲 JS 的语言特性吗8370. 如何判断一个数组(讲到 typeof 差点掉坑里)8371. 你说到 typeof,能不能加一个限制条件达到判断条件8372. JS 实现跨域8373. Js 基本数据类型8474. js 深度拷贝一个元素的具体实现8475. 之前说了 ES6set 可以数组去重,是否还有数组去重的方法8476. 重排和重绘,讲讲看8477. JS 的全排列8578. 跨域的原理8579. 不同数据类型的值的比较,是怎么转换的,有什么规则8680、null = undefined 为什么8681、this 的指向 哪几种8689、 暂停死区8782、Angular
17、JS 双向绑定原理8783、写一个深度拷贝8784、简历中提到了 requestAnimationFrame,请问是怎么使用的8885、有一个游戏叫做 Flappy Bird,就是一只小鸟在飞,前面是无尽的沙漠,上下不断有钢管生成,你要躲避钢管。然后小明在玩这个游戏时候老是卡顿甚至崩溃,说出原因(3-5 个)以及解决办法(3-5 个)8986、 什么是按需加载8987、说一下什么是 virtual dom8988、webpack 用来干什么的9089、ant-design 优点和缺点9090、JS 中继承实现的几种方式9091、写一个函数,第一秒打印 1,第二秒打印 29192、vue 的生命
18、周期9193、简单介绍一下 symbol9294、什么是事件监听9295、介绍一下 promise,及其底层如何实现9395、说说 C+,Java,JavaScript 这三种语言的区别9496、js 原型链,原型链的顶端是什么?Object 的原型是什么?Object 的原型的原型是什么?在数组原型链上实现删除数组重复数据的方法9597、什么是 JavaScript9698、JavaScript 组成部分:9699、事件委托以及冒泡原理。96100、写个函数,可以转化下划线命名到驼峰命名97101、深浅拷贝的区别和实现97102、JS 中 string 的 startwith 和 index
19、of 两种方法的区别98103、js 字符串转数字的方法99104、let const var 的区别 ,什么是块级作用域,如何用 ES5 的方法实现块级作用域(立即执行函数),ES6 呢 99105、ES6 箭头函数的特性99106、setTimeout 和 Promise 的执行顺序100107、有了解过事件模型吗,DOM0 级和 DOM2 级有什么区别,DOM 的分级是什么100108、平时是怎么调试 JS 的101109、 setTimeout(fn,100);100 毫秒是如何权衡的103110、 JS 的垃圾回收机制103111、 写一个 newBind 函数,完成 bind 的功
20、能。104112、 怎么获得对象上的属性:比如说通过 Object.key()104113、 简单讲一讲 ES6 的一些新特性104114、 call 和 apply 是用来做什么?105115、 了解事件代理吗,这样做有什么好处105116、 如何写一个继承?105117、 给出以下代码,输出的结果是什么?原因?107118、 给两个构造函数 A 和 B,如何实现 A 继承 B?107119、能不能正常打印索引107120、如果已经有三个 promise,A、B 和 C,想串行执行,该怎么写?107121、知道 private 和 public 吗108122、async 和 await 具
21、体该怎么用?108123、知道哪些 ES6,ES7 的语法108124、promise 和 await/async 的关系108125、js 的数据类型109126、js 加载过程阻塞,解决方法。109127、js 对象类型,基本对象类型以及引用对象类型的区别109128、JavaScript 中的轮播实现原理?假如一个页面上有两个轮播,你会怎么实现?.109129、怎么实现一个计算一年中有多少周?110120、JS 的数据类型110131、引用类型常见的对象110132、es6 的常用110133、class110134、口述数组去重110135、call 和 apply 的区别111136
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 2021 前端 试题 精编

限制150内