① 一份超全的Web前端工程师面试题!收藏~
今天小编为大家准备了一份超全的Web前端工程师面试题,准备换工作参加Web前端工程师面试的小伙伴们快来和小编一起看一看这些题目吧，希望能够对你的面试有所帮助!
一、HTML
§Doctype作用?严格模式与混杂模式如何区分?它们有何意义?
§HTML5为什么只需要写?
§行内元素有哪些?块级元素有哪些?空(void)元素有那些?
§页面导入样式时，使用link和@import有什么区别?
§介绍一下你对浏览器内核的理解?
§常见的浏览器内核有哪些?
§html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分HTML和HTML5?
§简述一下你对HTML语义化的理解?
§HTML5的离线储存怎么使用，工作原理能不能解释一下?
§浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢?
§请描述一下cookies，sessionStorage和localStorage的区别?
§iframe有那些缺点?
§Label的作用是什么?是怎么用的?(加for或包裹)
§HTML5的form如何关闭自动完成功能?
§如何实现浏览器内多个标签页之间的通信?(阿里)
§webSocket如何兼容低浏览器?(阿里)
§页面可见性(PageVisibility)API可以有哪些用途?
§如何在页面上实现一个圆形的可点击区域?
§实现不使用border画出1px高的线，在不同浏览器的Quirksmode和CSSCompat模式下都能保持同一效果。
§网页验证码是干嘛的，是为了解决什么安全问题?
§tite与h1的区别、b与strong的区别、i与em的区别?
二、CSS
§介绍一下标准的CSS的盒子模型?与低版本IE的盒子模型有什么不同的?
§CSS选择符有哪些?哪些属性可以继承?
§CSS优先级算法如何计算?
§CSS3新增伪类有那些?
§如何居中div?如何居中一个浮动元素?如何让绝对定位的div居中?
§display有哪些值?说明他们的作用。
§position的值relative和absolute定位原点是?
§CSS3有哪些新特性?
§请解释一下CSS3的Flexbox(弹性盒布局模型),以及适用场景?
§用纯CSS创建一个三角形的原理是什么?
§一个满屏品字布局如何设计?
§常见兼容性问题?
§li与li之间有看不见的空白间隔是什么原因引起的?有什么解决办法?
§经常遇到的浏览器的兼容性有哪些?原因，解决方法是什么，常用hack的技巧?
§为什么要初始化CSS样式。
§absolute的containingblock计算方式跟正常流有什么不同?
§CSS里的visibility属性有个collapse属性值是干嘛用的?在不同浏览器下以后什么区别?
§position跟display、margincollapse、overflow、float这些特性相互叠加后会怎么样?
§对BFC规范(块级格式化上下文：blockformattingcontext)的理解?
§CSS权重优先级是如何计算的?
§请解释一下为什么会出现浮动和什么时候需要清除浮动?清除浮动的方式
§移动端的布局用过媒体查询吗?
§使用CSS预处理器吗?喜欢那个?
§CSS优化、提高性能的方法有哪些?
§浏览器是怎样解析CSS选择器的?
§在网页中的应该使用奇数还是偶数的字体?为什么呢?
§margin和padding分别适合什么场景使用?
§抽离样式模块怎么写，说出思路，有无实践经验?[阿里航旅的面试题]
§元素竖向的百分比设定是相对于容器的高度吗?
§全屏滚动的原理是什么?用到了CSS的那些属性?
§什么是响应式设计?响应式设计的基本原理是什么?如何兼容低版本的IE?
§视差滚动效果，如何给每页做不同的动画?(回到顶部，向下滑动要再次出现，和只出现一次分别怎么做?)
§::before和:after中双冒号和单冒号有什么区别?解释一下这2个伪元素的作用。
§如何修改chrome记住密码后自动填充表单的黄色背景?
§你对line-height是如何理解的?
§设置元素浮动后，该元素的display值是多少?(自动变成display:block)
§怎么让Chrome支持小于12px的文字?
§让页面里的字体变清晰，变细用CSS怎么做?(-webkit-font-smoothing:antialiased;)
§font-style属性可以让它赋值为“oblique”oblique是什么意思?
§position:fixed;在android下无效怎么处理?
§如果需要手动写动画，你认为最小时间间隔是多久，为什么?(阿里)
§display:inline-block什么时候会显示间隙?(携程)
§overflow:scroll时不能平滑滚动的问题怎么处理?
§有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度。
§png、jpg、gif这些图片格式解释一下，分别什么时候用。有没有了解过webp?
§什么是Cookie隔离?(或者说：请求资源的时候不要让它带cookie怎么做)
§style标签写在body后与body前有什么区别?
三、JavaScript
§介绍JavaScript的基本数据类型。
§说说写JavaScript的基本规范?
§JavaScript原型，原型链?有什么特点?
§JavaScript有几种类型的值?(堆：原始数据类型和栈：引用数据类型)，你能画一下他们的内存图吗?
§Javascript如何实现继承?
§Javascript创建对象的几种方式?
§Javascript作用链域?
§谈谈This对象的理解。
§eval是做什么的?
§什么是window对象?什么是document对象?
§null，undefined的区别?
§写一个通用的事件侦听器函数(机试题)。
§[“1”,“2”,“3”].map(parseInt)答案是多少?
§关于事件，IE与火狐的事件机制有什么区别?如何阻止冒泡?
§什么是闭包(closure)，为什么要用它?
§javascript代码中的”usestrict”;是什么意思?使用它区别是什么?
§如何判断一个对象是否属于某个类?
§new操作符具体干了什么呢?
§用原生JavaScript的实现过什么功能吗?
§Javascript中，有一个函数，执行时对象查找时，永远不会去查找原型，这个函数是?
§对JSON的了解?
§[].forEach.call($$("*"),function(a){a.style.outline="1pxsolid
#"+(~~(Math.random()*(1<<24))).toString(16)})能解释一下这段代码的意思吗?
§js延迟加载的方式有哪些?
§Ajax是什么?如何创建一个Ajax?
§同步和异步的区别?
§如何解决跨域问题?
§页面编码和被请求的资源编码如果不一致如何处理?
§模块化开发怎么做?
§AMD(Moles/Asynchronous-Definition)、CMD(CommonMole
Definition)规范区别?
§requireJS的核心原理是什么?(如何动态加载的?如何避免多次加载的?如何缓存的?)
§让你自己设计实现一个requireJS，你会怎么做?
§谈一谈你对ECMAScript6的了解?
§ECMAScript6怎么写class么，为什么会出现class这种东西?
§异步加载的方式有哪些?
§documen.write和innerHTML的区别?
§DOM操作——怎样添加、移除、移动、复制、创建和查找节点?
§.call()和.apply()的含义和区别?
§数组和对象有哪些原生方法，列举一下?
§JS怎么实现一个类。怎么实例化这个类
§JavaScript中的作用域与变量声明提升?
§如何编写高性能的Javascript?
§那些操作会造成内存泄漏?
§JQuery的源码看过吗?能不能简单概况一下它的实现原理?
§jQuery.fn的init方法返回的this指的是什么对象?为什么要返回this?
§jquery中如何将数组转化为json字符串，然后再转化回来?
§jQuery的属性拷贝(extend)的实现原理是什么，如何实现深拷贝?
§jquery.extend与jquery.fn.extend的区别?
§jQuery的队列是如何实现的?队列可以用在哪些地方?
§谈一下Jquery中的bind(),live(),delegate(),on()的区别?
§JQuery一个对象可以同时绑定多个事件，这是如何实现的?
§是否知道自定义事件。jQuery里的fire函数是什么意思，什么时候用?
§jQuery是通过哪个方法和Sizzle选择器结合的?(jQuery.fn.find()进入Sizzle)
§针对jQuery性能的优化方法?
§Jquery与jQueryUI有啥区别?
§JQuery的源码看过吗?能不能简单说一下它的实现原理?
§jquery中如何将数组转化为json字符串，然后再转化回来?
§jQuery和Zepto的区别?各自的使用场景?
§针对jQuery的优化方法?
§Zepto的点透问题如何解决?
§jQueryUI如何自定义组件?
§需求：实现一个页面操作不会整页刷新的网站，并且能在浏览器前进、后退时正确响应。给出你的技术实现方案?
§如何判断当前脚本运行在浏览器还是node环境中?(阿里)
§移动端最小触控区域是多大?
§jQuery的slideUp动画，如果目标元素是被外部事件驱动,当鼠标快速地连续触发外部元素事件,
动画会滞后的反复执行，该如何处理呢?
§把Script标签放在页面的最底部的body封闭之前和封闭之后有什么区别?浏览器会如何解析它们?
§移动端的点击事件的有延迟，时间是多久，为什么会有?怎么解决这个延时?(click有300ms
延迟,为了实现safari的双击事件的设计，浏览器要知道你是不是要双击操作。)
§知道各种JS框架(Angular,Backbone,Ember,React,Meteor,Knockout)么?
能讲出他们各自的优点和缺点么?
§Underscore对哪些JS原生对象进行了扩展以及提供了哪些好用的函数方法?
§解释JavaScript中的作用域与变量声明提升?
§那些操作会造成内存泄漏?
§JQuery一个对象可以同时绑定多个事件，这是如何实现的?
§Node.js的适用场景?
§(如果会用node)知道route,middleware,cluster,nodemon,pm2,server-side
rendering么?
§解释一下Backbone的MVC实现方式?
§什么是“前端路由”?什么时候适合使用“前端路由”?“前端路由”有哪些优点和缺点?
§知道什么是webkit么?知道怎么用浏览器的各种工具来调试和debug代码么?
§如何测试前端代码么?知道BDD,TDD,UnitTest么?知道怎么测试你的前端工程么(mocha,sinon,jasmin,
qUnit..)?
§前端templating(Mustache,underscore,handlebars)是干嘛的,怎么用?
§简述一下Handlebars的基本用法?
§简述一下Handlerbars的对模板的基本处理流程，如何编译的?如何缓存的?
§用js实现千位分隔符?(来源：前端农民工，提示：正则+replace)
§检测浏览器版本版本有哪些方式?
§我们给一个dom同时绑定两个点击事件，一个用捕获，一个用冒泡，你来说下会执行几次事件，然后会先执行冒泡还是捕获。
四、其他问题
§原来公司工作流程是怎么样的，如何与其他人协作的?如何夸部门合作的?
§你遇到过比较难的技术问题是?你是如何解决的?
§设计模式知道什么是singleton,factory,strategy,decrator么?
§常使用的库有哪些?常用的前端开发工具?开发过什么应用或组件?
§页面重构怎么操作?
§列举IE与其他浏览器不一样的特性?
§99%的网站都需要被重构是那本书上写的?
§什么叫优雅降级和渐进增强?
§是否了解公钥加密和私钥加密。
§WEB应用从服务器主动推送Data到客户端有那些方式?
§对Node的优点和缺点提出了自己的看法?
§你有用过哪些前端性能优化的方法?
§http状态码有那些?分别代表是什么意思?
§一个页面从输入URL到页面加载显示完成，这个过程中都发生了什么?(流程说的越详细越好)
§部分地区用户反应网站很卡，请问有哪些可能性的原因，以及解决方法?
§从打开app到刷新出内容，整个过程中都发生了什么，如果感觉慢，怎么定位问题，怎么解决?
§除了前端以外还了解什么其它技术么?你最最厉害的技能是什么?
§你用的得心应手用的熟练地编辑器&开发环境是什么样子?
§对前端界面工程师这个职位是怎么样理解的?它的前景会怎么样?
§你怎么看待WebApp、hybridApp、NativeApp?
§你移动端前端开发的理解?(和Web前端开发的主要区别是什么?)
§你对加班的看法?
§平时如何管理你的项目?
§说说最近最流行的一些东西吧?常去哪些网站?
§如何设计突发大规模并发架构?
§说说最近最流行的一些东西吧?常去哪些网站?
§是否了解开源的工具bower、npm、yeoman、grunt、gulp，一个npm的包里的package.json
具备的必要的字段都有哪些?(名称、版本号，依赖)
§每个模块的代码结构都应该比较简单，且每个模块之间的关系也应该非常清晰，随着功能和迭代次数越来越多，你会如何去保持这个状态的?
§Git知道branch,diff,merge么?
§如何设计突发大规模并发架构?
§当团队人手不足，把功能代码写完已经需要加班的情况下，你会做前端代码的测试吗?
§说说最近最流行的一些东西吧?平时常去哪些网站?
§知道什么是SEO并且怎么优化么?知道各种metadata的含义么?
§移动端(AndroidIOS)怎么做好用户体验?
§简单描述一下你做过的移动APP项目研发流程?
§你在现在的团队处于什么样的角色，起到了什么明显的作用?
§你认为怎样才是全端工程师(FullStackdeveloper)?
§介绍一个你最得意的作品吧?
§你有自己的技术博客吗，用了哪些技术?
§对前端安全有什么看法?
§是否了解Web注入攻击，说下原理，最常见的两种攻击(XSS和CSRF)了解到什么程度?
§项目中遇到国哪些印象深刻的技术难题，具体是什么问题，怎么解决?。
§最近在学什么东西?
§你的优点是什么?缺点是什么?
§如何管理前端团队?
§最近在学什么?能谈谈你未来3，5年给自己的规划吗?
§
以上就是小编今天为大家分享的关于web前端工程师面试题的文章，希望本篇文章能够对正准备学习编程技术的小伙伴们有所帮助。想要了解更多web前端相关知识记得关注北大青鸟web前端培训官网哦!最后希望小伙伴们能够好好准备这些问题的答案，在面试中取得好成绩，成为一名优秀的web前端工程师!
§
② 参加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前端经典面试题
为大家带来一些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前端工程师初级阶段需要掌握的内容
今天小编给大家整理出来了Web前端工程师初级阶段需要掌握的内容，很全面，希望大家好好阅读，看看自己掌握的知识点和文章里面写的还相差多少。下面来和小编一起看一看吧！
一、什么是初级Web前端工程师?
按照我的想法，我把前端工程师分为了入门、初级、中级、高级这四个级别，
入门级别指的是了解什么是前端(前端到底是什么其实很多人还是不清楚的)，了解基本的html、css和javascript语法(这些语方面的东西网上随便搜一下就有很多很多，基本的语法是整个技术体系最重要的东西了，领先的
Web技术教程)，可以根据设计师的设计图在不考虑兼容性的情况下把页面做出来，了解过一些框架的使用(例如烂大街但是依然牛逼的jQuery、zepto、
bootstrap等等)。
在经历过入门的阶段，已经了解了前端要做什么，并且把基本的语法学习过了可以独立做一些简单的页面了，那么就要继续学习达到初级前端工程师的水平，对于初级的前端工程师需要了解的就特别多了，需要对整个前端有一个清晰的认识，并且熟练使用各种技术，我感觉在校的学生达到初级水平就可以通过bat的校招笔试
面试了。
初级前端工程师：首先要知道的就是如何处理各种浏览器的兼容处理(比如说在IE浏览器中的createElement有什么不同等等内容)，现在基本上每个公司在招聘的时候都会要求熟练html5,
css3,javascript，这个熟练的意思就是信手拈来。
在下面会说初级前端工程师应该具体的学习哪些知识，然后就是要了解各种css的预处理器和后处理器，还有会使用常见前端的MV*框架(angularjs,
backbone，reactjs等等)并知道这些框架的原理，另外就是要熟练使用nodejs，要会使用基于node的各种前端构建工具
(grunt，gulp等等)，熟练使用github或gitlab，对模块化、组件化、工程化、语义化有一个比较深入的了解，最后要知道如何开发移动端
的页面，如何去优化一个页面的性能。
二、初级Web前端工程师的技术体系
(一)HTML部分
首先是要掌握一些常用标签的使用和他们的各个属性，这些常用的标签我总结了一下有以下这些：
html：页面的根元素。head：页面的头部标签，是所有头部元素的容器。body：页面的主体标签，页面展现的内容就放置在这里面。title：页面的标题。meta：位于文档的头部，提供页面的元信息，包括关键字、描述等等。link：定义文档与外部资源的关系，最常用的用途就是引入样式表。script：脚本标签，可以把js脚本代码放置在这个标签内，也可以使用这个标签的src属性引入一个外部标签。style：样式标签，可以把css代码写在这个标签中。a：超链接，href属性代表要链接到的地方，target属性代表打开方式。img：图像标签，src属性表示图片的位置。form：表单元素，它内部的input、select、textarea等标签都是比较重要的。div：定义文档中的分区或节，可以使用div来进行页面的布局等操作。另外还有ul、li、p、button、iframe、p、table等标签也很常用，nav、section、article、header、aside、footer等语义化标签也需要了解一下。
除了要了解上面这一些标签之外，还需要对一些新的HTML5的API有一定的了解：
·audio、video标签。
·Canvas：定义图形，比如图表和其他图像。
·input标签的accept属性，email、phone、url等类型。
·getElementByClassName根据class名来获取一个元素结点。
·Multiplefileselection多文件选择属性。
·html的import、template
·process标签，WebGL等内容。
还有一些要知道的知识点：
1.
doctype的作用。2.unicode、utf8等编码的原理和区别。3.如何进行页面性能优化。4.png、jpg、Webp、gif等图片格式的不同的优势。5.HTML行内元素与块级元素的区别。6.移动Web端开发常用head标签。7.Web语义化。8.浏览器中的缓存原理
(二)CSS部分
关于css这一块，我的看法就是网上下载一个chm格式的css的参考手册，然后根据手册里面写的一个个的都敲一下。
css大体分为下面这几块知识点：
①定位布局
1.position属性的7个值(static|relative|absolute|fixed|center|page|
sticky)分别有什么作用和不同?
2.实现品字形布局或者是三栏布局(左右宽度固定，中间适应屏幕)。
3.浮动与清除浮动的方法，flex布局，grid布局。
②盒子模型
1.margin、padding、border这三个属性。
2.伸缩盒相关内容。
3.Multi-columnLayoutMole多列布局模型。
③文本字体
1.强制换行与不换行，清除空白。
2.文本对齐、大小(如何设置chrome小于12px的字体)、缩进、转换。
3.单位(em、rem、px等)，颜色(rgb、rgba，hls)。
④变换、过渡和动画
1.transform的各种取值的作用与兼容性。
2.transition过渡的动画类型，贝塞尔曲线的原理。
3.animation动画的各种设置，@keyframes规则。
4.浏览器的重绘与重排。
⑤选择器
1.选择器的分类，权值和优先级。
2.有哪些属性可以被继承，哪些属性没法继承。
3.伪类和伪元素分别是什么，有什么作用。
上面这些都是基础的东西，除了这些基础的内容之外需要了解Less、Sass、stylus等css预处理器，这将会大幅度提升你的css开发效率，也需要了解一下Autoprefixer、PostCSS等css后处理器。
(三)JavaScript部分
在这里就不说js的基础知识了，我把js按照语法的层次和使用的层次分为了两大块。
按照语法的层次来说：
首先是javascript的面向对象方面的内容：在javascript中实现封装、继承和多态。
①封装：在js中可以通过闭包、作用域和作用域链来实现封装，ES6的const、let的作用。②
继承：基于原型链的继承、基于构造函数的继承、组合式继承、寄生式继承等，外加ES6的class关键字，prototype和__proto__。③
多态：在javascript中多态是使用arguments来实现的，关于arguments会引申出来很多内容：1.arguments的caller、callee等方法的作用。2.方法的apply和call的作用和不同。3.使用Array.prototype.slice.call来把一个数组对象转化为数组。4.array的各种方法，如shift、splice、push、filter、map、rece、forEach等等。
然后是Js的设计模式，比如说那三种工厂模式啊，建造者模式啊等等。
最后是在不同情况下的this分别都代表什么。
按照使用的层次来说：
首先最主要的就是ajax，ajax的原理，ajax跨域的方法：jsonp、使用iframe的location.hash、postMessageAPI、Websocket、服务器代理等等。
然后是tcp协议、udt协议以及http协议的协议头、状态码等内容。浏览器的缓存，客户端存储方面的内容：localstorage、sessionstorage、indexDB、cookie等等。
最后是一些新的js的API，例如文件读取(fileReader)、fetch、Promise、Web
Sockets等等内容，可以去caniuse上面看一下有哪些新的东西。
上面我所说的这些只是一些比较笼统的概念，把前端html、css和javascript所需要掌握的部分内容列举了一下，在前端领域还有很多需要我们知道的知识，这需要大家在学习工作的过程中去自己总结。
以上就是小编今天为大家分享的关于Web前端工程师初级阶段需要掌握的内容的文章，希望本篇文章能够对正在从事Web前端工作的小伙伴们有所帮助，想要了解更多Web前端相关知识记得关注北大青鸟Web培训官网。最后祝愿小伙伴们工作顺利！
⑤ web前端面试经常问到的面试题有哪些
Web前端经常被问到的面试题及答案
一、HTML+CSS
1.对WEB标准以及W3C的理解与认识
标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外
链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维
护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性;
2.xhtml和html有什么区别
HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言
最主要的不同：
XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素。
3.Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?
用于声明文档使用那种规范(html/Xhtml)一般为 严格 过度 基于框架的html文档
加入XMl声明可触发，解析方式更改为IE5.5 拥有IE5.5的bug
4.行内元素有哪些?块级元素有哪些?CSS的盒模型?
块级元素：div p h1 h2 h3 h4 form ul
行内元素: a b br i span input select
Css盒模型:内容，border ,margin，padding
5.CSS引入的方式有哪些? link和@import的区别是?
内联 内嵌 外链 导入
区别 ：同时加载
前者无兼容性，后者CSS2.1以下浏览器不支持
Link 支持使用javascript改变样式，后者不可
6.CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高?
标签选择符 类选择符 id选择符
继承不如指定 Id>class>标签选择
后者优先级高
7.前端页面有哪三层构成，分别是什么?作用是什么?
结构层 Html 表示层 CSS 行为层 js
8.css的基本语句构成是?
选择器{属性1:值1;属性2:值2;……}
9.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?
Ie(Ie内核) 火狐(Gecko) 谷歌(webkit) opear(Presto)
二、Javascript
1.javascript的typeof返回哪些数据类型
Object number function boolean underfind
2.例举3种强制类型转换和2种隐式类型转换?
强制(parseInt,parseFloat,number)
隐式(== – ===)
3.split() join() 的区别
前者是切割成数组的形式，后者是将数组转换成字符串
4.数组方法pop() push() unshift() shift()
Push()尾部添加 pop()尾部删除
Unshift()头部添加 shift()头部删除
5.事件绑定和普通事件有什么区别
6.IE和DOM事件流的区别
1.执行顺序不一样、
2.参数不一样
3.事件加不加on
4.this指向问题
7.IE和标准下有哪些兼容性的写法
Var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
Var target = ev.srcElement||ev.target
8.ajax请求的时候get 和post方式的区别
一个在url后面 一个放在虚拟载体里面
有大小限制
安全问题
应用不同 一个是论坛等只需要请求的，一个是类似修改密码的
9.call和apply的区别
Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)
10.ajax请求时，如何解释json数据
使用eval parse 鉴于安全性考虑 使用parse更靠谱
11.b继承a的方法
12.写一个获取非行间样式的函数
function getStyle(obj,attr,value)
{
if(!value)
{
if(obj.currentStyle)
{
return obj.currentStyle(attr)
}
else
{
obj.getComputedStyle(attr,false)
}
}
else
{
obj.style[attr]=value
}
}
⑥ 前端开发工程师面试题目大全
HTML
Doctype作用？严格模式与混杂模式如何区分？它们有何意义?
HTML5为什么只需要写？
行内元素有哪些？块级元素有哪些？空(void)元素有那些？
页面导入样式时，使用link和@import有什么区别？
介绍一下你对浏览器内核的理解？
常见的浏览器内核有哪些？
html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？
简述一下你对HTML语义化的理解？
HTML5的离线储存怎么使用，工作原理能不能解释一下？
浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？
请描述一下cookies，sessionStorage和localStorage的区别？
iframe有那些缺点？
Label的作用是什么？是怎么用的？（加for或包裹）
HTML5的form如何关闭自动完成功能？
如何实现浏览器内多个标签页之间的通信?(阿里)
webSocket如何兼容低浏览器？(阿里)
页面可见性（PageVisibilityAPI）可以有哪些用途？
如何在页面上实现一个圆形的可点击区域？
实现不使用border画出1px高的线，在不同浏览器的Quirksmode和CSSCompat模式下都能保持同一效果。
网页验证码是干嘛的，是为了解决什么安全问题？
title与h1的区别、b与strong的区别、i与em的区别？
CSS
介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？
CSS选择符有哪些？哪些属性可以继承？
CSS优先级算法如何计算？
CSS3新增伪类有那些？
如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？
display有哪些值？说明他们的作用。
position的值relative和absolute定位原点是？
CSS3有哪些新特性？
请解释一下CSS3的Flexbox（弹性盒布局模型）,以及适用场景？
用纯CSS创建一个三角形的原理是什么？
css多列等高如何实现？
一个满屏品字布局如何设计?
经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧？
li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？
为什么要初始化CSS样式?
absolute的containingblock计算方式跟正常流有什么不同？
CSS里的visibility属性有个collapse属性值是干嘛用的？在不同浏览器下以后什么区别？
position跟display、margincollapse、overflow、float这些特性相互叠加后会怎么样？
对BFC规范(块级格式化上下文：blockformattingcontext)的理解？
CSS权重优先级是如何计算的？
请解释一下为什么需要清除浮动？清除浮动的方式
zoom:1的清楚浮动原理?
移动端的布局用过媒体查询吗？
使用CSS预处理器吗？喜欢那个？
CSS优化、提高性能的方法有哪些？
浏览器是怎样解析CSS选择器的？
在网页中的应该使用奇数还是偶数的字体？为什么呢？
margin和padding分别适合什么场景使用？
抽离样式模块怎么写，说出思路，有无实践经验？[阿里航旅的面试题]
元素竖向的百分比设定是相对于容器的高度吗？
全屏滚动的原理是什么？用到了CSS的那些属性？
什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？
视差滚动效果，如何给每页做不同的动画？（回到顶部，向下滑动要再次出现，和只出现一次分别怎么做？）
::before和:after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用。
如何修改chrome记住密码后自动填充表单的黄色背景？
你对line-height是如何理解的？
设置元素浮动后，该元素的display值是多少？（自动变成display:block）
怎么让Chrome支持小于12px的文字？
让页面里的字体变清晰，变细用CSS怎么做？（-webkit-font-smoothing:antialiased;）
font-style属性可以让它赋值为“oblique”oblique是什么意思？
position:fixed;在android下无效怎么处理？
如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里）
display:inline-block什么时候会显示间隙？(携程)
overflow:scroll时不能平滑滚动的问题怎么处理？
有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度。
png、jpg、gif这些图片格式解释一下，分别什么时候用。有没有了解过webp？
什么是Cookie隔离？（或者说：请求资源的时候不要让它带cookie怎么做）
style标签写在body后与body前有什么区别？
什么是CSS预处理器/后处理器？
JavaScript
介绍JavaScript的基本数据类型。
说说写JavaScript的基本规范？
JavaScript原型，原型链?有什么特点？
JavaScript有几种类型的值？（堆：原始数据类型和栈：引用数据类型），你能画一下他们的内存图吗？
Javascript如何实现继承？
Javascript创建对象的几种方式？
Javascript作用链域?
谈谈this对象的理解。
eval是做什么的？
什么是window对象?什么是document对象?
null，undefined的区别？
写一个通用的事件侦听器函数(机试题)。
["1","2","3"].map(parseInt)答案是多少？
关于事件，IE与火狐的事件机制有什么区别？如何阻止冒泡？
什么是闭包（closure），为什么要用它？
javascript代码中的"usestrict";是什么意思?使用它区别是什么？
如何判断一个对象是否属于某个类？
new操作符具体干了什么呢?
用原生JavaScript的实现过什么功能吗？
Javascript中，有一个函数，执行时对象查找时，永远不会去查找原型，这个函数是？
对JSON的了解？
[].forEach.call($$("*"),function(a){a.style.outline="1pxsolid#"+(~~(Math.random()*(1<<24))).toString(16)})能解释一下这段代码的意思吗？
js延迟加载的方式有哪些？
Ajax是什么?如何创建一个Ajax？
同步和异步的区别?
如何解决跨域问题?
页面编码和被请求的资源编码如果不一致如何处理？
模块化开发怎么做？
AMD（Moles/Asynchronous-Definition）、CMD（CommonMoleDefinition）规范区别？
requireJS的核心原理是什么？（如何动态加载的？如何避免多次加载的？如何缓存的？）
JS模块加载器的轮子怎么造，也就是如何实现一个模块加载器？
谈一谈你对ECMAScript6的了解？
ECMAScript6怎么写class，为什么会出现class这种东西?
异步加载的方式有哪些？
documen.write和innerHTML的区别?
DOM操作——怎样添加、移除、移动、复制、创建和查找节点?
.call()和.apply()的作用和区别？
数组和对象有哪些原生方法，列举一下？
JS怎么实现一个类。怎么实例化这个类
JavaScript中的作用域与变量声明提升？
如何编写高性能的Javascript？
那些操作会造成内存泄漏？
JQuery的源码看过吗？能不能简单概况一下它的实现原理？
jQuery.fn的init方法返回的this指的是什么对象？为什么要返回this？
jquery中如何将数组转化为json字符串，然后再转化回来？
jQuery的属性拷贝(extend)的实现原理是什么，如何实现深拷贝？
jquery.extend与jquery.fn.extend的区别？
jQuery的队列是如何实现的？队列可以用在哪些地方？
谈一下Jquery中的bind(),live(),delegate(),on()的区别？
JQuery一个对象可以同时绑定多个事件，这是如何实现的？
是否知道自定义事件。jQuery里的fire函数是什么意思，什么时候用？
jQuery是通过哪个方法和Sizzle选择器结合的？（jQuery.fn.find()进入Sizzle）
针对jQuery性能的优化方法？
Jquery与jQueryUI有啥区别？
JQuery的源码看过吗？能不能简单说一下它的实现原理？
jquery中如何将数组转化为json字符串，然后再转化回来？
jQuery和Zepto的区别？各自的使用场景？
针对jQuery的优化方法？
Zepto的点透问题如何解决？
jQueryUI如何自定义组件?
需求：实现一个页面操作不会整页刷新的网站，并且能在浏览器前进、后退时正确响应。给出你的技术实现方案？
如何判断当前脚本运行在浏览器还是node环境中？（阿里）
移动端最小触控区域是多大？
jQuery的slideUp动画，如果目标元素是被外部事件驱动,当鼠标快速地连续触发外部元素事件,动画会滞后的反复执行，该如何处理呢?
把Script标签放在页面的最底部的body封闭之前和封闭之后有什么区别？浏览器会如何解析它们？
移动端的点击事件的有延迟，时间是多久，为什么会有？怎么解决这个延时？（click有300ms延迟,为了实现safari的双击事件的设计，浏览器要知道你是不是要双击操作。）
知道各种JS框架(Angular,Backbone,Ember,React,Meteor,Knockout...)么?能讲出他们各自的优点和缺点么?
Underscore对哪些JS原生对象进行了扩展以及提供了哪些好用的函数方法？
解释JavaScript中的作用域与变量声明提升？
那些操作会造成内存泄漏？
JQuery一个对象可以同时绑定多个事件，这是如何实现的？
Node.js的适用场景？
(如果会用node)知道route,middleware,cluster,nodemon,pm2,server-siderendering么?
解释一下Backbone的MVC实现方式？
什么是“前端路由”?什么时候适合使用“前端路由”?“前端路由”有哪些优点和缺点?
知道什么是webkit么?知道怎么用浏览器的各种工具来调试和debug代码么?
如何测试前端代码么?知道BDD,TDD,UnitTest么?知道怎么测试你的前端工程么(mocha,sinon,jasmin,qUnit..)?
前端templating(Mustache,underscore,handlebars)是干嘛的,怎么用?
简述一下Handlebars的基本用法？
简述一下Handlerbars的对模板的基本处理流程，如何编译的？如何缓存的？
用js实现千位分隔符?(提示：正则+replace)
检测浏览器版本版本有哪些方式？
WhatisaPolyfill?
做的项目中，有没有用过或自己实现一些polyfill方案（兼容性处理方案）？
我们给一个dom同时绑定两个点击事件，一个用捕获，一个用冒泡。会执行几次事件，会先执行冒泡还是捕获？
使用JS实现获取文件扩展名？
答案自己先慢慢找哈。
⑦ Web前端岗位面试题有哪些
前端面试题汇总，基本上会有四大类问题，具体如下：
一、HTML
1、Doctype作用？严格模式与混杂模式如何区分？它们有何意义?
2、HTML5 为什么只需要写 <!DOCTYPE HTML>？
3、行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
4、页面导入样式时，使用link和@import有什么区别？
5、介绍一下你对浏览器内核的理解？
6、常见的浏览器内核有哪些？
7、html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？
8、简述一下你对HTML语义化的理解？
9、HTML5的离线储存怎么使用，工作原理能不能解释一下？
10、浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？
11、请描述一下 cookies，sessionStorage 和 localStorage 的区别？
12、iframe有那些缺点？
13、Label的作用是什么？是怎么用的？（加 for 或 包裹）
14、HTML5的form如何关闭自动完成功能？
15、如何实现浏览器内多个标签页之间的通信? (阿里)
16、webSocket如何兼容低浏览器？(阿里)
17、页面可见性（Page Visibility）API 可以有哪些用途？
18、如何在页面上实现一个圆形的可点击区域？
19、实现不使用 border 画出1px高的线，在不同浏览器的Quirksmode和CSSCompat模式下都能保持同一效果。
20、网页验证码是干嘛的，是为了解决什么安全问题？
21、tite与h1的区别、b与strong的区别、i与em的区别？
二、css
1、介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？
2、CSS选择符有哪些？哪些属性可以继承？
3、CSS优先级算法如何计算？
4、CSS3新增伪类有那些？
5、如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？
6、display有哪些值？说明他们的作用。
7、position的值relative和absolute定位原点是？
8、CSS3有哪些新特性？
9、请解释一下CSS3的Flexbox（弹性盒布局模型）,以及适用场景？
10、用纯CSS创建一个三角形的原理是什么？
11、一个满屏 品 字布局 如何设计?
三、常见兼容性问题？
1、li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？
2、经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧 ？
3、为什么要初始化CSS样式。
4、absolute的containing block计算方式跟正常流有什么不同？
5、CSS里的visibility属性有个collapse属性值是干嘛用的？在不同浏览器下以后什么区别？
6、position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？
7、对BFC规范(块级格式化上下文：block formatting context)的理解？
8、CSS权重优先级是如何计算的？
9、请解释一下为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式
10、移动端的布局用过媒体查询吗？
11、使用 CSS 预处理器吗？喜欢那个？
12、CSS优化、提高性能的方法有哪些？
13、浏览器是怎样解析CSS选择器的？
14、在网页中的应该使用奇数还是偶数的字体？为什么呢？
15、margin和padding分别适合什么场景使用？
16、抽离样式模块怎么写，说出思路，有无实践经验？[阿里航旅的面试题]
17、元素竖向的百分比设定是相对于容器的高度吗？
18、全屏滚动的原理是什么？用到了CSS的那些属性？
19、什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？
20、视差滚动效果，如何给每页做不同的动画？（回到顶部，向下滑动要再次出现，和只出现一次分别怎么做？）
21、::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用。
22、如何修改chrome记住密码后自动填充表单的黄色背景 ？
23、你对line-height是如何理解的？
24、设置元素浮动后，该元素的display值是多少？（自动变成display:block）
25、怎么让Chrome支持小于12px 的文字？
26、让页面里的字体变清晰，变细用CSS怎么做？（-webkit-font-smoothing: antialiased;）
27、font-style属性可以让它赋值为“oblique” oblique是什么意思？
28、position:fixed;在android下无效怎么处理？
29、如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里）
30、display:inline-block 什么时候会显示间隙？(携程)
31、overflow: scroll时不能平滑滚动的问题怎么处理？
32、有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度。
33、png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？
34、什么是Cookie 隔离？（或者说：请求资源的时候不要让它带cookie怎么做）
35、style标签写在body后与body前有什么区别？
四、JavaScript
1、介绍JavaScript的基本数据类型。
2、说说写JavaScript的基本规范？
3、JavaScript原型，原型链 ? 有什么特点？
4、JavaScript有几种类型的值？（堆：原始数据类型和 栈：引用数据类型），你能画一下他们的内存图吗？
5、Javascript如何实现继承？
6、Javascript创建对象的几种方式？
7、Javascript作用链域?
8、谈谈This对象的理解。
9、eval是做什么的？
10、什么是window对象? 什么是document对象?
11、null，undefined的区别？
12、写一个通用的事件侦听器函数(机试题)。
13、[“1”, “2”, “3”].map(parseInt) 答案是多少？
14、关于事件，IE与火狐的事件机制有什么区别？ 如何阻止冒泡？
15、什么是闭包（closure），为什么要用它？
16、javascript 代码中的”use strict”;是什么意思 ? 使用它区别是什么？
17、如何判断一个对象是否属于某个类？
18、new操作符具体干了什么呢?
19、用原生JavaScript的实现过什么功能吗？
20、Javascript中，有一个函数，执行时对象查找时，永远不会去查找原型，这个函数是？
21、对JSON的了解？
22、[].forEach.call($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16) }) 能解释一下这段代码的意思吗？
23、js延迟加载的方式有哪些？
24、Ajax 是什么? 如何创建一个Ajax？
25、同步和异步的区别?
26、如何解决跨域问题?
27、页面编码和被请求的资源编码如果不一致如何处理？
28、模块化开发怎么做？
29、AMD（Moles/Asynchronous-Definition）、CMD（Common MoleDefinition）规范区别？
30、requireJS的核心原理是什么？（如何动态加载的？如何避免多次加载的？如何 缓存的？）
31、让你自己设计实现一个requireJS，你会怎么做？
32、谈一谈你对ECMAScript6的了解？
33、ECMAScript6 怎么写class么，为什么会出现class这种东西?
34、异步加载的方式有哪些？
35、documen.write和 innerHTML的区别?
36、DOM操作——怎样添加、移除、移动、复制、创建和查找节点?
37、.call() 和 .apply() 的含义和区别？
38、数组和对象有哪些原生方法，列举一下？
39、JS 怎么实现一个类。怎么实例化这个类
40、JavaScript中的作用域与变量声明提升？
41、如何编写高性能的Javascript？
42、那些操作会造成内存泄漏？
43、JQuery的源码看过吗？能不能简单概况一下它的实现原理？
44、jQuery.fn的init方法返回的this指的是什么对象？为什么要返回this？
45、jquery中如何将数组转化为json字符串，然后再转化回来？
46、jQuery 的属性拷贝(extend)的实现原理是什么，如何实现深拷贝？
47、jquery.extend 与 jquery.fn.extend的区别？
48、jQuery 的队列是如何实现的？队列可以用在哪些地方？
49、谈一下Jquery中的bind(),live(),delegate(),on()的区别？
50、JQuery一个对象可以同时绑定多个事件，这是如何实现的？
51、是否知道自定义事件。jQuery里的fire函数是什么意思，什么时候用？
52、jQuery 是通过哪个方法和 Sizzle 选择器结合的？（jQuery.fn.find()进入Sizzle）
53、针对 jQuery性能的优化方法？
54、Jquery与jQuery UI有啥区别？
55、JQuery的源码看过吗？能不能简单说一下它的实现原理？
56、jquery 中如何将数组转化为json字符串，然后再转化回来？
57、jQuery和Zepto的区别？各自的使用场景？
58、针对 jQuery 的优化方法？
59、Zepto的点透问题如何解决？
60、jQueryUI如何自定义组件?
61、需求：实现一个页面操作不会整页刷新的网站，并且能在浏览器前进、后退时正确响应。给出你的技术实现方案？
62、如何判断当前脚本运行在浏览器还是node环境中？（阿里）
63、移动端最小触控区域是多大？
64、jQuery 的 slideUp动画 ，如果目标元素是被外部事件驱动, 当鼠标快速地连续触发外部元素事件, 动画会滞后的反复执行，该如何处理呢?
65、把 Script 标签 放在页面的最底部的body封闭之前 和封闭之后有什么区别？浏览器会如何解析它们？
66、移动端的点击事件的有延迟，时间是多久，为什么会有？ 怎么解决这个延时？（click 有 300ms 延迟,为了实现safari的双击事件的设计，浏览器要知道你是不是要双击操作。）
67、知道各种JS框架(Angular, Backbone, Ember, React, Meteor, Knockout…)么? 能讲出他们各自的优点和缺点么?
68、Underscore 对哪些 JS 原生对象进行了扩展以及提供了哪些好用的函数方法？
69、解释JavaScript中的作用域与变量声明提升？
70、那些操作会造成内存泄漏？
71、JQuery一个对象可以同时绑定多个事件，这是如何实现的？
72、Node.js的适用场景？
(如果会用node)知道route, middleware, cluster, nodemon, pm2, server-side rendering么?
73、解释一下 Backbone 的 MVC 实现方式？
74、什么是“前端路由”?什么时候适合使用“前端路由”? “前端路由”有哪些优点和缺点?
75、知道什么是webkit么? 知道怎么用浏览器的各种工具来调试和debug代码么?
76、如何测试前端代码么? 知道BDD, TDD, Unit Test么? 知道怎么测试你的前端工程么(mocha, sinon, jasmin, qUnit..)?
77、前端templating(Mustache, underscore, handlebars)是干嘛的, 怎么用?
78、简述一下 Handlebars 的基本用法？
79、简述一下 Handlerbars 的对模板的基本处理流程， 如何编译的？如何缓存的？
80、用js实现千位分隔符?(来源：前端农民工，提示：正则+replace)
检测浏览器版本版本有哪些方式？
81、我们给一个dom同时绑定两个点击事件，一个用捕获，一个用冒泡，你来说下会执行几次事件，然后会先执行冒泡还是捕获
⑧ 如何面试前端工程师
随着时代的发展，很多新兴的就业职位随之产生。前端工程师将就是随着互联网的快速发展而产生的。其实在很多人的观念里，前端工程师也就是一个切页面的而已，他们也就是会html、css、javascript这些没有任何技术含量的网页制作而已。然而随着技术飞速发展，人们对这些技术的要求也是越来越高，如果只凭着一个人来把所有的事情都解决是很困难的，所以这个时候前端工程师就开始发挥着他们很大的作用了。
那我们应该如何来面试前端工程师呢？
谈吐要大方得体
在我们在面对面试官时我们千万不要紧张。在进行自我介绍时我们要努力做到自信大方、吐字清晰。我们在自我介绍时要用简明扼要的话语来介绍自己，突出自己的优点表明自己的求职意向。你要通过寥寥数语把自己的优势都向面试官介绍清楚。记住不必要的话语要少说。
好了关于如何面试前端工程师这个话题我就聊到这了。希望我的回答能对你有所帮助。
⑨ 前端就是学静态网页的吗有前景吗
Web前端要学习的东西，不只局限于制作静态网页，还包括原生JavaScript交互效果开发、ES6、jQuery、PHP+MySQL、Node、移动框架等等。具体内容，可参考网络上的资料。
想要成为一名高级前端开发工程师，除了要熟练掌握基础知识外，你还需要具备以下这些能力：
1、DNS 解析，使用 CDN，把资源请求分散到多个域名上去；
2、理解 HTTP Headers (Expires、Cache-Control、If-Modified-Since)
3、Steve Souders 的所有高性能网页优化规则
4、如何解决 PageSpeed、YSlow、Chrome Dev Tools Audit、Chrome Dev Tools Timeline 等工具列出的所有问题；
5、何时把任务传到服务器，何时适合传到客户端；
6、缓存，预取和延迟加载技术的使用；
7、原生 JavaScript，知道何时从头开始做，何时参考别人的代码，同时可以评估这样做的优缺点；
8、 最新的 MVC Javascript 库知识以及用法；
9、CSS 标准的知识与用法；
10、JavaScript的计算机科学部分的知识（内存管理，垃圾收集算法等）
在就业前景方面，市场对Web前端开发人才的需求依旧很大，尤其是在一线城市。在北京范围内，前端开发招聘岗位高达2W+。与此同时，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属性的空元素
在浮动元素后使用一个空元素如