作用域链 原型链 继承 事件代理 jQuery bootstrap 模块 优化

Posted 2021-04-08 一直在奋斗中

作用域链 原型链 继承

1、对象和函数的一个区别，对象无法直接复用，但是函数可以通过new和prototype来实现复用

2、构造函数不可以返回简单数据类型，而声明式函数是可以任何类型的

3、谈谈js作用域？

答：简单的说，作用域是针对变量的，比如我们创建一个函数a1，函数里面又包了一个子函数a2。此时就存在三个作用域：

全局作用域－a1作用域－a2作用域；即全局作用域包含了a1的作用域，a2的作用域包含了a1的作用域。

当a1在查找变量的时候会先从自身的作用域区查找，找不到再到上一级a2的作用域查找，如果还没找到就到全局作用域区查找，这样就形成了一个作用域链。

 

4、什么是原型链？

答：javascript是面向对象的，每个实例对象都有一个__proto_属性，该属性指向它原型对象，这个实例对象的构造函数有一个原型属性prototype，与实例的__proto__属性指向同一个对象。当一个对象在查找一个属性的时，自身没有就会根据__proto__ 向它的原型进行查找，如果都没有，则向它的原型的原型继续查找，直到查到Object.prototype._proto_为nul，这样也就形成了原型链。

 

5、prototype是什么？他是怎么使用的？

function定义的对象有一个prototype属性，prototype属性又指向了一个prototype对象，注意prototype属性与prototype对象是两个不同的东西，要注意区别。在prototype对象中又有一个constructor属性，这个constructor属性同样指向一个constructor对象，而这个constructor对象恰恰就是这个function函数本身

      Prototype允许我们在创建对象之后来改变对象或类的行为，并且这些通过prototype属性添加的字段或方法所有对象实例是共享的。原型继承。

6、实现继承的方法有什么？

答：继承：就是自己没有，别人有. 拿过来为自己所用，并成为自己的东西

传统继承基于模板，js 继承基于对象

1.原型链

2.借用构造函数

3.组合继承

4.原型式继承

5.寄生式继承

6.寄生组合式继承

 

或者    原形链继承替换继承    混入继承   经典继承  call或者apply实现继承

7、call与apply有什么作用？又有什么区别？

         call函数和apply方法的第一个参数都是要传入给当前对象的对象，及函数内部的this。后面的参数都是传递给当前对象的参数

         apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入，而call则作为call的参数传入（从第二个参数开始）。

如 func.call(func1,var1,var2,var3)对应的apply写法为：func.apply(func1,[var1,var2,var3])

 

事件流 事件代理

1、什么是事件代理？请写出一个事件代理的示例？

当网页中需要触发事件的对象比较多的时候，为了避免内存泄漏，我们把事件委托到其父对象上，借助事件冒泡机制，可以将事件委托到body，document等元素上，这样等于一个页面就只有一个事件触发，避免直接把事件添加到多个对象上

