一般的性能问题出现的原因基本就是文件过大,客户端和服务端的网速较慢,以及HTTP请求较多的情况。
<!--more-->
加载速度的优化,执行效率的优化,还有就是做一些措施改善用户的使用体验。
一般的性能问题出现的原因基本就是文件过大,客户端和服务端的网速较慢,以及HTTP请求较多的情况。 所以优化就是针对这3方面:
- 文件过大
- 网速较慢
- HTTP请求过多
首先可以使用一些工具(比如TinyPng)压缩图片的大小,一般图片的内容都比较大,然后服务器端可以使用gzip,每次发送前压缩要发送的内容,会更加快。
##1,压缩文件
- 图片一定要进行压缩,可以使用一些在线工具进行压缩
- 客户端方面,文件可以使用webpack等进行压缩
- 服务端方面,要开启gzip
##2,尽量减少HTTP请求:
- 合并js
- 合并css(对于js和css也不是无脑的进行合并,通用的可以合并到一起,特定页面的再另外进行合并)
- 合并图片(css精灵图 css sprite)
另外可以的话,可以像不同的子域名发起请求,这样同时发起的请求就会增多
##3,网速方面
用户的网速没法去进行优化,对于服务端来说,可以增设多个镜像的服务器在各个不同的地方。
另外也可以使用cdn(content delivery network),
##4,延迟加载内容(提升用户使用体验)
- 图片懒加载
- 数据懒加载(点击查看更多)
- 功能懒加载(曝光或者点击后加载HTML模块,或者JS模块)
##5,使用离线缓存(一般服务端去控制) 把常用的js,css,图片等存到localstorage中,第二次访问的时候直接走本地缓存,移动端应用广泛。(对性能要求特别高的时候用)
##6,CSS,JS放到正确的位置 css就放在head中,保证用户看到页面时样式是对的 js就放在body底部,防止js加载阻塞页面
##7,静态资源压缩 css,js,图片等静态资源发布前要压缩
##8,静态资源使用多个域名 对于css,js,图片,可以使用多个域名,可以并发加载
##9,静态资源使用CDN存储 客户端与服务器的地理距离的远近影响了访问速度,可以放到CDN中让用户进行访问,加快访问速度。
##10,预加载(想法)
在某个功能还没展现时,在空闲时间预加载图片或者js
##11,DOM操作优化
使用JS访问DOM比较慢,为此要做到:
- 缓存已经访问过的有关元素
- 线下更新完节点后,再将它们添加到文档树中
- 避免使用JS来修改页面布局
##12,优化算法 在JS处理中,优化 查找,排序算法。尽量少使用嵌套循环。