前端阶段测试题

1、$()是什么？

$符号是jQuery框架对外暴露的全局变量，是window对象的属性
$()代表jQuery核心函数，可接收一个函数、字符串、DOM元素。
$(function(){});//推荐  .接收字符串选择器
//3.接收DOM元素，该元素被包装成一个jQuery对象返回

2、JavaScript window.onload事件和jQuery ready函数的不同
原生js和jQuery入口函数的加载模式不同。原生js会等网页全部加载完毕（DOM元素、图片等）才会执行；多个window.onload只会执行一次，后面覆盖前面。jQuery只等待网页中的DOM结构加载完毕，不等图片加载就会执行；多个$(document).ready()依次执行，不会覆盖。

<script>
  //该js写在body之前，加载完页面再运行js，否则失去意义
  //原生js的固定写法
  window.οnlοad=function(event){};
  //jQuery的固定写法
  $(document).ready(function(){});
</script>

3、jQuery事件委托方法bind、live、delegate、on之间的区别
jQuery中提供了四种事件监听方式，分别是bind、live、delegate、on，对应的解除监听的函数分别是unbind、die、undelegate、off。
1，bind
bind()向匹配元素添加一个或多个事件处理器。
$(selector).bind(event,data,function)
bind是使用频率较高的一种，作用就是在选择到的元素上绑定特定事件类型的监听函数，参数的含义如下：
event:事件类型，如click、change、mouseover等;
data:传入监听函数的参数，通过event.data取到。可选;
function:监听函数，可传入event对象，这里的event是jQuery封装的event对象，与原生的event对象有区别，使用时需要注意。
bind的特点就是会把监听器绑定到目标元素上，有一个绑一个，在页面上的元素不会动态添加的时候使用它没什么问题。
解除绑定时只需要调用unbind方法即可
$(selector).unbind(event);
注意：绑定和解绑传入的对象和事件类型一定要一致。
优点：这个方法提供了一种在各种浏览器之间对事件处理的兼容性解决方案
非常方便简单的绑定事件到元素上
.click(), .hover()…这些非常方便的事件绑定，都是bind的一种简化处理方式
对于利用ID选出来的元素是非常好的，不仅仅是很快的可以hook上去(因为一个页面只有一个id),而且当事件发生时，handler可以立即被执行(相对于后面的live, delegate)实现方式
缺点：它会绑定事件到所有的选出来的元素上
它不会绑定到在它执行完后动态添加的那些元素上
当元素很多时，会出现效率问题
当页面加载完的时候，你才可以进行bind()，所以可能产生效率问题
2，live
live() 向当前或未来的匹配元素添加一个或多个事件处理器；
$(selector).live(event,data,function);
event:事件类型，如click、change、mouseover等;
data:可选；需要传递的参数
function:监听函数，可传入event对象，这里的event是jQuery封装的event对象
但live和bind的区别在于：
live方法并没有将监听器绑定到自己(this)身上，而是绑定到了this.context上了。live正是利用了事件委托机制来完成事件的监听处理，把节点的处理委托给了document。使用事件委托的优点一目了然，新添加的元素不必再绑定一次监听器。
另外：
live还可以多事件处理，如下：
$(selector).live({event1:function, event2:function, …});
多个事件和函数之间用分号隔开，可给同意对象绑定多个事件。
解除绑定时只需要调用unbind方法即可
$(selector).die(event);
注意：绑定和解绑传入的对象和事件类型一定要一致。
优点：这里仅有一次的事件绑定，绑定到document上而不像.bind()那样给所有的元素挨个绑定
那些动态添加的elemtns依然可以触发那些早先绑定的事件，因为事件真正的绑定是在document上
你可以在document ready之前就可以绑定那些需要的事件
缺点：从1.7开始已经不被推荐了，所以你也要开始逐步淘汰它了。
Chaining没有被正确的支持
当使用event.stopPropagation()是没用的，因为都要到达document，因为所有的selector/event都被绑定到document, 所以当我们使用matchSelector方法来选出那个事件被调用时，会非常慢
当发生事件的元素在你的DOM树中很深的时候，会有performance问题
3，delegate
将监听事件绑定在就近的父级元素上
$(selector).delegate(childSelector,event,data,function);
childSelector: 必需项；需要添加事件处理程序的元素，一般为selector的子元素；
event：必需项；添加到元素的一个或多个事件，例如 click,dblclick等；
data:可选；需要传递的参数
function:监听函数，可传入event对象，这里的event是jQuery封装的event对象
同时delegate也支持多事件处理
$(selector).delegate(childselector,{event1:function, event2:function, …});
多个事件和函数之间用分号隔开，可给同意对象绑定多个事件。
这样在绑定的饿时候可以选择最近的最稳定的元素绑定事件，可以更快的冒泡上去，提升效率。
解除绑定时只需要调用unbind方法即可
$(selector).undelegate(event);
注意：绑定和解绑传入的对象和事件类型一定要一致。
优点：你可以选择你把这个事件放到那个元素上了
chaining被正确的支持了
jQuery仍然需要迭代查找所有的selector/event data来决定那个子元素来匹配，但是因为你可以决定放在那个根元素上，所以可以有效的减小你所要查找的元素。
可以用在动态添加的元素上
缺点：需要查找那个那个元素上发生了那个事件了，尽管比document少很多了，不过，你还是得浪费时间来查找。
4，on
on() 为指定的元素,添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。使用 on() 方法的事件处理程序适用于当前或未来的元素。
$(selector).on(event,childselector,data,function);
event：必需项；添加到元素的一个或多个事件，例如 click,dblclick等；
childSelector: 可选；需要添加事件处理程序的元素，一般为selector的子元素；
data：可选；需要传递的参数；
function：必需；当绑定事件发生时，需要执行的函数；
同时，on也支持多个事件处理

