WEB前端面试题

JavaScript011

WEB前端面试题,第1张

第二章 面试题基础篇

2.1 HTML面试题

面试题:行内元素有哪些?块级元素有哪些? 空(void)元素有那些?

面试题:页面导入样式时,使用link和@import有什么区别?

面试题:title与h1的区别、b与strong的区别、i与em的区别?

面试题:img标签的title和alt有什么区别?

面试题:png、jpg、gif 这些图片格式解释一下,分别什么时候用?

2.2 CSS面试题

面试题:css背景纹路

面试题:介绍一下CSS的盒子模型

面试题:CSS选择符有哪些?哪些属性可以继承?

面试题:CSS优先级算法如何计算?

面试题:用CSS画一个三角形

面试题:一个盒子不给宽度和高度如何水平垂直居中?

面试题:display有哪些值?说明他们的作用。

面试题:对BFC规范(块级格式化上下文:block formatting context)的理解?

面试题:清除浮动有哪些方式?

面试题:在网页中的应该使用奇数还是偶数的字体?为什么呢?

面试题:写一个左中右布局占满屏幕,其中左、右俩块固定宽200,中间自适应宽,要求先加载中间块,请写出结构及样式。

面试题:什么是CSS reset?

面试题:css sprite是什么,有什么优缺点

面试题:display: none与visibility: hidden的区别

面试题:position有哪些值?有什么作用? 【特别多公司问】

面试题:line-height和height有什么区别?

面试题:opacity 和 rgba区别

2.3 JavaScript基础面试题

面试题:延迟加载JS有哪些方式?

面试题:JS数据类型有哪些?

面试题:null和undefined的区别

面试题:JS数据类型考题

面试题:==和===有什么不同

面试题:JS微任务和宏任务

面试题:JS作用域考题

面试题:JS对象考题

面试题:JS作用域+this指向+原型 考题

面试题:JS判断变量是不是数组,你能写出哪些方法?

面试题:slice是干嘛的、splice是否会改变原数组

面试题:JS数组去重

面试题:找出多维数组最大值

面试题:给字符串新增方法实现功能

面试题:找出字符串出现最多次数的字符以及次数

2.4 真正移动端 —— H5/C3面试题

面试题:什么是语义化标签

面试题:::before 和 :after中双冒号和单冒号 有什么区别?解释一下这2个伪元素的作用。

面试题:如何关闭iOS键盘首字母自动大写

面试题:怎么让Chrome支持小于12px 的文字?

面试题:rem和em有什么样区别

面试题:ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉

面试题:webkit表单输入框placeholder的颜色值能改变吗?

面试题:禁止ios 长按时不触发系统的菜单,禁止ios&android长按时下载图片

面试题:禁止ios和android用户选中文字

面试题:自适应 [淘宝无线适配]

面试题:响应式

第三章 面试题进阶篇

3.1 JavaScript进阶面试题

面试题:new操作符具体做了什么

面试题:闭包 【必须会】

面试题:原型链 【必须会】

面试题: JS继承有哪些方式

面试题:说一下call、apply、bind区别

面试题:sort背后原理是什么?

面试题:深拷贝和浅拷贝

面试题:localstorage、sessionstorage、cookie的区别

3.2 ES6面试题

面试题:var、let、const区别

面试题:作用域考题

面试题:将下列对象进行合并

面试题:箭头函数和普通函数有什么区别?

面试题:Promise有几种状态

面试题:find和filter的区别 【大厂】

面试题:some和every的区别 【大厂】

3.3 webpack面试题

面试题:webpack插件

3.4 Git面试题

面试题:git常用命令

面试题:解决冲突

面试题:GitFlow

第四章 面试题框架篇

4.1 区分初中高级的 —— Vue面试题

面试题:Vue2.x 生命周期有哪些?

1.系统自带八个

2.当一旦进入到某个组件会执行哪些生命周期

3.$el和$data在哪个阶段有

4.如果使用keep-alive会多俩个生命周期

5.如果加入keep-alive第一次进入组件会执行哪些生命周期

6.如果加入keep-alive第二次或者第N进入该组件会执行哪些生命周期

面试题:谈谈你对keep-alive的了解

面试题:v-if和v-show区别

面试题:v-if和v-for优先级 2.x

面试题:ref是什么?

面试题:nextTick是什么?

面试题:Vue中如何做样式穿透

面试题:scoped原理

