Html5+js测试题(开发版)

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

------------------------------------------------

1. 谈谈你对js闭包的理解:

使用闭包主要是为了设计私有的方法和变量。闭包的优点是可以避免全局变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。

闭包三个特性:

①：函数嵌套函数 ;

②：函数内部可以引用外部的参数和变量 ;

③：参数和变量不会被垃圾回收机制回收

2.谈谈你对Cookie的理解和优缺点:【客户端】

cookie虽然在持久保存客户端数据提供了方便，分担了服务器存储的负担，但还是有很多局限性的;

每个特定的域名下最多生成20个cookie;IE和Opera 会清理近期最少使用的cookie，Firefox会随机清理cookie;cookie的最大大约为4096字节，为了兼容性，一般不能超过4095字节;

优点：极高的扩展性和可用性

1.通过良好的编程，控制保存在cookie中的session对象的大小。

2.通过加密和安全传输技术（SSL），减少cookie被破解的可能性。

3.只在cookie中存放不敏感数据，即使被盗也不会有重大损失。

4.控制cookie的生命期，使之不会永远有效。偷盗者很可能拿到一个过期的cookie。

缺点:

1.Cookie数量和长度的限制。每个domain最多只能有20条cookie，每个cookie长度不能超过4KB，否则会被截掉。

2.安全性问题。如果cookie被人拦截了，那人就可以取得所有的session信息。即使加密也与事无补，因为拦截者并不需要知道cookie的意义，他只要原样转发cookie就可以达到目的了。

3.有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端，那么它起不到任何作用。

3.html5浏览器本地存储有哪些?

在较高版本的浏览器中，js提供了sessionStorage和globalStorage。在HTML5中提供了localStorage来取代globalStorage。

html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。

sessionStorage:用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。

localStorage:用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

4.web storage和cookie的区别?

Web Storage的概念和cookie相似，区别是:

Web storage:1.是为了更大容量存储设计的。2.Web Storage拥有setItem,getItem,removeItem,clear等方法.3.Web Storage仅仅是为了在本地“存储”数据而生

Cookie:1.大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽;2.cookie还需要指定作用域，不可以跨域调用。3.需要前端开发者自己封装setCookie，getCookie.4.cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在;

**localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等**

5.cookie 和session 的区别：

1.cookie数据存放在客户的浏览器上，session数据放在服务器上。

2.cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗考虑到安全应当使用session。

3.session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能考虑到减轻服务器性能方面，应当使用COOKIE。

4.单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。

5.所以个人建议:将登陆信息等重要信息存放为SESSION其他信息如果需要保留,可以放在COOKIE中

6.display:none和visibility:hidden的区别？

display:none:隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不存在。

visibility:hidden:隐藏对应的元素，但是在文档布局中仍保留原来的空间。

7.position:absolute和float属性的异同

共同点：对内联元素设置`float`和`absolute`属性，可以让元素脱离文档流，并且可以设置其宽高。

不同点：float仍会占据位置，position会覆盖文档流中的其他元素。

8.介绍一下box-sizing属性？

box-sizing属性主要用来控制元素的盒模型的解析模式。默认值是content-box。

content-box：让元素维持W3C的标准盒模型。元素的宽度/高度由border + padding + content的宽度/高度决定，设置width/height属性指的是content部分的宽/高

border-box：让元素维持IE传统盒模型（IE6以下版本和IE6~7的怪异模式）。设置width/height属性指的是border + padding + content

标准浏览器下，按照W3C规范对盒模型解析，一旦修改了元素的边框或内距，就会影响元素的盒子尺寸，就不得不重新计算元素的盒子尺寸，从而影响整个页面的布局。

9.CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？CSS3新增伪类有那些？

1.id选择器（ # myid） 2.类选择器（.myclassname） 3.标签选择器（div, h1, p） 4.相邻选择器（h1 + p） 5.子选择器（ul > li） 6.后代选择器（li a） 7.通配符选择器（ * ） 8.属性选择器（a[rel = "external"]） 9.伪类选择器（a: hover, li:nth-child）

可继承的样式： font-size font-family color, text-indent;

不可继承的样式：border padding margin width height ;

优先级就近原则，同权重情况下样式定义最近者为准;

载入样式以最后载入的定位为准;

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 :单选框或复选框被选中。

10.position的值， relative和absolute分别是相对于谁进行定位的？

absolute :生成绝对定位的元素，相对于最近一级的定位不是 static 的父元素来进行定位。fixed （老IE不支持）生成绝对定位的元素，相对于浏览器窗口进行定位。