$(selector).on({event1:function, event2:function, ...},childselector);

多个事件和函数之间用分号隔开，可给同意对象绑定多个事件。
解除绑定时只需要调用unbind方法即可
$(selector).off(event);
注意：绑定和解绑传入的对象和事件类型一定要一致
优点：提供了一种统一绑定事件的方法
仍然提供了.delegate()的优点，当然如果需要你也可以直接用.bind()
缺点：也许会对你产生一些困扰，因为它隐藏了一前面我们所介绍的三种方法的细节。

5、$(this) 和 this 关键字在 jQuery 中有何不同？
	// this其实是一个Html 元素。
// $this 只是个变量名，加$是为说明其是个jquery对象。
// 而$(this)是个转换，将this表示的dom对象转为jquery对象，这样就可以使用jquery提供的方法操作。

6、JQuery有几种选择器
7、Javascript垃圾回收方法
标记清除（mark and sweep）
这是JavaScript最常见的垃圾回收方式，当变量进入执行环境的时候，比如函数中声明一个变量，垃圾回收器将其标记为“进入环境”，当变量离开环境的时候（函数执行结束）将其标记为“离开环境”。
垃圾回收器会在运行的时候给存储在内存中的所有变量加上标记，然后去掉环境中的变量以及被环境中变量所引用的变量（闭包），在这些完成之后仍存在标记的就是要删除的变量了
引用计数(reference counting)
在低版本IE中经常会出现内存泄露，很多时候就是因为其采用引用计数方式进行垃圾回收。引用计数的策略是跟踪记录每个值被使用的次数，当声明了一个变量并将一个引用类型赋值给该变量的时候这个值的引用次数就加1，如果该变量的值变成了另外一个，则这个值得引用次数减1，当这个值的引用次数变为0的时 候，说明没有变量在使用，这个值没法被访问了，因此可以将其占用的空间回收，这样垃圾回收器会在运行的时候清理掉引用次数为0的值占用的空间。
在IE中虽然JavaScript对象通过标记清除的方式进行垃圾回收，但BOM与DOM对象却是通过引用计数回收垃圾的，
也就是说只要涉及BOM及DOM就会出现循环引用问题。
8、你觉得前端工程的价值体现在哪
为简化用户使用提供技术支持（交互部分）
为多个浏览器兼容性提供支持
为提高用户浏览速度（浏览器性能）提供支持
为跨平台或者其他基于webkit或其他渲染引擎的应用提供支持
为展示数据提供支持（数据接口）
9、谈谈性能优化问题
代码层面：避免使用css表达式，避免使用高级选择器，通配选择器。
缓存利用：缓存Ajax，使用CDN，使用外部js和css文件以便缓存，添加Expires头，服务端配置Etag，减少DNS查找等
请求数量：合并样式和脚本，使用css图片精灵，初始首屏之外的图片资源按需加载，静态资源延迟加载。
请求带宽：压缩文件，开启GZIP，
代码层面的优化
用hash-table来优化查找
少用全局变量
用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能
用setTimeout来避免页面失去响应
缓存DOM节点查找的结果
避免使用CSS Expression
避免全局查询
避免使用with(with会创建自己的作用域，会增加作用域链长度)
多个变量声明合并
避免图片和iFrame等的空Src。空Src会重新加载当前页面，影响速度和效率
尽量避免写在HTML标签中写Style属性
移动端性能优化
尽量使用css3动画，开启硬件加速。
适当使用touch事件代替click事件。
避免使用css3渐变阴影效果。
可以用transform: translateZ(0)来开启硬件加速。
不滥用Float。Float在渲染时计算量比较大，尽量减少使用
不滥用Web字体。Web字体需要下载，解析，重绘当前页面，尽量减少使用。
合理使用requestAnimationFrame动画代替setTimeout
CSS中的属性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）会触发GPU渲染，请合理使用。过渡使用会引发手机过耗电增加
PC端的在移动端同样适用
10、栈和堆的区别？
栈区（stack）— 由编译器自动分配释放 ，存放函数的参数值，局部变量的值等。
堆区（heap） — 一般由程序员分配释放， 若程序员不释放，程序结束时可能由OS回收。
堆（数据结构）：堆可以被看成是一棵树，如：堆排序；
栈（数据结构）：一种先进后出的数据结构。
11、js继承方式及其优缺点
原型链继承的缺点
一是字面量重写原型会中断关系，使用引用类型的原型，并且子类型还无法给超类型传递参数。
借用构造函数（类式继承）
借用构造函数虽然解决了刚才两种问题，但没有原型，则复用无从谈起。所以我们需要原型链+借用构造函数的模式，这种模式称为组合继承
组合式继承
组合式继承是比较常用的一种继承方法，其背后的思路是 使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承。这样，既通过在原型上定义方法实现了函数复用，又保证每个实例都有它自己的属性。
12、谈谈浮动和清除浮动
浮动的框可以向左或向右移动，直到他的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流的块框表现得就像浮动框不存在一样。浮动的块框会漂浮在文档普通流的块框上。
13、用过哪些设计模式？
工厂模式：
主要好处就是可以消除对象间的耦合，通过使用工程方法而不是new关键字。将所有实例化的代码集中在一个位置防止代码重复。
工厂模式解决了重复实例化的问题 ，但还有一个问题,那就是识别问题，因为根本无法搞清楚他们到底是哪个对象的实例。

 function createObject(name,age,profession){//集中实例化的函数var obj = newObject();
    obj.name =name;
    obj.age = age;
    obj.profession= profession;
    obj.move =function () {
    returnthis.name + ' at ' + this.age + ' engaged in ' + this.profession;
    };
    return obj;
    }
    var test1 = createObject('trigkit4',22,'programmer');//第一个实例var test2 =createObject('mike',25,'engineer');//第二个实例 

