如何做到网页性能的极致优化?

Ledo
2019-03-04 / 33 评论 / 29,682 阅读 / 正在检测是否收录...

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

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

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资源请求尽量使用异步

6、合并css,js,图片

7、减少http请求,css嵌入网页,小图片使用base64

8、抽离公共代码,减少资源体积

9、代码层面的优化有很多,不一一列举,只要做到极致,一定会有效果。

10、......

二:浏览器和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相对于关系数据库能很大的提升获取资源速度

针对于后端代码的优化就交给后端人员。


本文主要内容转载自E语云博客,原创汪微仅供用于学习和交流,若有侵权请邮件联系本站!i@t1i.cn
0

评论 (33)

取消
  1. 头像
    马也随笔
    Windows 7 · FireFox

    不错,可以学习一下。

    回复
  2. 头像
    森纯博客
    Windows 10 · Google Chrome

    涨姿势了,谢谢博主

    回复
  3. 头像
    小石
    Windows 10 · Google Chrome

    还是觉得吧,有两条途径:1.技术;2.钱;留下了没有钱和技术的泪水 ::aru:cryingface::

    回复
  4. 头像
    countmeon
    Windows 10 · Google Chrome

    不错不错,学习

    回复
  5. 头像
    微信选房
    Windows 10 · Google Chrome

    handsome被你玩得极致

    回复
    1. 头像
      刘大喵 作者
      Windows 10 · FireFox
      @ 微信选房

      我是低端玩家0.0

      回复
  6. 头像
    演员
    Windows 7 · Google Chrome

    我觉得以前的主题好看!

    回复
  7. 头像
    灰常记忆
    Android Oreo · Google Chrome

    太深度的优化我就不会了,平常一些的还凑合。

    回复
  8. 头像
    XUHENG
    Windows 7 · Google Chrome

    你这速度确实还不错(๑•̀ㅁ•́ฅ)

    回复
  9. 头像
    奈詩
    Windows 10 · MicroSoft Edge

    有個高配置服務器是不是就不是問題了 哈哈哈

    回复
    1. 头像
      刘大喵 作者
      Windows 10 · FireFox
      @ 奈詩

      可惜现实不允许~

      回复
  10. 头像
    科研软件小站
    Windows 10 · Google Chrome

    我的在这方面还需要努力,博主的网站确实访问很快

    回复
    1. 头像
      刘大喵 作者
      Windows 10 · FireFox
      @ 科研软件小站

      您的站是WordPress吧,不是虚拟机主机的话可以试试开Memcached,不然只能cdn了

      回复
  11. 头像
    Mr.Chou
    Windows 7 · Google Chrome

    问题不大,对于我来说可有可无。

    回复
    1. 头像
      刘大喵 作者
      Windows 10 · FireFox
      @ Mr.Chou

      您的站我感觉够快了 都是秒开的~也许这就是简洁的好处~

      回复
  12. 头像
    MOKE
    Windows 10 · MicroSoft Edge

    滴!~ 学生卡 ::aru:confuse::

    回复
    1. 头像
      刘大喵 作者
      Linux · Google Chrome
      @ MOKE

      余额不足,请充值

      回复
  13. 头像
    戏子
    MacOS · Google Chrome

    博客类网站,访问量不大的话,没什么必要优化,套上cdn,比啥都强。

    回复
    1. 头像
      刘大喵 作者
      Windows 10 · FireFox
      @ 戏子

      的确如此。

      回复
  14. 头像
    左岸
    Android Pie · Google Chrome

    不错,挺全的

    回复
  15. 头像
    创业路上
    Windows 10 · Google Chrome

    不断优化的草根站长还是比不上百度的无赖

    回复
    1. 头像
      刘大喵 作者
      Linux · Google Chrome
      @ 创业路上

      seo压根就不考虑 给了钱百度也未必能排上去

      回复
  16. 头像
    魄筱
    Android · QQ Browser

    我也打卡|´・ω・)ノ

    回复
    1. 头像
      刘大喵 作者
      Linux · Google Chrome
      @ 魄筱

      滴滴

      回复
  17. 头像
    沉潇先生
    Windows 10 · Google Chrome

    虽然我现在还看不懂,但是觉得真的很厉害啊,我未来要走的路还有很长啊φ( ̄∇ ̄o)

    回复
    1. 头像
      刘大喵 作者
      Linux · Google Chrome
      @ 沉潇先生

      ::aru:clap:: 年轻人 加油啊

      回复
  18. 头像
    廖先生
    Windows 7 · Google Chrome

    虽然看不懂,不过感觉好厉害的样子

    回复
  19. 头像
    bosir
    Windows 7 · Google Chrome

    emmm,十年之约成员,来串门儿了

    回复
    1. 头像
      刘大喵 作者
      Linux · Google Chrome
      @ bosir

      欢迎欢迎

      回复
  20. 头像
    Sam.Z
    Windows 10 · Google Chrome

    大概也就是这些了,其实还有一个就是数据库 |´・ω・)ノ

    回复
  21. 头像
    枫灵er
    Windows 10 · Google Chrome

    来串个门!!!
    emmm看了感觉好多东西直到,就是不知道怎么做,像什么异步什么的

    回复
    1. 头像
      刘大喵 作者
      Windows 10 · FireFox
      @ 枫灵er

      大概就是从别处引进 - -

      回复
      1. 头像
        枫灵er
        Windows 10 · Google Chrome
        @ 刘大喵

        一个什么都想自己写着试试的菜鸟哭出了声,根本不知道怎么下手

        回复