经常看到某些大神的博客网站加载速度极快,甚是羡慕,本屌一直在菜鸟的道路上步步前行,梦想我的博客也能优化到极致。下面讲解了网页优化的一些要点,文章内容主要转自汪微的博客,特拿到本站来以时刻提醒本鸟不断进步。

对于网页的性能优化可分为三个部分:

  1. 针对于前端代码层面的性能优化
  2. 针对于浏览器和http方面的性能优化
  3. 针对于web服务器和后端的性能优化

一、前端代码层面的优化

(一)主要性能提升要点:

  1. 网页资源或图片使用cdn加速和压缩
  2. css放头部js放底部,js可以根据情况加上async或defer
  3. 图片做懒加载
  4. 做首屏渲染,首屏以下代码做异步加载
  5. 做按需加载,在资源需要时再加载(比如路由资源,弹出层等)
  6. 做骨架屏渲染,提升界面体验效果
  7. 某些资源或数据使用浏览器缓存,sessionStorage和localStorage,或者浏览器数据库
  8. 使用Service Worker缓存任何可控的资源,甚至可以做离线应用

(二)代码层面的优化:

  1. 压缩js,jss,img等资源
  2. CSS Sprite技术等
  3. 尽量减少html,css层级深度
  4. api资源请求尽量使用异步
  5. 合并css,js,图片
  6. 减少http请求,css嵌入网页,小图片使用base64
  7. 抽离公共代码,减少资源体积
  8. 代码层面的优化有很多,不一一列举,只要做到极致,一定会有效果。

二、浏览器和http方面的优化

  1. 针对于资源(css,js,img)尽量做强缓存,web服务器设置Cache-Control的max-age,设置合适的值(值越大缓存时间越长)
  2. 针对于有可能会变的资源可以使用协商缓存,设置ETag或Last-Modified,也可以两者同时设置服务器会优先验证ETag的值,因为Last-Modified的值只精确到了秒级,并没有精确到毫秒级别,并不能100%的保证两次资源是否一致,而ETag不会有此问题。
  3. 合并资源,减少http请求数量,在http1.1中,只能同时处理一定量的http请求,请求过多的资源会先处于等待状态
  4. 使用浏览器的缓存功能,例如sesson和local,有些资源和数据第二次以后可以完全不必要去后端获取
  5. 使用新的api,Service Worker开辟新的线程去做耗时的工作或之后需要的资源。甚至可以做离线应用

三、web服务器和后端的优化

web服务器和后端是前端开发者们基本接触不到的点

  1. 对于html,css,js等资源我们可以开启资源压缩,常用的为gzip,开启gzip会对服务器cpu有一定的消耗,对于流量不大的网站没什么影响
  2. 对于常规的网站我们可以开启Connection: keep-alive,这样http通道就会高效的被利用,请求也会加快
  3. 对于高并发的网站尽量不要设置Connection参数(即keepalive_timeout的值),或者值设置的越短越好,服务器处理请求的数量是一定的,如果每次请求占用通道的时间越长,同时处理的请求就会越少。
  4. 搭建自己的cdn服务器,让资源返回速度更快
  5. 最大化的利用服务器性能:开启多线程,设置最大并发链接数、最大链接数、最大文件访问数、tcp等待状态等

还可以从提升硬件方面考虑性能问题

  1. 提升服务器性能,根据项目情况选择相应服务器,计算密集,I/O密集 ,进程密集等
  2. 提升网络带宽,增加内存、硬盘、cpu等
  3. 对于高访问量的资源或者api做负载均衡配置
  4. 拆分服务器,例如后台服务器,资源文件服务器,数据库服务器,nginx入口服务器等,特定的资源去特定的服务器获取
  5. 对于高并发的网站需要做集群处理,后台服务器集群,数据库集群,redis集群等
  6. 使用redis缓存数据资源,redis相对于关系数据库能很大的提升获取资源速度
文章目录