Web前端测试题(多套)

D、< li >…< ol >…

29. window对象的方法中，(A ）方法是用于弹出确认对话框，可让选择“确定”或“取消”

A、confirm() B、alert() C、prompt() D、open()

30. 以下JavaScript变量名不合法的有（AC B）（多选题）?

A、4Myvariable B、My@variable C、function D、Myvariable4

31. 在JavaScript程序中加入注释，方法有（AB）(多选题)

A、//注释内容 B、/*注释内容*/ C、/注释内容 D、/*注释内容

32. 如果想在一个指定的元素后添加内容，下面哪个是实现该功能的？D

A、append(content) B、prepend(content) C、before(content) D、after(content)

33. 下面对表单的POST提交方式描述不正确的是（ A ）。

A. 若直接在地址栏中输入URL按回车按GET方式提交； B. 若属性method不指定任何值或者不加属性method，默认按GET方式提交；

C. 只有在method指定为POST时才按POST方式提交；

D. POST提交是将表单字段信息放置到请求头中；

34. 在jquey中，如果想要从DOM中删除所有匹配的元素，下面哪一个是正确的C

A、delete() B、empty() C、remove() D、removeAll()

35. 如何找到表单中隐藏的div？D

A、$("div:none") B、$("div:invisiable") C、$("div:even") D、$("div:hidden")

36. 在jquery中想要找到div元素的后辈div元素，下面哪一个是可以实现的？C

A、$(div div) B、$() C、$(div~div) D、$(div+div)

37.关于HTML5说法正确的是：C

A、HTML5只是对HTML4的一个简单升级

B、所有浏览器都支持HTML5

C、HTML5新增了离线缓存机制

D、HTML5书写格式要求必须按照书写规范

38. 关于javascript语言说法错误的是？C

ript是目前Web应用程序开发者使用最为广泛的客户端脚本编程语言。

ript是网景公司专为Navigator浏览器开发、实现网页内容交互的功能。

ript是由SUN公司开发的。

ript是一个为了规范Javascript语言而产生的国际标准。

39. 表达式5+22/2%2的计算结果是：B

A.5 B.6 C.7 D.8

40. 关于文档对象模型（Document Object Model），如下说法错误的是：C

A. DOM能够以编程方式访问和操作web页面内容。

B. DOM允许通过对象的属性和方法访问页面中的对象。

C. DOM能够创建动态的文档内容，但是不能删除文档对象。

D. DOM也提供了处理事件的接口，它允许捕获和响应用户以及浏览器的动作。

二、简答题

1. display:none和visibility:hidden的区别是什么?

答：display:none 不为被隐藏的对象保留其物理空间

visibility：hidden 为被隐藏的对象保留其物理空间

也就是display:;当他的值变成block 的时候，它所在的结构才会被加载进来。 而visibility就会在加载页面的同时就已经把它加载进来了，

因为他的值为hidden的时候，它所占的空间还在。

2. 如何居中div？

答:设置宽度：还设置 margin: 0px auto;

3. 编写一个正则表达式：判断字符串是否是这样组成的，第一个必须是字母，后面可以是字母、数字、下划线，总长度为5-20

答：var reg=/^[A-Za-z]w{4,19}$/；

alert(("avcd12345"));

4. 使用字符串函数来截取字符串中的efg

var str="ddfjfjkefg";

alert((7,3))

5. CSS的盒子模型由什么组成？

1.内容（content）————我们往往给块级元素设置高度和宽度就是内容的高度和宽度

2.边框（border）————边框的粗细是盒子的一部分（四个边框）

3.内边距（padding）————内容和边框的距离（四个方向）

4.外边距（margin）————边框四周的空间，距离父容器的距离（四个方向）

6、什么是web标准？

WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为 （Behavior）。

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

7、XHTML与HTML有什么区别？你觉得应该使用哪一个，并说出理由。

XHTML1.0和HTML4.01之间的主要差异是它遵守XML编码约定。

标签不能重叠,可以嵌套

标签与属性都要小写

标签都要有始有终,要么以

每个属性都要有属性值,并且属性值要在双引号中， 别用name用id 试题三

1.行内元素有哪些？块级元素有哪些？他们有什么区别？

2.都有什么盒子模式？区别时什么？

3.五大浏览器有哪些？这些浏览器的内核分别时什么？

选择符有哪些？

n属性absolute与relative的区别？

6.简述html5和css3的新特性.

7.请写出一个表格背景以及对应的css，使表格奇数行为白色，偶数行为灰色背景

有哪些基本类型？

9.例举3中强制类型转换和2种隐式类型转换？

ript定义var a = ‘40’，var b = 7,则执行a%b会得到什么结果?

11.如何利用jQuery来想一个元素中添加和一处css类？

中$.get()提交和&.post()提交有区别吗？如果有，请说明。

13.写出一个简单的$.ajax()的请求方式？

14.下面这个JS程序的输出是什么？

var a = "undefined"；

var b = "false";

var c = "";

function ass(aVar){

if(aVar){

alert(true);

}else{

alert(fales)'

}

}

15.下面这个JS程序的输出结果是什么?

function foo(){

var i = 0;

return funtion(){

(i++);

} }

var f1 = foo();

f2 = foo();

f1();

f2():

f1();

试题四

1. 一个200*200的div在不同分辨率屏幕上下左右居中，用css实现

div

{

position:absolute;

width:200px;

height:200px;

top:50%;

left:50%;

margin-left:-100px;

height:-100px;

z-index:1000;

}

2. 写一个左中右布局占满屏幕，其中左右两块是固定宽度200 ，中间自适应宽，要求先加载中间块，请写出结构及样式：

实现三列宽度自适应布局

html,body{ margin: 0px;width: 100%; }

h3{height: 100px;margin:20px 0 0;}

#left,#right{width: 200px;height: 200px; background-color: #ffe6b8;position: absolute;top:120px;}

#left{left:0px;}

#right{right: 0px;}

#center{margin:2px 210px ;background-color: #eee;height: 200px;

}

3. 阐述清楚浮动的几种方式（常见问题）

1.父级div定义 height

原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。

优点：简单、代码少、容易掌握

缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题

2.父级div定义 overflow:hidden

原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度

优点：简单、代码少、浏览器支持好

4. 结尾处加空div标签 clear:both

原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度

优点：简单、代码少、浏览器支持好、不容易出现怪问题

缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不好

5. 解释css sprites ，如何使用？

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。

CSS Sprites为一些大型的网站节约了带宽，让提高了用户的加载速度和用户体验，不需要加载更多的图片

6. 如何用原生js给一个按钮绑定两个onclick事件？

Var btn=mentById(‘btn’);

//事件监听 绑定多个事件

var btn4 = mentById("btn4");

ntListener("click",hello1);

ntListener("click",hello2); function hello1(){

alert("hello 1");

}

function hello2(){

alert("hello 2");

}

7. 拖拽会用到哪些事件

dragstart:拖拽开始时在被拖拽元素上触发此事件,监听器需要设置拖拽所需数据,从操作系统拖拽文件到浏览器时不触发此事件.

dragenter:拖拽鼠标进入元素时在该元素上触发,用于给拖放元素设置视觉反馈,如高亮

dragover:拖拽时鼠标在目标元素上移动时触发.监听器通过阻止浏览器默认行为设置元素为可拖放元素.

dragleave:拖拽时鼠标移出目标元素时在目标元素上触发.此时监听器可以取消掉前面设置的视觉效果.

drag:拖拽期间在被拖拽元素上连续触发

