前端笔试题目houjian

来源：互联网发布：c gui qt 4编程源码编辑：程序博客网时间：2024/06/05 08:32

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）

行内元素特点

1、和其他元素都在一行上；
2、元素的高度、宽度、行高及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。


块级元素特点

1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%，除非设定一个宽度。


4.描述一下你所了解的html5和css3？
HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。

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、4

sessionStorage与页面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 elementonly leave one

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

//The sequence of the two array is notrequired.

mergeArray:function (arr1,arr2){

for (var i = 0 ; i <arr1.length ; i ++ ){

for(varj = 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个数字吗，存入一个数组，并排序。

原因：parseInt接收的是两个参数，map传递的是3个参数。

14.谈谈this对象的理解。

浅谈js之this对象

this往大了说无非就是全局中的和函数（方法）中的，只是这函数（方法）中的太过于复杂；

其实可以大致划分为五类：

全局下中【this】
函数中调用【foo（foo2（this））】（这里是指在函数中执行的函数即函数嵌套函数）
方法调用【obj.foo（this）】（这是是指对象调用函数时）
构造函数中【newFoo（this）】
apply和call中【foo.apply（obj）】

this是和执行环境有关，不是和声明函数有关，在你用this的时候要小心点，实在不确定是什么，你就alert一下，不就知道了

15.什么是闭包（closure），用代码表示并描述下。

闭包是指有权访问另一个函数作用域中变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域，将函数内部的变量和方法传递到外部。

闭包的特性：

1.函数内再嵌套函数
2.内部函数可以引用外层的参数和变量
3.参数和变量不会被垃圾回收机制回收

16.js延迟加载的方式有哪些。

1.使用setTimeout延迟方法的加载时间

$(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到页面加载显示完成，这个过程中都发生了什么？（流程说的越详细越好）

对于网址栏的URL不同的操作方式有不同的加载资源、获取数据的方式，下面的详细过程针对"在地址栏输入URL，按enter(回车)键加载资源"此种操作方式做解析，其它的方式的过程大同小异，差异会在后面再做分析。

　　1. 浏览器开启一个线程来处理这个请求，对URL判断如果是http协议就按照web方式处理；

　　2. 浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，会直接在屏幕中显示页面内容（此时没有向服务端发请求）。若没有，则进行下一步操作（后面需要向服务端发送请求）；

　　3. 通过DNS解析获取网址的IP地址;

　　4. 向真实IP地址服务器发起tcp连接，与浏览器建立tcp三次握手。

　　5. 握手成功后，进行HTTP协议会话，浏览器发送报头(请求报头);

　　6. 进入到web服务器上的 WebServer，如 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.对前端界面工程师这个职位是怎么样理解的？它的前景会怎么样？

看好！

0 0

前端笔试题目houjian

BFC的生成