构造函数模式
使用构造函数的方法 ，即解决了重复实例化的问题 ，又解决了对象识别的问题，该模式与工厂模式的不同之处在于：
1.构造函数方法没有显示的创建对象 (new Object());
2.直接将属性和方法赋值给 this 对象;
3.没有 renturn 语句。
14、CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？
1.id选择器（ # myid）
2.类选择器（.myclassname）
3.标签选择器（div, h1, p）
4.相邻选择器（h1 + p）
5.子选择器（ul > li）
6.后代选择器（lia）
7.通配符选择器（ * ）
8.属性选择器（a[rel = “external”]）
9.伪类选择器（a: hover, li:nth-child）
优先级为:
!important > id > class > tag
important 比 内联优先级高,但内联比 id 要高
CSS3新增伪类举例：

 p:first-of-type选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
    p:last-of-type  选择属于其父元素的最后 <p> 元素的每个 <p> 元素。 
    p:only-of-type  选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
    p:only-child    选择属于其父元素的唯一子元素的每个 <p> 元素。
    p:nth-child(2)  选择属于其父元素的第二个子元素的每个 <p> 元素。
    :enabled  :disabled控制表单控件的禁用状态。
    :checked        单选框或复选框被选中。

15、CSS3有哪些新特性？
CSS3实现圆角（border-radius），阴影（box-shadow），
对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
transform:rotate(9deg) scale(0.85,0.90)translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜
增加了更多的CSS选择器 多背景 rgba
在CSS3中唯一引入的伪元素是::selection.
媒体查询，多栏布局
border-image
CSS3中新增了一种盒模型计算方式：box-sizing。盒模型默认的值是content-box, 新增的值是padding-box和border-box，几种盒模型计算元素宽高的区别如下：
content-box（默认）
布局所占宽度Width：Width = width + padding-left + padding-right + border-left + border-right
布局所占高度Height:Height = height + padding-top + padding-bottom + border-top + border-bottompadding-box
布局所占宽度Width：Width = width(包含padding-left + padding-right) + border-top + border-bottom
布局所占高度Height:Height = height(包含padding-top + padding-bottom) + border-top + border-bottomborder-box
布局所占宽度Width：Width = width(包含padding-left + padding-right + border-left + border-right)
布局所占高度Height: Height = height(包含padding-top + padding-bottom + border-top + border-bottom)
16、说说你对语义化的理解？
1，去掉或者丢失样式的时候能够让页面呈现出清晰的结构
2，有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
3，方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
4，便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
17、Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?

