性能优化

性能优化清单：（完整了解）
　　yohoo：https://github.com/JohnsenZhou/Front-End-Performance-Checklist
　　google：https://developers.google.cn/web/fundamentals/performance/why-performance-matters/
　　可以看下自己的网站或页面是否达到要求

http缓存：

• http1.0：　　　　

　　　　一、expires,设置缓存有效期 // （不用去服务器监测，直接在本地取）
　　　　　　问题：如果系统时间不对，则缓存会出错（如：当前时间是2019-9-9，系统时间是2020-9-9，则缓存永远都会过期）

　　　　二、last-modified,设置对象的最后修改时间 // （需要去服务器监测）
　　　　　　带上last-modified去服务区check一下有没有过期，如果返回304，就会直接从缓存里面返回，否则会返回一个实际的文件
　　　　　　问题：文件被修改但内容没有变。因为last-modified的问题，导致了E-tag出现

• http1.1

　　　　一、1.max-age=num(s)，设置最大缓存时间 // （不用去服务器监测，直接在本地取）
　　　　　　2.public，缓存能被多用户共享
　　　　　　3.private，缓存不能再用户间共享
　　　　　　4.no-cache，不会被缓存
　　　　　　5.no-store，不能被存储
　　　　二、E-tag，可能在同一秒保存两次，也可能在服务器上文件修改时间不一致 // （需要去服务器监测）

　　　　　　max-age + Last Modified + Etag：如果支持Etag，会优先使用Etag作为验证的标准

　　　　　　让我们去设计一个资源缓存方案，应当怎么做？
　　　　　　　　1.HTML （no-cache）
　　　　　　　　2.CSS、JavaScript （MD5/timestamp/version + 长缓存）
　　　　　　　　3.Image （随机名字[uid 唯一的名字] + 长缓存

 

本地存储：

• Cookies：存储数据量优先，并且每次都会带到服务器，占用带宽　　

　　　　一般不推荐在cdn上带cookie，html文件与资源文件要分域

• localstorage：有大小限制，数据不安全；

　　　　例：百度把所有的js和css都放在localstorage中以此来提速

　　　　把多个数据存在一个key好？还是分开多个key存储比较好？
　　　　存多个key读写效率更快。

　　　　localstorage存爆了应该怎么处理？
　　　　无论是get还是set都需要用try catch包裹，不然可能会出错

　　　　怎么解决数据需要踢出，用什么方式踢出？
　　　　在命名的时候需要分级，分别代表数据的重要程度，先将重要程度低的数据踢出

• sessionStorage：很少使用，会话关闭就没有了
• IndexDB：很少使用

　　　　IndexDB是异步的，有可能页面都完全返回了，异步还没完成；IndexDB需要先初始化数据库

• App Cache：大坑货，不要用

　　　　1.可能会缓存错误页面，设置缓存运营商的劫持广告，
　　　　2.更新中有一个文件失败了，就会全部退回上一个版本，
　　　　3.由于是Lazy更新，如果后台接口有break change将会是大麻烦
　　　　4.manifest文件 (一定要设置no-cache) 也有可能不小心被缓存了

• Service Worker:App Cache太失败，以至于W3C终于明白用户需要更细致的缓存控制

 

Hybrid App:
　　在app中提供一个webview，在里面直接写代码，可以通过js调一些native使用的api，如图片上传能力、原生接口等。
　　离线包技术：可以看成是私有service worker。

Weex：
　　尽量不要用react native和weex
　　Weex，rn（react native）性能好的原因（如何解决性能问题）：来自于被删减的浏览器渲染实现。
　　例：在weex和rn中，css只能使用flex-box，其他如border-box不能被使用

　　weex和rn解决的问题：1、可以让前端写native；2、用户可以更容易调用原生组件；
　　不适合在高交互场景使用，所以在大量表单之类的场景千万不要使用

了解flutter

AMP(google)：
　　类似：MIP(百度)，抄AMP
　　AMP是谷歌推荐的有利于它搜索引擎做优化的网页的标准，组件非常受控。如电商网站等

转载于:https://www.cnblogs.com/jingouli/p/11503178.html