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