前端面试题学习(二)
1.简述一下src与href的区别?
答:src用于替换当前元素, href 用于在当前文档和引用资源之间确立联系。
src是 source 的缩写,指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;在请求 src 资源时会将其指向的资源下载并应用到文档内,例如 js 脚本, img 图片和 frame 等元素。
<script src ='js.js'></script>
当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等元素也如此,类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
href是 Hypertext Reference 的缩写,指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,如果我们在文档中添加
<link href='common.css' rel='stylesheet'/>
那么浏览器会识别该文档为css文件,就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式来加载 css ,而不是使用@import 方式。
2.谈谈你对canvas的理解?
答:canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3D图像技术。标记和 SVG以及 VML 之间的一个重要的不同是,有一个基于 JavaScript 的绘图 API,而 SVG 和 VML 使用一个 XML 文档来描述绘图。SVG 绘图很容易编辑与生成,但功能明显要弱一些。 canvas可以完成动画、游戏、图表、图像处理等原来需要Flash完成的一些功能。
3.WebSocket与消息推送?
答:
B/S架构的系统多使用HTTP协议,
HTTP协议的特点: 1 无状态协议 2 用于通过 Internet 发送请求消息和响应消息 3 使用端口接收和发送消息,默认为80端口 底层通信还是使用Socket完成。
HTTP协议决定了服务器与客户端之间的连接方式,无法直接实现消息推送( F5 已坏) , 一些变相的解决办法:
双向通信与消息推送
轮询:客户端定时向服务器发送Ajax请求,服务器接到请求后马上返回响应信息并关闭连接。
优点:后端程序编写比较容易。
缺点:请求中有大半是无用,浪费带宽和服务器资源。
实例:适于小型应用。
长轮询:客户端向服务器发送Ajax请求,服务器接到请求后 hold 住连接,直到有新消息才返回响应信息并关闭连接,客户端处理完响应信息后再向服务器发送新的请求。
优点:在无消息的情况下不会频繁的请求,耗费资小。
缺点:服务器hold连接会消耗资源,返回数据顺序无保证,难于管理维护。 Comet 异步的 ashx ,
实例:WebQQ、 Hi 网页版、 Facebook IM 。
长连接:在页面里嵌入一个隐蔵iframe,将这个隐蔵 iframe 的 src 属性设为对一个长连接的请求或是采用 xhr 请求,服务器端就能源源不断地往客户端输入数据。
优点:消息即时到达,不发无用请求;管理起来也相对便。
缺点:服务器维护一个长连接会增加开销。
实例:Gmail聊天
Flash Socket:在页面中内嵌入一个使用了 Socket 类的 Flash 程序 JavaScript 通过调用此 Flash 程序提供的 Socket 接口与服务器端的 Socket 接口进行通信, JavaScript 在收到服务器端传送的信息后控制页面的显示。
优点:实现真正的即时通信,而不是伪即时。
缺点:客户端必须安装Flash插件;非 HTTP 协议,无法自动穿越防火墙。
实例:网络互动游戏。
Websocket:
WebSocket是 HTML5 开始提供的一种浏览器与服务器间进行全双工通讯的网络技术。依靠这种技术可以实现客户端和服务器端的长连接,双向实时通信。
特点:
a、事件驱动
b、异步
c、使用 ws 或者 wss 协议的客户端 socket
d、能够实现真正意义上的推送功能
缺点:少部分浏览器不支持,浏览器支持的程度与方式有区别。
4.表单的基本组成部分有哪些,表单的主要用途是什么?
答:组成:表单标签、表单域、表单按钮
a、表单标签:这里面包含了处理表单数据所用 CGI 程序的 URL, 以及数据提交到服务器的方法。
b、表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框、和文件上传框等。
c、表单按钮:包括提交按钮,复位按钮和一般按钮;用于将数据传送到服务器上的 CGI 脚本或者取消输入,还可以用表单按钮来控制其他定义了处理脚本的处理工作。
主要用途:表单在网页中主要负责数据采集的功能,和向服务器传送数据。
5.表单提交中Get和Post方式的区别?
答:
(1)、 get 是从服务器上获取数据, post 是向服务器传送数据。
(2)、 get 是把参数数据队列加到提交表单的 ACTION 属性所指的 URL 中,值和表单内各个字段一一对应,在 URL 中可以看到。 post 是通过 HTTP post 机制,将表单内各个字段与其内容放置在 HTML HEADER 内一起传送到 ACTION 属性所指的 URL 地址 , 用户看不到这个过程。
(3)、对于 get 方式,服务器端用 Request.QueryString 获取变量的值,对于 post 方式,服务器端用 Request.Form 获取提交的数据。
(4)、 get 传送的数据量较小,不能大于 2KB 。 post 传送的数据量较大,一般被默认为不受限制。但理论上, IIS4 中最大量为 80KB , IIS5 中为100KB 。
(5)、 get 安全性非常低, post 安全性较高。
6.HTML5 有哪些新增的表单元素?
答:
HTML5 新增了很多表单元素让开发者构建更优秀的 Web 应用程序。
· datalist
· datetime
· output
· keygen
· date
· month
· week
· time
· color
· number
· range
· Url
7.HTML5 废弃了哪些 HTML4 标签?
答:
HTML5 废弃了一些过时的,不合理的HTML 标签:
· frame
· frameset
· noframe
· applet
· big
· center
· basefront
8.HTML5 存储类型有什么区别?
答:HTML5 能够本地存储数据,在之前都是使用 cookies 使用的。 HTML5 提供了下面两种本地存储方案:
· localStorage 用于持久化的本地存储,数据永远不会过期,关闭浏览器也不会丢失。
· sessionStorage 同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。
9.HTML5 应用程序缓存和浏览器缓存有什么区别?
答:应用程序缓存是 HTML5 的重要特性之一,提供了离线使用的功能,让应用程序可以获取本地的网站内容,例如 HTML 、 CSS 、图片以及JavaScript 。这个特性可以提高网站性能,它的实现借助于 manifest 文件,如下:
<!doctype html>
<html manifest=”example.appcache”>
…..
</html>
与传统浏览器缓存相比,它不强制用户访问的网站内容被缓存。
10.HTML5 Canvas 元素有什么用?
答:Canvas 元素用于在网页上绘制图形,该元素标签强大之处在于可以直接在 HTML 上进行图形操作,
参考示例如下:
<canvas id=” canvas1 ″ width= ” 300 ″ height= ” 100 ″ >
</canvas>
------2017.3.3