❶ web前端面试十大总结，不了解一下吗
在互联网时代，浏览器几乎主宰着一切，而前端开发人员决定着浏览器的内容展现形式和信息的提供，是不可或缺的一部分。前端开发实际上具有很明显的时代特征，它在很大程度上决定着大众的信息摄入，以及用户读取信息的有效方式。那么今天小编为大家总结了一些web前端的面试题，希望对大家有帮助哦！
一：字体高亮函数
题目：请你完成highlight函数，可以把模版字符串中的插入内容替换掉，并且插入文档以后显示红色。例如：
constyourName='ScriptOJ'
constmyName='Jerry'
document.body.innerHTML=highlight`Hello,${yourName}.Iam
${myName}.`
上面例子的页面显示如下：
0_1498033735172_upload-2abd65b1-1e98-46ba-b46f-df4188a036a5
请你完成highlight函数的编写。
答案：
css:
.highlight{
color:red;
}
js:
//考察的是Taggedtemplateliterals的使用
//
#/en-US/docs/Web/JavaScript/Reference/Template_literals
consthighlight=(strings,...args)=>{
returnstrings.rece((str,cur,i)=>{
return`${str}${cur}${args[i]?`class="highlight">${args[i]}`:''}`
},'')
}
二：数组去重
题目：编写一个函数unique(arr)，返回一个去除数组内重复的元素的数组。例如：
unique([0,1,2,2,3,3,4])//=>[0,1,2,3,4]
unique([0,1,Ƈ',Ƈ',2])//=>[0,1,Ƈ',2]
答案：
constunique=(arr)=>[...newSet(arr)]
三：解析字串
题目：完成一个extractStr函数，可以把一个字符串中所有的:到.的子串解析出来并且存放到一个数组当中，例如：
extractStr('Mynameis:Jerry.Myageis:12.')//=>['Jerry',']
注意，:和.之间不包含:和.。也即是说，如果::abc..，则返回['abc']。
(本题来源：《JavaScriptCookbook》)
答案：·
constextractStr=(str)=>{
constret=str.match(/:([^:.])*?./g)||[]
returnret.map((subStr)=>subStr.replace(/[:.]/g,''))
}
四：spacify题目：
请你给字符串都添加上原型方法spacify，可以让一个字符串的每个字母都多出一个空格的间隔："ScriptOJ".spacify()//=>
"ScriptO
J"(本题来源：#/interview-questions)答案：String.prototype.spacify
=function(){
returnthis.split('').join('')
}
五：safeGet
题目：有时候我们需要访问一个对象较深的层次，但是如果这个对象某个属性不存在的话就会报错，例如：
vardata={a:{b:{c:'ScriptOJ'}}}
data.a.b.c//=>scriptoj
data.a.b.c.d//=>报错，代码停止执行
console.log('ScriptOJ')//=>不会被执行
请你完成一个safeGet函数，可以安全的获取无限多层次的数据，一旦数据不存在不会报错，会返回undefined，例如：
vardata={a:{b:{c:'ScriptOJ'}}}
safeGet(data,'a.b.c')//=>scriptoj
safeGet(data,'a.b.c.d')//=>返回undefined
safeGet(data,'a.b.c.d.e.f.g')//=>返回undefined
console.log('ScriptOJ')//=>打印ScriptOJ
答案：
constsafeGet=(o,path)=>{
try{
returnpath.split('.').rece((o,k)=>o[k],o)
}catch(e){
returnvoid666
}
}
六：判断两个矩形是否重叠
题目：用一个对象的数据来表示一个矩形的位置和大小：
{
x:100,
y:100,
width:150,
height:250
}
它表示一个宽为150高为250的矩形在页面上的(100,100)的位置。
请你完成一个函数isOverlap可以接受两个矩形作为参数，判断这两个矩形在页面上是否重叠。例如：
constrect1={x:100,y:100,width:100,height:100}
constrect2={x:150,y:150,width:100,height:100}
isOverlap(rect1,rect2)//=>true
答案：
//原理：#/find-two-rectangles-overlap/
constisOverlap=(rect1,rect2)=>{
constl1={x:rect1.x,y:rect1.y}
constr1={x:rect1.x+rect1.width,y:rect1.y+rect1.height}
constl2={x:rect2.x,y:rect2.y}
constr2={x:rect2.x+rect2.width,y:rect2.y+rect2.height}
if(
l1.x>r2.x||
l2.x>r1.x||
l1.y>r2.y||
l2.y>r1.y
)returnfalse
returntrue
}
七：按下标插入
题目：现在有一个数组存放字符串数据：
['item1','item2','item3','item4','item5']
有另外一个数组存放一组对象：
[
{content:'section1',index:0},
{content:'section2',index:2}
]
它每个对象表示的是会往原来的数组的index坐标插入content数据(index不会重复)：
01234
item1itme2item3item4item5
^^
||
section1section2
最后结果是：['section1','item1','item2','section2','item3','item4',
'item5']
请你完成injectSections函数，可以达到上述的功能：
injectSections(
['item1','item2','item3','item4','item5'],
[
{content:'section1',index:0},
{content:'section2',index:2}
]
)//=>['section1','item1','item2','section2','item3','item4',
'item5']
答案：
constinjectSections=(items,sections)=>{
/*需要插入坐标对应数据存放到map里面*/
constsectionsMap=newMap(sections.map(({index,content})=>[index,
content]))
/*新建一个数组，然后往里面push原来数组的数据*/
returnitems.rece((ret,item,index)=>{
/*push的时候先检查map里面有没有，有的话先pushmap里面的数据*/
if(sectionsMap.has(index))ret.push(sectionsMap.get(index))
/*再push原来的数据*/
ret.push(item)
returnret
},[])
}
八：数组拍平(二)
题目：编写一个JavaScriptgenerator函数，接受一个仅包含数字的多维数组
，返回一个迭代器，可以遍历得到它拍平以后的结果。例如：
constnumbers=flatten2([1,[[2],3,4],5])
numbers.next().value//=>1
numbers.next().value//=>2
numbers.next().value//=>3
numbers.next().value//=>4
numbers.next().value//=>5
答案：
function*flatten2(arr){
for(leti=0;i
constitem=arr[i]
/*yield*的使用可以大大简化程序编写*/
Array.isArray(item)?yield*flatten2(item):yielditem;
}
}
/*用flatten2来完成flatten也是很方便的*/
//constflatten=(arr)=>[...flatten2(arr)]
九：判断两个Set是否相同
题目：完成isSameSet函数，它接受了两个Set对象作为参数，请你返回true/false来表明这两个set
的内容是否完全一致，例如：
consta={}
constb=1
constc='ScriptOJ'
constset1=newSet([a,b,c])
constset2=newSet([a,c,b])
isSameSet(set1,set2)//=>true
答案：
//codefrom#/js-example.html
/*这道题不能简单地使用sort，使用sort并不靠谱。因为Set里面的内容可能有很多种类
*字符串、对象、数字，不同类型之间是不可对比的，所以排序结果并不会一致
*
*最好的方式是按照数学上集合相等的定义：
*A=B当且仅当A是B的子集并且B是A的子集。
*
*这种判断方式还可以用在对象、map等其他数据类型的判断当中。
*/
constisSameSet=(s1,s2)=>{
/*获取一个集合所有的值，判断另外一个集合是否全部包含该这些值*/
constisSame=(a,b)=>{
constvalues=[...a]
for(letvalofvalues){
/*及时跳出循环，可以降低算法复杂度*/
if(!b.has(val))returnfalse
}
returntrue
}
/*a包含b，b包含a，那么两个集合相同*/
returnisSame(s1,s2)&&isSame(s2,s1)
}
/*By陈小俊*/
//constisSameSet=(set1,set2)=>
//[...set1].every((o)=>set2.has(o))&&
//[...set2].every((o)=>set1.has(o))
十：记忆化斐波那契函数(Memoization)
题目：斐波那契数列指的是类似于以下的数列：
1,1,2,3,5,8,13,....
也就是，第n个数由数列的前两个相加而来：f(n)=f(n-1)+f(n-2)
请你完成fibonacci函数，接受n作为参数，可以获取数列中第n个数，例如：
fibonacci(1)//=>1
fibonacci(2)//=>1
fibonacci(3)//=>2
...
测试程序会从按顺序依次获取斐波那契数列中的数，请注意程序不要超时，也不要添加额外的全局变量。
本题来源：《JavaScript语言精髓》
答案：
constfibonacci=((memo=[0,1])=>{
constfib=(n)=>{
letresult=memo[n]
if(typeofresult!=="number"){
result=fib(n-1)+fib(n-2)
memo[n]=result
}
returnresult
}
returnfib
})()
最后就是反应能力，临场出现意外什么的了，这就看你自己了，万一自己一不留神说错话了，大神给你指出来，请记得谢谢一定要谦虚！在这里小编也希望每一位web培训班毕业的学员都能顺利找到称心的工作！
免责声明：内容和图片源自网络，版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容
在互联网时代，浏览器几乎主宰着一切，而前端开发人员决定着浏览器的内容展现形式和信息的提供，是不可或缺的一部分。前端开发实际上具有很明显的时代特征，它在很大程度上决定着大众的信息摄入，以及用户读取信息的有效方式。那么今天小编为大家总结了一些web前端的面试题，希望对大家有帮助哦！
一：字体高亮函数
题目：请你完成highlight函数，可以把模版字符串中的插入内容替换掉，并且插入文档以后显示红色。例如：
constyourName='ScriptOJ'
constmyName='Jerry'
document.body.innerHTML=highlight`Hello,${yourName}.Iam
${myName}.`
上面例子的页面显示如下：
0_1498033735172_upload-2abd65b1-1e98-46ba-b46f-df4188a036a5
请你完成highlight函数的编写。
答案：
css:
.highlight{
color:red;
}
js:
//考察的是Taggedtemplateliterals的使用
//
#/en-US/docs/Web/JavaScript/Reference/Template_literals
consthighlight=(strings,...args)=>{
returnstrings.rece((str,cur,i)=>{
return`${str}${cur}${args[i]?`class="highlight">${args[i]}`:''}`
},'')
}
二：数组去重
题目：编写一个函数unique(arr)，返回一个去除数组内重复的元素的数组。例如：
unique([0,1,2,2,3,3,4])//=>[0,1,2,3,4]
unique([0,1,Ƈ',Ƈ',2])//=>[0,1,Ƈ',2]
答案：
constunique=(arr)=>[...newSet(arr)]
三：解析字串
题目：完成一个extractStr函数，可以把一个字符串中所有的:到.的子串解析出来并且存放到一个数组当中，例如：
extractStr('Mynameis:Jerry.Myageis:12.')//=>['Jerry',']
注意，:和.之间不包含:和.。也即是说，如果::abc..，则返回['abc']。
(本题来源：《JavaScriptCookbook》)
答案：·
constextractStr=(str)=>{
constret=str.match(/:([^:.])*?./g)||[]
returnret.map((subStr)=>subStr.replace(/[:.]/g,''))
}
四：spacify题目：
请你给字符串都添加上原型方法spacify，可以让一个字符串的每个字母
❷ web前端经典面试题
为大家带来一些web前端的面试题，希望可以帮助到大家啊。
1.css3有哪些新特性?
选择器、圆角、动画、多重背景、背景的宽度高度flex布局响应式布局边框阴影文本阴影
2.响应式布局怎么理解的，响应式布局是通过什么实现?
根据不同的屏幕加载不同的css样式
1).移动端适配
2).一套代码适配pc端移动端多个
3.js创建对象有哪几种方式?
1).自面量
2).newObject
3).构造函数
4.es6有哪些新特性?
1).letconst
2).模板字符串
3).方法的简写属性的简写
4).三点运算符
5).解构赋值
6).箭头函数
7).setmap
8).class类
9).模块化
5.箭头函数和普通的方法有什么区别?
1).箭头函数省略了function
2).箭头函数里面的this指向上下文(可以改变this指向)
6.gulp可以干什么
gulp自动化构建工具。
压缩代码合并代码压缩图片自动处理前缀创建web服务处理sass
7.清除浮动有哪些方法。
1).浮动元素的父元素overflow:hiddenoverflow:auto
2).浮动元素的最后面加一个空div给他clear:both
3).after伪类清除浮动
.clearfix:after{
content:"";
dislpay:block;
height:0px;
clear:both;
}
4)、给父元素设置高度。
8.行内元素块元素的区别?
1)块元素默认独占一行，行内元素默认情况不独占一行，行内元素的的宽度就是内容的宽度
2)默认情况块元素可以设置宽度高度默认情况行内元素不可以设置宽度高度
3)默认可以margin上下左右，行内默认只能margin左右不能上下。
9.网站加载速度优化?
1).图片不失真尽量小
2).多个背景图片合并
3).代码压缩代码合并
4).js写到页面最底部
5).懒加载
6).不要有冗余代码
7).服务器带宽款一些
8).服务器固态硬盘
9).开启缓存
10.以前写代码什么情况会成出现乱码怎么解决?
解决乱码文件保存的编码和设置的编码必须保持一致
11.以前如何测试调试移动端页面
1).首先在浏览器自带的调试工具模拟器里面调试
2).真机的内置浏览器调试
3).真机上面的UC里面调试
4).真机上的微信里面调试。
❸ 有哪些经典的 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(“无效的电话号码！”);
❹ 找个java毕业设计题目 web方面的，要新颖 实用
我来推荐你一些题目，都是些实用而且新颖的题目，你可以参考试试，满意请给分。
基于SSM的酒店管理系统-java酒店管理系统
基于SSM的勤工助学管理系统
基于SSM的供应商管理系统
基于springboot&mybatis的销售管理系统轻量级销售团队管理-java销售管理系统
基于SSM的宠物领养系统-java宠物领养系统
基于SSH的绿咖奶茶网站
基于SSH的教务管理课程管理选课管理系统
基于SSM的小区业主服务平台之垃圾回收信息管理系统
基于SSM的科技项目评估及专家会议评审系统
基于SSM&EasyUI的西服门店管理系统-java门店管理服装管理系统
基于Mybatis的教学管理系统作业提交批改管理系统-java教学管理系统作业提交批改管理系统
基于SSM的图书馆座位预约管理系统占座系统-java图书馆座位预约管理系统占座系统
基于Mybatis的教学管理系统作业提交批改管理系统-java教学管理系统作业提交批改管理系统
基于SSM的驾校预约报名管理系统-java驾校预约报名管理系统
基于SSM的图书馆座位预约管理系统占座系统-java图书馆座位预约管理系统占座系统
基于SSM的水质检测系统-java水质检测系统
基于SSM的学生作业管理系统作业提交作业批改-java作业批改作业提交系统
基于springboot2.0的易居二手房网站-房屋管理系统
基于SSM的泉州信息工程学院教师测评系统-java教师测评系统
基于SSM的超市进销存管理系统-java进销存管理
❺ 参加Web前端面试一定看的Web前端面试题库（一）
今天小编要跟大家分享的文章是关于参加Web前端面试一定看的Web前端面试题库。正在学习web前端知识准备参加web前端面试的小伙伴们来和小编一起看一看吧。
HTML(5)和CSS3方面
01．前端与后端数据交互的格式有哪些，为什么大部分现在都用json而不用xml？
答：XML：
JSON：{name:”知了堂”,age:3}
JSON书写方便节省字节，更轻量，前后台都有直接解析JSON的方法（JSON.stringfity/parse）使用方便。
02．Flex布局熟悉吗，说几个常用的属性。
答：这个几乎每天都在用，还是挺熟悉的。
__
display：flex
___align-items多个
__
align-content：单个
___justify-content
___justify-items
___flex-direction
__
flex-wrap：
__
flex-basic：初始盒子宽度_lex
_
_lex-grow：增长因子2004*40=1601,1,1,21/5*40_lex
___flex-shrink
:缩减因子20060*4=240
03.说一下CSS盒模型。
答：CSS的盒模型包含了以下几个内容margin,padding,border,content。
在计算盒子宽高的时候，IE和Chrome会有一些区别，IE算到border，Chrome的宽度只包含content区域，因此CSS3提供了box-sizing这个属性来修改。
04.CSS常用选择器，选择器权重问题。
答：*(has，not，target，root。。。。)通配符，ID，class，attr属性，element，子代（>+~）,
___UI状态伪类选择器（hover,active,link,seceted..，checked），
___结构性伪类选择器(nth-child,fist-child,last,nth-of-type...before,after....)
___!important
>style>id>class>elemnet>伪类和属性
05.请用5种方式实现元素垂直居中。
答：
（1）flex
（2）Tranform
（3）定位+margin负值（知道子节点宽高）
（4）定位+margin:auto
（5）JS动态计算top、left值
06.什么是BFC？垂直margin重叠是为什么？怎么解决这个问题？
答：
概念：BFC全称BlockFormatting
Context，中文意思为块级格式上下文。
通俗的来说：BFC是一个独立的布局环境，我们可以理解为一个箱子（实际上是看不见摸不着的），箱子内部的元素无论如何翻江倒海，都不会影响到外部。转换为BFC的理解则是：BFC中的元素的布局是不受外界的影响（我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。比如清除浮动）并且在一个BFC中，块元素与行元素都会垂直的沿着其父元素的边框排列。
如何触发BFC
1.浮动元素，float除none以外的值
2.position的值不为static或者relative
3.display不为none
4.overflow除了visible以外的值
BFC的应用
1.解决浮动塌陷问题
2.自适应两栏布局（我们还可以运用BFC可以阻止元素被浮动元素覆盖的特性来实现自适应两栏布局。方法：给没有浮动的元素加overflow：hidden。）
3.解决设置margin值重叠问题。
总结：
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
07.什么是浮动，有什么作用，有何副作用，以及如何清除浮动？
答：浮动是使用给节点添加float属性，最初的设计是用来实现文字环绕的。
添加了float的节点脱离文档流，同时触发节点的BFC，让节点往一个方向靠，并排成一行。
当一个父节点的子节点全部浮动，就会造成父节点高度塌陷，
解决的办法首先是可以给父节点主动添加高度值，再者利用只要有一个子节点不浮动原理来添加一个不浮动的节点（通常使用伪元素before，after），再者还可以触发父节点的bfc，常用的定位，或者overflow：hidden。
08.CSS里面有哪些相对单位？都是相对什么的？
答：REM,EM,VW,VH等
__
REM：相对于根节点html的font-size
__
EM：父节点的font-size
__W：视口的宽度为100VW，相对于把视口分为100份
__
VH：视口高度为100VH，同理
__陨系ノ欢伎梢栽谝贫俗鲆趁媸逝洌ǔJ褂_EM和VW
09.fixed是相对于谁定位的？如果加上transform会出现问题吗？
答：fixed定位相对于浏览器视口来定位的。
添加上transform以后，fixed定位会失效。如果fixed元素的祖先有transform属性,则fixed元素会相对与这个祖先计算,而不是视口。
10.为什么不推荐用style内联元素？内联元素有什么缺点？（css文件可以缓存）
答：首先是style是节点的属性，不能被缓存；代码的可读性和可维护性相对弱一些，特别是多人协作开发的时候。但是如果一个页面的style样式足够少的时候，可以使用style元素，因为一次请求最多携带14K的数据，如果足够小，还可以节约一次请求。
11.简单描述http与https协议，以及为什么要三次握手？什么是长链接？
答：http与https都是目前主流传输协议。
目前http协议已经发展到2.0阶段，支持长链接，断点续传，cache缓存策略，多路复用，服务器推送等。
https相对于http更安全，增加了证书SSL加密，端口是433。
客户端SYN=1,Seq
=x，服务端接受到后，服务端就知道了，有一个客户端要链接我，然后服务器就会开启一个TCPsocket的端口，然后返回数据给前端也是SYN=1,SEQ=Y,ACK=x+1，客户端接受到后，在发一个seq，和ACK+1.主要是为了防止开启无用的链接，或者网络延迟丢包，服务器无法确定到底客户端有没有收到消息。
在使用长连接的情况下，当一个网页打开完成后，客户端和服务器之间用于传输HTTP数据的TCP连接不会关闭，客户端再次访问这个服务器时，会继续使用这一条已经建立的连接。
Keep-Alive不会永久保持连接，它有一个保持时间，可以在不同的服务器软件（如Apache）中设定这个时间。实现长连接需要客户端和服务端都支持长连接。
为何需要长链接?
长链接可以省去较多的TCP建立和关闭的操作，减少浪费，节约时间。
12.http常见状态码有哪些？301和302的区别是什么？304是指什么？
答：404：找不到资源；
500：服务器内部错误；
200：请求成功，并返回数据；
301：永久重定向；
302：_偈币贫墒褂迷_RI；
304：资源未修改，可使用缓存；
400：请求语法错误（一般为参数错误）；
403：没有权限访问。。。等
13.浏览器页面渲染的流程是什么（输入url后页面发生什么）？
答：首先dns解析IP，建立tcp链接下载资源，构建dom树，当遇到link标签，会下载并执行解析css（不会阻止dom树的构建）当遇到script标签的是，dom树构建会暂停，下载并执行完js才会继续（defer（下载延迟执行），async（异步下载并执行））然后再布局和绘制（layout,paint）最后再render。
14.什么是reflow与repain？哪些操作会触发reflow，如何避免？
答：reflow：回流，当元素的尺寸、结构或触发某些属性时，浏览器会重新渲染页面，称为回流。
__repain：重绘，当元素的样式（布局不发生）发生改变的时候。
以下常见操作都会触发：
浏览器窗口大小改变
元素尺寸、位置、内容发生改变
元素字体大小变化
添加或者删除可见的dom元素
激活CSS伪类（例如：:hover）等
尽量减少DOM操作。
15.HTML5常用的API有哪些？你用过哪些？
答：video、audio，获取dom的方式（queryselector），websocket
Canvas，svg，requestAnimationFrame，Geolocation，stroage，notification，OrientationAPI用于检测手机的摆放方向等
16.请列举出几个常见的浏览器兼容性问题？
答：现在市面上IE678基本已经停止使用了，所以尽量不要说这方面的兼容性。
1、不同浏览器的默认margin和padding不一致
2、图片的默认间距不一致
3、获取视口的宽高window.innerheight/width
4、CSS3的动画，过渡，渐变，flex也有
5、Canvas，SVG
6、IE9以下不能的opacity，使用filter:alpha(opacity=50);
7、event.offsetX/Y
8、绑定事件IE9才支持
17.什么是浏览器缓存（知道什么是强缓存和协商缓存）？
答：当浏览器访问过后的资源，会被浏览器缓存的本地，当下次在访问页面的时候，如果没有过期，直接读取缓存，加快浏览器的加载效率。
http缓存机制：
1、Expires：通过设置最大缓存时间，当时间超过了就去服务器下载，
2、http1.1，cache-control：max-age=time，当time过期后，检测etag带上etag往服务器发请求，如果etag没变，直接告诉浏览器读本地缓存，如果没有etag就会检测Last-Modified，判断如果上一次更改的时候，距离本次访问时间比较久，说明文件没有发生改变，返回304。
强缓存就是当前访问时间还在设置的最大时间范围内。
协商缓存就是时间过了，通过检查etag或者last-modifed来使用缓存的机制。
18.说一下浏览器垃圾回收机制
答：老：标记清除算法，GC会检测当前对象有没有被变量所引用，如果没有就回收。
新：Scavenge，把内存空间分为两部分，分别为From空间和To空间。当一个空间满了以后，会把空间中活动对象转移到另外一个空间，这样互换。
以上就是小编今天为大家分享的关于参加Web前端面试一定看的Web前端面试题库的文章，希望本篇文章能够对正准备参加web前端面试的小伙伴们有所帮助，想要了解web前端知识记得关注北大青鸟web培训官网，最后祝愿小伙伴们工作顺利！
❻ Web前端面试之css高频面试题
今天小编要跟大家分享的文章是关于web前端面试之css高频面试题。想要参加web前端面试的小伙伴们来和小编一起看一看吧，希望本篇文章能够对大家有所帮助。
1.什么是BFC机制
BFC(BlockFormattingContext)，块级格式化上下文，是一个独立的渲染区域，让处于BFC内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。
·___シ⑻跫(以下任意一条)
§_loat的值不为none
§_verflow的值不为visible
§_isplay的值为table-cell、tabble-caption和inline-block之一
§_osition的值不为static或则releative中的任何一个
在IE下,Layout,可通过zoom:1_シ
·___FC布局与普通文档流布局区别:
BFC布局规则:
1._浮动的元素会被父级计算高度(父级元素触发了BFC)
2._非浮动元素不会覆盖浮动元素的位置(非浮动元素触发了BFC)
3._margin不会传递给父级(父级触发BFC)
4._属于同一个BFC的两个相邻元素上下margin会重叠
5._普通文档流布局:浮动的元素是不会被父级计算高度
6._非浮动元素会覆盖浮动元素的位置
7._margin会传递给父级元素
8._两个相邻元素上下的margin会重叠
·___⒅械挠τ
§_柚_argin重叠
§_梢园《亍宄诓扛《(清除浮动的原理是两个div都位于同一个BFC区域之中)
§_允视α嚼覆季
§_梢宰柚乖乇桓《馗哺
2.CSS3中新增的选择器以及属性
这里只是列出来,具体的使用,请查看我的关于css3新增选择器与属性文章
·___粜匝≡衿
td{border:1pxsolid#ccc;padding:5px;margin:auto;}
td>p{text-align:left;}
td>pspan{text-align:center;display:block;}
属性选择器
含义描述
E[att^="val"]
属性att的值以"val"开头的元素
E[att$="val"]
属性att的值以"val"结尾的元素
E[att*="val"]
属性att的值包含"val"字符串的元素
·___峁刮崩嘌≡衿
td{border:1pxsolid#ccc;padding:5px;margin:auto;}
td>p{text-align:left;}
td>pspan{text-align:center;display:block;}
选择器
含义描述
E:root
匹配文档的根元素，对于HTML文档，就是HTML元素
E:nth-child(n)
匹配其父元素的第n个子元素，第一个编号为1
E:nth-last-child(n)
匹配其父元素的倒数第n个子元素，第一个编号为1
E:nth-of-type(n)
与:nth-child()作用类似，但是仅匹配使用同种标签的元素
E:nth-last-of-type(n)
与:nth-last-child()作用类似，但是仅匹配使用同种标签的元素
E:last-child
匹配父元素的最后一个子元素，等同于:nth-last-child(1)
E:first-of-type
匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)
E:last-of-type
匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)
E:only-child
匹配父元素下仅有的一个子元素，等同于:first-child:last-child或:nth-child(1):nth-last-child(1)
E:only-of-type
匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或:nth-of-type(1):nth-last-of-type(1)
E:empty
匹配一个不包含任何子元素的元素，注意，文本节点也被看作子元素
·___ss3新增属性
td{border:1pxsolid#ccc;padding:5px;margin:auto;}
td>p{text-align:left;}
td>pspan{text-align:center;display:block;}
属性
含义描述
兼容
transition
设置过渡效果
transform
变换效果(移动、缩放、转动、拉长或拉伸)
animation
动画效果
box-shadow
阴影效果
FF3.5,Safari4,Chrome3
text-shadow
文本阴影
FF3.5,Opera10,Safari4,Chrome3
border-colors
为边框设置多种颜色
FF3+
boder-image
图片边框
FF3.5,Safari4,Chrome3
text-overflow
文本截断
IE6+,Safari4,Chrome3,Opera10
word-wrap
自动换行
IE6+,FF3.5,Safari4,Chrome3
border-radius
圆角边框
FF3+,Safari4,Chrome3
opacity
不透明度
all
box-sizing
控制盒模型的组成模式
FF3+,Opera10,Safari4,Chrome3
outline
外边框
FF3+,safari4,chrome3,opera10
background-size
不指定背景图片的尺寸
safari4,chrome3,opera10
background-origin
指定背景图片从哪里开始显示
safari4,chrome3,FF3+
background-clip
指定背景图片从什么位置开始裁切
safari4,chrome3
rgba
基于r,g,b三个颜色通道来设置颜色值,通过a来设置透明度
safari4,chrome3,FF3,opera10
3.居中布局
·___骄又
1._行内元素:_ext-align:center
2._块级元素:_argin:0auto
3._绝对定位和移动:_bsolute+transform
4._绝对定位和负边距:_bsolute+margin
5._flex布局:_lex+
justify-content:center
·___怪本又
1._子元素为单行文本:_ine-height:height
2._absolute+transform
3._flex+align-items:center
4._table:_isplay:table-cell;vertical-align:
middle
5._利用position和top和负margin
·___酱怪本又_HAPE*MERGEFORMAT
1.已知元素宽高:绝对定位+margin:auto:
_div{
___idth:200px;
___eight:200px;
___ackground:
green;
___osition:absolute;
___eft:0;
___op:0;
___ottom:0;
___ight:0;
___argin:
auto;
_
2.已知元素宽高:_远ㄎ+负margin
_div{
___idth:200px;
___eight:200px;
___ackground:
green;
___osition:absolute;
___eft:0;
___op:0;
___ottom:0;
___ight:0;
___argin:
auto;
_
3.absolute+transform
_div{
__width:200px;
__height:200px;
__background:
green;
__position:absolute;
__left:50%;_/*定位父级的50%*/
__top:50%;
__transform:translate(-50%,-50%);/*自己的50%*/
_}
4.flex+justify-content
+align-items
.box{
_height:600px;
_display:flex;
_justify-content:center;//子元素水平居中
_align-items:center;__//子元素垂直居中
__/*aa只要三句话就可以实现不定宽高水平垂直居中。*/
__
.box>div{
__ackground:
green;
__idth:200px;
__eight:200px;
_
4.清除浮动有哪些方法,各有什么优缺点
·___褂_lear属性的空元素
在浮动元素后使用一个空元素如
❼ 急求一个关于web方面的毕业设计题目，容易做一点的更好
可以通过修改这个web进销存系统，边修改边学习。免费的随便用。https://download.csdn.net/download/wrwttsy/11110050
❽ 常见的web前端面试题及答案分享
1、 说下行内元素和块级元素的区别?行内块元素的兼容性使用?(IE8 以下)
答：行内元素：会在水平方向排列，不能包含块级元素，设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效。块级元素：各占据一行，垂直方向排列。从新行开始结束接着一个断行。兼容性：display:inline-block;*display:inline;*zoom:1。
2、box-sizing常用的属性有哪些?分别有什么作用?
答：box-sizing: content-box|border-box|inherit。content-box:宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框(元素默认效果)。
border-box:元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
3、Doctype作用?标准模式与兼容模式各有什么区别?
答：告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。
4、html5有哪些新特性?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?
答：HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
(1)绘画 canvas;
(2)用于媒介回放的 video 和 audio 元素;
(3)本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;
(4)sessionStorage 的数据在浏览器关闭后自动删除;
(5)语意化更好的内容元素，比如 article、footer、header、nav、section;
(6)表单控件，calendar、date、time、email、url、search;
(7)新的技术webworker, websocket, Geolocation;
IE8/IE7/IE6支持通过document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还需要添加标签默认的样式。当然也可以直接使用成熟的框架、比如html5shim。
以上就是环球青藤小编关于web前端面试题的相关分享，希望对大家有所帮助，想要了解更多相关内容，请及时关注本平台并进行查看!
❾ 有哪些经典的 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>
❿ 2020年Web前端面试题汇总(一)
今天小编要跟大家分享的文章是关于2020年Web前端面试题汇总。由于内容较多小编分开为大家介绍，今天首先来和小编一起看一看第一部分的内容，希望这些面试题能够对正准备找Web前端相关工作的小伙伴们有所帮助。
1.说几条写JavaScript的基本规范?
1)不要在同一行声明多个变量;
2)请使用===/!==来比较true/false或者数值;
3)使用对象字面量替代newObject这种形式;
4)减少使用全局函数,全局变量;
5)switch语句必须带有default分支;
6)if语句必须使用大括号;
7)for-in循环中的变量;
应该使用var关键字明确限定作用域;
从而避免作用域全局污染。
2.说说平衡二叉树?
平衡二叉搜索树(Self-balancingbinarysearchtree)
又被称为AVL树。
具有以下性质：
1)它是一棵空树或它的左右两个子树
的高度差的绝对值不超过1，
并且左右两个子树都是一棵平衡二叉树。
2)平衡二叉树必定是二叉搜索树，反之则不一定。
3)平衡二叉树的常用实现方法有红黑树、AVL、
替罪羊树、Treap、伸展树等。
最小二叉平衡树的节点的公式如下：
F(n)=F(n-1)+F(n-2)+1备注：1是根节点，
F(n-1)是左子树的节点数量，
F(n-2)是右子树的节点数量。
3.清除浮动和解决垂直外边距重叠的解决方案?
问题描述:
1)父元素没有设置宽高，尺寸由子元素撑起;
子元素一旦浮动，父元素高度会发生塌陷。
2)子元素设置margin-top会作用的父元素的margin-top;
此时会造成垂直外边距重叠。
.clearfix::after,.clearfix::before{
content:''
display:table;
clear:both;
}
4.sessionStorage、localStorage和cookie?
相同点:
都用于浏览器端存储的缓存数据;
不同点:
1)存储内容是否发送到服务器端
当设置了Cookie后，数据会发送到服务器端，
造成一定的宽带浪费;xxxstorage则会将数据保存
到本地，不会造成宽带浪费;
2)数据存储大小不同
Cookie数据不能超过4K，适用于会话标识;
xxxstorage数据存储可以达到5M;
3)数据存储的有效期限不同
cookie只在设置了Cookid过期时间
之前一直有效，即使关闭窗口或者浏览器;
sessionStorage,仅在关闭浏览器之前有效;
localStorage,数据存储永久有效;
4)作用域不同
cookie和localStorage是在同源同窗口中
都是共享的;
sessionStorage不在不同的浏览器窗口
中共享，即使是同一个页面;
5.判断一个单词是否是回文?
回文是指把相同的词汇或句子，
在下文中调换位置或颠倒过来，
产生首尾回环的情景，
叫做回文，也叫回环。
比如cacac，redivider。
letcheckPalindrom=(str)=>{
returnstr===
str.split('').reverse().join('');
}
6.不借助临时变量，进行两个整数的交换?
输入a=3,b=1,
输出a=1,b=3
letswap=(a,b)=>{
b=b-a;
a=a+b;
b=a-b;
return[a,b];
}
7.请写出至少5个html5新增的标签，并说明其语义和应用场景?
section：定义文档中的一个章节;
nav：定义只包含导航链接的章节;
header：定义页面或章节的头部;
它经常包含logo、页面标题和导航性的目录。
footer：定义页面或章节的尾部;
它经常包含版权信息、法律信息链接和反馈建议用的地址。
aside：定义和页面内容关联度较低的内容，
如果被删除，剩下的内容仍然很合理。
8.get和post请求在缓存方面的区别?
get请求类似于查找的过程，用户获取数据，
可以不用每次都与数据库连接，所以可以使用缓存。
post不同，post做的一般是修改和删除的工作，
所以必须与数据库交互，所以不能使用缓存。
因此get请求适合于请求缓存。
9.如何解决异步回调地狱?
promise、generator、async/await
10.图片的懒加载和预加载?
预加载：提前加载图片，
当用户需要查看时可直接
从本地缓存中渲染。
懒加载：懒加载的主要目的
是作为服务器前端的优化，
减少请求数或延迟请求数。
两种技术的本质：
两者的行为是相反的，
一个是提前加载，
一个是迟缓甚至不加载。
懒加载对服务器前端有一定
的缓解压力作用，
预加载则会增加服务器前端压力。
11.bind，apply，call的区别?
通过apply和call改变函数的this指向，
这两个函数的第一个参数都是一样的，
表示要改变指向的那个对象，
第二个参数，apply是数组，
而call则是arg1,arg2...这种形式。
通过bind改变this作用域
会返回一个新的函数，
这个函数不会马上执行。
12.js怎么控制一次加载一张图片，加载完后再加载下一张?
方法一:
varobj=newImage();
obj.src="#/21.jpg";
obj.onload=function(){
document.getElementById("pic")
.innnerHTML="
}