drop:鼠标在拖放目标上释放时,在拖放目标上触发.此时监听器需要收集数据并且执行所需操作.如果是从操作系统拖放文件到浏览器,需要取消浏览器默认行为. · dragend:鼠标在拖放目标上释放时,在拖拽元素上触发.将元素从浏览器拖放到操作系统时不会触发此事件.

8. 请列举jquery中的选择器：

9. Javascript中的定时器有哪些？他们的区别及用法是什么？

setTimeout 只执行一次

setInterval 会一直重复执行

9.请描述一下 cookies sessionStorage和localstorage区别

相同点：都存储在客户端

不同点：1.存储大小

cookie数据大小不能超过4k。

sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

2. 有效时间

localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；

sessionStorage 数据在当前浏览器窗口关闭后自动删除。

cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

3. 数据与服务器之间的交互方式

cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端

sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

10.计算一个数组arr所有元素的和

var arr1=[1,2,3,4,5,6,7,8,9];

var sum1=0;

for (var i=0;i<=;i++) {

if (typeof arr1[i]=="number") {

sum1+=arr1[i];

}

}

(sum1);

//====================================

function sum2(arr){

var all=0;

for (var i=0;i<;i++) {

if (typeof arr[i]=="number") {

all+=arr[i];

}

}

return all;

}

(sum2([1,2,3,4]));

11.编写一个方法去掉数组里面 重复的内容 var arr=[1,2,3,4,5,1,2,3]一个数组去重的简单实现

var arr = ['abc','abcd','sss','2','d','t','2','ss','f','22','d'];

//定义一个新的数组

var s = [];

//遍历数组

for(var i = 0;i<;i++){ if(f(arr[i]) == -1){ //判断在s数组中是否存在，不存在则push到s数组中

(arr[i]);

}

}

(s);

//输出结果：["abc", "abcd", "sss", "2", "d", "t", "ss", "f", "22"]

方法二：用sort() 然后相邻比较也可以实现

和innerHTML的区别：

是直接写入到页面的内容流，如果在写之前没有调用, 浏览器会自动调用open。每次写完关闭之后重新调用该函数，会导致页面被重写。

innerHTML则是DOM页面元素的一个属性，代表该元素的html内容。你可以精确到某一个具体的元素来进行更改。如果想修改document的内容，则需要修改lement。

innerHTML将内容写入某个DOM节点，不会导致页面全部重绘

innerHTML很多情况下都优于，其原因在于其允许更精确的控制要刷新页面的那一个部分。

的步骤 什么是ajax?

ajax(异步javascript xml) 能够刷新局部网页数据而不是重新加载整个网页。 如何使用ajax?

第一步，创建xmlhttprequest对象，var xmlhttp =new XMLHttpRequest（);XMLHttpRequest对象用来和服务器交换数据。

var xhttp;

if (pRequest) {

//现代主流浏览器

xhttp = new XMLHttpRequest();

} else {

// 针对浏览器，比如IE5或IE6

xhttp = new ActiveXObject("P");

}

第二步，使用xmlhttprequest对象的open（）和send（）方法发送资源请求给服务器。

第三步，使用xmlhttprequest对象的responseText或responseXML属性获得服务器的响应。 第四步，onreadystatechange函数，当发送请求到服务器，我们想要服务器响应执行一些功能就需要使用onreadystatechange函数，每次xmlhttpreques对象的readyState发生改变都会触发onreadystatechange函数

和json的区别，请用四个词语来形容

JSON相对于XML来讲，数据的体积小，传递的速度更快些

JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互

XML对数据描述性比较好；

JSON的速度要远远快于XML

15.清楚浮动的方法？

1.父级div定义 height

原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。

优点：简单、代码少、容易掌握

缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题

2，结尾处加空div标签 clear:both

原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度

优点：简单、代码少、浏览器支持好、不容易出现怪问题

缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不好

3，父级div定义 伪类:after 和 zoom

原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题

优点：浏览器支持好、不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等） 缺点：代码多、不少初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持

4，父级div定义 overflow:hidden

原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度

优点：简单、代码少、浏览器支持好

缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。

-sizing常用的属性有哪些？分别有什么作用？

属性值

· box-sizing：content-box

· box-sizing：border-box

· box-sizing：inherit

content-box

· 这是box-sizing的默认属性值

· 是CSS2.1中规定的宽度高度的显示行为 · 在CSS中定义的宽度和高度就对应到元素的内容框

· 在CSS中定义的宽度和高度之外绘制元素的内边距和边框

border-box

· 在CSS中微元素设定的宽度和高度就决定了元素的边框盒

· 即为元素在设置内边距和边框是在已经设定好的宽度和高度之内进行绘制

· CSS中设定的宽度和高度减去边框和内间距才能得到元素内容所占的实际宽度和高度

(Q1)box-sizing: content-box|border-box|inherit;

(Q2)content-box:宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框(元素默认效果)。

border-box:元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

选择器有哪些，选择器的权重的优先级

选择器类型 1、ID #id

2、class .class

3、标签 p

4、通用 *

5、属性 [type="text"]

6、伪类 ：hover

7、伪元素 ::first-line

8、子选择器、相邻选择器

三、权重计算规则

1. 第一等：代表内联样式，如: style=””，权值为1000。

2. 第二等：代表ID选择器，如：#content，权值为0100。

3. 第三等：代表类，伪类和属性选择器，如.content，权值为0010。 4. 第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。

5. 通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。

6. 继承的样式没有权值。

18. 块级元素水平垂直居中的方法有哪些（三个方法）

让div等块级元素水平和垂直都居中，即永远处于屏幕的正中央，当我们做如登录块时非常有用！

实现一、原理：要让div等块级元素水平和垂直居中，必需知道该div等块级元素的宽度和高度，然后设置位置为绝对位置，距离页面窗口左边框和上边框的距离设置为50%，这个50%就是指页面窗口的宽度和高度的50%，最后将该div等块级元素分别左移和上移，左移和上移的大小就是该div等块级元素宽度和高度的一半。

CSS代码：

.mycss{

width:300px;

height:200px;

position:absolute;

left:50%;

top:50%;

margin:-100px 0 0 -150px }

实现二原理：利用CSS的margin设置为auto让浏览器自己帮我们水平和垂直居中。

CSS代码：

.mycss{

position: absolute;

left: 0px;

right: 0;

top: 0;

bottom: 0; margin: auto;

height: 200px;

width: 300px;

}

jQuery实现水平和垂直居中

原理：jQuery实现水平和垂直居中的原理就是通过jQuery设置div等块级元素的CSS，获取div等块级元素的左、上的边距偏移量，边距偏移量的算法就是用页面窗口 的宽度减去该div等块级元素的宽度，得到的值再除以2即左偏移量，右偏移量算法相同。注意div等块级元素的CSS设置要在resize()方法中完成，就是每次改变窗口大 小时，都要执行设置div等块级元素的CSS。

jquery代码：

$(window).resize(function(){

$(".myblock").css({

position: "absolute",

left: ($(window).width() -

$(".myblock").outerWidth())/2,

top: ($(window).height() -

$(".myblock").outerHeight())/2 });

});

此外在页面载入时，就需要调用resize()方法

$(function(){

$(window).resize();

});

19.三个盒子，左右定宽，中间自适应有几种方法

第一种：左右侧采用浮动 中间采用margin-left 和 margin-right 方法。代码如下：

第二种：左右两侧采用绝对定位 中间同样采用margin-left margin-right方法：

第三种负的margin

使用这种方法就稍微复杂了一些了，使用的是负的margin值，而且html标签也增加了，先来看其代码吧：

#main {

float: left;

width: 100%;

}

#mainContainer {

margin: 0 230px;

height: 200px;

background: green;

}

#left {

float: left;

margin-left: -100%;

