提高页面加载速度和进行项目性能优化

提高页面加载速度和进行项目性能优化

1.压缩图片

  h5上图片质量对清晰程度影响不大，使用图片压缩工具（网上有一大把免费的在线压缩工具），将图片进行压缩，一般体积都会减少2/3以上，几乎无感。pc上则不行，需要在压缩的同时注意图片质量和清晰程度。

2.少使用图片，多使用css实现

  一些背景颜色，渐变色，以及艺术字，可使用css实现尽量使用css实现。

3.懒加载，延迟加载

  当页面中有大量图片视频等静态资源时，一起加载会造成页面卡顿用户体验差，可以进行资源懒加载，例如可以当图片进入可视窗口后在进行加载，很大程度上可以优化用户体验；可用一些现成的库来实现，例如：LazyLoad或者IntersectionObserver()。

4.预加载

  预加载就是提前加载，不管是缓存中的资源还是网络资源提前加载；当使用webgl或者webgis时模型资源加载不好就进行渲染会造成一些问题，或者当浏览器空闲的时候可先加载一下之后可能会加载的资源进行缓存，这些情况可进行预加载。

5.缓存机制

  浏览器缓存机制，localstorge存储一些数据，比如长久不变的坐标城市位置之类的。

6.静态文件压缩减小体积

  老套路了，js,css文件进行压缩，减小体积加快加载速度。

7.减少dom插入操作

  批量插入dom时使用文档碎片

8.高频次事件

  合理使用节流防抖

9.定时器

  合理使用requestAnimationFrame动画代替setTimeout。