每天十道前端面试题第二天

1.新的html5文档类型和字符集是什么;

  • 文档类型声明:<!DOCTYPE html>
  • 字符集:<meta charset="UTF-8">

2.html5为什么在文档类型声明时不需要引用DTD文档了;

因为html5不基于SGML,因此不需要引用DTD。

    SGML概念

  • SGML是标准通用标记语言;
  • 基本思想:把文档的内容与样式分开;
  • 工作原理:一个典型的文档可以被分为三个层次,结构,内容和样式,而SGML主要是处理结构和内容之间的关系;
  • html是SGML的一个应用,在html5之前都是基于SGML的。

     DTD概念

  • 为了描述文档的结构,SGML定义了一个称为文档类型定义(即DTD)的文件;
  • 它为组织文档的文档元素提供了一个框架,此外,还为元素之间的相互关系指定了规则,从而确保了文档的一致性;
  • 所以在html5之前,都是基于SGML上的,也就必须引用DTD;同理html5不是基于SGML的,也就不需要引用DTD文档了。(但是还需要docytpe来规范浏览器的行为)

3.HTML5应用程序缓存和浏览器缓存有什么区别;

应用程序缓存提供了离线浏览的功能,让应用程序可以获取本地的网站内容,例如html,css,图片以及JavaScript。这个特性可以提高网站性能,减少服务器的负载。

如果要启用应用程序缓存,需要在html标签中加manifest属性

mainfest文件建议扩展名:.appcache

<html manifest="demo_appcache">

4.html5存储类型有什么变化;

在html5之前,应用程序数据只能存储在cookie中,包括每个服务器请求。而html5能够本地存储数据,它提供了两种本地存储方案:一是localStorage,持久性的本地存储,关闭浏览器也不会丢失;二是sessionStorage,它只针对一个session的存储,关闭浏览器数据也随之销毁。

5.html5的离线存储怎么使用,解释其工作原理;

  • 在用户没有与网络连接时,可以正常访问站点或应用;在用户与网络连接时,更新用户机器上的缓存文件。
  • 工作原理:html5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术),通过这个文件上的解析清单,离线存储资源,这些资源就会像cookie一样被存储下来,之后当网络处于离线状态时,浏览器就会通过被离线存储的数据进行页面展示。

6,浏览器是怎么对html5的离线存储资源管理和加载的呢;

离线的情况下,浏览器直接使用离线资源加载页面。

在线的情况下,浏览器发现html头部有manifest属性,就会请求manifest文件。

如果是第一次访问,那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储;如果已经访问过并且资源已经离线存储了,那么浏览器就会使用离线的资源加载页面,然后浏览器会对比新的manifest文件与旧的manifest文件,如果文件没有任何改变,就不做任何操作,如果文件改变了,就会重新下载文件中需要更新的资源并进行离线存储。

7.Canvas与SVG有什么区别;

  • canvas画图基于像素点,是位图,如果进行放大或缩小会失真 ;svg基于图形,用html标签描绘形状,放大缩小不会失真
  • canvas需要在js中绘制 ;svg在html中绘制
  • canvas支持颜色较svg多
  • canvas无法对已经绘制的图像进行修改、操作 ,只能删除重新绘制;svg可以获取到标签进行修改和操作

8.Web Storage与cookies的区别;

Web Storage的概念和cookie相似,区别是它是为了更大容量存储设计的。Cookie的大小是受限的,并且每次你请求一个新的页面的时候Cookie都会被发送过去,这样无形中浪费了带宽,另外cookie还需要指定作用域,不可以跨域调用。

除此之外,Web Storage拥有setItem,getItem,removeItem,clear等方法,不像cookie需要前端开发者自己封装setCookie,getCookie。但是Cookie也是不可以或缺的:Cookie的作用是与服务器进行交互,作为HTTP规范的一部分而存在 ,而Web Storage仅仅是为了在本地“存储”数据而生。

9.请描述一下cookies,sessionStorage和localStorage的区别?

  • cookies:网站用于标记用户身份的一段数据,通常情况下是一段加密的字符串,并且默认情况下只会在同源的HTTP(同域名,同端口,同协议)中携带,即cookies在浏览器和服务器间来回传递,而sessionstorage和localstorage不会自动把数据发给服务器,仅在本地保存。
  • sessionStorage:它是浏览器本地存储的一种方式,以键值对的形式进行存储,在浏览器关闭的时候会被清空。
  • localStorage:它是浏览器本地存储的一种方式,和sessionStorage一样,也是以键值对的形式进行存储,不过locaStorage存储的是持久化的数据,一般不主动删除,数据就会一直存在。

10.html5的新特性总结;

  1. 标签语义化 header,footer,nav,section,article,aside,diallog等。 好处:结构清晰,易于阅读,可维护性更高,有利于搜索引擎的搜索(SEO的优化)。
  2. 音频和视频标签 audio,video(source标签定义type属性) 属性:src(音频或视频链接),width,height,controls(显示控件)
  3. 更加丰富强大的表单:input新增输入类型:date,color,month,email,tel,url等; 新增表单元素:keygen(公钥私钥),datalist,output ;新增表单属性:placeholder,min/max,pattern,required,width,height,multitype等
  4. 移除元素:big,font,center,frameset,frame等
  5. 新增api:获取用户的地理位置-window.navigator. geolocation
  6. 拖放 drag drop
  7. canvas画布;svg绘图:可伸缩矢量图形
  8. 应用程序缓存(离线存储机制)
  9. web storage(常考localStorage,sessionStorage,cookie以及session之间的区别)
  10. web worker:在当前JavaScript主进程中开启一个异步线程(独立工作,在主线程以外运行),window.postMessage可用于解决跨域数据传输。
  11. web socket:浏览器端和服务器端之间的全双工通信机制(没有同源限制,客户端可以和任意服务器端进行通信),服务器可以主动推送数据到服务端。
     

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值