width: 230px}

#right {

float: left;

margin-left: -230px;

width: 230px;

}

#left .inner,

#right .inner {

background: orange;

margin: 0 10px;

height: 200px;

}

有几种数据类型，其中基本数据类型有哪些

五种基本类型: Undefined、Null、Boolean、Number和String。

1中复杂的数据类型————Object，Object本质上是由一组无序的名值对组成的。

Object、Array和Function则属于引用类型

ned 和 null 区别

null： Null类型，代表“空值”，代表一个空对象指针，使用typeof运算得到 “object”，所以你可以认为它是一个特殊的对象值。

undefined： Undefined类型，当一个声明了一个变量未初始化时，得到的就是undefined。

null是javascript的关键字，可以认为是对象类型，它是一个空对象指针，和其它语言一样都是代表“空值”，不过 undefined 却是javascript才有的。undefined是在ECMAScript第三版引入的，为了区分空指针对象和未初始化的变量，它是一个预定义的全局变量。没有返回值的函数返回为undefined，没有实参的形参也是undefined。

javaScript权威指南： null 和 undefined 都表示“值的空缺”，你可以认为undefined是表示系统级的、出乎意料的或类似错误的值的空缺，而null是表示程序级的、正常的或在意料之中的值的空缺。

和 https 有何区别？如何灵活使用？

http是HTTP协议运行在TCP之上。所有传输的内容都是明文，客户端和服务器端都无法验证对方的身份。

https是HTTP运行在SSL/TLS之上，SSL/TLS运行在TCP之上。所有传输的内容都经过加密，加密采用对称加密，但对称加密的密钥用服务器方的证书进行了非对称加密。此外客户端可以验证服务器端的身份，如果配置了客户端验证，服务器方也可以验证客户端的身份

23.常见的HTTP状态码

2开头 （请求成功）表示成功处理了请求的状态代码。

200 （成功） 服务器已成功处理了请求。 通常，这表示服务器提供了请求的网页。

201 （已创建） 请求成功并且服务器创建了新的资源。

202 （已接受） 服务器已接受请求，但尚未处理。

203 （非授权信息） 服务器已成功处理了请求，但返回的信息可能来自另一来源。

204 （无内容） 服务器成功处理了请求，但没有返回任何内容。

205 （重置内容） 服务器成功处理了请求，但没有返回任何内容。

206 （部分内容） 服务器成功处理了部分 GET 请求。

3开头 （请求被重定向）表示要完成请求，需要进一步操作。 通常，这些状态代码用来重定向。

300 （多种选择） 针对请求，服务器可执行多种操作。 服务器可根据请求者 (user agent) 选择一项操作，或提供操作列表供请求者选择。

301 （永久移动） 请求的网页已永久移动到新位置。 服务器返回此响应（对 GET 或 HEAD 请求的响应）时，会自动将请求者转到新位置。

302 （临时移动） 服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。

303 （查看其他位置） 请求者应当对不同的位置使用单独的 GET 请求来检索响应时，服务器返回此代码。

304 （未修改） 自从上次请求后，请求的网页未修改过。 服务器返回此响应时，不会返回网页内容。

305 （使用代理） 请求者只能使用代理访问请求的网页。 如果服务器返回此响应，还表示请求者应使用代理。

307 （临时重定向） 服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。

4开头 （请求错误）这些状态代码表示请求可能出错，妨碍了服务器的处理。

400 （错误请求） 服务器不理解请求的语法。

401 （未授权） 请求要求身份验证。 对于需要登录的网页，服务器可能返回此响应。

403 （禁止） 服务器拒绝请求。

404 （未找到） 服务器找不到请求的网页。

405 （方法禁用） 禁用请求中指定的方法。

406 （不接受） 无法使用请求的内容特性响应请求的网页。

407 （需要代理授权） 此状态代码与 401（未授权）类似，但指定请求者应当授权使用代理。

408 （请求超时） 服务器等候请求时发生超时。

409 （冲突） 服务器在完成请求时发生冲突。 服务器必须在响应中包含有关冲突的信息。

410 （已删除） 如果请求的资源已永久删除，服务器就会返回此响应。

411 （需要有效长度） 服务器不接受不含有效内容长度标头字段的请求。

412 （未满足前提条件） 服务器未满足请求者在请求中设置的其中一个前提条件。

413 （请求实体过大） 服务器无法处理请求，因为请求实体过大，超出服务器的处理能力。

414 （请求的 URI 过长） 请求的 URI（通常为网址）过长，服务器无法处理。

415 （不支持的媒体类型） 请求的格式不受请求页面的支持。

416 （请求范围不符合要求） 如果页面无法提供请求的范围，则服务器会返回此状态代码。

417 （未满足期望值） 服务器未满足"期望"请求标头字段的要求。

5开头（服务器错误）这些状态代码表示服务器在尝试处理请求时发生内部错误。

这些错误可能是服务器本身的错误，而不是请求出错。

500 （服务器内部错误） 服务器遇到错误，无法完成请求。

501 （尚未实施） 服务器不具备完成请求的功能。 例如，服务器无法识别请求方法时可能会返回此代码。

502 （错误网关） 服务器作为网关或代理，从上游服务器收到无效响应。

503 （服务不可用） 服务器目前无法使用（由于超载或停机维护）。 通常，这只是暂时状态。

504 （网关超时） 服务器作为网关或代理，但是没有及时从上游服务器收到请求。

505 （HTTP 版本不受支持） 服务器不支持请求中所用的 HTTP 协议版本。

24. 如何进行网站性能优化

1. 从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好的体验。

2. 从服务商角度而言，优化能够减少页面请求数、或者减小请求所占带宽，能够节省可观的资源。

总之，恰当的优化不仅能够改善站点的用户体验并且能够节省相当的资源利用。

前端优化的途径有很多，按粒度大致可以分为两类，第一类是页面级别的优化，例如 HTTP请求数、脚本的无阻塞加载、内联脚本的位置优化等 ;第二类则是代码级别的优化，例如 Javascript中的DOM 操作优化、CSS选择符优化、图片优化以及 HTML结构优化等等。另外，本着提高投入产出比的目的，后文提到的各种优化策略大致按照投入产出比从大到小的顺序排列。

一、页面级优化

1. JavaScript 压缩和模块打包

2. 按需加载资源

3. 在使用 DOM 操作库时用上 array-ids 4. 缓存

5. 启用 HTTP/2

6. 应用性能分析

7. 使用负载均衡方案

8. 为了更快的启动时间考虑一下同构

9. 使用索引加速数据库查询

10. 使用更快的转译方案

11. 避免或最小化 JavaScript 和 CSS 的使用而阻塞渲染

12. 用于未来的一个建议：使用 service workers + 流

13. 图片编码优化

25. react和vue有哪些不同，说说你对这两个框架的看法

相同点

都支持服务器端渲染

都有Virtual DOM,组件化开发,通过props参数进行父子组件数据的传递,都实现webComponent规范

数据驱动视图

都有支持native的方案,React的React native,Vue的weex

不同点

React严格上只针对MVC的view层,Vue则是MVVM模式

virtual DOM不一样,vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树.而对于React而言,每当应用的状态被改变时,全部组件都会重新渲染,所以react中会需要shouldComponentUpdate这个生命周期函数方法来进行控制

· 组件写法不一样, React推荐的做法是 JSX + inline style, 也就是把HTML和CSS全都写进JavaScript了,即'all in js'; Vue推荐的做法是webpack+vue-loader的单文件组件格式,即html,css,jd写在同一个文件; · 数据绑定: vue实现了数据的双向绑定,react数据流动是单向的

