1.性能优化从何说起
我们知道,我们平时在使用网站或者移动设备等时,如果你的网站很慢,用户会很不耐烦的去等,可能几秒出不来,用户选择不再等,有时候用户也会觉得,等这么久,流量都跑完了,也有用户几时会等,会给用户意识里留下阴影,不会再使用的网站,对于很多用户,流量并不是免费的,即使免费了,也不愿意等你网站好几秒,这些说法,都是个人的观点,因为我也经常这么想。。。在之前,我还遇到过一个商城首页等待 5s 左右,首页加载流量 200M 的网站
下面,我很简短说常用的性能优化手段
2.性能优化如何思考
- 1.首先在我们项目的设计过程中,我们可以首先思考我们使用的技术以及方案的一些优势以及弊端,预想项目使用技术可带来的后果或者优势,再比如项目环境等因素
- 2.制定计划,比如使用技术是否可以优化,如果做 ssr 方面,是否可以服务端渲染,以保证返回浏览器渲染时间更短,比如我的博客里使用到了 marked,是否可以使用 marked 插件,进行服务端渲染,而不是浏览器去做执行等等之类
- 3.细分计划,指定现实的目标,比如 HTTP 使用的版本,是否存在并发堵塞之类的问题,如果不存在,是否可以拆分成更小的包,是否可以异步加载,考虑响应速度,交互时间。
- 4.构建优化,在使用 webpack 等打包工具,要明确相对项目的使用技术以及环境,比如 tree-shaking、code-splitting、scope hoisting 等等。再比如静态资源的优化,一些 loader,比如 uglify、cache 等。再比如打包速度这方面,是否因为打包速度漫长,长期依旧的占用开发时间,解决方式比如 happypack、webpack-parallel-uglify-plugin、cache-loader、webpack-parallel-uglify-plugin 等。
- 5.渲染优化,我们可以从浏览器渲染过程着手,比如页面的及爱在性能,FP(首次绘制)–》FCP(首次有内容的绘制)–》FMP(首次有意义的绘制)–》TTI(可交互时间)这方面进行考虑,比如骨架屏、css 加速等等问题,下面细说
- 6.其他优化,比如 nodejs 优化、用户操作优化等等
3.性能优化如何入手
假设我们已经知道浏览器行为与 HTTP 协议发生的事物,如果不知道,可以看下面的 HTTP 相关文章。
HTTP 相关优化
这方面优化主要包括 HTTP 协议、HTTP 缓存、CDN 等
- 1.HTTP 协议相关优化
· 我们在前面知道了 HTTP 协议版本的区别,在这里,HTTP 优化我们可以采用 HTTP2 来实施,比如利用 nginx 以及 http2 的模块,建立在 https 的基础上代理配置
· 如果我们以上条件不具备,还可以使用 node 等方式进行流返回,这也不失为一个很好的方案,如果流返回,我们可以在 Header 里看到 connection 会有明确说明,value 就是 chunked
· 再比如可以使用 gzip 等方式,进行 HTTP 压缩,继续思考是否所有请求都要被 gzip 等问题
· 再思考 HTTP 传输过程中,TCP 断开必要因素等
- 2.HTTP 缓存相关优化
· 比如强缓及协商缓存以及浏览器自带的缓存
- 3.CDN 相关优化
· CDN 可以不会带 cookie 等信息,可以就近的选择服务器返回给用户,可以减少服务器的压力等
除上面的 HTTP 方面,还有我们浏览器的相关优化
上面也简单提到一些,接下来解决一些名词的解释
- css 加速:比如 css3D、video、webGl、filter、transform、animate 等
- gpu.js:比较耗费显卡,需要在特定的用户环境建议使用,就是历史 GPU 来执行 js
- 骨架屏:骨架屏的 dom 结构和 css 通过离线生成后构建的时候注入模板中的节点,可以更快的让用户看到,给用户心理准备,而不是白屏呈现给用户
- 浏览器缓存相关使用方案:localStorage、sessionStorage、indexDB、webSql。其中,indexDB、webSql 是异步的,而且慢,可以放一些不需要立即加载的三方文件。对于此方案,也有一些做的好的库,比如 localforage.js、basket.js
- 雅虎军规:建议自己去 google 一下,都是我们开发中常用的一些规范,积水成河。微小的优化对于保持性能也是十分重要的。
- PWA:PWA 方案里的 server worker 也可作为缓存优化
结语
以上是我对性能优化简单的想法,没有细说,也没有说的很广,后面会继续更新,一起学习交流,学海无涯。。。