美团面经总结

1.文件上传样式处理

• 使用label标签点击，触发file类型的input，input可直接display: none

2.隐藏元素的方法

• display： none不会渲染这个元素
• visibility： hidden隐藏元素，但是元素还是占位置，元素不可触发点击事件
• opacity： 0；设置元素的不透明度为0，元素还是可以触发点击事件的

3.域名发散和域名收归

• 域名发散
  为了利用现代浏览器的多线程并发下载能力，由于浏览器的限制，每个浏览器允许对每个域名的连接数一般是有上限的，每个域名的最大连接数是6个，为了提高最大并行度
• 域名收归
  在移动端的http请求中DNS解析比较耗时，尽量减少域名的个数

4.浏览器重绘与回流

• html页面呈现流程

1.浏览器将HTML代码解析成一个DOM树，DOM树种包含所有HTML标签，包括display：none和js动态添加的元素等

2.浏览器将css解析成css树，解析过程中会去掉浏览器不能识别的样式，比如浏览器前缀

3.DOM树和css树组合后构建渲染树，渲染树能识别样式，同时渲染树不包含隐藏的节点

4.渲染树构建完毕后，浏览器就根据渲染树来绘制页面

• 回流
  当渲染树种的一部分因为元素的尺寸，布局，隐藏等改变时需要重新构建，就称为回流
  回流时，浏览器会使得渲染树种受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程称为重绘

  • 回流是指的重新构造渲染树，而重绘是指的浏览器重新绘制的过程
  • 回流必将引起重绘，而重绘不一定会引起回流
    回流发生的条件，页面布局和几何尺寸改变时就需要回流
  • 添加和删除DOM节点
  • 元素位置改变
  • 元素尺寸改变——边框，填充，边框，宽度和高度
  • 元素内容改变
  • 页面渲染初始化
  • 浏览器窗口尺寸改变——resize事件发生时

• 优化
  浏览器本身会维护一个队列，将所有引起回流，重绘的操作放入这个队列，等队列中的操作到了一定的数量或者到了一定的时间间隔，浏览器就会执行队列中的批处理，这样就会让多次回流和重绘变成一次回流重绘
  但是当我们查询节点的style属性，如调用offsetWidth，就会让浏览器执行队列中的任务

  • 应该减少对渲染树的多次操作，尽量通过改变元素的类来实现多个样式的改变
  • 将需要多次重排的元素，position设置为absolute或fixed，这样元素就脱离了文档流，它的变化就不会影响到其他元素
  • 减少DOM操作的次数
  • 对隐藏元素的操作不会引发其他元素的重排，如果对一个元素进行复杂操作时，可以先隐藏它，操作完成后再显示，这样只有在隐藏和显示时触发2次重排
  • 将经常要用到的那些引起浏览器重排的属性值，缓存到变量

5.requestAnimationFrame

• 不需要设置时间间隔
• 大多数显示器刷新频率是60Hz，每秒钟重绘60次，即使重绘频率超过显示器的重绘频率用户体验也不会提升，最平滑的动画最佳循环间隔为16.6ms
• 浏览器在窗口处于非激活的状态下，requestAnimationFrame是不会执行
• requestAnimationFrame使用系统时间间隔，保持最佳的绘制效率，不会因为时间间隔过短造成过度绘制，也不会因为时间间隔过长，使用动画卡顿不流畅

6.base64编码

• 所有二进制文件，都可以转化为可打印文本编码，一般会比原图大一些，不能缓存，除非放到js和css中
• 能够对文本进行简单的加密
• 将大图片放如html中，会使得体积明显增加，明显影响首屏加载
  如果用外链图片，图片可以在页面渲染完成后继续加载，不会造成阻塞
• 使用webpack中的url-loader 可以自动根据文件大小决定要不要做成内敛base64

7.HTTPS的原理

• 访问HTTPS网站，网站将证书给你
• 验证包含公钥的证书，然后生成一个随机密码串，并用公钥加密的这个密码，然后发送给服务端
• 服务端用私钥解密发送过来的数据，会得到随机生成的密码，并把网页内容全部用密码加密起来，并发送给你
• 浏览器用密码对称解密服务端返回的数据，得到你可读的内容
• 之后发出的请求数据，都是用密码进行加密