· state对象在react应用中不可变的,需要使用setState方法更新状态;在vue中,state对象不是必须的,数据由data属性在vue对象中管理

26.什么是mvvm mvc是什么区别 原理

一、MVC（Model-View-Controller）

MVC是比较直观的架构模式，用户操作->View（负责接收用户的输入操作）->Controller（业务逻辑处理）->Model（数据持久化）->View（将结果反馈给View）。

MVC使用非常广泛，比如JavaEE中的SSH框架

三、MVVM（Model-View-ViewModel）

如果说MVP是对MVC的进一步改进，那么MVVM则是思想的完全变革。它是将“数据模型数据双向绑定”的思想作为核心，因此在View和Model之间没有联系，通过ViewModel进行交互，而且Model和ViewModel之间的交互是双向的，因此视图的数据的变化会同时修改数据源，而数据源数据的变化也会立即反应view。

和em的区别

px表示像素 (计算机屏幕上的一个点：1px = 1/96in)，是绝对单位，不会因为其他元素的尺寸变化而变化；

em表示相对于父元素的字体大小。em是相对单位 ，没有一个固定的度量值，而是由其他元素尺寸来决定的相对值。

28.优雅降级和渐进增强

渐进增强（Progressive Enhancement）：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。

优雅降级（Graceful Degradation）：一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。

其实渐进增强和优雅降级并非什么新概念，只是旧的概念换了一个新的说法。在传统软件开发中，经常会提到向上兼容和向下兼容的概念。渐进增强相当于向上兼容，而优雅降级相当于向下兼容

()的作用

把字符串参数解析成JS代码并运行，并返回执行的结果；

eval("2+3");//执行加运算，并返回运算值。

eval("varage=10");//声明一个age变量

eval的作用域

functiona(){

1. eval("var x=1"); //等效于 var x=1;

2023年8月1日发(作者：)

前端测试题

试题一

一．选择题

1. 要动态改变层中内容可以使用的方法有（AB ）

a)innerHTML

b)innerText

c)通过设置层的隐藏和显示来实现

d)通过设置层的样式属性的display属性

2. 当按键盘A时，使用onKeyDown事件打印e的结果是（A ）

a)65

b)13

c)97

d)37

3. 在javascript里，下列选项中不属于数组方法的是（B）；

a)sort()

b)length()

c)concat()

d)reverse()

4. 下列哪一个选项可以用来检索被选定的选项的索引号?(B)

a)disabled

b)selectedIndex

c)option d)multiple

5.希望图片具有”提交”按钮同样的功能,该如何编写表单提交?(A )

a)在图片的onClick事件中手动提交

b)在图片上添加onSubmit事件

c)在图片的onSubmit事件中手动提交

d)在表单中自动提交

6.下列选项中,描述正确的是(选择两项) 。( AD )

a)(new Option(„a‟,'A‟))可以动态添加一个下拉列表选项

b)(new Option(„a‟,'A‟))可以动态添加一个下拉列表选项

c)new Option(„a‟,'A‟)中‟a' 表示列表选项的值,‟A' 用于在页面中显示

d)new Option(„a‟,'A‟)中‟A' 表示列表选项的值‟a' 用于在页面中显示

7. var emp = new Array(3); for(var i in emp) 以下答案中能与for循环代码互换的是: （选择一项）。

(D )

A for(var i =0; i

B for(var i =0; i

C for(var i =0; i<(); i++)

D for(var i =0; i<; i++)

8. 制作级联菜单功能时调用的是下拉列表框的（A ）事件。

a)onChange

b)onFocus

c)selected

d)onClick 9. 下列声明数组的语句中，错误的选项是（C ）。

a)Var arry= new Array()

b)Var arry=new Array(3)

c)Var arry[]=new Array(3)(4)

d)Var arry=new Array(„3‟,‟4‟)

10. 下列属性哪一个能够实现层的隐藏?（C ）

a)display:fals

b)display:hidden

c)display:none

d)display:” ”

11. 下列哪一个选项不属于document对象的方法?（D ）

a)focus()

b)getElementById()

c)getElementsByName()

d)bgColor()

12. 下列哪项是按下键盘事件(AB )

a)onKeyDown

b)onKeyPress

c)keyCode

d)onMouseOver

13. javascript进行表单验证的目的是（B ）

a)把用户的正确信息提交给服务器

b)检查提交的数据必须符合实际 c)使得页面变得美观、大方

d)减轻服务器端的压力

y属性值的常用取值不包括(C )

a)inline

b)block

c)hidden

d)none

15. 以下有关pixelTop属性与top属性的说法正确的是。(D )

a)都是Location对象的属性

b)使用时返回值都是字符串

c)都是返回以像素为单位的数值

d)以上都不对

16. 使用open方法打开具有浏览器工具条,地址栏,菜单栏的窗口，下列选项正确的是__D__

a)open("","HI","toolbas=1,scrollbars=1,status=1");

b)open("HI","scrollbars=1,location=1,status=1");

c)open("","status=yes,menubar=1,location=1");

d)open("","HI","toolbas=yes,menubar=1,location=1");

17. 下面关闭名为mydiv的层的代码正确的是(C )

a)mentById(mydiv).y="none";

b)mentById("mydiv").y=none;

c)mentById("mydiv").y="none";

d)mentById("mydiv").y=="none";

18. javascript中表达式parseInt(“X8X8”)+paseFloat(„8‟)的结果是什么?( C) a)8+8

b)88

c)16

d)“8”+‟8

19. String对象的方法不包括(C )

a)charAt()；

b)substring()

c)length

d)toUpperCase()

20. 关于setTimeout(“check”,10)中说法正确的是( D)

a)程序循环执行10次

b)Check函数每10秒执行一次

c)10做为参数传给函数check

d)Check函数每10毫秒执行一次

21. 以下哪个单词不属于javascript关键字：（C）

a)with

b)parent

c)class

d)void

二．简答题

1、html5为什么只需要写?

答：html5不是基于sgml（标准通用标记语言），不需要对dtd文件进行引用，但是需要doctype来规范浏览器的行为， 否则浏览器将开启怪异模式，而html4.01基于sgml，需要引入dtd，才能告知浏览器文档使用的文档类型

2、行内元素有哪些？块级元素有哪些？空（void）元素有哪些？

行内元素有：a b span img input select strong（强调的语气）

块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p

知名的空元素：

鲜为人知的是：

3、页面导入样式时，使用link和@import有什么区别？

两者都是外部引用CSS的方式，但是存在一定的区别：

区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。

区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

区别4：link支持使用Javascript控制DOM去改变样式；而@import不支持。

补充：@import最优写法 @import的写法一般有下列几种：

@import ‘’ //Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别

@import “” //Windows IE4/ NS4, Macintosh IE4/NS4不识别

@import url() //Windows NS4, Macintosh NS4不识别

@import url(‘’) //Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别

@import url(“”) //Windows NS4, Macintosh NS4不识别

由上分析知道，@import url() 和@import url(“”)是最优的选择，兼容的浏览器最多。

从字节优化的角度来看@import url()最值得推荐。

4、常见的浏览器内核有哪些？

使用Trident内核的浏览器：IE、Maxthon、TT、The World等；

使用Gecko内核的浏览器：Netcape6及以上版本、FireFox、MozillaSuite/SeaMonkey；

使用Presto内核的浏览器：Opera7及以上版本；

使用Webkit内核的浏览器：Safari、Chrome。

5、html5有哪些新特性？移除了哪些元素？如何处理HTML5新标签的浏览器兼容性问题？如何区分html和html5？

新增的元素有绘画 canvas ，用于媒介回放的 video 和 audio 元素，本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失，而sessionStorage的数据在浏览器关闭后自动删除，此外，还新增了以下的几大类元素。