面试题:Vuex是单向数据流还是双向数据流?

面试题:讲一下MVVM

面试题:双向绑定原理

面试题:什么是虚拟DOM

面试题:key是干什么?

面试题:diff算法

面试题:Vue组件传值

面试题:props和data优先级谁高?

面试题:computed、methods、watch有什么区别?

面试题:Vuex

面试题:Vue路由

面试题:Vue项目打包后出现空白页

4.2 微信小程序面试题

面试题:如何自定义头部?

面试题:如何自定义底部?

4.3 uni-app面试题

面试题:生命周期

面试题:条件编译

第五章 面试题性能优化篇

131.用原生 JavaScript 的实现过什么功能吗?

参考答案:轮播图、手风琴、放大镜、3D动画效果等,切记,所答的一定要知道实现原理!,不知道还不如不说!

参与互动

132.javascript 代码中的"use strict"是什么意思 ? 使用它区别是什么?

参考答案:意思是使用严格模式,使用严格模式,一些不规范的语法将不再支持

参与互动

133.简述创建函数的几种方式

参考答案:

参与互动

134.window.location.search() 返回的是什么?

参考答案:查询(参数)部分。除了给动态语言赋值以外,我们同样可以给静态页面, 并使用 javascript 来获得相信应的参数值 返回值:?ver=1.0&id=timlq 也就是问号后面的!

参与互动

135.window.location.hash 返回的是什么?

参考答案:锚点 , 返回值:#love ;

参与互动

136.window.location.reload() 作用?

参考答案:刷新当前页面

参与互动

137.为什么不能定义 1px 左右的 p 容器?

参考答案: IE6 下这个问题是因为默认的行高造成的,解决的方法也有很多,例如: overflow:hidden | zoom:0.08 | line-height:1px

参与互动

138.BOM 对象有哪些,列举 window 对象?

参考答案:

参与互动

139.简述 readonly 与 disabled 的区别

参考答案:

参与互动

140.为什么扩展 javascript 内置对象不是好的做法?

参考答案:

参与互动

141.什么是三元表达式?“三元”表示什么意思?

参考答案:三元如名字表示的三元运算符需要三个操作数。

语法是 条件 ? 结果1 : 结果2.这里你把条件写在问号(?)的前面后面跟着用冒号(:)分隔的结果1和结果2。满足条件时结果1否则结果2。

参与互动

142.我们给一个 dom 同时绑定两个点击事件,一个用捕获,一个用冒泡,你来说下会执行几次事件,然后会先执行冒泡还是捕获

参考答案:所有事件的顺序是:其他元素捕获阶段事件 ->本元素代码顺序事件 ->其他元素冒泡阶段事件 。

参考

参与互动

144.简述一下 Handlebars 的基本用法?

参考答案:没有用过的话说出它是干什么的即可

参与互动

143.简述一下 Handlerbars 的对模板的基本处理流程, 如何编译的?如何缓存的?

参考答案:

参与互动

145.前端 templating(Mustache, underscore, handlebars)是干嘛的, 怎么用?

参考答案:

参与互动

146.知道什么是 webkit 么? 知道怎么用浏览器的各种工具来调试和 debug 代码么?

参考答案:Webkit 是浏览器引擎,包括 html 渲染和 js 解析功能,手机浏览器的主流内核,与之相对应的引擎有 Gecko(Mozilla Firefox 等使用)和 Trident(也称 MSHTML,IE 使用)。 对于浏览器的调试工具要熟练使用,主要是页面结构分析,后台请求信息查看,js 调试工具使用,熟练使用这些工具可以快速提高解决问题的效率

参与互动

147.如何测试前端代码? 知道 BDD, TDD, Unit Test 么? 知道怎么测试你的前端工程么(mocha, sinon, jasmin, qUnit..)?

参考答案:了解 BDD 行为驱动开发与 TDD 测试驱动开发已经单元测试相关概念

参与互动

148.JavaScript 的循环语句有哪些?

参考答案:while for do while forEach

参与互动

149.作用域-编译期执行期以及全局局部作用域问题

参考答案:js 执行主要的两个阶段:预解析和执行期

参与互动

150.如何添加 html 元素的事件,有几种方法?请列举

参考答案:直接在标签里添加;在元素上添加、使用事件注册函数添加

参与互动

151.列举浏览器对象模型 BOM 里常用的至少 4 个对象,并列举 window 对象的常用方法至少 5 个

