WEB前端HTML5真题精选.docx
《WEB前端HTML5真题精选.docx》由会员分享，可在线阅读，更多相关《WEB前端HTML5真题精选.docx（18页珍藏版）》请在冰点文库上搜索。
WEB前端HTML5真题精选
2020年WEB前端HTML5真题精选
[填空题]
1为什么要有同源限制？
参考答案：
我们举例说明：
比如一个黑客程序，他利用Iframe把真正的银行登录页面嵌到他的页面上，当你使用真实的用户名，密码登录时，他的页面就可以通过Javascript读取到你的表单中input中的内容，这样用户名，密码就轻松到手了。
[填空题]
2什么是“usestrict”；？
使用它的好处和坏处分别是什么？
参考答案：
ECMAscript5添加了第二种运行模式：
”严格模式”（strictmode）。
顾名思义，这种模式使得Javascript在更严格的条件下运行。
设立”严格模式”的目的，主要有以下几个：
1.消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为；
2.消除代码运行的一些不安全之处，保证代码运行的安全；
3.提高编译器效率，增加运行速度；
4.为未来新版本的Javascript做好铺垫。
注：
经过测试IE6，7，8，9均不支持严格模式。
缺点：
现在网站的JS都会进行压缩，一些文件用了严格模式，而另一些没有。
这时这些本来是严格模式的文件，被merge后，这个串就到了文件的中间，不仅没有指示严格模式，反而在压缩后浪费了字节。
[单项选择题]
3、selection对象的哪个方法直接将用户选取的终点移到起点：
（）
A.selection.collapse（）；
B.selection.containsNode（）；
C.selection.collapseToEnd（）；
D.selection.collapseToStart（）；
参考答案：
D
[填空题]
4GET和POST的区别，何时使用POST？
参考答案：
GET：
一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符
POST：
一般用于修改服务器上的资源，对所发送的信息没有限制。
GET方式需要使用Request.QueryString来取得变量的值，而POST方式通过Request.Form来获取变量的值，也就是说Get是通过地址栏来传值，而Post是通过提交表单来传值。
然而，在以下情况中，请使用POST请求：
无法使用缓存文件（更新服务器上的文件或数据库）向服务器发送大量数据（POST没有数据量限制）发送包含未知字符的用户输入时，POST比GET更稳定也更可靠
[填空题]
5嵌入JS应该放在什么位置？
参考答案：
1.放在底部，虽然放在底部照样会阻塞所有呈现，但不会阻塞资源下载。
2.如果嵌入JS放在head中，请把嵌入JS放在CSS头部。
3.使用defer（只支持IE）
4.不要在嵌入的JS中调用运行时间较长的函数，如果一定要用，可以用setTimeout来调用
[单项选择题]
6、从当前selection移除range对象使用的方法是：
（）
A.addRange（range）；
B.removeAllRanges（）；
C.removeRange（range）；
D.getRangeAt（index）；
参考答案：
C
[填空题]
7eval是做什么的？
参考答案：
它的功能是把对应的字符串解析成JS代码并运行；应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）。
[单项选择题]
8、删除内容用的是哪个方法：
（）
A.cloneRange（）；
B.createRange（）；
C.deleteContents（）；
D.toString（）；
参考答案：
C
[填空题]
9事件、IE与火狐的事件机制有什么区别？
如何阻止冒泡？
参考答案：
1.我们在网页中的某个操作（有的操作对应多个事件）。
例如：
当我们点击一个按钮就会产生一个事件。
是可以被JavaScript侦测到的行为。
2.事件处理机制：
IE是事件冒泡、firefox同时支持两种事件模型，也就是：
捕获型事件和冒泡型事件；
ev.stopPropagation（）;注意旧ie的方法ev.cancelBubble=true;
[单项选择题]
10、创建Range用的是哪个方法：
（）
A.cloneRange（）；
B.document.createRange（）；
C.deleteContents（）；
D.toString（）；
参考答案：
B
[填空题]
11ajax是什么？
ajax的交互模型？
同步和异步的区别？
如何解决跨域问题？
参考答案：
1.通过异步模式，提升了用户体验
2.优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用
3.Ajax在客户端运行，承担了一部分本来由服务器承担的工作，减少了大用户量下的服务器负载。
Ajax的最大的特点是什么：
Ajax可以实现动态不刷新（局部刷新）readyState属性状态有5个可取值：
0=未初始化，
1=启动
2=发送，
3=接收，
4=完成
Ajax的缺点：
1.ajax不支持浏览器back按钮。
2.安全问题AJAX暴露了与服务器交互的细节。
3.对搜索引擎的支持比较弱。
4.破坏了程序的异常机制。
5.不容易调试。
跨域：
jsonp、iframe、window.name、window.postMessage、服务器上设置代理页面
[单项选择题]
12、cxt.arc（100，100，100，0，Math.PI*2，true）Canvas绘制圆形的arc方法中，参数说明正确的是：
（）
A.圆半径，圆心X坐标，圆心Y坐标，开始角度，结束角度，是否顺时针
B.圆心Y坐标，圆心X坐标，圆半径，开始角度，结束角度，是否顺时针
C.圆心X坐标，圆心Y坐标，圆半径，开始角度，结束角度，是否顺时针
D.圆心X坐标，圆心Y坐标，圆半径，开始角度，结束角度，是否逆时针
参考答案：
C
[填空题]
13简述HTTP状态码。
参考答案：
100Continue继续，一般在发送post请求时，已发送了httpheader之后服务端将返回此信息，表示确认，之后发送具体参数信息
200OK正常返回信息
201Created请求成功并且服务器创建了新的资源
202Accepted服务器已接受请求，但尚未处理
301MovedPermanently请求的网页已永久移动到新位置。
302Found临时性重定向。
303SeeOther临时性重定向，且总是使用GET请求新的URI。
304NotModified自从上次请求后，请求的网页未修改过。
400BadRequest服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。
401Unauthorized请求未授权。
403Forbidden禁止访问。
404NotFound找不到如何与URI相匹配的资源。
500InternalServerError最常见的服务器端错误。
503ServiceUnavailable服务器端暂时无法处理请求（可能是过载或维护）。
[单项选择题]
14、Canvas绘制线条时用下面哪个方法设置起点坐标：
（）
A.lineTo
B.moveTo
C.startTo
D.beginTo
参考答案：
A
[填空题]
15说说TCP传输的三次握手策略。
参考答案：
为了准确无误地把数据送达目标处，TCP协议采用了三次握手策略。
用TCP协议把数据包送出去后，TCP不会对传送后的情况置之不理，它一定会向对方确认是否成功送达。
握手过程中使用了TCP的标志：
SYN和ACK。
发送端首先发送一个带SYN标志的数据包给对方。
接收端收到后，回传一个带有SYN/ACK标志的数据包以示传达确认信息。
最后，发送端再回传一个带ACK标志的数据包，代表“握手”结束若在握手过程中某个阶段莫名中断，TCP协议会再次以相同的顺序发送相同的数据包。
[单项选择题]
16、创建Canvas画布使用的方法是：
（）
A.getContext（"3d"）；
B.document.Context（"3d"）；
C.getContext（"2d"）；
D.document.Context（"2d"）；
参考答案：
C
[填空题]
17简述Javascript垃圾回收方法。
参考答案：
标记清除（markandsweep）:
这是JavaScript最常见的垃圾回收方式，当变量进入执行环境的时候，比如函数中声明一个变量，垃圾回收器将其标记为“进入环境”，当变量离开环境的时候（函数执行结束）将其标记为“离开环境”。
垃圾回收器会在运行的时候给存储在内存中的所有变量加上标记，然后去掉环境中的变量以及被环境中变量所引用的变量（闭包），在这些完成之后仍存在标记的就是要删除的变量了
引用计数（referencecounting）:
在低版本IE中经常会出现内存泄露，很多时候就是因为其采用引用计数方式进行垃圾回收。
引用计数的策略是跟踪记录每个值被使用的次数，当声明了一个变量并将一个引用类型赋值给该变量的时候这个值的引用次数就加1，如果该变量的值变成了另外一个，则这个值得引用次数减1，当这个值的引用次数变为0的时候，说明没有变量在使用，这个值没法被访问了，因此可以将其占用的空间回收，这样垃圾回收器会在运行的时候清理掉引用次数为0的值占用的空间。
在IE中虽然JavaScript对象通过标记清除的方式进行垃圾回收，但BOM与DOM对象却是通过引用计数回收垃圾的，也就是说只要涉及BOM及DOM就会出现循环引用问题。
[单项选择题]
18、window.history.forward（）它表示（）
A.前进到下一个页面
B.返回到上一个页面
C.刷新到下一个页面
D.刷新到当前页面
参考答案：
C
[填空题]
19谈谈性能优化问题。
参考答案：
代码层面：
避免使用css表达式，避免使用高级选择器，通配选择器。
缓存利用：
缓存Ajax，使用CDN，使用外部js和css文件以便缓存，添加Expires头，服务端配置Etag，减少DNS查找等
请求数量：
合并样式和脚本，使用css图片精灵，初始首屏之外的图片资源按需加载，静态资源延迟加载。
请求带宽：
压缩文件，开启GZIP，移动端性能优化:
尽量使用css3动画，开启硬件加速。
适当使用touch事件代替click事件.避免使用css3渐变阴影效果.尽可能少的使用box-shadow与gradientsbox-shadow与gradients往往都是页面的性能杀手
[单项选择题]
20、读取localStorage数据的方法是：
（）
A.localStorage.getItem（"键值"）；
B.localStorage.getItem（"键名"）；
C.localStorage.loadItem（"键值"）；
D.localStorage.loadItem（"键名"）；
参考答案：
B
[填空题]
21什么是Etag？
参考答案：
浏览器下载组件的时候，会将它们存储到浏览器缓存中。
如果需要再次获取相同的组件，浏览器将检查组件的缓存时间，假如已经过期，那么浏览器将发送一个条件GET请求到服务器，服务器判断缓存还有效，则发送一个304响应，告诉浏览器可以重用缓存组件。
那么服务器是根据什么判断缓存是否还有效呢？
答案有两种方式，一种是前面提到的ETag，另一种是根据Last-Modified
更多内容请访问《睦霖题库》微信公众号
[单项选择题]
22、读取sessionStorage数据的方法是：
（）
A.sessionStorage.getItem（"键值"）；
B.sessionStorage.getItem（"键名"）；
C.sessionStorage.loadItem（"键值"）；
D.sessionStorage.loadItem（"键名"）；
参考答案：
B
[填空题]
23栈和队列的区别是什么？
参考答案：
栈的插入和删除操作都是在一端进行的，而队列的操作却是在两端进行的。
队列先进先出，栈先进后出。
栈只允许在表尾一端进行插入和删除，而队列只允许在表尾一端进行插入，在表头一端进行删除。
[单项选择题]
24、sessionStorage保存数据的方法正确的是：
（）
A.sessionStorage.setItem（"键名"，"键值"）；
B.sessionStorage.saveItem（"键名"，"键值"）；
C.sessionStorage.setItem（"键值"，"键名"）；
D.sessionStorage.saveItem（"键值"，"键名"）；
参考答案：
A
[填空题]
25简述栈和堆的区别。
参考答案：
栈区（stack）—由编译器自动分配释放，存放函数的参数值，局部变量的值等。
堆区（heap）—一般由程序员分配释放，若程序员不释放，程序结束时可能由OS回收。
堆（数据结构）：
堆可以被看成是一棵树，如：
堆排序；栈（数据结构）：
一种先进后出的数据结构。
[单项选择题]
26、编写manifest文件分为几个部分：
（）
A.1
B.2
C.3
D.4
参考答案：
D
[填空题]
27关于Http2.0你知道多少？
参考答案：
HTTP/2引入了“服务端推（serverpush）”的概念，它允许服务端在客户端需要数据之前就主动地将数据发送到客户端缓存中，从而提高性能。
HTTP/2提供更多的加密支持HTTP/2使用多路技术，允许多个消息在一个连接上同时交差。
它增加了头压缩（headercompression），因此即使非常小的请求，其请求和响应的header都只会占用很小比例的带宽。
[单项选择题]
28、配置manifest文件，IIS的配置方法是在网站属性的http头标签中找到MIME类型添加关联扩展名manifest内容类型输入（）
A.text/manifest
B.text/cache-manifest
C.text/manifest-cache
D.text/local-manifest
参考答案：
B
[填空题]
29简述Expires和Cache-Control。
参考答案：
Expires要求客户端和服务端的时钟严格同步。
HTTP1.1引入Cache-Control来克服Expires头的限制。
如果max-age和Expires同时出现，则max-age有更高的优先级。
[单项选择题]
30、Blob对象中的type属性表示文件的：
（）
A. 文件名
B. 文件大小
C. 图片格式
D. MIME类型
参考答案：
D
[填空题]
31说说你对Promise的理解。
参考答案：
依照Promise/A+的定义，Promise有四种状态:
pending:
初始状态,非fulfilled或rejected.fulfilled:
成功的操作.rejected:
失败的操作.settled:
Promise已被fulfilled或rejected，且不是pending;另外,fulfilled与rejected一起合称settled。
Promise对象用来进行延迟（deferred）和异步（asynchronous）计算.Promise实例拥有then方法（具有then方法的对象，通常被称为thenable）。
它的使用方法如下:
promise.then（onFulfilled,onRejected）;接收两个函数作为参数，一个在fulfilled的时候被调用，一个在rejected的时候被调用，接收参数就是future，onFulfilled对应resolve,onRejected对应reject。
[单项选择题]
32、FileReader对象使用（）方法把图片显示出来
A. readAsBinaryString
B. readAsText
C. readAsDateURL
D. readAsArrayBuffer
参考答案：
C
[填空题]
33简述对网站重构的理解。
参考答案：
网站重构：
在不改变外部行为的前提下，简化结构、添加可读性，而在网站前端保持一致的行为。
也就是说是在不改变UI的情况下，对网站进行优化，在扩展的同时保持一致的UI。
对于传统的网站来说重构通常是：
表格（table）布局改为DIV+CSS使网站前端兼容于现代浏览器（针对于不合规范的CSS、如对IE6有效的）对于移动平台的优化针对于SEO进行优化深层次的网站重构应该考虑的方面减少代码间的耦合让代码保持弹性严格按规范编写代码设计可扩展的API代替旧有的框架、语言（如VB）增强用户体验通常来说对于速度的优化也包含在重构中压缩JS、CSS、image等前端资源（通常是由服务器来解决）程序的性能优化（如数据读写）采用CDN来加速资源加载对于JSDOM的优化HTTP服务器的文件缓存。
[单项选择题]
34、向子页面发送消息window.frames[0].postMessage（"ninhao"，"http：
//localhost/2.html"）；http：
//localhost/2.html指的是：
（）
A. 发送方地址
B. 接收方地址
C. 以上都不是
参考答案：
B
[填空题]
35JavaScript原型，原型链？
有什么特点？
参考答案：
1.原型对象也是普通的对象，是对象一个自带隐式的proto属性，原型也有可能有自己的原型，如果一个原型对象的原型不为null的话，我们就称之为原型链。
2.原型链是由一些用来继承和共享属性的对象组成的（有限的）对象链。
[单项选择题]
36、跨文档消息传输过程中，event.data属性：
（）
A.返回消息的文档来源
B.返回消息内容
C.返回消息的接受地址
参考答案：
B
[填空题]
37哪些地方会出现css阻塞，哪些地方会出现js阻塞？
参考答案：
js的阻塞特性：
所有浏览器在下载JS的时候，会阻止一切其他活动，比如其他资源的下载，内容的呈现等等。
直到JS下载、解析、执行完毕后才开始继续并行下载其他资源并呈现内容。
为了提高用户体验，新一代浏览器都支持并行下载JS，但是JS下载仍然会阻塞其它资源的下载（例如.图片，css文件等）。
由于浏览器为了防止出现JS修改DOM树，需要重新构建DOM树的情况，所以就会阻塞其他的下载和呈现。
嵌入JS会阻塞所有内容的呈现，而外部JS只会阻塞其后内容的显示，2种方式都会阻塞其后资源的下载。
也就是说外部样式不会阻塞外部脚本的加载，但会阻塞外部脚本的执行。
CSS怎么会阻塞加载了？
CSS本来是可以并行下载的，在什么情况下会出现阻塞加载了（在测试观察中，IE6下CSS都是阻塞加载）
当CSS后面跟着嵌入的JS的时候，该CSS就会出现阻塞后面资源下载的情况。
而当把嵌入JS放到CSS前面，就不会出现阻塞的情况了。
根本原因：
因为浏览器会维持html中css和js的顺序，样式表必须在嵌入的JS执行前先加载、解析完。
而嵌入的JS会阻塞后面的资源加载，所以就会出现上面CSS阻塞下载的情况。
[单项选择题]
38、使用getCurrentPosition（）；获取当前地理位置信息，如果要输出图片需要使用google的地图接口
上述代码中latlon需要获取的是：
（）
A.海拔高度
B.精确度
C.经纬度
D.延时
参考答案：
A
[填空题]
39请解释一下JavaScript的同源策略。
参考答案：
概念：
同源策略是客户端脚本（尤其是Javascript）的重要的安全度量标准。
它最早出自NetscapeNavigator2.0，其目的是防止某个文档或脚本从多个不同源装载。
这里的同源策略指的是：
协议，域名，端口相同，同源策略是一种安全协议。
指一段脚本只能读取来自同一来源的窗口和文档的属性。
[单项选择题]
40、为了使元素可拖动，把（）属性设置为true。
A.Editable
B.Draggable
C.Contenteditable
参考答案：
B
[填空题]
41javascript里面的继承怎么实现，如何避免原型链上面的对象共享？
参考答案：
用构造函数和原型链的混合模式去实现继承，避免对象共享可以参考经典的extend（）函数，很多前端框架都有封装的，就是用一个空函数当做中间变量
[单项选择题]
42、控制视频暂停用的是哪个方法：
（）
A.stop（）；
B.pause（）；
C.paused（）；
D.play（）；
参考答案：
B
[填空题]
43XSS与CSRF有什么区别吗？
参考答案：
XSS是获取信息，不需要提前知道其他用户页面的代码和数据包。
CSRF是代替用户完成指定的动作，需要知道其他用户页面的代码和数据包。
要完成一次CSRF攻击，受害者必须依次完成两个步骤：
1.登录受信任网站A，并在本地生成Cookie。
2.在不登出A的情况下，访问危险网站B。
[判断题]
44、selection是对当前激活选中区（即高亮文本）进行操作，在非IE浏览器（Firefox、Safari、Chrome、Opera）下可以使用window.getSelection（）获得selection对象。
参考答案：
对
[填空题]
45简述sql注入原理。
参考答案：
就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的SQL命令。
总的来说有以下几点：
1.永远不要信任用户的输入，要对用户的输入进行校验，可以通过正则表达式，或限制长度，对单引号和双"-"进行转换等。
2.永远不要使用动态拼装SQL，可以使用参数化的SQL或者直接使用存储过程进行数据查询存取。
3.永远不要使用管理员权限的数据库连接，为每个应用使用单独的权限有限的数据库连接。
4.不要把机密信息明文存放，请加密或者hash掉密码和敏感的信息。
[判断题]
46、Canvas绘制图形，可以使用createRadialGradient（）方法创建一个线性渐变。
参考答案：
错
[填空题]
47简述javascript继承的6种方法。
参考答案：
1.原型链继承；
2.借用构造函数继承；
3.组合继承（原型+借用构造）；
4.原型式继承；
5.寄生式继承；
6.寄生组合式继承
[判断题]
48、pushState（）用于向history对象添加当前页面的记录，并且改变浏览器地址栏的URL。
参考答案：
对
[填空题]
49一个页面从输入URL到页面加载显示完成，这个过程中都发生了什么？
参考答案：
1.当发送一个URL请求时，不管这个URL是Web页面的URL还是Web页面上每个资源的URL，浏览器都会开启一个线程来处理这个请求，同时在远程DNS服务器上启动一个DNS查询。
这能使浏览器获得请求对应的IP地址。
2.浏览器与远程Web服务器通过TCP三次
升级会员 