内容元素，article、footer、header、nav、section。 表单控件，calendar、date、time、email、url、search。

控件元素，webworker, websockt, Geolocation。

移出的元素有下列这些：

显现层元素：basefont，big，center，font, s，strike，tt，u。

性能较差元素：frame，frameset，noframes。

如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？

处理兼容问题有两种方式：

8/IE7/IE6支持通过document.方法产生的标签，利用这一特性让这些浏览器支持HTML5新标签。

2.使用是html5shim框架

另外，DOCTYPE声明的方式是区分HTML和HTML5标志的一个重要因素，此外，还可以根据新增的结构、功能元素来加以区分。

6、iframe有哪些优缺点？

优点：

1.用来实现长连接，在websocket不可用的时候作为一种替代，最开始由google发明。Comet：基于 HTTP 长连接的”服务器推”技术

2.跨域通信。JavaScript跨域总结与解决办法 ，类似的还有浏览器多页面通信，比如音乐播放器，用户如果打开了多个tab页，应该只有一个在播放。

3.历史记录管理，解决ajax化网站响应浏览器前进后退按钮的方案，在html5的history api不可用时作为一种替代。

4.纯前端的utf8和gbk编码互转。比如在utf8页面需要生成一个gbk的encodeURIComponent字符串，可以通过页面加载一个gbk的iframe，然后主页面与子页面通信的方式实现转换，这样就不用在页面上插入一个非常巨大的编码映射表文件了

缺点：

1、在网页中使用框架结构最大的弊病是搜索引擎的”蜘蛛”程序无法解读这种页面。当”蜘蛛”程序遇到由数个框架组成的网页时，它们只看到框架而 无法找到链接，因此它们会以为该网站是个死站点，并且很快转身离去。对一个网站来说这无异于一场灾难。

如果你想销售产品，你需要客户;如想得到客户，你首先要让人们访问你的网站，而要做到这一点，你就非求助于搜索引擎不可。你花费了大量的时间、

精力和金钱开设了一家网上商店，却又故意不让搜索引擎检索你，这就好象开家零售商店，却将窗户全部漆成黑色，而且还不挂任何招牌一样。

2、框架结构有时会让人感到迷惑，特别是在几个框架中都出现上下、左右滚动条的时候。这些滚动条除了会挤占已经非常有限的页面空间外，还会分散 访问者的注意力。访问者遇到这种网站往往会立刻转身离开。他们会想，既然你的主页如此混乱，那么网站的其他部分也许更不值得浏览。

3、链接导航问题。使用框架结构时，你必须保证正确设置所有的导航链接，如不然，会给访问者带来很大的麻烦。比如被链接的页面出现在导航框架 内，这种情况下访问者便被陷住了，因为此时他没有其他地方可去。

7、label的作用是什么？是怎么使用的？

Label 中有两个属性是非常有用的,一个是FOR、另外一个就是ACCESSKEY了。

FOR属性

功能：表示Label标签要绑定的HTML元素，你点击这个标签的时候，所绑定的元素将获取焦点。

用法：姓名

ACCESSKEY属性：

功能：表示访问Label标签所绑定的元素的热键，当您按下热键，所绑定的元素将获取焦点。

用法：姓名

ID=”InputBox” type=”text”>

局限性：accessKey属性所设置的快捷键不能与浏览器的快捷键冲突，否则将优先激活浏览器的快捷键。

8、实现不使用border，画出1px高的线，在不同浏览器下的Quirksmode和CSSCompat模式下都能保持一致的效果？

9、元素竖向的百分比设定是相对于容器的高度吗？

答：相对于父容器的宽度

10、设置元素浮动后，该元素的display值是多少？

display:block;

11、display:inline-block什么时候会显示间隙？

1.给 父元素 写font-size:0

2.把标签写到一行，不要在编辑器里敲回车换行，但是这种写法对于标签很多的情况可读性太差，适用与例如这样简单的结构

12、什么是window对象？什么是document对象？

window它是一个顶层对象,而不是另一个对象的属性即浏览器的窗口。

document对象是window对象的一个对象属性

试题二

一、选择题

1.下列元素中，为行内元素的是（B）。

C.p

D.h3

2.下列HTML代码中，能在新窗口中打开新浪首页的是（C）。

A. 新浪

B. 新浪

C. 新浪

D. 新浪

3.需要创建一个多选框，且和文本关联起来（单击文本就像单击核选框一样）。下列 HTML 代码中，正确的是（D）。

A.记住我

B.记住我

C.记住我

D.记住我

4.下列方法中，能让网页中第5个div隐藏的是（C）。

A.$("div:5th-child").hide()

B.$("div:5th-child").hidden()

C.$("div:nth-child(5)").hide()

D.$("div:nth-child(5)").hidden()

5.有内部样式表定义如下：

同时，有 html 代码如下所示：

p text

段落中的文本”p text“的最终显示效果是（A）。

A.蓝色文本，字体大小为 15pt，背景色为灰色

B.蓝色文本，默认字体大小，背景色为灰色

C.蓝色文本，字体大小为 15pt，无背景色

D.红色文本，字体大小为 15pt，无背景色

6.下列引用外部样式表 的语句中，正确的是（D）。

A.

B.

C. D.

7. 查看如下 html 代码：

主页

个人中心

现需要定义样式，实现：当鼠标移入”帮助“链接上时，文本”帮助“的字体大小变为 20pt，而其他链接不变。下列样式定义中，正确的是（D）。

A.a:hover {font-size:20pt;}

a:hover {font-size:20pt;}

C.#header a {font-size:20pt;}

D.#header a:hover {font-size:20pt;}

8.查看如下样式定义：

.A .B { font-weight:bold;}

下列选项中，文本加粗显示的是（C）。

A.文本A

B.文本B

C.

文本C

D.

文本C

9.查看如下 html 代码：

p text

此代码在页面上的显示效果为（A）。

A.

D、< li >…< ol >…