1）、<!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器以何种模式来渲染文档。

2）、严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。
3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
4）、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
18、你知道多少种Doctype文档类型？
该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。
XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。
Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，而 Quirks
（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。
19、HTML与XHTML——二者有什么区别
区别：
1.所有的标记都必须要有一个相应的结束标记
2.所有标签的元素和属性的名字都必须使用小写
3.所有的XML标记都必须合理嵌套
4.所有的属性必须用引号""括起来
5.把所有<和&特殊符号用编码表示
6.给所有属性赋一个值
7.不要在注释内容中使“–”
8.图片必须有说明文字
20、解释下浮动和它的工作原理？清除浮动的技巧
浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。
1.使用空标签清除浮动。
这种方法是在所有浮动标签后面添加一个空标签 定义cssclear:both. 弊端就是增加了无意义标签。
2.使用overflow。
给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6。
3.使用after伪对象清除浮动。
该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置 height:0，否则该元素会比实际高出若干像素；
21、浮动元素引起的问题和解决办法？
浮动元素引起的问题：
（1）父元素的高度无法被撑开，影响与父元素同级的元素
（2）与浮动元素同级的非浮动元素（内联元素）会跟随其后
（3）若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构
解决方法：
使用CSS中的clear:both;属性来清除元素的浮动可解决2、3问题，对于问题1，添加如下样式，给父元素添加clearfix样式：

 .clearfix:after{content:".";display: block;height:0;clear: both;visibility: hidden;}
   .clearfix{display: inline-block;} /* for IE/Mac */

