前端面试大全.docx
《前端面试大全.docx》由会员分享,可在线阅读,更多相关《前端面试大全.docx(10页珍藏版)》请在冰豆网上搜索。
前端面试大全
前端面试大全
HTML面试题
1.XHTML和HTML有什么区别
HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言
最主要的不同:
XHTML元素必须被正确地嵌套。
XHTML元素必须被关闭。
标签名必须用小写字母。
XHTML文档必须拥有根元素
2.前端页面有哪三层构成,分别是什么?
作用是什么?
结构层Html表示层CSS行为层js;
3.你做的页面在哪些流览器测试过?
这些浏览器的内核分别是什么?
Ie(Ie内核)火狐(Gecko)谷歌(webkit,Blink)opera(Presto),Safari(wbkit)
4.什么是语义化的HTML?
直观的认识标签对于搜索引擎的抓取有好处,用正确的标签做正确的事情!
html语义化就是让页面的内容结构化,便于对浏览器、搜索引擎解析;
在没有样式CCS情况下也以一种文档格式显示,并且是容易阅读的。
搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重,利于SEO。
使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解。
5.HTML5为什么只需要写!
DOCTYPEHTML?
HTML5不基于SGML,因此不需要对DTD进行引用,但是需要doctype来规范浏览器的行为(让浏览器按照它们应该的方式来运行);而HTML4.01基于SGML,所以需要对DTD进行引用,才能告知浏览器文档所使用的文档类型。
6.Doctype作用?
标准模式与兼容模式各有什么区别?
!
DOCTYPE声明位于位于HTML文档中的第一行,处于html标签之前。
告知浏览器的解析器用什么文档标准解析这个文档。
DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。
在兼容模式中,页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。
7.html5有哪些新特性、移除了那些元素?
如何处理HTML5新标签的浏览器兼容问题?
如何区分HTML和HTML5?
HTML5现在已经不是SGML的子集,主要是关于图像,位置,存储,多任务等功能的增加。
绘画canvas
用于媒介回放的video和audio元素
本地离线存储localStorage长期存储数据,浏览器关闭后数据不丢失;
sessionStorage的数据在浏览器关闭后自动删除
语意化更好的内容元素,比如article、footer、header、nav、section
表单控件,calendar、date、time、email、url、search
新的技术webworker,websockt,Geolocation
移除的元素
纯表现的元素:
basefont,big,center,font,s,strike,tt,u;
对可用性产生负面影响的元素:
frame,frameset,noframes;
支持HTML5新标签:
IE8/IE7/IE6支持通过document.createElement方法产生的标签,
可以利用这一特性让这些浏览器支持HTML5新标签,
浏览器支持新标签后,还需要添加标签默认的样式:
8.请描述一下cookies,sessionStorage和localStorage的区别?
cookie在浏览器和服务器间来回传递。
sessionStorage和localStorage不会
sessionStorage和localStorage的存储空间更大;
sessionStorage和localStorage有更多丰富易用的接口;
sessionStorage和localStorage各自独立的存储空间;
9.如何实现浏览器内多个标签页之间的通信?
调用localstorge、cookies等本地存储方式
CSS面试题
1.简要说一下CSS的元素分类
块级元素:
div,p,h1,form,ul,li;
行内元素:
span>,a,label,input,img,strong,em;
2.CSS隐藏元素的几种方法(至少说出三种)
Opacity:
元素本身依然占据它自己的位置并对网页的布局起作用。
它也将响应用户交互;
Visibility:
与opacity唯一不同的是它不会响应任何用户交互。
此外,元素在读屏软件中也会被隐藏;
Display:
display设为none任何对该元素直接打用户交互操作都不可能生效。
此外,读屏软件也不会读到元素的内容。
这种方式产生的效果就像元素完全不存在;
Position:
不会影响布局,能让元素保持可以操作;
Clip-path:
clip-path属性还没有在IE或者Edge下被完全支持。
如果要在你的clip-path中使用外部的SVG文件,浏览器支持度还要低;
3.CSS清楚浮动的几种方法(至少两种)
使用带clear属性的空元素
使用CSS的overflow属性;
使用CSS的:
after伪元素;
使用邻接元素处理;
4.CSS居中(包括水平居中和垂直居中)
内联元素居中方案
水平居中设置:
1.行内元素
设置text-align:
center;
2.Flex布局
设置display:
flex;justify-content:
center;(灵活运用,支持Chroime,Firefox,IE9+)
垂直居中设置:
1.父元素高度确定的单行文本(内联元素)
设置height=line-height;
2.父元素高度确定的多行文本(内联元素)
a:
插入table(插入方法和水平居中一样),然后设置vertical-align:
middle;
b:
先设置display:
table-cell再设置vertical-align:
middle;
块级元素居中方案
水平居中设置:
1.定宽块状元素
设置左右margin值为auto;
2.不定宽块状元素
a:
在元素外加入table标签(完整的,包括table、tbody、tr、td),该元素写在td内,然后设置margin的值为auto;
b:
给该元素设置displa:
inine方法;
c:
父元素设置position:
relative和left:
50%,子元素设置position:
relative和left:
50%;
垂直居中设置:
使用position:
absolute(fixed),设置left、top、margin-left、margin-top的属性;
利用position:
fixed(absolute)属性,margin:
auto这个必须不要忘记了;
利用display:
table-cell属性使内容垂直居中;
使用css3的新属性transform:
translate(x,y)属性;
使用:
before元素;
5.写出几种IE6BUG的解决方法
双边距BUGfloat引起的使用display
3像素问题使用float引起的使用dislpay:
inline-3px
超链接hover点击后失效使用正确的书写顺序linkvisitedhoveractive
Iez-index问题给父级添加position:
relative
Png透明使用js代码改
Min-height最小高度!
Important解决’
select在ie6下遮盖使用iframe嵌套
为什么没有办法定义1px左右的宽度容器(IE6默认的行高造成的,使用over:
hidden,zoom:
0.08line-height:
1px)
6.对于SASS或是Less的了解程度?
喜欢那个?
语法介绍
7.Bootstrap了解程度
特点,排版,插件的使用;
8.页面导入样式时,使用link和@import有什么区别?
link属于XHTML标签,除了加载CSS外,还能用于定义RSS,定义rel连接属性等作用;而@import是CSS提供的,只能用于加载CSS;
页面被加载的时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载;
import是CSS2.1提出的,只在IE5以上才能被识别,而link是XHTML标签,无兼容问题;
9.介绍一下CSS的盒子模型?
有两种,IE盒子模型、标准W3C盒子模型;IE的content部分包含了border和pading;
盒模型:
内容(content)、填充(padding)、边界(margin)、边框(border).
10.CSS选择符有哪些?
哪些属性可以继承?
优先级算法如何计算?
CSS3新增伪类有那些?
id选择器(#myid)
类选择器(.myclassname)
标签选择器(div,h1,p)
相邻选择器(h1+p)
子选择器(ul>li)
后代选择器(lia)
通配符选择器(*)
属性选择器(a[rel="external"])
伪类选择器(a:
hover,li:
nth-child)
可继承的样式:
font-sizefont-familycolor,ULLIDLDDDT;
不可继承的样式:
borderpaddingmarginwidthheight;
优先级就近原则,同权重情况下样式定义最近者为准;
优先级为:
!
important> id>class>tagimportant比内联优先级高
11.CSS3有哪些新特性?
CSS3实现圆角(border-radius:
8px),阴影(box-shadow:
10px),
对文字加特效(text-shadow、),线性渐变(gradient),旋转(transform)
transform:
rotate(9deg)scale(0.85,0.90)translate(0px,-30px)skew(-9deg,0deg);//旋转,缩放,定位,倾斜,增加了更多的CSS选择器 多背景rgba
JavaScript面试题
1.javascript的typeof返回哪些数据类型
Objectnumberfunctionbooleanunderfind;
2.例举3种强制类型转换和2种隐式类型转换?
强制(parseInt,parseFloat,number)隐式(==–===);
3.数组方法pop()push()unshift()shift()
Push()尾部添加pop()尾部删除
Unshift()头部添加shift()头部删除
4.ajax请求的时候get和post方式的区别?
一个在url后面一个放在虚拟载体里面
有大小限制
安全问题
应用不同一个是论坛等只需要请求的,一个是类似修改密码的;
5.call和apply的区别
Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)
6.ajax请求时,如何解释json数据
使用evalparse,鉴于安全性考虑使用parse更靠谱;
7.事件委托是什么
让利用事件冒泡的原理,让自己的所触发的事件,让他的父元素代替执行!
8.闭包是什么,有什么特性,对页面有什么影响?
简要介绍你理解的闭包
闭包就是能够读取其他函数内部变量的函数。
9.添加删除替换插入到某个接点的方法
obj.appendChidl()
obj.innersetBefore
obj.replaceChild
obj.removeChild
10.说一下什么是javascript的同源策略?
一段脚本只能读取来自于同一来源的窗口和文档的属性,这里的同一来源指的是主机名、协议和端口号的组合
11.编写一个b继承a的方法;
functionA(name){ this.name=name; this.sayHello=function(){alert(this.name+”sayHello!
”);};}functionB(name,id){ this.temp=A; this.temp(name); //相当于newA(); deletethis.temp; this.id=id; this.checkId=function(ID){alert(this.id==ID)};}
12.如何阻止事件冒泡和默认事件
functionstopBubble(e){ if(e&&e.stopPropagation) e.stopPropagation() else window.event.cancelBubble=true}returnfalse
13.下面程序执行后弹出什么样的结果?
functionfn(){ this.a=0; this.b=function(){ alert(this.a) }}fn.prototype={ b:
function(){ this.a=20; alert(this.a); }, c:
function(){ this.a=30; alert(this.a); }}varmyfn=newfn();myfn.b();myfn.c();
14.谈谈This对象的理解。
this是js的一个关键字,随着函数使用场合不同,this的值会发生变化。
但是有一个总原则,那就是this指的是调用函数的那个对象。
this一般情况下:
是全局对象Global。
作为方法调用,那么this就是指这个对象
15.下面程序的结果
functionfun(n,o){ console.log(o) return{ fun:
function(m){ returnfun(m,n); } };}vara=fun(0); a.fun(1); a.fun(2); a.fun(3);varb=fun(0).fun(1).fun(2).fun(3);varc=fun(0).fun(1); c.fun(2); c.fun(3);
//答案:
//a:
undefined,0,0,0
//b:
undefined,0,1,2
//c:
undefined,0,1,1
16.下面程序的输出结果
varname='World!
';(function(){ if(typeofname==='undefined'){ varname='Jack'; console.log('Goodbye'+name); }else{ console.log('Hello'+name); }})();
17.了解Node么?
Node的使用场景都有哪些?
高并发、聊天、实时消息推送
18.介绍下你最常用的一款框架
jquery,rn,angular等;
19.对于前端自动化构建工具有了解吗?
简单介绍一下
Gulp,Grunt等;
20.介绍一下你了解的后端语言以及掌握程度
其它
1.对Node的优点和缺点提出了自己的看法?
(优点)
因为Node是基于事件驱动和无阻塞的,所以非常适合处理并发请求,因此构建在Node上的代理服务器相比其他技术实现(如Ruby)的服务器表现要好得多。
此外,与Node代理服务器交互的客户端代码是由javascript语言编写的,因此客户端和服务器端都用同一种语言编写,这是非常美妙的事情。
(缺点)
Node是一个相对新的开源项目,所以不太稳定,它总是一直在变,而且缺少足够多的第三方库支持。
看起来,就像是Ruby/Rails当年的样子。
2.你有哪些性能优化的方法?
(1)减少http请求次数:
CSSSprites,JS、CSS源码压缩、图片大小控制合 适;网页Gzip,CDN托管,data缓存,图片服务器。
(2)前端模板JS+数据,减少由于HTML标签导致的带宽浪费,前端用变量 保存AJAX请求结果,每次操作本地变量,不用请求,减少请求次数
(3)用innerHTML代替DOM操作,减少DOM操作次数,优化javascript性能 。
(4)当需要设置的样式很多时设置className而不是直接操作style。
(5)少用全局变量、缓存DOM节点查找的结果。
减少IO读取操作。
(6)避免使用CSSExpression(css表达式)又称Dynamicproperties(动态属 性)。
(7)图片预加载,将样式表放在顶部,将脚本放在底部 加上时间戳。
(8)避免在页面的主体布局中使用table,table要等其中的内容完全下载之后才会显示出来,显示div+css布局慢。
对普通的网站有一个统一的思路,就是尽量向前端优化、减少数据库操作、减少磁盘IO。
向前端优化指的是,在不影响功能和体验的情况下,能在浏览器执行的不要在服务端执行,能在缓存服务器上直接返回的不要到应用服务器,程序能直接取得的结果不要到外部取得,本机内能取得的数据不要到远程取,内存能取到的不要到磁盘取,缓存中有的不要去数据库查询。
减少数据库操作指减少更新次数、缓存结果减少查询次数、将数据库执行的操作尽可能的让你的