参考答案:

对象:Window document location screen history navigator

方法:Alert() confirm() prompt() open() close()

参与互动

152.事件绑定的方式

参考答案:

参与互动

153.事件循环

参考答案:事件循环是一个单线程循环,用于监视调用堆栈并检查是否有工作即将在任务队列中完成。如果调用堆栈为空并且任务队列中有回调函数,则将回调函数出队并推送到调用堆栈中执行。

参与互动

154.事件模型

参考答案:

解析:参考

参与互动

155.如何自定义事件

参考答案:

1.原生提供了 3 个方法实现自定义事件 2.createEvent,设置事件类型,是 html 事件还是 鼠标事件 3.initEvent 初始化事件,事件名称,是否允许冒泡,是否阻止自定义事件 4.dispatchEvent 触发事件

MDN

参与互动

156.target 和 currentTarget 区别

参考答案:

参与互动

157.prototype 和__proto__的关系是什么

参考答案:

所有的对象都拥有__proto__属性,它指向对象构造函数的 prototype 属性

所有的函数都同时拥有__proto__和 protytpe 属性 函数的__proto__指向自己的函数实现 函数的 protytpe 是一个对象 所以函数的 prototype 也有__proto__属性 指向 Object.prototype

Object.prototype.__proto__指向 null

参与互动

158.什么是原型属性?

参考答案:从构造函数的prototype属性出发找到原型,这时候就把原型称之为构造函数的原型属性

参与互动

159.什么是原型对象?

参考答案:从实例的__proto__出发,找到原型,这时候就把原型称之为实例的原型对象。

参与互动

160.使用 let、var 和 const 创建变量有什么区别

参考答案:

let 和 const 的区别在于:let 允许多次赋值,而 const 只允许一次。

61.作用域的分类

参考答案:块作用域、词法作用域、动态作用域

解析:

1 块作用域 花括号 {}

2 词法作用域(js 属于词法作用域) 作用域只跟在何处被创建有关系,跟在何处被调用没有关系

3 动态作用域 作用域只跟在何处被调用有关系,跟在何处被创建没有关系

参与互动

62.js 属于哪种作用域

参考答案:词法作用域(函数作用域)

解析:

参与互动

63.浮点数精度

参考答案:参考

参与互动

64.自执行函数? 用于什么场景?好处?

参考答案:

好处:防止变量弥散到全局,以免各种 js 库冲突。隔离作用域避免污染,或者截断作用域链,避免闭包造成引用变量无法释放。利用立即执行特性,返回需要的业务函数或对象,避免每次通过条件判断来处理

场景:一般用于框架、插件等场景

参与互动

65.多个页面之间如何进行通信

参考答案:有如下几个方式:

参与互动

66.css 动画和 js 动画的差异

参考答案:

1.代码复杂度,js 动画代码相对复杂一些 2.动画运行时,对动画的控制程度上,js 能够让动画,暂停,取消,终止,css 动画不能添加事件 3.动画性能看,js 动画多了一个 js 解析的过程,性能不如 css 动画好

解析:参考

参与互动

67.如何做到修改 url 参数页面不刷新

参考答案:

HTML5 引入了 history.pushState() 和 history.replaceState() 方法,它们分别可以添加和修改 历史 记录条目。

假设当前页面为 foo.html ,执行上述代码后会变为 bar.html ,点击浏览器后退,会变为 foo.html ,但浏览器并不会刷新。 pushState() 需要三个参数: 一个状态对象, 一个标题 (目前被忽略), 和 (可选的) 一个 URL.让我们来解释下这三个参数详细内容:

参与互动

68.数组方法 pop() push() unshift() shift()

参考答案:

参与互动

69.事件绑定与普通事件有什么区别

参考答案:

参与互动

70.IE 和 DOM 事件流的区别

参考答案:

1.事件流的区别

IE 采用冒泡型事件 Netscape 使用捕获型事件 DOM 使用先捕获后冒泡型事件 示例:

复制代码代码如下:

冒泡型事件模型: button->p->body (IE 事件流)

捕获型事件模型: body->p->button (Netscape 事件流)

DOM 事件模型: body->p->button->button->p->body (先捕获后冒泡)

2.事件侦听函数的区别

IE 使用:

DOM 使用:

bCapture 参数用于设置事件绑定的阶段,true 为捕获阶段,false 为冒泡阶段。

参与互动