前端性能优化

网络传输性能优化

重定向→拉取缓存→DNS查询→建立TCP链接→发起请求→接收响应→处理HTML元素→元素加载完成

浏览器缓存

缓存一般分为强缓存和协商缓存,主要区别是:使用本地缓存的时候,是否需要向服务器验证本地缓存是否依旧有效。

强缓存

主要通过 http 请求头中的 Cache-Control 和 Expire 两个字段控制

一般,我们会设置Cache-Control的值为“public, max-age=xxx”,表示在xxx秒内再次访问该资源,均使用本地的缓存,不再向服务器发起请求。

协商缓存

每次都向服务器验证一下缓存的有效性

前端缓存方案

  • HTML:使用协商缓存
  • CSS JS Image:使用强缓存,文件名带上 hash 值

浏览器默认的缓存是放在内存内的,但我们知道,内存里的缓存会因为进程的结束或者说浏览器的关闭而被清除,而存在硬盘里的缓存才能够被长期保留下去。很多时候,我们在network面板中各请求的size项里,会看到两种不同的状态:from memory cache 和 from disk cache,前者指缓存来自内存,后者指缓存来自硬盘。而控制缓存存放位置的,不是别人,就是我们在服务器上设置的Etag字段。在浏览器接收到服务器响应后,会检测响应头部(Header),如果有Etag字段,那么浏览器就会将本次缓存写入硬盘中。

资源打包压缩

网络性能优化措施归结为三大方面:减少请求数、减小请求资源体积、提升网络传输速率

gulp grunt webpack parcel
1

图片资源优化

  • 不要在HTML里缩放图像
  • 使用雪碧图(CSS Sprite)- webpack-spritesmith
  • 使用字体图标(iconfont)- icomoon
  • 使用WebP - 图片压缩体积大约只有JPEG的2/3,并能节省大量的服务器带宽资源和数据空间

网络传输性能检测工具

  • Page Speed | PageSpeed Insights

使用CDN

页面渲染性能优化

浏览器渲染过程(webkit)

  • 《Webkit技术内幕》

浏览器的解释器,是包括在渲染引擎内的,我们常说的Chrome(现在使用的是Blink引擎)和Safari使用的Webkit引擎,Firefox使用的Gecko引擎,指的就是渲染引擎。而在渲染引擎内,还包括着我们的HTML解释器(渲染时用于构造DOM树)、CSS解释器(渲染时用于合成CSS规则)还有我们的JS解释器。不过后来,由于JS的使用越来越重要,工作越来越繁杂,所以JS解释器也渐渐独立出来,成为了单独的JS引擎,就像众所周知的V8引擎,我们经常接触的Node.js也是用的它。

DOM渲染层与GPU硬件加速

  • ①浏览器会先获取DOM树并依据样式将其分割成多个独立的渲染层
  • ②CPU将每个层绘制进绘图中
  • ③将位图作为纹理上传至GPU(显卡)绘制
  • ④GPU将所有的渲染层缓存(如果下次上传的渲染层没有发生变化,GPU就不需要对其进行重绘)并复合多个渲染层最终形成我们的图像

重排和重绘

不论是重排还是重绘,都会阻塞浏览器。要提高网页性能,就要降低重排和重绘的频率和成本,近可能少地触发重新渲染。

重排是由CPU处理的,而重绘是由GPU处理的,CPU的处理效率远不及GPU,并且重排一定会引发重绘,而重绘不一定会引发重排。所以在性能优化工作中,我们更应当着重减少重排的发生。

重排 reflow

渲染层内的元素布局发生修改,都会导致页面重写排列。

比如:窗口的尺寸发生变化、删除或添加DOM元素;修改了影响元素盒子大小的css属性(width height padding...)

重绘 repaint

绘制,所有对元素的视觉表现属性的修改,都会引起重绘。

优化策略

  • CSS属性读写分离
  • 通过切换class或者style.csstext属性去批量操作元素样式
  • DOM元素离线更新
  • 将没用的元素设为不可见:visibility: hidden,减少重绘的压力
  • 压缩DOM的深度:少用DOM完成页面样式,多使用伪元素或者box-shadow取代。
  • 图片在渲染前指定大小:因为img元素是内联元素,所以在加载图片后会改变宽高,严重的情况会导致整个页面重排,所以最好在渲染前就指定其大小,或者让其脱离文档流。
  • 对页面中可能发生大量重排重绘的元素单独触发渲染层,使用GPU分担CPU压力。(慎重)

JS 阻塞性能

负载均衡

Node.js处理IO密集型请求

node 的核心是事件驱动,通过 loop 去异步处理用户请求,相对于传统的后端服务,他们都是将用户的每个请求分配到异步队列中进行处理。

事件驱动的优势:在高并发 IO 时,不会造成堵塞。

Frond-End(Browser) <- nodejs -> Back-End(Java Server)

pm2实现Node.js“多线程”

pm2。这是它的官网:pm2.keymetrics.io/

它是一款node.js进程管理器,具体的功能,就是能在你的计算机里的每一个内核都启动一个node.js服务。

也就是说如果你的电脑或者服务器是多核处理器(现在也少见单核了吧),它就能启动多个node.js服务,并且它能够自动控制负载均衡,会自动将用户的请求分发至压力小的服务进程上处理。

nginx搭建反向代理

资料

Last Updated: 9/2/2019, 3:43:45 PM