前端面试题-HTML篇

1. HTML5新特性有哪些？

1. 画布 canvas

2. 本地存储

    localStorage：长期存储数据，关闭浏览器数据不会消失

    sessionStorage：浏览器关闭后数据自动消失

3. 媒介 video和audio

4. 语义标签 header、nav、aside、main、article、section、footer

5. 表单控件 calendar、date、time、email、url、search

6. 新的技术webworker, websocket, Geolocation 地理通信

2. svg和canvas的区别

svg绘制出来的每一个图形元素都是独立的DOM节点，可方便后期绑定事件或修改，而canvas输出的是一整幅画布；
svg输出的是一个矢量图形，修改参数自由放大缩小，不会失真，canvas输出的是标量画布，就像一张图片一样， 放大缩小会失贞

3. cookie、localstorage和sessionstorage的区别

webstorage是本地存储，存储在客户端，包括localStorage和sessionStorage

localStorage生命周期是永久，关闭页面或浏览器之后localStorage中的数据也不会消失，除非主动删除数据，否则数据永远不会消失。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。

sessionStorage仅在当前会话下有效，关闭页面或浏览器后被清除。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。源生接口可以接受，亦可再次封装来对Object和Array有更好的支持。

不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的 localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是，页面及标 签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。

localStorage.setItem("key","value");//以“key”为名称存储一个值“value”
​
localStorage.getItem("key");//获取名称为“key”的值
​
localStorage.removeItem("key");//删除名称为“key”的信息。
​
localStorage.clear();//清空localStorage中所有信息

cookie：能存储的内容较小，在4k左右，一般用作保存用户登录状态、记住密码，记住账号使用。不清除的话会一直存在，可以设置过期时间自动清除，设置的时候可以设置在不同的域下面。每次在和服务端交互都会放在header里面，所以若是储存太多会影响性能。

cookie的缺点：

1.cookie的长度和数量的限制。每个domain最多只能有20条cookie，每个cookie长度不能超过4KB。否则会被截掉。
2.安全性问题。如果cookie被人拦掉了，那个人就可以获取到所有session信息。加密的话也不起什么作用。
3.有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务端保存一个计数器。若吧计数器保存在客户端，则起不到什么作用。

4. 前端如何优化网站性能？

1. 减少 HTTP 请求数量

         在浏览器与服务器进行通信时，主要是通过 HTTP 进行通信。浏览器与服务器需要经过三次握手，每次握手需要花费大量时间。而且不同浏览器对资源文件并发请求数量有限（不同浏览器允许并发数），一旦 HTTP 请求数量达到一定数量，资源请求就存在等待状态，这是很致命的，因此减少 HTTP 的请求数量可以很大程度上对网站性能进行优化。

• CSS Sprites

       国内俗称CSS精灵，这是将多张图片合并成一张图片达到减少HTTP请求的一种解决方案，可以通过CSS的background属性来访问图片内容。这种方案同时还可以减少图片总字节数。

• 合并 CSS 和 JS 文件

       现在前端有很多工程化打包工具，如：grunt、gulp、webpack等。为了减少 HTTP 请求数量，可以通过这些工具再发布前将多个CSS或者多个JS合并成一个文件。

• 采用 lazyLoad

       俗称懒加载，可以控制网页上的内容在一开始无需加载，不需要发请求，等到用户操作真正需要的时候立即加载出内容。这样就控制了网页资源一次性请求数量。

     2. 控制资源文件加载优先级

         浏览器在加载HTML内容时，是将HTML内容从上至下依次解析，解析到link或者script标签就会加载href或者src对应链接内容，为了第一时间展示页面给用户，就需要将CSS提前加载，不要受 JS 加载影响。

         一般情况下都是CSS在头部，JS在底部。

     3. 利用浏览器缓存

         浏览器缓存是将网络资源存储在本地，等待下次请求该资源时，如果资源已经存在就不需要到服务器重新请求该资源，直接在本地读取该资源。

     4. 减少重排（Reflow）

         基本原理：重排是DOM的变化影响到了元素的几何属性（宽和高），浏览器会重新计算元素的几何属性，会使渲染树中受到影响的部分失效，浏览器会验证 DOM 树上的所有其它结点的visibility属性，这也是Reflow低效的原因。如果Reflow的过于频繁，CPU使用率就会急剧上升。

        减少Reflow，如果需要在DOM操作时添加样式，尽量使用 增加class属性，而不是通过style操作样式。

    5. 减少 DOM 操作

    6. 图标使用 IconFont 替换

5. 一个页面从输入URL到页面加载显示完成，这个过程发生了什么？

• 浏览器将请求的URL发送到DNS服务器，并获取域名对应的服务器ip地址；

• 与web服务器建立TCP连接；

• 浏览器向web服务器发送http请求；

• web服务器响应请求，并返回指定url的数据（或错误信息，或重定向的新的url地址）；

• 浏览器下载web服务器返回的数据及解析html源文件；

• 生成DOM树，解析css和js，渲染页面，直至显示完成；