relative :生成相对定位的元素，相对于其在普通流中的位置进行定位。static 默认值。没有定位，元素出现在正常的流中（相对于父容器来说）

11.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
12.XML和JSON的区别？

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

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

3.数据描述方面。JSON对数据的描述性比XML较差。

4.传输速度方面。JSON的速度要远远快于XML。
13.说说你对语义化标签的理解？addresstitleheaderfooter

1.去掉或者丢失样式的时候能够让页面呈现出清晰的结构

2.有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；[爬虫]

3.方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；

4.便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

14.网页设计常见兼容性问题有哪些,如何解决？

Document.getElementByid('name')

1.png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.也可以引用一段脚本处理.

2.浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。

3.IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。

4.浮动ie产生的双倍距离（IE6双边距问题：在IE6下，如果对元素设置了浮动，同时又设置了margin-left或margin-right，margin值会加倍。） #box{ float:left; width:10px; margin:0 0 0 100px;} 这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 ——_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)

5.渐进识别的方式，从总体中逐渐排除局部。

首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。

6.IE下,可以使用获取常规属性的方法来获取自定义属性, 也可以使用getAttribute()获取自定义属性; Firefox下,只能使用getAttribute()获取自定义属性. 解决方法:统一通过getAttribute()获取自定义属性.

7.IE下,event对象有x,y属性,但是没有pageX,pageY属性; Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.

8.解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。

9.Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决.

10.超链接访问过后hover样式就不出现了被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序: L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

11.怪异模式问题：漏写DTD声明，Firefox仍然会按照标准模式来解析网页，但在IE中会触发怪异模式。为避免怪异模式给我们带来不必要的麻烦，最好养成书写DTD声明的好习惯。现在可以使用[html5](http://www.w3.org/TR/html5/single-page.html)推荐的写法：<doctype html>

12.上下margin重合问题 ie和ff都存在，相邻的两个div的margin-left和margin-right不会重合，但是margin-top和margin-bottom却会发生重合。解决方法，养成良好的代码编写习惯，同时采用margin-top或者同时采用margin-bottom。

ie6对png图片格式支持不好(引用一段脚本处理)

15.解释下浮动和它的工作原理？清除浮动的技巧

浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。

1.使用空标签清除浮动。这种方法是在所有浮动标签后面添加一个空标签定义css clear:both. 弊端就是增加了无意义标签。

2.使用overflow。给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6。

3.使用after伪对象清除浮动。该方法只适用于非IE浏览器。具体写法可参照以下示例。::after

使用中需注意:该方法中必须为需要清除浮动元素的伪对象中设置 height:0，否则该元素会比实际高出若干像素.

16.浮动元素引起的问题和解决办法？

浮动元素引起的问题：1.父元素的高度无法被撑开，影响与父元素同级的元素; 2.与浮动元素同级的非浮动元素（内联元素）会跟随其后; 3.若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构

解决方法：使用CSS中的clear:both;属性来清除元素的浮动可解决2、3问题，对于问题1，添加如下样式，给父元素添加clearfix样式

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

1.创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元素 createTextNode() //创建一个文本节点

2.添加、移除、替换、插入 appendChild() removeChild() replaceChild() insertBefore() //在已有的子节点前插入一个新的子节点

3.查找 getElementsByTagName() //通过标签名称 getElementsByName() //通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的) getElementById() //通过元素Id，唯一性

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

1.HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。

2.拖拽释放(Drag and drop) API 语义化更好的内容标签（header,nav,footer,aside,article,section）音频、视频API(audio,video) 画布(Canvas) API 地理(Geolocation) API 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失； sessionStorage 的数据在浏览器关闭后自动删除表单控件，calendar、date、time、email、url、search 新的技术webworker, websocket, Geolocation

3.移除的元素纯表现的元素：basefont，big，center，font, s，strike，tt，u；对可用性产生负面影响的元素：frame，frameset，noframes；支持HTML5新标签：

4.IE8/IE7/IE6支持通过document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还需要添加标签默认的样式：

5.当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

19.iframe的优缺点？

(爬虫抓不到iframe内容)

20.如何实现浏览器内多个标签页之间的通信?

调用localstorge、cookies等本地存储方式

21.请说出三种减少页面加载时间的方法

1.优化图片

2.图像格式的选择（GIF：提供的颜色较少，可用在一些对颜色要求不高的地方）

3.优化CSS（压缩合并css，如margin-top,margin-left...)

