前端笔试题目houjian

1.前端页面有哪三层构成，分别是什么？作用是什么？

分成：结构层、表示层、行为层。

结构层（structural layer）

由 HTML 或 XHTML之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P标签表达了这样一种语义：“这是一个文本段。”

表示层（presentation layer）

由 CSS 负责创建。 CSS对“如何显示有关内容”的问题做出了回答。

行为层（behaviorlayer）

负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM主宰的领域。

2.w3c标准有哪些？

万维网联盟（world wide web，外语缩写：W3C）标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。

　　对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（European Computer Manufacturers Association）的ECMAScript标准。

3.行内元素有哪些，块级元素有哪些？（列举部分即可）。css的盒模型？
块级元素：div p h1 h2 h3 h4 form ul

行内元素: a b br i span input select

Css盒模型:内容、填充（padding）、边框（border）、外边界（margin）

[code]

[/code]

1、和其他元素都在一行上；

2、元素的高度、宽度、行高及顶部和底部边距不可设置；

3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

块级元素特点

[code]1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下，是它本身父容器的100%，除非设定一个宽度。

4.描述一下你所了解的html5和css3？

HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。
[/code]
HTML5 中的一些有趣的新特性：用于绘画的 canvas 元素用于媒介回放的 video 和 audio 元素对本地离线存储的更好的支持新的特殊内容元素，比如 article、footer、header、nav、section新的表单控件，比如 calendar、date、time、email、url、search

CSS3有哪些新特性：

  
  
新增各种CSS选择器  （: not(.input)：所有 class 不是“input”的节点）

     
圆角           （border-radius:8px）

     
多列布局        （multi-column layout）

     
阴影和反射        （Shadow\Reflect）

     
文字特效      （text-shadow、）

     
文字渲染      （Text-decoration）

     
线性渐变      （gradient）

     
旋转          （transform）

     
增加了旋转,缩放,定位,倾斜,动画，多背景

    
transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation

CSS3 模块包括：选择器框模型背景和边框文本效果2D/3D 转换动画多列布局用户界面5.从事前端工作一定不会缺少调试工具，必须会一些调试命令：如console.log,说说你对console的了解，它有哪些命令？console对象还有4种显示信息的方法，分别是一般信息console.info()、除错信息console.debug()、警告提示console.warn()、错误提示console.error()。6.iframe有哪些缺点？iframe是一种框架，也是一种很常见的网页嵌入方式，零度今天给大家分析分析它的优缺点。iframe的优点：1.iframe能够原封不动的把嵌入的网页展现出来。2.如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。3.网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。4.如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。iframe的缺点：1.会产生很多页面，不容易管理。2.iframe框架结构有时会让人感到迷惑，如果框架个数多的话，可能会出现上下、左右滚动条，会分散访问者的注意力，用户体验度差。3.代码复杂，无法被一些搜索引擎索引到，这一点很关键，现在的搜索引擎爬虫还不能很好的处理iframe中的内容，所以使用iframe会不利于搜索引擎优化。4.很多的移动设备（PDA 手机）无法完全显示框架，设备兼容性差。5.iframe框架页面会增加服务器的http请求，对于大型网站是不可取的。分析了这么多，现在基本上都是用Ajax来代替iframe，所以iframe已经渐渐的退出了前端开发。7.请描述一下 cookies，sessionStorage和localStroage的区别？sessionStorage
、localStorage 和 cookie 之间的区别共同点：都是保存在浏览器端，且同源的。区别：cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage
虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage
在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。Web Storage
支持事件通知机制，可以将数据更新的通知发送给监听者。Web Storage 的
api 接口使用更方便。sessionStorage 和 localStorage
之间的区别见上面的区别3、4sessionStorage与页面
js 数据对象的区别页面中一般的 js
对象或数据的生存期是仅在当前页面有效，因此刷新页面或转到另一页面这样的重新加载页面的情况，数据就不存在了。而sessionStorage
只要同源的同窗口（或tab）中，刷新页面或进入同源的不同页面，数据始终存在。也就是说只要这个浏览器窗口没有关闭，加载新页面或重新加载，数据仍然存在。8.对BFC规范的理解？BFC，块级格式化上下文，一个创建了新的BFC的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素。在同一个 BFC
中的两个毗邻的块级盒在垂直方向（和布局方向有关系）的 margin 会发生折叠。