29. window对象的方法中，(A ）方法是用于弹出确认对话框，可让选择“确定”或“取消”

A、confirm() B、alert() C、prompt() D、open()

30. 以下JavaScript变量名不合法的有（AC B）（多选题）?

A、4Myvariable B、My@variable C、function D、Myvariable4

31. 在JavaScript程序中加入注释，方法有（AB）(多选题)

A、//注释内容 B、/*注释内容*/ C、/注释内容 D、/*注释内容

32. 如果想在一个指定的元素后添加内容，下面哪个是实现该功能的？D

A、append(content) B、prepend(content) C、before(content) D、after(content)

33. 下面对表单的POST提交方式描述不正确的是（ A ）。

A. 若直接在地址栏中输入URL按回车按GET方式提交； B. 若属性method不指定任何值或者不加属性method，默认按GET方式提交；

C. 只有在method指定为POST时才按POST方式提交；

D. POST提交是将表单字段信息放置到请求头中；

34. 在jquey中，如果想要从DOM中删除所有匹配的元素，下面哪一个是正确的C

A、delete() B、empty() C、remove() D、removeAll()

35. 如何找到表单中隐藏的div？D

A、$("div:none") B、$("div:invisiable") C、$("div:even") D、$("div:hidden")

36. 在jquery中想要找到div元素的后辈div元素，下面哪一个是可以实现的？C

A、$(div div) B、$() C、$(div~div) D、$(div+div)

37.关于HTML5说法正确的是：C

A、HTML5只是对HTML4的一个简单升级

B、所有浏览器都支持HTML5

C、HTML5新增了离线缓存机制

D、HTML5书写格式要求必须按照书写规范

38. 关于javascript语言说法错误的是？C

ript是目前Web应用程序开发者使用最为广泛的客户端脚本编程语言。

ript是网景公司专为Navigator浏览器开发、实现网页内容交互的功能。

ript是由SUN公司开发的。

ript是一个为了规范Javascript语言而产生的国际标准。

39. 表达式5+22/2%2的计算结果是：B

A.5 B.6 C.7 D.8

40. 关于文档对象模型（Document Object Model），如下说法错误的是：C

A. DOM能够以编程方式访问和操作web页面内容。

B. DOM允许通过对象的属性和方法访问页面中的对象。

C. DOM能够创建动态的文档内容，但是不能删除文档对象。

D. DOM也提供了处理事件的接口，它允许捕获和响应用户以及浏览器的动作。

二、简答题

1. display:none和visibility:hidden的区别是什么?

答：display:none 不为被隐藏的对象保留其物理空间

visibility：hidden 为被隐藏的对象保留其物理空间

也就是display:;当他的值变成block 的时候，它所在的结构才会被加载进来。 而visibility就会在加载页面的同时就已经把它加载进来了，

因为他的值为hidden的时候，它所占的空间还在。

2. 如何居中div？

答:设置宽度：还设置 margin: 0px auto;

3. 编写一个正则表达式：判断字符串是否是这样组成的，第一个必须是字母，后面可以是字母、数字、下划线，总长度为5-20

答：var reg=/^[A-Za-z]w{4,19}$/；

alert(("avcd12345"));

4. 使用字符串函数来截取字符串中的efg

var str="ddfjfjkefg";

alert((7,3))

5. CSS的盒子模型由什么组成？

1.内容（content）————我们往往给块级元素设置高度和宽度就是内容的高度和宽度

2.边框（border）————边框的粗细是盒子的一部分（四个边框）

3.内边距（padding）————内容和边框的距离（四个方向）

4.外边距（margin）————边框四周的空间，距离父容器的距离（四个方向）

6、什么是web标准？

WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为 （Behavior）。

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

7、XHTML与HTML有什么区别？你觉得应该使用哪一个，并说出理由。

XHTML1.0和HTML4.01之间的主要差异是它遵守XML编码约定。

标签不能重叠,可以嵌套

标签与属性都要小写

标签都要有始有终,要么以

每个属性都要有属性值,并且属性值要在双引号中， 别用name用id 试题三

1.行内元素有哪些？块级元素有哪些？他们有什么区别？

2.都有什么盒子模式？区别时什么？

3.五大浏览器有哪些？这些浏览器的内核分别时什么？

选择符有哪些？

n属性absolute与relative的区别？

6.简述html5和css3的新特性.

7.请写出一个表格背景以及对应的css，使表格奇数行为白色，偶数行为灰色背景

有哪些基本类型？

9.例举3中强制类型转换和2种隐式类型转换？

ript定义var a = ‘40’，var b = 7,则执行a%b会得到什么结果?

11.如何利用jQuery来想一个元素中添加和一处css类？

中$.get()提交和&.post()提交有区别吗？如果有，请说明。

13.写出一个简单的$.ajax()的请求方式？

14.下面这个JS程序的输出是什么？

var a = "undefined"；

var b = "false";

var c = "";

function ass(aVar){

if(aVar){

alert(true);

}else{

alert(fales)'

}

}

15.下面这个JS程序的输出结果是什么?

function foo(){

var i = 0;

return funtion(){

(i++);

} }

var f1 = foo();

f2 = foo();

f1();

f2():

f1();

试题四

1. 一个200*200的div在不同分辨率屏幕上下左右居中，用css实现

div

{

position:absolute;

width:200px;

height:200px;

top:50%;

left:50%;

margin-left:-100px;

height:-100px;

z-index:1000;

}

2. 写一个左中右布局占满屏幕，其中左右两块是固定宽度200 ，中间自适应宽，要求先加载中间块，请写出结构及样式：

实现三列宽度自适应布局

html,body{ margin: 0px;width: 100%; }

h3{height: 100px;margin:20px 0 0;}

#left,#right{width: 200px;height: 200px; background-color: #ffe6b8;position: absolute;top:120px;}

#left{left:0px;}

#right{right: 0px;}

#center{margin:2px 210px ;background-color: #eee;height: 200px;

}

3. 阐述清楚浮动的几种方式（常见问题）

1.父级div定义 height

原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。

优点：简单、代码少、容易掌握

缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题

2.父级div定义 overflow:hidden

原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度

优点：简单、代码少、浏览器支持好

4. 结尾处加空div标签 clear:both

原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度

优点：简单、代码少、浏览器支持好、不容易出现怪问题

缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不好

5. 解释css sprites ，如何使用？

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。

CSS Sprites为一些大型的网站节约了带宽，让提高了用户的加载速度和用户体验，不需要加载更多的图片

6. 如何用原生js给一个按钮绑定两个onclick事件？

Var btn=mentById(‘btn’);

//事件监听 绑定多个事件

var btn4 = mentById("btn4");

ntListener("click",hello1);

ntListener("click",hello2); function hello1(){

alert("hello 1");

}

function hello2(){

alert("hello 2");

}

7. 拖拽会用到哪些事件

dragstart:拖拽开始时在被拖拽元素上触发此事件,监听器需要设置拖拽所需数据,从操作系统拖拽文件到浏览器时不触发此事件.

dragenter:拖拽鼠标进入元素时在该元素上触发,用于给拖放元素设置视觉反馈,如高亮

dragover:拖拽时鼠标在目标元素上移动时触发.监听器通过阻止浏览器默认行为设置元素为可拖放元素.

dragleave:拖拽时鼠标移出目标元素时在目标元素上触发.此时监听器可以取消掉前面设置的视觉效果.

drag:拖拽期间在被拖拽元素上连续触发

drop:鼠标在拖放目标上释放时,在拖放目标上触发.此时监听器需要收集数据并且执行所需操作.如果是从操作系统拖放文件到浏览器,需要取消浏览器默认行为. · dragend:鼠标在拖放目标上释放时,在拖拽元素上触发.将元素从浏览器拖放到操作系统时不会触发此事件.

8. 请列举jquery中的选择器：

9. Javascript中的定时器有哪些？他们的区别及用法是什么？

setTimeout 只执行一次

setInterval 会一直重复执行

9.请描述一下 cookies sessionStorage和localstorage区别

相同点：都存储在客户端

不同点：1.存储大小

cookie数据大小不能超过4k。

sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

2. 有效时间

localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；

sessionStorage 数据在当前浏览器窗口关闭后自动删除。

cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

3. 数据与服务器之间的交互方式

cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端

sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

10.计算一个数组arr所有元素的和

var arr1=[1,2,3,4,5,6,7,8,9];

var sum1=0;

for (var i=0;i<=;i++) {

if (typeof arr1[i]=="number") {

sum1+=arr1[i];

}

}

(sum1);

//====================================

function sum2(arr){

var all=0;

for (var i=0;i<;i++) {

if (typeof arr[i]=="number") {

all+=arr[i];

}

}

return all;

}

(sum2([1,2,3,4]));

11.编写一个方法去掉数组里面 重复的内容 var arr=[1,2,3,4,5,1,2,3]一个数组去重的简单实现

var arr = ['abc','abcd','sss','2','d','t','2','ss','f','22','d'];

//定义一个新的数组

var s = [];

//遍历数组

for(var i = 0;i<;i++){ if(f(arr[i]) == -1){ //判断在s数组中是否存在，不存在则push到s数组中

(arr[i]);

}

}

(s);

//输出结果：["abc", "abcd", "sss", "2", "d", "t", "ss", "f", "22"]

