前端—每天5道面试题（5）
每天背5道前端面试题，希望我可以在远方的终点见到你
1、简述一下前端的性能优化问题
（一）、页面内容方面
- 通过文件合并、css 雪碧图、使用 base64 等方式来减少 HTTP 请求数， 避免过多的请求造成等待的情况。
- 通过 DNS 缓存等机制来减少 DNS 的查询次数。
- 通过设置缓存策略，对常用不变的资源进行缓存。
- 通过延迟加载的方式，来减少页面首屏加载时需要请求的资源，延迟加载 的资源当用户需要访问时，再去请求加载。
- 通过用户行为，对某些资源使用预加载的方式，来提高用户需要访问资源 时的响应速度。
（二）、服务器方面
- 使用 CDN 服务，来提高用户对于资源请求时的响应速度。
- 尽可能减小 cookie 的大小，并且通过将静态资源分配到其他域名下，来 避免对静态资源请求时携带不必要的 cookie。
- 服务器端自用 Gzip、Deflate 等方式对于传输的资源进行压缩，减少传输文件的体积。
2、谈谈浏览器的渲染原理
- 首先解析收到的文档，根据文档定义构建一颗 DOM 树，DOM 树是由 DOM 元素及属性节点组成的。
- 然后对 CSS 进行解析，生成 CSSOM 规则树
- 根据 DOM 树和 CSSOM 规则树构建 Render Tree。渲染树的节点被称为渲染对象，渲染对象是一个包含有颜色和大小等属性的矩形，渲染对象和 DOM 对象相对应，但这种对应关系不是一对一的，不可见的 DOM 元素不 会被插入渲染树。
- 当渲染对象被创建并添加到树中，它们并没有位置和大小，所以当浏览器 生成渲染树以后，就会根据渲染树来进行布局（也可以叫做回流）。这一阶段浏览器要做的事情就是要弄清楚各个节点在页面中的确切位置和大小。通 常这一行为也被称为“自动重排”。
- 布局阶段结束后是绘制阶段，比那里渲染树并调用对象的 paint 方法将它 们的内容显示在屏幕上，绘制使用 UI 基础组件。 为了更好的用户体验，渲染引擎会尽可能早的将内容呈现到屏幕上，并不会等到 所有的 html 解析完成之后再去构建和布局 render tree。它是解析完一部分内 容就显示一部分内容，同时可能还在网络下载其余内容。
3、什么是WebPage？
WebP 是谷歌开发的一种新图片格式，它是支持有损和无损两种压缩方式的使用 直接色的点阵图。使用 webp 格式的最大优点是是，在相同质量的文件下，它 拥有更小的文件体积。因此它非常适合于网络图片的传输，因为图片体积的减少，意味着请求时间的减少，这样会提高用户的体验。这是谷歌开发的一种新的图片格式。
那么浏览器是如何判断是否支持 webp 格式图片的呢？
通过创建 Image 对象，将其 src 属性设置为 webp 格式的图片，然后在 onload 事件中获取图片的宽高，如果能够获取，则说明浏览器支持 webp 格式 图片。如果不能获取或者处罚了 onerror 函数，那么就说明浏览器不支持 webp 格式的图片。
4、分析比较 opacity: 0、visibility: hidden、 display: none 的优劣和适用的场景
- display: none - 不占空间，不能点击，会引起回流，子元素不影响 。
- visibility: hidden - 占据空间，不能点击，引起重绘，子元素可设置 visible 进行显示 。
- opacity: 0 - 占据空间，可以点击，引起重绘，子元素不影响。
5、说一下移动端视口的配置问题
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
- initial-scale: 初始的缩放比例
- minimum-scale: 允许用户缩放到的最小比例
- maximum-scale: 允许用户缩放到的最大比例
- user-scalable: 用户是否可以手动缩放