清除浮动的几种方法：
1，额外标签法，<divstyle=“clear:both;”>（缺点：不过这个办法会增加额外的标签使HTML结构看起来不够简洁。）
2，使用after伪类

  #parent:after{
        content:".";
        height:0;
        visibility:hidden;
        display:block;
        clear:both;
        }
3,浮动外部元素
4,设置overflow为hidden或者auto

22、DOM操作——怎样添加、移除、移动、复制、创建和查找节点。

1）创建新节点
     createDocumentFragment()    //创建一个DOM片段
     createElement()   //创建一个具体的元素
     createTextNode()   //创建一个文本节点
2）添加、移除、替换、插入
      appendChild()
      removeChild()
     replaceChild()
     insertBefore() //并没有insertAfter()
3）查找
     getElementsByTagName()    //通过标签名称
     getElementsByName()    //通过元素的Name属性的值(IE容错能力较强，
      会得到一个数组，其中包括id等于name值的)
     getElementById()    //通过元素Id，唯一性

23、javascript对象的几种创建方式
1，工厂模式
2，构造函数模式
3，原型模式
4，混合构造函数和原型模式
5，动态原型模式
6，寄生构造函数模式
7，稳妥构造函数模式
24、javascript继承的6种方法
1，原型链继承
2，借用构造函数继承
3，组合继承(原型+借用构造)
4，原型式继承
5，寄生式继承
6，寄生组合式继承
25、HTTP状态码
100 Continue 继续，一般在发送post请求时，已发送了http header之后服务端将返回 此信息，表示确认，之后发送具体参数信息
200 OK 正常返回信息
201 Created 请求成功并且服务器创建了新的资源
202 Accepted 服务器已接受请求，但尚未处理
301 Moved Permanently 请求的网页已永久移动到新位置。
302 Found 临时性重定向。
303 SeeOther 临时性重定向，且总是使用 GET 请求新的 URI。
304 Not Modified 自从上次请求后，请求的网页未修改过。
400 BadRequest 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。
401 Unauthorized 请求未授权。
403Forbidden 禁止访问。

404 NotFound  找不到如何与 URI 相匹配的资源。
500 InternalServer Error  最常见的服务器端错误。
503 ServiceUnavailable 服务器端暂时无法处理请求（可能是过载或维护）。

26、说说网络分层里七层模型是哪七层
§ 应用层：应用层、表示层、会话层（从上往下）（HTTP、FTP、SMTP、DNS）
§ 传输层（TCP和UDP）
§ 网络层（IP）
§ 物理和数据链路层（以太网）
每一层的作用如下：
物理层：通过媒介传输比特,确定机械及电气规范（比特Bit）
数据链路层：将比特组装成帧和点到点的传递（帧Frame）
网络层：负责数据包从源到宿的传递和网际互连（包PackeT）
传输层：提供端到端的可靠报文传递和错误恢复（段Segment）
会话层：建立、管理和终止会话（会话协议数据单元SPDU）
表示层：对数据进行翻译、加密和压缩（表示协议数据单元PPDU）
应用层：允许访问OSI环境的手段（应用协议数据单元APDU）
各种协议
ICMP协议： 因特网控制报文协议。它是TCP/IP协议族的一个子协议，用于在IP主机、路由器之间传递控制消息。
TFTP协议： 是TCP/IP协议族中的一个用来在客户机与服务器之间进行简单文件传输的协议，提供不复杂、开销不大的文件传输服务。
HTTP协议： 超文本传输协议，是一个属于应用层的面向对象的协议，由于其简捷、快速的方式，适用于分布式超媒体信息系统。
DHCP协议： 动态主机配置协议，是一种让系统得以连接到网络上，并获取所需要的配置参数手段。