方法二：用sort() 然后相邻比较也可以实现

和innerHTML的区别：

是直接写入到页面的内容流，如果在写之前没有调用, 浏览器会自动调用open。每次写完关闭之后重新调用该函数，会导致页面被重写。

innerHTML则是DOM页面元素的一个属性，代表该元素的html内容。你可以精确到某一个具体的元素来进行更改。如果想修改document的内容，则需要修改lement。

innerHTML将内容写入某个DOM节点，不会导致页面全部重绘

innerHTML很多情况下都优于，其原因在于其允许更精确的控制要刷新页面的那一个部分。

的步骤 什么是ajax?

ajax(异步javascript xml) 能够刷新局部网页数据而不是重新加载整个网页。 如何使用ajax?

第一步，创建xmlhttprequest对象，var xmlhttp =new XMLHttpRequest（);XMLHttpRequest对象用来和服务器交换数据。

var xhttp;

if (pRequest) {

//现代主流浏览器

xhttp = new XMLHttpRequest();

} else {

// 针对浏览器，比如IE5或IE6

xhttp = new ActiveXObject("P");

}

第二步，使用xmlhttprequest对象的open（）和send（）方法发送资源请求给服务器。

第三步，使用xmlhttprequest对象的responseText或responseXML属性获得服务器的响应。 第四步，onreadystatechange函数，当发送请求到服务器，我们想要服务器响应执行一些功能就需要使用onreadystatechange函数，每次xmlhttpreques对象的readyState发生改变都会触发onreadystatechange函数

和json的区别，请用四个词语来形容

JSON相对于XML来讲，数据的体积小，传递的速度更快些

JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互

XML对数据描述性比较好；

JSON的速度要远远快于XML

15.清楚浮动的方法？

1.父级div定义 height

原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。

优点：简单、代码少、容易掌握

缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题

2，结尾处加空div标签 clear:both

原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度

优点：简单、代码少、浏览器支持好、不容易出现怪问题

缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不好

3，父级div定义 伪类:after 和 zoom

原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题

优点：浏览器支持好、不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等） 缺点：代码多、不少初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持

4，父级div定义 overflow:hidden

原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度

优点：简单、代码少、浏览器支持好

缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。

-sizing常用的属性有哪些？分别有什么作用？

属性值

· box-sizing：content-box

· box-sizing：border-box

· box-sizing：inherit

content-box

· 这是box-sizing的默认属性值

· 是CSS2.1中规定的宽度高度的显示行为 · 在CSS中定义的宽度和高度就对应到元素的内容框

· 在CSS中定义的宽度和高度之外绘制元素的内边距和边框

border-box

· 在CSS中微元素设定的宽度和高度就决定了元素的边框盒

· 即为元素在设置内边距和边框是在已经设定好的宽度和高度之内进行绘制

· CSS中设定的宽度和高度减去边框和内间距才能得到元素内容所占的实际宽度和高度

(Q1)box-sizing: content-box|border-box|inherit;

(Q2)content-box:宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框(元素默认效果)。

border-box:元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

选择器有哪些，选择器的权重的优先级

选择器类型 1、ID #id

2、class .class

3、标签 p

4、通用 *

5、属性 [type="text"]

6、伪类 ：hover

7、伪元素 ::first-line

8、子选择器、相邻选择器

三、权重计算规则

1. 第一等：代表内联样式，如: style=””，权值为1000。

2. 第二等：代表ID选择器，如：#content，权值为0100。

3. 第三等：代表类，伪类和属性选择器，如.content，权值为0010。 4. 第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。

5. 通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。

6. 继承的样式没有权值。

18. 块级元素水平垂直居中的方法有哪些（三个方法）

让div等块级元素水平和垂直都居中，即永远处于屏幕的正中央，当我们做如登录块时非常有用！

实现一、原理：要让div等块级元素水平和垂直居中，必需知道该div等块级元素的宽度和高度，然后设置位置为绝对位置，距离页面窗口左边框和上边框的距离设置为50%，这个50%就是指页面窗口的宽度和高度的50%，最后将该div等块级元素分别左移和上移，左移和上移的大小就是该div等块级元素宽度和高度的一半。

CSS代码：

.mycss{

width:300px;

height:200px;

position:absolute;

left:50%;

top:50%;

margin:-100px 0 0 -150px }

实现二原理：利用CSS的margin设置为auto让浏览器自己帮我们水平和垂直居中。

CSS代码：

.mycss{

position: absolute;

left: 0px;

right: 0;

top: 0;

bottom: 0; margin: auto;

height: 200px;

width: 300px;

}

jQuery实现水平和垂直居中

原理：jQuery实现水平和垂直居中的原理就是通过jQuery设置div等块级元素的CSS，获取div等块级元素的左、上的边距偏移量，边距偏移量的算法就是用页面窗口 的宽度减去该div等块级元素的宽度，得到的值再除以2即左偏移量，右偏移量算法相同。注意div等块级元素的CSS设置要在resize()方法中完成，就是每次改变窗口大 小时，都要执行设置div等块级元素的CSS。

jquery代码：

$(window).resize(function(){

$(".myblock").css({

position: "absolute",

left: ($(window).width() -

$(".myblock").outerWidth())/2,

top: ($(window).height() -

$(".myblock").outerHeight())/2 });

});

此外在页面载入时，就需要调用resize()方法

$(function(){

$(window).resize();

});

19.三个盒子，左右定宽，中间自适应有几种方法

第一种：左右侧采用浮动 中间采用margin-left 和 margin-right 方法。代码如下：

第二种：左右两侧采用绝对定位 中间同样采用margin-left margin-right方法：

第三种负的margin

使用这种方法就稍微复杂了一些了，使用的是负的margin值，而且html标签也增加了，先来看其代码吧：

#main {

float: left;

width: 100%;

}

#mainContainer {

margin: 0 230px;

height: 200px;

background: green;

}

#left {

float: left;

margin-left: -100%;

width: 230px}

#right {

float: left;

margin-left: -230px;

width: 230px;

}

#left .inner,

#right .inner {

background: orange;

margin: 0 10px;

height: 200px;

}

有几种数据类型，其中基本数据类型有哪些

五种基本类型: Undefined、Null、Boolean、Number和String。

1中复杂的数据类型————Object，Object本质上是由一组无序的名值对组成的。

Object、Array和Function则属于引用类型

ned 和 null 区别

null： Null类型，代表“空值”，代表一个空对象指针，使用typeof运算得到 “object”，所以你可以认为它是一个特殊的对象值。

undefined： Undefined类型，当一个声明了一个变量未初始化时，得到的就是undefined。

null是javascript的关键字，可以认为是对象类型，它是一个空对象指针，和其它语言一样都是代表“空值”，不过 undefined 却是javascript才有的。undefined是在ECMAScript第三版引入的，为了区分空指针对象和未初始化的变量，它是一个预定义的全局变量。没有返回值的函数返回为undefined，没有实参的形参也是undefined。

javaScript权威指南： null 和 undefined 都表示“值的空缺”，你可以认为undefined是表示系统级的、出乎意料的或类似错误的值的空缺，而null是表示程序级的、正常的或在意料之中的值的空缺。

和 https 有何区别？如何灵活使用？

http是HTTP协议运行在TCP之上。所有传输的内容都是明文，客户端和服务器端都无法验证对方的身份。

https是HTTP运行在SSL/TLS之上，SSL/TLS运行在TCP之上。所有传输的内容都经过加密，加密采用对称加密，但对称加密的密钥用服务器方的证书进行了非对称加密。此外客户端可以验证服务器端的身份，如果配置了客户端验证，服务器方也可以验证客户端的身份

23.常见的HTTP状态码