4.网址后加斜杠（如www.campr.com/目录，会判断这个“目录是什么文件类型，或者是目录。）——（最好加上斜杠）

5.标明高度和宽度（如果浏览器没有找到这两个参数，它需要一边下载图片一边计算大小，如果图片很多，浏览器需要不断地调整页面。这不但影响速度，也影响浏览体验。当浏览器知道了高度和宽度参数后，即使图片暂时无法显示，页面上也会腾出图片的空位，然后继续加载后面的内容。从而加载时间快了，浏览体验也更好了。）

减少http请求（合并文件，合并图片）。

22.documen.write和 innerHTML的区别

Document.write: 只能重绘整个页面; innerHTML: 可以重绘页面的一部分

23.sql注入原理

就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的SQL命令。总的来说有以下几点：

1.永远不要信任用户的输入，要对用户的输入进行校验，可以通过正则表达式，或限制长度，对单引号和双"-"进行转换等。

2.永远不要使用动态拼装SQL，可以使用参数化的SQL或者直接使用存储过程进行数据查询存取。

3.永远不要使用管理员权限的数据库连接，为每个应用使用单独的权限有限的数据库连接。

不要把机密信息明文存放，请加密或者hash掉密码和敏感的信息。

select * from users where username="aa" and password="aa";

A' or 1=1 #
24.XSS原理及防范

Xss(cross-site scripting)攻击指的是攻击者往Web页面里插入恶意html标签或者javascript代码。比如：攻击者在论坛中放一个看似安全的链接，骗取用户点击后，窃取cookie中的用户私密信息；或者攻击者在论坛中加一个恶意表单，当用户提交表单的时候，却把信息传送到攻击者的服务器中，而不是用户原本以为的信任站点.

(跨域攻击）

25.XSS与CSRF有什么区别吗？

XSS是获取信息，不需要提前知道其他用户页面的代码和数据包。CSRF是代替用户完成指定的动作，需要知道其他用户页面的代码和数据包。

要完成一次CSRF攻击，受害者必须依次完成两个步骤：

1.登录受信任网站A，并在本地生成Cookie。

2.在不登出A的情况下，访问危险网站B。

26.CSRF的防御

1.服务端的CSRF方式方法很多样，但总的思想都是一致的，就是在客户端页面增加伪随机数。

使用验证码

27.Flash、Ajax各自的优缺点，在使用中如何取舍？

Flash ajax对比 Flash适合处理多媒体、矢量图形、访问机器；对CSS、处理文本上不足，不容易被搜索。Ajax对CSS、文本支持很好，支持搜索；多媒体、矢量图形、机器访问不足。共同点：与服务器的无刷新传递消息、用户离线和在线状态、操作DOM

28.GET和POST的区别，何时使用POST？

GET：一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符

POST：一般用于修改服务器上的资源，对所发送的信息没有限制。 GET方式需要使用Request.QueryString来取得变量的值，而POST方式通过Request.Form来获取变量的值，也就是说Get是通过地址栏来传值，而Post是通过提交表单来传值。然而，在以下情况中，请使用 POST 请求：无法使用缓存文件（更新服务器上的文件或数据库）向服务器发送大量数据（POST 没有数据量限制）发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

29.HTTP状态码

100 Continue 继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息

200 OK 正常返回信息

201 Created 请求成功并且服务器创建了新的资源

202 Accepted 服务器已接受请求，但尚未处理

301 Moved Permanently 请求的网页已永久移动到新位置。

302 Found 临时性重定向。

303 See Other 临时性重定向，且总是使用 GET 请求新的 URI。

304 Not Modified 自从上次请求后，请求的网页未修改过。

400 Bad Request 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。

401 Unauthorized 请求未授权。

403 Forbidden 禁止访问。

404 Not Found 找不到如何与 URI 相匹配的资源。

500 Internal Server Error 最常见的服务器端错误。

503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）。

30.谈谈网页性能优化问题

代码层面：避免使用css表达式，避免使用高级选择器，通配选择器。

         缓存利用：缓存Ajax，使用CDN，使用外部js和css文件以便缓存，添加Expires头，服务端配置Etag，减少DNS查找等

         请求数量：合并样式和脚本，使用css图片精灵，初始首屏之外的图片资源按需加载，静态资源延迟加载。

         请求带宽：压缩文件，开启GZIP，

移动端性能优化:尽量使用css3动画，开启硬件加速。适当使用touch事件代替click事件.避免使用css3渐变阴影效果.尽可能少的使用box-shadow与gradients box-shadow与gradients往往都是页面的性能杀手