今天我爱编程网小编整理了web前端开发基础笔试面试 WEB前端面试题相关内容,希望能帮助到大家,一起来看下吧。
Web前端5道面试题
1.请说明ECMAScript,JavaScript,Jscript之间的关系?
ECMAScript提供脚本语言必须遵守的规则、
细节和准则,是脚本语言的规范。
比如:ES5,ES6就是具体的一js版本。
JavaScript是ECMAScript的一个分支版本,
JavaScript实现了多数ECMA-262中
描述的ECMAScript规范,但存在少数差异。
JScript是微软公司对ECMA-262语言规范的
一种实现,除了少数例外(这是为了保持向后兼容),
微软公司宣称JScript完全实现了ECMA标准.
关系:
JavaScript和JScript都是ECMAScript的版本分支,
二者在语法上没有多大的区别;
只不过一个是NetScape公司的,一个是微软的;
IE系列默认是JScript,其它的则反之用JavaScript。
2.页面加载过程中可能触发哪些事件?它们的顺序是?
页面加载时,大致可以分为以下几个步骤:1)开始解析HTML文档结构2)加载外部样式表及JavaScript脚本3)解析执行JavaScript脚本4)DOM树渲染完成5)加载未完成的外部资源6)页面加载成功
执行顺序:1)documentreadystatechange事件2)documentDOMContentLoaded事件3)windowload事件
3.函数中在声明变量a前使用a会产生错误吗?为什么?
不会,JS中能够进行变量作用域提升,
把所有变量、函数的声明提升到当前
作用域的最前面,但不进行赋值操作;
所以可能造成获取的值是undefined。
4.什么是hash,以及hashchange事件?
先了解下什么是hash:hash即URL中"#"字符后面的部分。
a)使用浏览器访问网页时,
如果网页URL中带有hash,
页面就会定位到id(或name)
与hash值一样的元素的位置;
b)hash还有另一个特点,
它的改变不会导致页面重新加载;
c)hash值浏览器是不会随请求发送到服务器端的;
d)通过window.location.hash属性获取和设置hash值。
window.location.hash值的变化会直接
反应到浏览器地址栏(#后面的部分会发生变化),同时,浏览器地址栏hash值的变化也会触发
window.location.hash值的变化,
从而触发onhashchange事件。
再来了解下什么是hashchange事件:
a)当URL的片段标识符更改时,
将触发hashchange事件(跟在#符号后面的URL部分,包括#符号)b)
hashchange事件触发时,
事件对象会有hash改变前的URL(oldURL)和hash改变后的URL(newURL)两个属性。
5.什么是CDN,CDN对于网站有什么意义,它有什么样的缺点?
CDN又称为内容分发网络;本意在于
尽可能避开互联网上有可能影响数据
传输速度和稳定性的瓶颈和环节,
使内容传输的更快、更稳定。
主要目的:
解决因分布、带宽、服务器性能带来的访问延迟问题,
适用于站点加速、点播、直播等场景。
使用户可就近取得所需内容,解决Internet网络拥挤的状况,
提高用户访问网站的响应速度和成功率。
缺点:
a)实施复杂,投资大;
b)目前大部分的CDN还只是对静态内容加速,
对动态加速效果不好;
而双线对动态加速的效果跟静态是一样的。
WEB前端面试题
第二章 面试题基础篇
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面试题
面试题:生命周期
面试题:条件编译
第五章 面试题性能优化篇
我爱编程网
有哪些经典的 Web 前端或者 JavaScript 面试笔试题
一、不定项选择题 (每题3分,共30分)
1. 声明一个对象,给它加上name属性和show方法显示其name值,以下代码中正确的是( D )
A. var obj = [name:"zhangsan",show:function(){alert(name);}];
B. var obj = {name:”zhangsan”,show:”alert(this.name)”};
C. var obj = {name:”zhangsan”,show:function(){alert(name);}};
D. var obj = {name:”zhangsan”,show:function(){alert(this.name);}};
2. 以下关于Array数组对象的说法不正确的是( CD )
A. 对数组里数据的排序可以用sort函数,如果排序效果非预期,可以给sort函数加一个排序函数的参数
B. reverse用于对数组数据的倒序排列
C. 向数组的最后位置加一个新元素,可以用pop方法
D. unshift方法用于向数组删除第一个元素
3. 要将页面的状态栏中显示“已经选中该文本框”,下列JavaScript语句正确的是( A )
A. window.status=”已经选中该文本框”
B. document.status=”已经选中该文本框”
C. window.screen=”已经选中该文本框”
D. document.screen=”已经选中该文本框”
4. 点击页面的按钮,使之打开一个新窗口,加载一个网页,以下JavaScript代码中可行的是( AD )
A. <input type=”button” value=”new”
onclick=”open(‘new.html’, ‘_blank’)”/>
B. <input type=”button” value=”new”
onclick=”window.location=’new.html’;”/>
C. <input type=”button” value=”new”
onclick=”location.assign(‘new.html’);”/>
D. <form target=”_blank”action=”new.html”>
<inputtype=”submit” value=”new”/>
</form>
5. 使用JavaScript向网页中输出<h1>hello</h1>,以下代码中可行的是( BD )
A. <scripttype=”text/javascript”>
document.write(<h1>hello</h1>);
</script>
B. <scripttype=”text/javascript”>
document.write(“<h1>hello</h1>”);
</script>
C. <scripttype=”text/javascript”>
<h1>hello</h1>
</script>
D. <h1>
<scripttype=”text/javascript”>
document.write(“hello”);
</script>
</h1>
6. 分析下面的代码:
<html>
<head>
<script type=”text/javascript”>
function writeIt (value) { document.myfm.first_text.value=value;}
</script>
</head>
<body bgcolor=”#ffffff”>
<form name=”myfm”>
<input type=”text” name=”first_text”>
<input type=”text” name=”second_text”>
</form>
</body>
</html>
以下说法中正确的是( CD )
A. 在页面的第二个文本框中输入内容后,当鼠标离开第二个文本框时,第一个文本框的内容不变
B. 在页面的第一个文本框中输入内容后,当鼠标离开第一个文本框时,将在第二个文本框中复制第一个文本框的内容
C. 在页面的第二个文本框中输入内容后,当鼠标离开第二个文本框时,将在第一个文本框中复制第二个文本框的内容
D. 在页面的第一个文本框中输入内容后,当鼠标离开第一个文本框时,第二个文本框的内容不变
7. 下面的JavaScript语句中,( D )实现检索当前页面中的表单元素中的所有文本框,并将它们全部清空
A. for(vari=0;i< form1.elements.length;i++) {
if(form1.elements.type==”text”)
form1.elements.value=”";}
B. for(vari=0;i<document.forms.length;i++) {
if(forms[0].elements.type==”text”)
forms[0].elements.value=”";
}
C. if(document.form.elements.type==”text”)
form.elements.value=”";
D. for(vari=0;i<document.forms.length; i++){
for(var j=0;j<document.forms.elements.length; j++){
if(document.forms.elements[j].type==”text”)
document.forms.elements[j].value=”";
}
}
8. 在表单(form1)中有一个文本框元素(fname),用于输入电话号码,格式如:010-82668155,要求前3位是010,紧接一个“-”,后面是8位数字。要求在提交表单时,根据上述条件验证该文本框中输入内容的有效性,下列语句中,( A )能正确实现以上功能
A. var str= form1.fname.value;
if(str.substr(0,4)!=”010-”|| str.substr(4).length!=8 ||
isNaN(parseFloat(str.substr(4))))
alert(“无效的电话号码!”);
B. var str= form1.fname.value;
if(str.substr(0,4)!=”010-” && str.substr(4).length!=8 &&
isNaN(parseFloat(str.substr(4))))
alert(“无效的电话号码!”);
C. var str= form1.fname.value;
if(str.substr(0,3)!=”010-”|| str.substr(3).length!=8 ||
isNaN(parseFloat(str.substr(3))))
alert(“无效的电话号码!”);
D. var str= form1.fname.value;
if(str.substr(0,4)!=”010-”&& str.substr(4).length!=8 &&
!isNaN(parseFloat(str.substr(4))))
alert(“无效的电话号码!”);
9. 关于正则表达式声明6位数字的邮编,以下代码正确的是( C )
A. var reg = /\d6/;
B. var reg = \d{6}\;
C. var reg = /\d{6}/;
D. var reg = new RegExp(“\d{6}”);
10. 关于JavaScript里的xml处理,以下说明正确的是( BCD )
A. Xml是种可扩展标记语言,格式更规范,是作为未来html的替代
B. Xml一般用于传输和存储数据,是对html的补充,两者的目的不同
C. 在JavaScript里解析和处理xml数据时,因为浏览器的不同,其做法也不同
D. 在IE浏览器里处理xml,首先需要创建ActiveXObject对象
二、问答题
1. 列举浏览器对象模型BOM里常用的至少4个对象,并列举window对象的常用方法至少5个 (10分)
对象:Window document location screen history navigator
方法:Alert() confirm() prompt() open() close()
2. 简述列举文档对象模型DOM里document的常用的查找访问节点的方法并做简单说明 (10分)
Document.getElementById 根据元素id查找元素
Document.getElementByName 根据元素name查找元素
Document.getElementTagName 根据指定的元素名查找元素
三、程序题
1、补充按钮事件的函数,确认用户是否退出当前页面,确认之后关闭窗口; (10分)
<html>
<head>
<script type=”text/javascript” >
function closeWin(){
//在此处添加代码
if(confirm(“确定要退出吗?”)){
window.close();
}
}
</script>
</head>
<body>
<input type=”button”value=”关闭窗口”onclick=”closeWin()”/>
</body>
</html>
2、写出简单描述html标签(不带属性的开始标签和结束标签)的正则表达式,并将以下字符串中的html标签去除掉(15分)
var str = “<div>这里是div<p>里面的段落</p></div>”;
//
<scripttype=”text/javascript”>
varreg = /<\/?\w+\/?>/gi;
varstr = “<div>这里是div<p>里面的段落</p></div>”;
alert(str.replace(reg,”"));
</script>
3、完成foo()函数的内容,要求能够弹出对话框提示当前选中的是第几个单选框。(10分)
<html>
<head>
<metahttp-equiv=”Content-Type” content=”text/html;charset=utf-8″ />
</head>
<body>
<script type=”text/javascript” >
function foo() {
//在此处添加代码
var rdo =document.form1.radioGroup;
for(var i =0 ;i<rdo.length;i++){
if(rdo.checked){
alert(“您选择的是第”+(i+1)+”个单选框”);
}
}
}
</script>
<body>
<form name=”form1″ >
<input type=”radio” name=”radioGroup”/>
<input type=”radio” name=”radioGroup”/>
<input type=”radio” name=”radioGroup”/>
<input type=”radio” name=”radioGroup”/>
<input type=”submit”/>
</form>
</body>
</html>
4、完成函数showImg(),要求能够动态根据下拉列表的选项变化,更新图片的显示 (15分)
<body>
<script type=”text/javascript” >
function showImg (oSel) {
//在此处添加代码
var str = oSel.value;
document.getElementById(“pic”).src= str+”.jpg”;
}
</script>
<img id=”pic”src=”img1.jpg”width=”200″ height=”200″ />
<br />
<select id=”sel”>
<option value=”img1“>城市生活</option>
<option value=”img2“>都市早报</option>
<option value=”img3“>青山绿水</option>
</select></body>
以上就是web前端开发基础笔试面试 WEB前端面试题全部内容,更多相关信息,敬请关注我爱编程网。