前端面试--HTML篇

页面倒入样式时，使用link和@import有什么区别？

1. 从属关系区别。@import只能导入样式表，link还可以定义RSS、rel连接属性、引入网站图标等；
2. 加载顺序区别。加载页面时，link标签引入的CSS被同时加载；@import引入的CSS将在页面加载完毕后被加载。

简述浏览器的渲染原理

• 首先解析收到的文档，根据文档定义一颗DOM树，DOM树是由DOM元素及属性节点组成的；
• 然后对CSS进行解析，生成CSSOM规则树；
• 根据DOM树和CSSOM规则树构建RenderTree。渲染树的节点被称为渲染对象，渲染对象是一个包含有颜色和大小等属性的矩形，渲染对象和DOM对象相对应，但这种关系不是一对一的，不可见的DOM元素不会被插入渲染树；
• 当渲染对象被创建并添加到树中，它们并没有位置和大小，所以当浏览器生成渲染树以后，就会根据渲染树来进行布局（也可以叫回流）。这一阶段浏览器要做的事情就是要弄清楚各个节点在页面中的所在位置和大小，通常这一行为也被称为“自动重排序”；
• 布局阶段结束就是绘制阶段，调用对象的paint方法将它们的内容显示在屏幕上，绘制使用UI基础组件；

需要注意的是：为了更好的用户体验，渲染引擎会尽可能早的将内容呈现到屏幕上，并不会等所有的html解析完成之后再去构建和布局render tree。它是解析完一部分内容就显示一部分内容，同时可能还在网络上下载其余内容。

HTML5的form的自动完成功能是什么呢？

autocomplete属性规定输入字段是否应该启用自动完成功能，默认为启用，可设置autocomplete=off关闭该功能。自动完成允许浏览器预测对字段的输入，在用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。

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

实现多个标签页之间的通信，本质上都是通过中介者模式来实现的。因为标签页之间没有办法直接通信，因此我们可以找一个中介者来让标签页和中介者进行通信，然后让这个中介者来进行消息的转发。

• 使用Websocket，通信的标签页连接在同一个服务器，发送消息到服务器后，服务器推送消息给所有连接的客户端；
• 可以调用本地localStorage，localStorage在另一个浏览器上下文里被添加、修改或删除时，它会触发一个storage事件，我们可以通过监听storage事件，控制它的值来进行页面信息通信。

简述前端性能优化

1、页面内容方面。

• 通过文件合并、css雪碧图、使用base64等方式来减少HTTP请求，避免过多是我请求造成等待的情况；
• 通过DNS缓存机制来减少DNS的查询次数；
• 通过设置缓存策略，对常用不变的资源进行缓存；
• 通过延迟加载的方式，来减少页面首屏加载时需要请求的资源，延迟加载的资源当用户需要访问时，再去请求加载；
• 通过用户行为，对某些资源使用预加载的方式，来提高用户访问资源时的响应速度。
  2、服务器方面。
• 使用CDN服务，来提高用户对于资源请求时的响应速度；
• 服务器自用Gzip、Deflate等方式对于传输的资源进行压缩、减少传输文件的体积；
• 尽可能减小cookie的大小，并且通过将静态资源分配到其他域名下，来避免静态资源请求时携带不必要的cookie。

未完待续。。。