$(body).on(‘click’,’#div’,function(){})

2、IE和DOM事件流的区别

1.执行顺序不一样、2.参数不一样 3.事件加不加on   4.this指向问题

注：（1）IE9以前：attachEvent(“onclick”)、detachEvent(“onclick”)

    （2）IE9开始跟DOM事件流是一样的，都是addEventListener

比较attachEvent和addEventListener：

1、attachEvent只支持事件冒泡addEventListener既支持事件冒泡，也支持事件捕获

2、参数：attachEvent事件类型需要on前缀addEventListener事件类型不需要on前缀

3、如果使用attachEvent对一个元素的目标阶段绑定了多次事件，那么会按照绑定顺序的相反顺序进行触发

如果使用addEventListener对一个元素的目标阶段绑定了多次事件，那么会按照绑定顺序进行触发

3、事件委托是什么？

让利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！

4、如何阻止事件冒泡和默认事件？

阻止浏览器的默认行为

IE9之前：window.event.returnValue=false;

IE9+ FF Chrome：e.preventDefault();

停止事件冒泡

IE9+ FF Chrome：e.stopPropagation();

event.canceBubble=true;//ie9之前

原生JavaScript中，return false;只阻止默认行为，不阻止冒泡，jQuery中的return false;既阻止默认行为，又阻止冒泡

 

                           

5、什么是事件冒泡/捕获？

答：

普通事件：给html元素添加一个特定的属性（比如：onclick）

传统绑定的优点

非常简单和稳定，可以确保它在你使用的不同浏览器中运作一致

处理事件时，this关键字引用的是当前元素，这很有帮组

传统绑定的缺点 

传统方法只会在事件冒泡中运行，而非捕获和冒泡

个元素一次只能绑定一个事件处理函数。新绑定的事件处理函数会覆盖旧的事件处理函数

事  件对象参数(e)仅非IE浏览器及ie9以上（包括ie9）可用

 

事件绑定：js代码中通过标记(id tagclass)获取元素，给元素添加特定的方法(比如onclick)

传统事件绑定和符合W3C标准的事件绑定有什么区别？

div1.onclick=function(){};  这里如果在绑定一个div1.onclick就会把上一个的onclick事件给覆盖了

0<button onmouseover=””></button>

1、如果说给同一个元素绑定了两次或者多次相同类型的事件，那么后面的绑定会覆盖前面的绑定

2、不支持DOM事件流 事件捕获阶段è目标元素阶段=>事件冒泡阶段

 

addEventListener

如果说给同一个元素绑定了两次或者多次相同类型的事件，所以的绑定将会依次触发

支持DOM事件流的

进行事件绑定传参不需要on前端

addEventListener(“click”,function(){},false);//此时的事件就是在事件冒泡阶段执行

addEventListener(“click”,function(){},true);//此时的事件就是在事件捕获阶段执行

 

 

ie9开始，ie11 edge：addEventListener

 

ie9以前：attachEvent/detachEvent

进行事件类型传参需要带上on前缀

这种方式只支持事件冒泡，不支持事件捕获

事件绑定是指把事件注册到具体的元素之上，普通事件指的是可以用来注册的事件

6、IE和DOM事件流的区别

IE9以前：attachEvent(“onclick”)、detachEvent(“onclick”)

IE9开始跟DOM事件流是一样的，都是addEventListener

 

比较attachEvent和addEventListener：

1、attachEvent只支持事件冒泡 addEventListener既支持事件冒泡，也支持事件捕获
2、参数：attachEvent事件类型需要on前缀 addEventListener事件类型不需要on前缀

3、如果使用attachEvent对一个元素的目标阶段绑定了多次事件，那么会按照绑定顺序的相反顺序进行触发

如果使用addEventListener对一个元素的目标阶段绑定了多次事件，那么会按照绑定顺序进行触发

7、请说说事件委托机制？这样做有什么好处？可以用e.target和addEventlistener来实现

答：事件委托，就是某个事件本来该自己干的，但是自己不干，交给别人来干。就叫事件委托。打个比方：一个button对象，本来自己需要监控自身的点击事件，但是自己不来监控这个点击事件，让自己的父节点来监控自己的点击事件。

好处：

A，提高性能：列如，当有很多li同时需要注册事件的时候，如果使用传统方法来注册事件的话，需要给每一个li注册事件。然而如果使用委托事件的话，就只需要将事件委托给该一个元素即可。这样就能提高性能。

B，新添加的元素还会有之前的事件；

事件委托优点

通过上面的介绍，大家应该能够体会到使用事件委托对于web应用程序带来的几个优点：
1.可以大量节省内存占用，减少事件注册。
2.可以方便地动态添加和修改元素，不需要因为元素的改动而修改事件绑定。
3.JavaScript和DOM节点之间的关联变少了，这样也就减少了因循环引用而带来的内存泄漏发生的概率。
事件委托缺点：
不是所有的事件都能冒泡的。blur、focus、load和unload不能像其它事件一样冒泡。事实上blur和focus可以用事件捕获而非事件冒泡的方法获得（在IE之外的其它浏览器中）。
在管理鼠标事件的时候有些需要注意的地方。如果你的代码处理mousemove事件的话你遇上性能瓶颈的风险可就大了，因为mousemove事件触发非常频繁。而mouseout则因为其怪异的表现而变得很难用事件代理来管理。

如果把所有事件都用代理就可能会出现事件误判，即本不应用触发事件的被绑上了事件。

 

8、如何阻止事件冒泡和默认行为

阻止事件冒泡：

IE9+ FF Chrome：e.stopPropagation();

window.event.canceBubble=true;//ie9之前

 

默认行为：html标签所具有的默认行为，比如：

e.preventDefault();

a、点击a标签，就会默认跳转到指定的页面  

b、点击submit按钮，就会自动提交表单

适用场景：

1、异步操作

         2、提交表单之前对表单进行一些基本的验证，比如邮箱是否合法，用户名是不是满足指定的格式

为了不让a点击之后跳转，我们就要给他的点击事件进行阻止

         3、文本框获得焦点

 

阻止默认行为：

IE9之前：window.event.returnValue=false;

IE9+ FF Chrome：e.preventDefault();

 

使用一次 return false，将会同时达到 event.stopPropagation() 和event.preventDefault()的功能，但没有处理兼容问题

阻止浏览器的兼容问题

window.event?window.event.returnValue=false:e.preventDefault();

停止事件冒泡

window.event?window.event.cancelBubble=true:e.stopPropagation();

原生JavaScript中，returnfalse;只阻止默认行为，不阻止冒泡，jQuery中的returnfalse;既阻止默认行为，又阻止冒泡

 

10、js跳出循环的方法区别(break,continue,return)

   Break跳出for循环，不在执行循环  

continue 跳出当前的这一个继续下一个循环

return  跳出函数

11、什么是事件代理？请写出一个事件代理的示例？

当网页中需要触发事件的对象比较多的时候，为了避免内存泄漏，我们把事件委托到其父对象上，借助事件冒泡机制，可以将事件委托到body，document等元素上，这样等于一个页面就只有一个事件触发，避免直接把事件添加到多个对象上

$(body).on(‘click’,’#div’,function(){})

 

流行的jquery boostrap以及常用插件的面试问题

1、jq的在项目中的常用的方法？

         使用JQuery获取元素

       JQ获取元素的内容：$("xxxx").html()

       JQ中的事件操作

       JQ操作控件属性

       JQ操作css

        ajax操作

       jq函数级插件--$.fn.extend-添加成员函数/$.extend-添加静态方法

2、jQuery常用的5个方法

$().css()  $().find()    $(). children()  $().parent()

$().addClass $().removeClass  $().hasClass   $().toggleClass

$().show $().hide()  $().slideDown  $().slideUp  $().slideToggle  

$().fadeIn() $().fadeOut  $().fadeToggle$().stop  $().animate()

$().append() $().prepend() $().html() $().clone()  $().remove()   $().attr()  $().val () $().text()

3、jQuery对象和DOM对象 的相互转换

var btn = $(“#btnShow”); // $btn就是一个jQuery对象

var $btn1 = $(btn); // 此时就把DOM对象btn转换成了jQuery对象$btn1

 

var btn1 = $btn[0]; // 此时就把jQuery对象$btn转换成了DOM对象btn1 （推荐使用此方式）

var btn2 = $btn.get(0);// 此时就把jQuery对象$btn转换成了DOM对象btn

 

4、怎么理解jQuery？

答：JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库，它兼容CSS3，还兼容各种浏览器（IE 6.0+， FF1.5+， Safari 2.0+， Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需要定义id即可。

jQuery是一个兼容多浏览器的javascript库，核心理念是write less，do more(写得更少，做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布，吸引了来自世界各地的众多JavaScript高手加入，由Dave Methvin率领团队进行开发。如今，jQuery已经成为最流行的javascript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。

jQuery是免费、开源的，使用MIT许可协议。jQuery的语法设计可以使开发更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。除此以外，jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。

jQuery，顾名思义，也就是JavaScript和查询（Query），即是辅助JavaScript开发的库。

5、$(this)和this的区别是什么？

$(this) 返回一个 jQuery 对象，你可以对它调用多个jQuery 方法，比如用 text() 获取文本，用val() 获取值等等。而 this 代表当前元素，它是 JavaScript 关键词中的一个，表示上下文中的当前 DOM 元素。

6、谈谈你对this理解？

普通函数中：this->window    定时器中：this->window   构造函数中：this->当前实例化的对象

事件处理函数中：this->事件触发对象

7、jquery对象和dom对象是怎样转换的？

jquery转DOM对象:jQuery 对象是一个数组对象，可以通过[index]的得到相应的DOM对象还可以通过get[index]去得到相应的DOM对象。DOM对象转jQuery对象:$(DOM对象)

8、在jQuery使用中的优化方法？

优先使用ID选择器

在class前使用tag(标签名)

给选择器一个上下文

慎用 .live()方法（应该说尽量不要使用）

使用data()方法存储临时变量

 

基于Class的选择性的性能相对于Id选择器开销很大，因为需遍历所有DOM元素。

//

频繁操作的DOM，先缓存起来再操作。用Jquery的链式调用更好。

比如：var str=$("a").attr("href");

//

for (var i = size; i < arr.length; i++) {}

for循环每一次循环都查找了数组 (arr) 的.length属性，在开始循环的时候设置一个变量来存储这个数字，可以让循环跑得更快：

for (var i = size, length = arr.length; i < length; i++) {}

 

 

8、on方法是jquery几出现的？

jquery中on()方法是在jQuery 1.7以上版本的出现，在jQuery 1.7以上版本中有的，可以查找最新的jQuery 文档里面是有的

9、jquery扩展外部的方法？ 用extend

10、为什么要使用$. 为什么jQuery要传window进去

   答，不用在从一个作用域寻找在到下一个作用域寻找，性能更好

12、jQuery.fn的init方法返回的this指的是什么对象？为什么要返回this？

this执行init构造函数自身，其实就是jQuery实例对象，返回this是为了实现jQuery的链式操作

13、jquery.extend 与 jquery.fn.extend的区别？

Jquery.extend用来扩展jQuery对象本身；jquery.fn.extend用来扩展jQuery实例

15、Zepto的touch模块有tap事件解决300ms的延迟问题

大家都知道，使用zepto的tap事件，会出现点透的问题。

我们先来了解下，什么叫点透问题？

假如你在列表页面上创建一个弹出层，弹出层有个关闭的按钮（绑定了tap事件），你点了这个按钮关闭弹出层后，这个按钮正下方的内容也会执行点击事件（或打开链接）。这个就是一个“点透”现象。

点透出现的原因是：延迟300ms的click事件触发了。

zepto的touch模块中，没有对这个延迟300ms的click事件取消，或者取消不了。

而fastClick中，会对这个延迟300ms的click事件取消，也就是这个click事件不会触发。

所以zepto的tap事件（通过touchstart和touchend模拟出来的）有点透问题，而fastClick的click事件（通过touchstart和touchend模拟出来的）没有。

zepto中，没有对真实的延迟300ms的click事件做处理，或者做了处理，但是还是触发了。而fastClick对真实的延迟300ms的click事件做了处理，不会触发。

深入到zepto的touch.js和fastClick的源码，我们可以得知：

zepto的tap事件和fastClick的click事件，源码差不多。

为什么基本相同的代码，zepto会点透而fastclick不会呢？

原因是zepto的代码里面有个settimeout，在settimeout里面执行e.preventDefault()不会生效，因此zepto中的延迟300ms的click事件会触发，而fastClick不会。

解决tap点透问题：

1.使用fastclick，不过你之前写的tap事件，都要改成click事件。

2.使用基于zepto的tap插件，此插件，代码量不大，也不用修改你写的tap事件，需要的请问我要，谢谢。

16、Zepto的点透问题如何解决？

点透主要是由于两个div重合，例如：一个div调用show()，一个div调用hide()；这个时候当点击上面的div的时候就会影响到下面的那个div；

解决办法主要有2种：

1.github上有一个叫做fastclick的库，它也能规避移动设备上click事件的延迟响应，https://github.com/ftlabs/fastclick

将它用script标签引入页面（该库支持AMD，于是你也可以按照AMD规范，用诸如require.js的模块加载器引入），并且在domready时初始化在body上，

2.根据分析，如果不引入其它类库，也不想自己按照上述fastclcik的思路再开发一套东西，需要1.一个优先于下面的“divClickUnder”捕获的事件；2.并且通过这个事件阻止掉默认行为（下面的“divClickUnder”对click事件的捕获，在ios的safari，click的捕获被认为和滚屏、点击输入框弹起键盘等一样，是一种浏览器默认行为，即可以被event.preventDefault()阻止的行为）。

17、如何在点击一个按钮时使用 jQuery 隐藏一个图片？

$('#ButtonToClick').click(function(){

$('#ImageToHide').hide();

18、Jquery .on这个方法怎么看？

答：

jQuery.on()方法是官方推荐的绑定事件的一个方法。

$(selector).on(event，childSelector，data，function，map)

Gggg

多个事件绑定同一个函数

$(document).ready(function(){

  $("p").on("mouseovermouseout"，function(){

    $("p").toggleClass("intro")；

  })；

})；

多个事件绑定不同函数

$(document).ready(function(){

  $("p").on({

    mouseover：function(){$("body").css("background-color"，"lightgray")；}，

    mouseout：function(){$("body").css("background-color"，"lightblue")；}，

    click：function(){$("body").css("background-color"，"yellow")；} 

  })；

})；

绑定自定义事件

$(document).ready(function(){

  $("p").on("myOwnEvent"，function(event， showName){

    $(this).text(showName +"! What a beautiful name!").show()；

  })；

  $("button").click(function(){

    $("p").trigger("myOwnEvent"，["Anja"])；

  })；

})；

传递数据到函数

function handlerName(event)

{

  alert(event.data.msg)；

}

 

$(document).ready(function(){

  $("p").on("click"， {msg："Youjust clicked me!"}， handlerName)

})；

适用于未创建的元素

$(document).ready(function(){

  $("div").on("click"，"p"，function(){

    $(this).slideToggle()；

  })；

  $("button").click(function(){

    $("<p>This is a new paragraph.</p>").insertAfter("button")；

  })；

})

19、JQuery的源码看过吗？能不能简单概况一下它的实现原理？

考察学习知识的态度，是否仅仅是停留在使用层面，要知其然知其所以然

20、jQuery.fn的init方法返回的this指的是什么对象？为什么要返回this？

this执行init构造函数自身，其实就是jQuery实例对象，返回this是为了实现jQuery的链式操作

21、jquery中如何将数组转化为json字符串，然后再转化回来？

$.parseJSON('{"name":"John"}');

JSON.stringify

22、jQuery 的属性拷贝(extend)的实现原理是什么，如何实现深拷贝？

递归赋值

23、jquery.extend与 jquery.fn.extend的区别？

Jquery.extend用来扩展j

Query对象本身；jquery.fn.extend用来扩展jQuery实例

jQuery.extend(object);为扩展jQuery类本身.为类添加新的方法。 
jQuery.fn.extend(object);给jQuery对象添加方法。这个应该很好理解吧。举个例子。 

复制代码代码如下:

<span style="font-size:18px;"><html> 
<head> 
<title></title> 
</head> 
<body> 
<h3>new soul</h3> 
<h3>new soul</h3> 
<h3>new soul</h3> 
<h3>new soul</h3> 
<script type="text/javascript"src="jquery.2.0.3.js"></script> 
<script type="text/javascript"> 
jQuery.fn.myPlugin = function(options) { 
$options = $.extend( { 
html: "no messages", 
css: { 
"color": "red", 
"font-size":"14px" 
}}, 
options); 
return $(this).css({ 
"color": $options.css.color, 

}).html($options.html); 
} 


$('.ye').myPlugin({html:"Soeasy,yes?",css:{"color":"green","font-size":"20px"}}); 
</script> 
</body> 
</html> 
</span> 

好的，上面你也看到了一点点$.extend()的用法。 

1.合并多个对象。 

这里使用的就是$.extend()的嵌套多个对象的功能。 

所谓嵌套多个对象，有点类似于数组的合并的操作。 

但是这里是对象。举例说明。 

复制代码代码如下:

<span style="font-size:18px;">//用法:jQuery.extend(obj1,obj2,obj3,..) 
var Css1={size: "10px",style: "oblique"} 
var Css2={size: "12px",style: "oblique",weight:"bolder"} 
$.jQuery.extend(Css1,Css2) 
//结果:Css1的size属性被覆盖,而且继承了Css2的weight属性 
// Css1 = {size: "12px",style: "oblique",weight:"bolder"} 
</span> 

2.深度嵌套对象。 

复制代码代码如下:

<span style="font-size:18px;"> jQuery.extend( 
{ name: “John”, location: { city: “Boston” } }, 
{ last: “Resig”, location: { state: “MA” } } 
); 
// 结果: 
// => { name: “John”, last: “Resig”, location: { state: “MA” } } 
// 新的更深入的.extend() 
jQuery.extend( true, 
{ name: “John”, location: { city: “Boston” } }, 
{ last: “Resig”, location: { state: “MA” } } 
); 
// 结果 
// => { name: “John”, last: “Resig”, 
// location: { city: “Boston”, state: “MA” } } 
</span> 

3.可以给jQuery添加静态方法。 

复制代码代码如下:

<span style="font-size:18px;"><html> 
<head> 
<title></title> 
</head> 
<body> 
<script type="text/javascript"src="jquery.2.0.3.js"></script> 
<script type="text/javascript"> 
$.extend({ 
add:function(a,b){return a+b;}, 
minus:function(a,b){return a-b}, 
multiply:function(a,b){return a*b;}, 
divide:function(a,b){return Math.floor(a/b);} 
}); 

var sum = $.add(3,5)+$.minus(3,5)+$.multiply(3,5)+$.divide(5,7); 
console.log(sum); 
</script> 
</body> 
</html></span> 

 

24、谈一下Jquery中的bind(),live(),delegate(),on()的区别？

jquery1.7以后就推荐使用on的方式来进行事件绑定了

25、JQuery一个对象可以同时绑定多个事件，这是如何实现的？

可以同时绑定多个事件，低层实现原理是使用addEventListner与attachEvent兼容处理做事件注册

26、Jquery与jQuery UI有啥区别？

jQuery是操作dom的框架，jQueryUI是基于jQuery做的一个UI组件库

27、jQuery和Zepto的区别？各自的使用场景？

1 他不用ie老版本兼容

2 按需加载 选择器模块 ajax模块

3 移动端独特时间 touch事件

4,width()和height()的区别：Zepto由盒模型(box-sizing)决定，用.width()返回赋值的width，用.css('width')返回加border等的结果；jQuery会忽略盒模型，始终返回内容区域的宽/高(不包含padding、border)。

5,offset()的区别：Zepto返回{top,left,width,height}；jQuery返回{width,height}。

6,Zepto无法获取隐藏元素宽高，jQuery可以。

7 ,Zepto中没有为原型定义extend方法而jQuery有。

 

 

jQuery主要用于pc端，当然有对应的jQuerymobile用于移动端，zepto比jQuery更加小巧，主要用于移动端

jquer mobile相对于zepto功能强大，但是体积也很庞大，zepto非常的轻量

1 针对移动端程序，Zepto有一些基本的触摸事件可以用来做触摸屏交互（tap事件、swipe事件）

2 zepto按需加载，比如selector模块 touch模块fx_methods 有了这个模块之后，.show().hide() 等几个方法才能支持动画了

3 去掉了一些jquery兼容的问题

 

26、swiper仅仅是为了做轮播图，其实也可以实现上拉刷新，下拉加载

27、响应式开发和移动web开发的区别

 

col-xs-[列数]：在超小屏幕下展示几份

col-sm-[列数]：在小屏幕下展示几份

col-md-[列数]：在中等屏幕下展示几份

col-lg-[列数]：在大屏幕下展示几份

xs : 超小屏幕 手机(<768px)

sm : 小屏幕 平板 (≥768px)

md : 中等屏幕 桌面显示器 (≥992px)

lg : 大屏幕 大桌面显示器(≥1200px)

27、Bootstrap有什么好处，为什么要用bootstrap，什么情况用比较合适

Bootstrap 是一个用于快速开发 Web应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。

 

为什么使用 Bootstrap？

移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。

浏览器支持：所有的主流浏览器都支持 Bootstrap。

容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。

响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。它为开发人员创建接口提供了一个简洁统一的解决方案。

它包含了功能强大的内置组件，易于定制。

它还提供了基于 Web 的定制。

它是开源的。

28、简述移动开发的注意点，如何做好不同手机的适配，你以前的项目是怎么做的?

答：1、单独做移动端项目，采用百分比布局

2、采用响应式的方式做适配

29、响应式布局的时候，轮播图使用两张不同的图片去适配大屏幕和超小屏幕，还是一张图片进行压缩适配不同终端，说明原因？

答：最好使用两张不同大小的图片去适配大屏幕和超小屏幕，这样可以针对不同设备的屏幕大小，来加载响应的图片，减少超小屏幕设备的网络流量消耗，加快响应速度，同时防止图片在大屏幕下分辨率不够导致失真的问题。

30、Bootstrap中最多可以分多少列？lg、md、sm、xs这几个屏幕宽度的界限是多少？

答：12列

.col-xs- 超小屏幕手机 (<768px)
       .col-sm- 小屏幕平板 (≥768px)
       .col-md- 中等屏幕桌面显示器 (≥992px)
       .col-lg- 大屏幕大桌面显示器 (≥1200px)

31、CSS3 @media 查询

 

实例

如果文档宽度小于 300 像素则修改背景演示(background-color):

@media screen and (max-width:300px) {
    body {
        background-color:lightblue;
    }
}

32、基于boostrap的框架有哪些？ SUI

33、bootstrap的字体图标不够用，怎么办？

直接引入用@font-face{ font-family:wjs} 然后在定义wjs_icon{font-family:wjs}这样就可以直接在页面中使用了

 

34、平时都用什么第三方插件？

答：fullpage，zepto，underscore，JqueryUI，JqueryMobile，Echart，heighEchart，unslider,swiper，animate.js，Validation， Suderslider   HTML5SHIVE responde  jquerylazyload，jQuerycookie  PXloader等。

 

模块 组件化

1、模块化和组件化的区别？

模块就是一个模块，按字面的理解可以是一个给浏览器统一的样式reset.cssye也可以是一个模块在js里用js实现的某一个功能就叫一个模块，

组件主要用在流行框架上组件包括js和css在一块

2、Require怎么用的？模块化 依赖加载 配置文件做入口

3、谈谈你对模块化的理解？

答：

•     模块化就是为了减少系统耦合度，提高高内聚，减少资源循环依赖，增强系统框架设计。

•     让开发者便于维护，同时也让逻辑相同的部分可复用

•     模块化开发：针对js、css，以功能或业务为单元组织代码。js方面解决独立作用域、依赖管理、

api暴露、按需加载与执行、安全合并等问题，css方面解决依赖管理、组件内部样式管理等问题。

任何事物都有一个过程，那么模块化的过程通俗点讲就是：

模块化的过程就是：

•     1、拆分

将整个系统按功能，格式，加载顺序，继承关系分割为一个一个单独的部分.

注意：拆分的粒度问题，可复用问题，效率问题.如何这些问题处理的不好，就有可能出现不想要的后果。

将功能或特征相似的部分组合在一起，组成一个资源块.

将每个资源块按找需求，功能场景以及目录约束放到固定的地方以供调用.

模块的历程

模块化的发展也是从草根一步一步走过来的。从最开始到现在成熟方案：

1.    namespace

2.    sass，less

3.    AMD&CMD

4.    html模版

5.    grunt，gulp，webpack

6.    FIS，YUI，KISSY

4、如何避免回调地狱？耦合性太高，模块化开发    promise

5、RequireJS和seaJs的区别

相同之处

RequireJS 和 SeaJS 都是模块加载器，倡导的是一种模块化开发理念，核心价值是让 JavaScript 的模块化开发变得更简单自然。

不同之处

两者的区别如下：

①  定位有差异。RequireJS 想成为浏览器端的模块加载器，同时也想成为 Rhino / Node 等环境的模块加载器。SeaJS 则专注于 Web 浏览器端，同时通过 Node 扩展的方式可以很方便跑在 Node 服务器端。

②  遵循的规范不同。RequireJS 遵循的是 AMD（异步模块定义）规范，SeaJS 遵循的是 CMD （通用模块定义）规范。规范的不同，导致了两者 API 的不同。SeaJS 更简洁优雅，更贴近 CommonJS Modules/1.1 和 Node Modules 规范。

③  社区理念有差异。RequireJS 在尝试让第三方类库修改自身来支持 RequireJS，目前只有少数社区采纳。SeaJS 不强推，采用自主封装的方式来“海纳百川”，目前已有较成熟的封装策略。

④  代码质量有差异。RequireJS 是没有明显的 bug，SeaJS 是明显没有 bug。

⑤  对调试等的支持有差异。SeaJS 通过插件，可以实现 Fiddler 中自动映射的功能，还可以实现自动 combo 等功能，非常方便。RequireJS 无这方面的支持。

⑥  插件机制不同。RequireJS 采取的是在源码中预留接口的形式，源码中留有为插件而写的代码。SeaJS 采取的插件机制则与 javascript 语言以及Node 的方式一致：开放自身，让插件开发者可直接访问或修改，从而非常灵活，可以实现各种类型的插件。

优化问题 项目中的bug

1、请谈谈你对性能优化的认识？

答：网页内容

减少http请求次数

80%的响应时间花在下载网页内容(images， stylesheets， javascripts， scripts， flash等)。减少请求次数是缩短响应时间的关键！可以通过简化页面设计来减少请求次数，但页面内容较多可以采用以下技巧。

减少DNS查询次数

DNS查询也消耗响应时间，如果我们的网页内容来自各个不同的domain (比如嵌入了开放广告，引用了外部图片或脚本)，那么客户端首次解析这些domain也需要消耗一定的时间。DNS查询结果缓存在本地系统和浏览器中一段时间，所以DNS查询一般是对首次访问响应速度有所影响。下面是我清空本地dns后访问博客园主页dns的查询请求。

缓存Ajax

Ajax可以帮助我们异步的下载网页内容，但是有些网页内容即使是异步的，用户还是在等待它的返回结果，例如ajax的返回是用户联系人的下拉列表。所以我们还是要注意尽量应用以下规则提高ajax的响应速度。

延迟加载

这里讨论延迟加载需要我们知道我们的网页最初加载需要的最小内容集是什么。剩下的内容就可以推到延迟加载的集合中。

Javascript是典型的可以延迟加载内容。一个比较激进的做法是开发网页时先确保网页在没有Javascript的时候也可以基本工作，然后通过延迟加载脚6本来完成一些高级的功能。

1 图片压缩。2预加载 3赖加载  4压缩文件 5使用缓存

2、你知道有哪些方法可以提高网站的性能？

答：我们从两个方面来讲：

（1）资源加载

CSS顶部， JS底部

CSS JS文件压缩

尽量使用图片使用精灵图，字体图标

图片加载可通过懒加载的方式。

总之就是减少资源体积减少资源请求次数。

（2）代码性能

Css：

使用CSS缩写，减少代码量；

减少查询层级：如.header .logo要好过.header .top .logo；

减少查询范围：如.header>li要好过.header li；

避免TAG标签与CLASS或ID并存：如a.top、button#submit；

删除重复的CSS；

….

Html：

减少DOM节点：加速页面渲染；

正确的闭合标签：如避免使用<div/>，浏览器会多一个将它解析成<div\></div\>的过程；

减少页面重绘。比如给图片加上正确的宽高值：这可以减少页面重绘，

……

Js：

尽量少用全局变量；

使用事件代理绑定事件，如将事件绑定在body上进行代理；

避免频繁操作DOM节点；

减少对象查找，如a.b.c.d这种查找方式非常耗性能，尽可能把它定义在变量里；

3、前端开发的优化问题（看雅虎14条性能优化原则）

（1）减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。

  （2） 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数

  （3） 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。

  （4） 当需要设置的样式很多时设置className而不是直接操作style。

  （5） 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。

  （6） 避免使用CSS Expression（css表达式)又称Dynamicproperties(动态属性)。

  （7） 图片预加载，将样式表放在顶部，将脚本放在底部  加上时间戳。

  （8） 避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢。

4、js延迟加载的方式有哪些？

1. defer和async

2. 动态创建DOM方式（创建script，插入到DOM中，加载完毕后callBack）

3. 按需异步载入js

5、异步加载

方案一：<script>标签的async="async"属性（详细参见：script标签的async属性）

方案二：<script>标签的defer="defer"属性

方案三：动态创建<script>标签

方案四：AJAX eval（使用AJAX得到脚本内容，然后通过eval_r(xmlhttp.responseText)来运行脚本）

方案五：iframe方式

 

6、你如何优化自己的代码？

A、代码重用

B、避免使用过多的全局变量（命名空间，封闭空间，模块化mvc..）

C、拆分函数避免函数过于臃肿：单一职责原则

D、将面向过程的编程方式改为使用面向对象编程

E、适当的注释，尤其是一些复杂的业务逻辑或者是计算逻辑，都应该写出这个业务逻辑的具体过程

F、内存管理，尤其是闭包中的变量释放

7、如何编写高性能的Javascript？

使用 DocumentFragment 优化多次 append

通过模板元素 clone ，替代createElement

使用一次 innerHTML 赋值代替构建dom 元素

使用 firstChild 和nextSibling 代替 childNodes 遍历dom 元素

使用 Array 做为StringBuffer ，代替字符串拼接的操作

将循环控制量保存到局部变量

顺序无关的遍历时，用 while 替代 for

将条件分支，按可能性顺序从高到低排列

在同一条件子的多（ >2 ）条件分支时，使用 switch 优于 if

使用三目运算符替代条件分支

需要不断执行的时候，优先考虑使用 setInterval

8、谈谈你对预加载的理解？

答：Web预加载指的是在网页全加载完成之前，在页面优先显示一些主要内容，以提高用户体验。对于一个较庞大的网站，如果没有使用预加载技术，用户界面就会长时间显示一片空白，直到资源加载完成，页面才会显示内容。

例如，可以通过js预先从服务加载图片资源(动态创建Image，设置src属性)，只要浏览器把图片下载到本地，就会被缓存，再次请求相当的src时就会优先寻找浏览器缓存，提高访问速度。

 

9、缓存和预加载的区别是什么？

答：缓存就是把请求过的数据缓存起来，下次请求的时候直接使用缓存内容，提高响应速度

预加载指的是提前把需要的内容加载完成，访问的时候可以明天提高响应效率，比如图片的预加载（可以提前加载一定数量的图片，当用户访问图片的时候一般只看前几张，由于是预加载好的，所以速度比较快）。

10、图片如何压缩？

答：可以使用一些在线的图片压缩工具

优先用 png 而不是 gif

压缩 png

去掉 jpg 的 metadata

压缩 gif 动画

尝试使用 png8

避免使用 AlphaImageLoader

压缩动态生成的图像

使 favicon 更小可缓存

使用 CSS Sprites

11、图片优化

项目中图片处理相关的优化，项目中用到的优化方案，图片大小达到多少的时候选择处理？

答：1、首先了解在web开发中常见的图片有那些格式。

JPG  通常使用的背景图片，照片图片，商品图片等等。这一类型的图片都属于大尺寸图片或较大尺寸图片一般使用的是这种格式。

PNG  这种格式的又分为两种  一种PNG-8，一种 PNG-24。

PNG-8格式不支持半透明，也是IE6兼容的图片存储方式。

PNG-24图片质量要求较高的半透明或全透明背景，保存成PNG-24更合适（为了兼容IE可以试用js插件pngfix）一般是背景图标中使用的多。

GIF 这种格式显而易见的是在需要gif动画的时候使用了。

 

2．优化方案

样式代替图片

例如：半透明、圆角、阴影、高光、渐变等。这些效果主流的浏览器都能够完美支持，而对于那些低端浏览器，我们并不会完全抛弃他们，“渐进增强”则是一个很好的解决方案。

精灵图

CSS Sprites，将同类型的图标或按钮等背景图合到一张大图中，减少页面请求。

字体图标

Icon Font，将图标做成字体文件。优点是图标支持多个尺寸，兼容所有浏览器，减少页面请求等。美中不足的是只支持纯色的icon。SVG，对于绝大多数图案、图标等，矢量图更小，且可缩放而无需生成多套图。现在主流浏览器都支持SVG了，所以可放心使用！

Base64

将图片转化为base64编码格式，资源内嵌于CSS或HTML中，不必单独请求。

         Base64格式

         data：[][；charset=][；base64]，

         Base64在CSS中的使用

         .demoImg{ background-image： url("data：image/jpg；base64，/9j/4QMZRXhpZgAA

SUkqAAgAAAA          L....")； }

         Base64在HTML中的使用

         <imgwidth="40" height="30"         font-family:宋体;">：image/jpg；base64，/9j/4QMZRXhpZg

AASUkqAAgAAAAL...." />

图片响应式

通常图片加载都是可以通过lazy加载的形式来的，那么可以在加载的时候来判断屏幕的尺寸来达到加载大图还是小图的目的来达到优化。

 

12、压缩文件有哪些方法？

答：使用Grunt、Sass、ant压缩

13、如何区分静态页面和动态页面？

答：要区分这两个，最简单的方法就是看后缀了，动态网页网址中有两个标志性的符号“?”和“&”（有的可能没有&），这个问号和&就是用来带参数的。现在几乎爱所有的网页都是动态网页。

14、你如何对网站的文件和资源进行优化?期待的解决方案包括？

答：文件合并

    文件最小化/文件压缩

    使用CDN托管

    缓存的使用

15、从服务器考虑提高网站性能？

答：业界常用的优化WEB页面加载速度的方法（可以分别从页面元素展现，请求连接，css，js，服务器等方面介绍）？

       对于服务器方面前端能做的工作：

       使用CDN加速，使用户从离自己最近的服务器下载文件；

       减少Cookie的大小，使用无cookie的域，客户端请求静态文件的时候，减少 Cookie 的反复传输对主域名的影响；

       为文件头指定Expires，使内容具有缓存性；

       前端优化：DNS预解析提升页面速度

       <linkrel="dns-prefetch" href="http：//hm.baidu.com"/>

       <linkrel="dns-prefetch" href="http：//eiv.baidu.com"/>

       服务器端能做的工作：

       负载均衡，分布式存储，提升服务器性能等等。

 

16、前端开发的优化问题。

参考资料：J:\代码,PPT,笔记,电子书\面试题\雅虎14条优化规则.docx

  （1） 减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存，图片服务器。

  （2） 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数

  （3） 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。

  （4） 当需要设置的样式很多时设置className而不是直接操作style。

  （5） 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。

  （6） 避免使用CSS Expression（css表达式)又称Dynamicproperties(动态属性)。

  （7） 图片预加载，将样式表放在顶部，将脚本放在底部  加上时间戳。

  （8） 避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