前端面试题(HTML)更新

1、H5的新特性

1）画布(Canvas) API

http://www.wxappclub.com/doc/1-31

HTML的 <canvas>元素提供了一个空白绘图区域，可以使用 APIs（比如 Canvas 2D 或 WebGL）来绘制图形。<canvas />组件只能提供图像显示容器，不具备绘制能力，所以还需要使用脚本来完成实际的绘图任务，交由以下三个canvas API完成。

巧妙运用canvas结合css3新增的动画transition transform animation属性，能实现各种图画效果，以及3D视图，大部分页游也是基于此开发的。

wx.createContext()创建并返回一个context上下文对象，用于记录绘制操作，并返回actions数组，交给wx.drawCanvas(OBJECT)绑定<canvas />组件，并将actions绘制在<canvas />组件上；如果想将图像保存为图片，调用wx.canvasToTempFilePath(OBJECT)接口。

2）地理(Geolocation) API

https://www.cnblogs.com/qiaoxinming/p/6576258.html

Geolocation API（地理位置应用程序接口）提供了一个可以准确知道浏览器用户当前位置的方法。

3）音频、视频API(audio,video)

https://blog.csdn.net/quhongqiang/article/details/79067483

video的使用方法：

autoplay:自动播放、controls:视频操作控件、muted:静音、loop:循环播放、poster:加载完成前显示的图片

<video autoplay="autoplay" controls="controls" width="800" muted="muted" loop="loop" poster="/images/w3html5.gif"></video>

audio的使用方法：

autoplay:自动播放、controls:视频操作控件、muted:静音、loop:循环播放

<audio controls="controls" autoplay="autoplay" muted="muted" loop="loop"></audio>

视频/音频共同特性

<source> 标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。你的浏览器不支持video标签，可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。

4）localStorage和sessionStorage

https://zhuanlan.zhihu.com/p/92947594

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

localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；可以用于存储该浏览器对该页面的访问次数

sessionStorage 数据在当前浏览器窗口关闭后自动删除。进行页面传值

本地存储是由cookie衍生的，目的是在浏览器本地预留一个较大的空间进行存储数据缓存等，对优化网站性能有很大帮助，本地存储分为session storage和local storage 。手机端由于local的存在能节约大量流量和加载速度，不再重复加载请求。而且local自带了setItem() getItem() remove() clear()等方法，使用起来极其方便，但是缓存需要手动清除，否则永久存在，空间大小约为5MB；session则只会在当前会话页面存在，会随着页面的关闭而销毁，用法和local一样

5）webworker, websocket

https://www.cnblogs.com/yfrs/p/work_ws.html

Web Worker让JS有了多线程的能力，可以将复杂耗时的操作都交付给Worker线程处理。WebSocket让web端与服务端维持一个有效的长连接，实现服务端主动推送数据。将二者一结合，业务系统信息流转通知功能完全就可以剥离出来。web worker是运行在浏览器后台的js程序，他不影响主程序的运行，是另开的一个js线程，可以用这个线程执行复杂的数据操作，然后把操作结果通过postMessage传递给主线程，这样在进行复杂且耗时的操作时就不会阻塞主线程了。

目前除了通过ajax的请求模式实现后台前端的数据交互，有没有一种其他方式实现后台数据更新自动推送到前端界面？按目前我们常规的操作是，如果需要监听后台数据变动并及时渲染给用户界面，采用的是轮询模式，但是这样会造成服务器压力和流量浪费。web socket就是为了解决这一尴尬情况提出的，虽然这一技术还是在草案阶段，但是前景不言而预。web socket是一种基于TCP的协议，实现了服务端与客户端的全双工通讯。

6）header,nav,footer,aside,article,section

https://www.cnblogs.com/zhaohongcheng/p/11373360.html

<section>：在 web 页面应用中，该元素也可以用于区域的章节描述。

<header>：页面主体上的头部， header 元素往往在一对 body 元素中。

<footer>：页面的底部（页脚），通常会标出网站的相关信息。

<nav>：专门用于菜单导航、链接导航的元素，是 navigator 的缩写。

<article>：用于表现一篇文章的主体内容，一般为文字集中显示的区域。

<aside>：用于表达注记、贴士、侧栏、摘要、插入的引用等作为补充主体的内容。

 

2、两种实现前端路由的方式

 

3、WebSocket、SharedWorker

 

4、websocket 如何兼容低浏览器

 

5、浏览器渲染原理解析

 

6、reflow与repaint的时机

 

7、iframe有哪些缺点

 

8、Label的作用是什么？是怎么用的？

 

9、HTML5的form如何关闭自动完成功能

 

10、如何实现浏览器内多个标签之间的通信

 

11、页面可见性（Page Visibility API） 可以有哪些用途？

 

12、实现不使用 border 画出1px高的线，在不同浏览器的标准模式与怪异模式下都能保持一致的效果。

 

13、title与h1的区别、b与strong的区别、i与em的区别？

 

14、你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?

 

15、每个HTML文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？

 

16、div+css的布局较table布局有什么优点？

 

17、img的alt与title有何异同？ strong与em的异同？

 

18、简述一下src与href的区别

 

19、知道的网页制作会用到的图片格式有哪些？

 

20、在css/js代码上线之后开发人员经常会优化性能，从用户刷新网页开始，一次js请求一般情况下有哪些地方会有缓存处理？

 

21、一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。

 

22、你如何理解HTML结构的语义化？

 

23、谈谈以前端角度出发做好SEO需要考虑什么？

 

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

 

25、HTML5 Canvas 元素有什么用？

 

26、如何在 HTML5 页面中嵌入音频?

 

27、如何在 HTML5 页面中嵌入视频？

 

28、HTML5 引入什么新的表单属性？