BFC的生成

既然上文提到BFC是一块渲染区域，那这块渲染区域到底在哪，它又是有多大，这些由生成BFC的元素决定，CSS2.1中规定满足下列CSS声明之一的元素便会生成BFC。
float的值不为none；overflow的值不为visible；display的值为inline-block（行内块元素）、table-cell、table-caption；position的值为absolute或fixed；看到有人把display：table也认为可以生成BFC，其实这里的主要原因在于Table会默认生成一个匿名的table-cell，正是这个匿名的table-cell生成了BFC拜拜了,浮动布局-基于display:inline-block的列表布局9.css定义的权重第一等：代表内联样式，如: style=””，权值为1000。第二等：代表ID选择器，如：#content，权值为100。第三等：代表类，伪类和属性选择器，如.content，权值为10。第四等：代表类型选择器和伪元素选择器，如div p，权值为1。最后把这些值加起来，再就是当前元素的权重了。10.javascript如何实现继承？
javascript如何实现继承？1.使用对象冒充实现继承(该种实现方式可以实现多继承)实现原理:让父类的构造函数成为子类的方法,然后调用该子类的方法,通过this关键字给所有的属性和方法赋值var mychild=new  Child("李");  mychild.saySomeThing();2.采用call方法改变函数上下文实现继承(该种方式不能继承原型链,若想继承原型链，则采用5混合模式)实现原理:改变函数内部的函数上下文this,使它指向传入函数的具体对象var child=new Child("张");  Parent.call(child,child.getName());  child.saySomeThing();3.采用Apply方法改变函数上下文实现继承(该种方式不能继承原型链,若想继承原型链，则采用5混合模式)实现原理:改变函数内部的函数上下文this,使它指向传入函数的具体对象var child=new Child("张");  Parent.apply(child,[child.getName()]);  child.saySomeThing(); 4.采用原型链的方式实现继承实现原理:使子类原型对象指向父类的实例以实现继承,即重写类的原型,弊端是不能直接实现多继承Child.prototype=new  Parent();  var child=new Child("张");  child.saySomeThing(); 5.采用混合模式实现继承Child.prototype=new  Parent();  var child=new Child("张");  child.saySomeThing();  child.sayParent();11.把两个数组合并，并删除第二个元素

//It's merge arr1 and arr2 , delete the same element
only leave one

//It's only apdapter array. If object,
no.

//The sequence of the two array is not
required.

mergeArray:

function

(arr1,
arr2){

for

(

var

i = 0 ; i <
arr1.length ; i ++ ){

for

(

var

j = 0 ; j < arr2.length ; j ++
){

if

(arr1[i] === arr2[j]){

arr1.splice(i,1);

//利用splice函数删除元素，从第i个位置，截取长度为1的元素

}

}

}

//

for

(

var

i = 0;
i

arr1.push(arr2[i]);

}

arr1.splice(1,1,0);//从第1个位置（第二个元素），删除1个，添加0个

return

arr1;

}

12.用js实现随机选取10-100之间的10个数字吗，存入一个数组，并排序。      
function sortNumber(a,b){   
   
    return
a-b;//升序   
   
    //return
b-a;//降序   
    }   
      
   
//js实现随机选取10–100之间的10个数字，存入一个数组，并排序   
    var iArray
=[];   
    function
getRandom(iStart,iEnd){   
   
    var iChoice
= iStart-iEnd+1;   
   
    return
Math.abs(Math.floor(Math.random()*iChoice))+iStart;   
    }   
    for(var
i=0;i<10;i++){   
   
   
iArray.push(getRandom(10,100))   
    }   
   
iArray.sort(sortNumber);   
   