2开头 （请求成功）表示成功处理了请求的状态代码。

200 （成功） 服务器已成功处理了请求。 通常，这表示服务器提供了请求的网页。

201 （已创建） 请求成功并且服务器创建了新的资源。

202 （已接受） 服务器已接受请求，但尚未处理。

203 （非授权信息） 服务器已成功处理了请求，但返回的信息可能来自另一来源。

204 （无内容） 服务器成功处理了请求，但没有返回任何内容。

205 （重置内容） 服务器成功处理了请求，但没有返回任何内容。

206 （部分内容） 服务器成功处理了部分 GET 请求。

3开头 （请求被重定向）表示要完成请求，需要进一步操作。 通常，这些状态代码用来重定向。

300 （多种选择） 针对请求，服务器可执行多种操作。 服务器可根据请求者 (user agent) 选择一项操作，或提供操作列表供请求者选择。

301 （永久移动） 请求的网页已永久移动到新位置。 服务器返回此响应（对 GET 或 HEAD 请求的响应）时，会自动将请求者转到新位置。

302 （临时移动） 服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。

303 （查看其他位置） 请求者应当对不同的位置使用单独的 GET 请求来检索响应时，服务器返回此代码。

304 （未修改） 自从上次请求后，请求的网页未修改过。 服务器返回此响应时，不会返回网页内容。

305 （使用代理） 请求者只能使用代理访问请求的网页。 如果服务器返回此响应，还表示请求者应使用代理。

307 （临时重定向） 服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。

4开头 （请求错误）这些状态代码表示请求可能出错，妨碍了服务器的处理。

400 （错误请求） 服务器不理解请求的语法。

401 （未授权） 请求要求身份验证。 对于需要登录的网页，服务器可能返回此响应。

403 （禁止） 服务器拒绝请求。

404 （未找到） 服务器找不到请求的网页。

405 （方法禁用） 禁用请求中指定的方法。

406 （不接受） 无法使用请求的内容特性响应请求的网页。

407 （需要代理授权） 此状态代码与 401（未授权）类似，但指定请求者应当授权使用代理。

408 （请求超时） 服务器等候请求时发生超时。

409 （冲突） 服务器在完成请求时发生冲突。 服务器必须在响应中包含有关冲突的信息。

410 （已删除） 如果请求的资源已永久删除，服务器就会返回此响应。

411 （需要有效长度） 服务器不接受不含有效内容长度标头字段的请求。

412 （未满足前提条件） 服务器未满足请求者在请求中设置的其中一个前提条件。

413 （请求实体过大） 服务器无法处理请求，因为请求实体过大，超出服务器的处理能力。

414 （请求的 URI 过长） 请求的 URI（通常为网址）过长，服务器无法处理。

415 （不支持的媒体类型） 请求的格式不受请求页面的支持。

416 （请求范围不符合要求） 如果页面无法提供请求的范围，则服务器会返回此状态代码。

417 （未满足期望值） 服务器未满足"期望"请求标头字段的要求。

5开头（服务器错误）这些状态代码表示服务器在尝试处理请求时发生内部错误。

这些错误可能是服务器本身的错误，而不是请求出错。

500 （服务器内部错误） 服务器遇到错误，无法完成请求。

501 （尚未实施） 服务器不具备完成请求的功能。 例如，服务器无法识别请求方法时可能会返回此代码。

502 （错误网关） 服务器作为网关或代理，从上游服务器收到无效响应。

503 （服务不可用） 服务器目前无法使用（由于超载或停机维护）。 通常，这只是暂时状态。

504 （网关超时） 服务器作为网关或代理，但是没有及时从上游服务器收到请求。

505 （HTTP 版本不受支持） 服务器不支持请求中所用的 HTTP 协议版本。

24. 如何进行网站性能优化

1. 从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好的体验。

2. 从服务商角度而言，优化能够减少页面请求数、或者减小请求所占带宽，能够节省可观的资源。

总之，恰当的优化不仅能够改善站点的用户体验并且能够节省相当的资源利用。

前端优化的途径有很多，按粒度大致可以分为两类，第一类是页面级别的优化，例如 HTTP请求数、脚本的无阻塞加载、内联脚本的位置优化等 ;第二类则是代码级别的优化，例如 Javascript中的DOM 操作优化、CSS选择符优化、图片优化以及 HTML结构优化等等。另外，本着提高投入产出比的目的，后文提到的各种优化策略大致按照投入产出比从大到小的顺序排列。

一、页面级优化

1. JavaScript 压缩和模块打包

2. 按需加载资源

3. 在使用 DOM 操作库时用上 array-ids 4. 缓存

5. 启用 HTTP/2

6. 应用性能分析

7. 使用负载均衡方案

8. 为了更快的启动时间考虑一下同构

9. 使用索引加速数据库查询

10. 使用更快的转译方案

11. 避免或最小化 JavaScript 和 CSS 的使用而阻塞渲染

12. 用于未来的一个建议：使用 service workers + 流

13. 图片编码优化

25. react和vue有哪些不同，说说你对这两个框架的看法

相同点

都支持服务器端渲染

都有Virtual DOM,组件化开发,通过props参数进行父子组件数据的传递,都实现webComponent规范

数据驱动视图

都有支持native的方案,React的React native,Vue的weex

不同点

React严格上只针对MVC的view层,Vue则是MVVM模式

virtual DOM不一样,vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树.而对于React而言,每当应用的状态被改变时,全部组件都会重新渲染,所以react中会需要shouldComponentUpdate这个生命周期函数方法来进行控制

· 组件写法不一样, React推荐的做法是 JSX + inline style, 也就是把HTML和CSS全都写进JavaScript了,即'all in js'; Vue推荐的做法是webpack+vue-loader的单文件组件格式,即html,css,jd写在同一个文件; · 数据绑定: vue实现了数据的双向绑定,react数据流动是单向的

· state对象在react应用中不可变的,需要使用setState方法更新状态;在vue中,state对象不是必须的,数据由data属性在vue对象中管理

26.什么是mvvm mvc是什么区别 原理

一、MVC（Model-View-Controller）

MVC是比较直观的架构模式，用户操作->View（负责接收用户的输入操作）->Controller（业务逻辑处理）->Model（数据持久化）->View（将结果反馈给View）。

MVC使用非常广泛，比如JavaEE中的SSH框架

三、MVVM（Model-View-ViewModel）

如果说MVP是对MVC的进一步改进，那么MVVM则是思想的完全变革。它是将“数据模型数据双向绑定”的思想作为核心，因此在View和Model之间没有联系，通过ViewModel进行交互，而且Model和ViewModel之间的交互是双向的，因此视图的数据的变化会同时修改数据源，而数据源数据的变化也会立即反应view。

和em的区别

px表示像素 (计算机屏幕上的一个点：1px = 1/96in)，是绝对单位，不会因为其他元素的尺寸变化而变化；

em表示相对于父元素的字体大小。em是相对单位 ，没有一个固定的度量值，而是由其他元素尺寸来决定的相对值。

28.优雅降级和渐进增强

渐进增强（Progressive Enhancement）：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。

优雅降级（Graceful Degradation）：一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。

其实渐进增强和优雅降级并非什么新概念，只是旧的概念换了一个新的说法。在传统软件开发中，经常会提到向上兼容和向下兼容的概念。渐进增强相当于向上兼容，而优雅降级相当于向下兼容

()的作用

把字符串参数解析成JS代码并运行，并返回执行的结果；

eval("2+3");//执行加运算，并返回运算值。

eval("varage=10");//声明一个age变量

eval的作用域

functiona(){

1. eval("var x=1"); //等效于 var x=1;