JavaScript 性能优化

Posted 2020-10-11 圈地自萌

1. 图片加载效果。浏览器根据不同图片选择不同渲染算法。

1.1 小波算法：先模糊后清晰 。这种加载方式速度较快，提高渲染性能。缺点是消耗更多内存。如果是大尺寸图片，可以采用这种方式。

从psd导出图片，存储为web所用格式，jpeg勾选连续，png勾选交错，这样导出的图片就是从模糊到清晰。

1.2 离散余弦变换：逐行加载显示清晰图片

2. 常用视频优化方法

2.1 UI要求的自定义播放器 （略）

2.2  视频第一时间加载出来，缩短从用户进入页面到播放视频第一帧的时间。

2.2.1 无论初始化文件位置在哪里，浏览器永远默认将多媒体文件资源最后加载。那么，骗过浏览器，以样式表的形式加载多媒体资源:

<link ref="stylesheet" type="text/css" href="xxx.swf">

3. 利用前端缓存技术

3.1 SessionStorage - 随着标签关闭自动回收（清空缓存），不能跨页面交互。

3.2 userData - 存储限制太小，每个文件小于128kb，一个域名下总共可以保存1024kb文件。在受限站点，单个文件64kb，总共640kb。

3.3 Cookie - 兼容性好。大小有限制，每次发送请求，请求头都会带着Cookie一起发过去。

3.4 openDatabase - 是完整的数据库。

3.5 LocalStorage - 存储的数据没有时间限制。