前端知识点之性能优化
性能优化
（1）CDN
内容分发网络，指一种通过互联网互相连接的电脑网络系统，利用最靠近每位用户的服务器，更快更可靠地将音乐、图片、视频、应用程序及其他文件发送给用户，来提供高性能、可扩展性及低成本地网络内容传递给用户。
包括分发服务系统（最基本的工作单元是cache设备，cache负责直接响应最终用户的访问请求，把缓存在本地的内容快速提供给用户，同时cache还负责与源站点进行内容同步，把更新的内容及本地没有的从源站点获取并保存在本地）、负载均衡系统（对所有发起服务请求的用户进行访问调度，确定提供给用户的最终实际访问地址）、运营管理系统（负责处理业务层面的与外界系统交互所必须的收集、整理、交付工作，包含客户管理、产品管理、计费管理、统计分析等功能）。
原理：
- 用户使用CDN缓存资源的过程，对于点击的URL，经过本地DNS系统的解析，发现该URL对应的是一个CDN专用的DNS服务器，DNS系统就会将域名解析权交给CNAME组织向的CDN专用的DNS服务器；
- 专用DNS服务器将CDN的全局负载设备IP地址返回给用户；
- 用户向CDN的全局负载均衡设备发起数据请求；
- CDN的全局负载均衡设备根据用户IP地址，及用户请求内容的URL，选择一台用户所属区域的区域负载均衡设备，告诉用户向这台设备发起请求；
- 区域负载均衡设备选择一台合适的缓存服务器提供服务，将该缓存服务器的IP地址返回给全局负载均衡设备，全局负载均衡设备把服务器IP地址返回给用户，用户向该缓存服务器发起请求，缓存服务器响应，将所需内容发至用户终端，若缓存服务器中没有，则向它的上一块缓存服务器请求，还是没有就去自己的服务器。
（2）懒加载
也叫延迟加载、按需加载，指的是在长网页中延迟加载图片数据，即在滚动屏幕之前，可视化区域之外的图片不会被加载，滚动屏幕时才加载。
原理：
图片的加载是由src引起的，当对src赋值时，浏览器就会请求图片资源，可以使用H5的data-XXX属性来储存图片路径，需要加载时将data-XXX中图片的路径赋给src，这样就实现了懒加载。window/innerHeight是浏览器可视区的高度，document.body.scrollTop||document.documentElement.scrollTop是浏览器滚动过的距离，img.offsetTop是元素顶部距离文档顶部的高度（包括滚动条的距离），图片加载条件：img.offsetTop<window/innerHeight+document.body.scrollTop.
一个提前加载，一个迟缓甚至不加载，前者对服务器压力有所缓解，但后者会增加压力，预加载将所需的资源提前加载到本地，后面在需要时直接从缓存获取资源。
（3）节流与防抖
- 节流是确保函数特定的时间内至多执行一次，即只在开始执行一次，未执行完成过程中触发的忽略，核心在于开关锁，例如多次点击按钮提交表单，第一次有效；
- 节流的使用场景是无限滚动列表，需要时刻检查用户屏幕离底部有多远，如果用户屏幕接近底部，我们应该请求下一页内容并将其附加到页面上，不用防抖的原因是它在用户停止滚动时才会触发；
- 防抖是函数在特定的时间内不被在调用后执行，即只执行最后一个被触发的，清除之前的异步任务，核心在于清零，例如页面滚动处理事件，搜索框输***想。
（4）回流与重绘
回流：
当render Tree的一部分（或全部）因为元素的规模尺寸、布局、隐藏等改变需要重新构建，称为回流，每个页面至少发生一次回流，因为第一次要构建render tree，回流时，浏览器会使渲染树中受到影响的部分失效并重新构造这部分渲染树。重绘：当render tree 中的一些元素需要更新属性，而这些属性只是影响元素的外观、风格，而不会影响布局的。回流必将引起重绘。
如何避免：
CSS：
- 用transform代替top；
- 用visibility代替display：none；
- 避免使用table布局；
- 尽可能在DOM树的最末端改变class；
- 避免设置多层内联样式；
- 将动画效果应用到position为absolute或fixed的元素上，避免影响其他元素的布局；
- 避免使用CSS表达式。
- 避免频繁操作样式，最好一次性重写style属性，或者将样式列表定义为class并一次性更改，避免频繁操作DOM，绝对定位。
（5）缓存
DNS缓存：
进入页面时会进行DNS查询，找到域名对应的服务器的ip地址，首先在客户端进行递归查询，即浏览器缓存、本地hosts文件、本地DNS解析器缓存、本地DNS服务器，整个过程客户端只发出一次请求，如果没有找到，就会走DNS服务器设置的转发器，如果没设置转发模式，则向13根即13个根域名服务器IP地址发起解析请求，这里是迭代查询，在第一次进入页面后就把DNS解析的地址缓存在客户端，之后再进的话就不要后面的迭代查询了。
HTTP缓存：
将http请求获取的页面资源存储在本地，之后再加载直接从缓存中获取而不用请求服务器，从而响应更快。强缓存，第一次请求，服务器会通过Expires和Cache-control两个字段告诉浏览器是否过期，没有过期就直接拿来用，为什么要这两个字段呢？因为有的浏览器只认识cache-control，有的不认识，缺点就是缓存过期之后，他都会重新获取资源，而我们希望的是如果没有变化就不用重新获取。协商缓存应用而生：last-modeifined和If-modified-since对比，如果一样，就说明文件没有被更新过，就返回状态码304和空响应体给浏览器，浏览器直接拿过期了的资源继续使用即可，如果对比不一样说明资源有更新，就返回状态码200和新的资源。
CDN缓存：
当发送一个请求，浏览器本地缓存失效的话，CDN会计算去哪得到这些内容的路径短且快，CDN会判断缓存数据是否过期，没有就直接返回给客户端，过期则想服务器发起回源请求，从服务器拉取最新数据，更新本地缓存，并将最新数据返回给客户端。
本地存储：
localstorage,sessionStorage,cookie，indexDB（浏览器本地数据库）等。
localStorage：生命周期永久，除非清除浏览器中的localStorage信息，否则永远存在，存放数据大小一般为5MB，仅在浏览器中保存，不参与服务器通信；
sessionSorage：仅在当前会话下有效，关闭页面会浏览器后被清除，存放数据大小一般为5MB，仅在浏览器中保存，不参与服务器通信；
Cookie：在设置的过期时间内一直有效，即使窗口或浏览器关闭，存放数据大小为4K，有存储个数限制（与浏览器有关），一般不超过20个，与服务端通信，每次都会携带在HTTP头中，Cookie存储数据过多会带来性能问题。
区别：
localStorage和sessionStorage的区别：
- 不同浏览器无法共享这两者的信息，相同浏览器的不同页面可以共享localStorage信息，不能共享sessionStorage的信息；
- sessionStorage，对表单数据进行维护，保证页面刷新也不会让之前的信息丢失，也可以用它存储本次浏览记录，若关闭后不需要这些记录，可以用该存储方法，比如微博；
- Cookie不适合存储，有很大缺陷，cookie包括会话cookie和持久cookie，用户退出浏览器，会话cookie就会被删除了，持久cookie就会存储在硬盘里，保留时间更长，设置了属性secure，cookie只有在https协议加密情况下才会发送给服务端，但是这并不是最安全的，可以通过document.cookie设置和获取cookie的值。
- cookie一般是被浏览器以txt的形式存储在电脑硬盘中，供该浏览器进行读写操作；
- 当浏览器发起请求时，浏览器会自动检查是否有相应的cookie，如果有则将cookie添加到request Headers的cookie字段中，当服务端需要种cookie时，在http请求的response Headers中添加set-cookie字段，浏览器接收到之后会自动解析识别，将cookie种下。
localStorage的大容量和持久特性，可以存储一些内容稳定的资源，比如官网logo ,图片资源等。
离线存储：
service worker，是运行在js主线程之外的，无法访问DOM，相当于一个代理服务器，可以拦截用户发出的请求，修改请求或者直接向用户发出回应，不用联系服务器。依赖于https保障安全，实现缓存分为三步：注册、监听install事件后就可以缓存文件，下次再访问的时候就可以通过拦截请求的方式直接返回缓存的数据。
-----------
如有错误请多多指正！
投递Optiver等公司9个岗位 >