;13.["1","2","3"].map(parseInt)答案是多少？答案是：[1, NaN, NaN].
原因：parseInt接收的是两个参数，map传递的是3个参数。14.谈谈this对象的理解。浅谈js之this对象this往大了说无非就是全局中的和函数（方法）中的，只是这函数（方法）中的太过于复杂；其实可以大致划分为五类：全局下中【this】函数中调用【foo（foo2（this））】（这里是指在函数中执行的函数即函数嵌套函数）方法调用【obj.foo（this）】（这是是指对象调用函数时）构造函数中【new
Foo（this）】apply和call中【foo.apply（obj）】this是和执行环境有关，不是和声明函数有关，在你用this的时候要小心点，实在不确定是什么，你就alert一下，不就知道了15.什么是闭包（closure），用代码表示并描述下。闭包是指有权访问另一个函数作用域中变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域，将函数内部的变量和方法传递到外部。闭包的特性：1.函数内再嵌套函数2.内部函数可以引用外层的参数和变量3.参数和变量不会被垃圾回收机制回收16.js延迟加载的方式有哪些。1.使用setTimeout延迟方法的加载时间

[code]$(function (){
setTimeout('A()', 1000); //延迟1秒
})

2.让js最后加载例如引入外部js脚本文件时，如果放入html的head中,则页面加载前该js脚本就会被加载入页面，而放入body中，则会按照页面从上倒下的加载顺序来运行JavaScript的代码~~~ 所以我们可以把js外部引入的文件放到页面底部，来让js最后引入，从而加快页面加载速度17.js代码模块化怎么做。模块是一种通用的功能片段，它并没有创建新的全局变量或命名空间，相反，所有的代码都存放于一个单函数中，可以用一个名称来表示这个模块，同样这个模块可以依赖其他模块。18.你有哪些性能优化的方法？1. 压缩源码和图片(js采用混淆压缩，css进行普通压缩，jpg图片根据具体质量压缩为50%到70%，png用来源软件压缩24色变成8色，去掉一些png格式信息等)2. 选择合适的图片格式(颜色数多用jpg，颜色少用png，如果能通过服务器端判断浏览器支持WebP就用WebP或SVG格式)3. 合并静态资源(减少HTTP请求)4. 把多个css合并为一个css，把图片组合成雪碧图5. 开启服务端的Gzip压缩(对文本资源非常有效，对图片也没那么大压缩率)6. 合并静态资源(减少HTTP请求)7. 使用CDN(对公开库，能和其他网站共享缓存)8. 延长静态资源缓存时间  9. 把css放页面头部，js放底部(这样不会阻塞页面渲染，让页面出现长时间的空白)10. 对于较大的文本资源，必须开启gzip压缩19.一个页面从输入url到页面加载显示完成，这个过程中都发生了什么？（流程说的越详细越好）
[/code]
对于网址栏的URL不同的操作方式有不同的加载资源、获取数据的方式，下面的详细过程针对"在地址栏输入URL，按enter(回车)键加载资源"此种操作方式做解析，其它的方式的过程大同小异，差异会在后面再做分析。　　1. 浏览器开启一个线程来处理这个请求，对URL判断如果是http协议就按照web方式处理；　　2. 浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，会直接在屏幕中显示页面内容（此时没有向服务端发请求）。若没有，则进行下一步操作（后面需要向服务端发送请求）；　　3. 通过DNS解析获取网址的IP地址;　　4. 向真实IP地址服务器发起tcp连接，与浏览器建立tcp三次握手。　　5. 握手成功后，进行HTTP协议会话，浏览器发送报头(请求报头);　　6. 进入到web服务器上的 Web
Server，如 Apache、Tomcat、Node.JS
等服务器;　　7. 进入部署好的后端应用，如 PHP、Java、JavaScript、Python
等，找到对应的请求处理;　　8. 处理结束回馈报头，将数据返回至浏览器;　　9. 浏览器开始下载html文档(响应报头，状态码200)，同时设置缓存;　　10. 之后浏览器对整个 HTML
结构进行解析，形成 DOM 树；与此同时，它还需要对相应的 CSS
文件进行解析，形成 CSS 树（CSSOM）。
 
   
  　　接下来，需要结合 DOM +
CSSOM，形成一个绘制树（Render Tree）;　　11. 得到绘制树之后，需要计算每个结点在页面中的位置，这一个过程称为layout
；　　12. layout的过程是在一个连续的二维平面上进行的，接下来，需要将这些结果栅格化，映射到屏幕的离散二维平面上，这一过
   
 　　 程称为 paint ; 现代浏览器为提升性能，将页面划分多个 layer，各自进行
paint 然后组合成一个页面（composite layers）。20.对前端界面工程师这个职位是怎么样理解的？它的前景会怎么样？看好！