WEB前端高频面试题第十一波

今天给大家一个惊喜，是什么惊喜呢？从每日5道题变成了10道题喽！


1、DOM执行事件流程?

答：1、捕获阶段：先由文档的根节点document往事件触发对象，从外向内捕获事件对象；2、目标阶段：到达目标事件位置（事发地），触发事件；3、冒泡阶段：再从目标事件位置往文档的根节点方向回溯，从内向外冒泡事件对象。

2、scss和sass，less区别?

答：Sass (Syntactically Awesome Stylesheets)是一种动态样式语言，Sass语法属于缩排语法，比css比多出好些功能(如变量、嵌套、运算,混入(Mixin)、继承、颜色处理，函数等)，更容易阅读。Sass 3就变成了Scss(sassy css)。与原来的语法兼容，只是用{}取代了原来的缩进。Less也是一种动态样式语言. 对CSS赋予了动态语言的特性，如变量，继承，运算， 函数.  Less 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可在服务端运行 (借助 Node.js)。

区别：

1.编译环境不一样。Sass的安装需要Ruby环境，是在服务端处理的，而Less是需要引入less.js来处理Less代码输出css到浏览器，也可以在开发环节使用Less，然后编译成css文件，直接放到项目中。

2.变量符不一样，Less是@，而Scss是$，而且变量的作用域也不一样。

3.输出设置，Less没有输出设置，Sass提供4中输出选项：nested（嵌套缩进的css代码）, compact（展开的多行css代码）, compressed （简洁格式的css代码）和 expanded（压缩后的css代码）。

3、伪类和伪元素的区别?

答：1、常规就是循环和递归 。2、使用es的展开符...

4、jsonp的实现原理?

答：就是动态生成一个script标签。然后通过script的src加载地址，同时根据callback返回函数里面获取数据，这样就的需要后台接口返回的时候返回一个带变量的数据。

5、什么样的网站适合作响应式？

答：功能不是很复杂的网站，设计排版简单的网站适合。比如公司官网，界面清晰的视频网站等。

6、说一下git遇到冲突如何解决？

答：1、pull一下，更新程序。2、同步，查看冲突代码。3、人工修改，保持本地最新版。4、Add to Git Index，提交修改。5、Commit提交。6、push推送到服务器。

7、前端工作流程？

答：1、拿到原型图和产品经理沟通业务需求。2、拿到设计稿先规划一下思路然后切图布局。3、写出js效果。4、拿到后端的接口文档测试一下接口是否可用。5、对接数据渲染到页面。

8、tap事件原理？

答：在移动端中,由于两次触摸是放大操作,,所以当你点击一次的时候,浏览器会等待300ms,看用户是否会进行第二次点击,如果没有的话,才会执行点击事件,tap事件的原理其实是源于触摸touch事件,在移动触摸事件就是在同个点触发,及touchmove的距离距离touchstar的距离为0,并且点击的时间不超过某个设定的时间值,超过该时间值的话,就属于长按了。

9、懒加载原理？

答：一般来讲，给图片src配置一个假的地址，同事给添加一个data-url属性指向真是url地址，当图片快要显示的时候将url地址替换成data-url的属性。

10、移动端的fastclick怎么实际使用？

答：引入fastclick.js插件。然后window.addEventListener( "load", function() {
          FastClick.attach( document.body );
      }, false );。