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

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

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

标签: 网站优化, cdn加速, 前端优化, 网页压缩

已有 33 条评论

  1. 马也随笔 马也随笔

    不错，可以学习一下。

    回复
  2. 森纯博客 森纯博客

    涨姿势了，谢谢博主

    回复
  3. 小石 小石

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

    回复
  4. countmeon countmeon

    不错不错，学习

    回复
  5. 微信选房 微信选房

    handsome被你玩得极致

    回复
    1. 刘大喵 刘大喵

      我是低端玩家0.0

      回复
  6. 演员 演员

    我觉得以前的主题好看！

    回复
  7. 灰常记忆 灰常记忆

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

    回复
  8. XUHENG XUHENG

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

    回复
  9. 奈詩 奈詩

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

    回复
    1. 刘大喵 刘大喵

      可惜现实不允许~

      回复
  10. 科研软件小站 科研软件小站

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

    回复
    1. 刘大喵 刘大喵

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

      回复
  11. Mr.Chou Mr.Chou

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

    回复
    1. 刘大喵 刘大喵

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

      回复
  12. MOKE MOKE

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

    回复
    1. 刘大喵 刘大喵

      余额不足，请充值

      回复
  13. 戏子 戏子

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

    回复
    1. 刘大喵 刘大喵

      的确如此。

      回复
  14. 左岸 左岸

    不错，挺全的

    回复
  15. 创业路上 创业路上

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

    回复
    1. 刘大喵 刘大喵

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

      回复
  16. 魄筱 魄筱

    我也打卡|´・ω・)ノ

    回复
    1. 刘大喵 刘大喵

      滴滴

      回复
  17. 沉潇先生 沉潇先生

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

    回复
    1. 刘大喵 刘大喵

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

      回复
  18. 廖先生 廖先生

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

    回复
  19. bosir bosir

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

    回复
    1. 刘大喵 刘大喵

      欢迎欢迎

      回复
  20. Sam.Z Sam.Z

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

    回复
  21. 枫灵er 枫灵er

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

    回复
    1. 刘大喵 刘大喵

      大概就是从别处引进 - -

      回复
      1. 枫灵er 枫灵er

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

        回复

添加新评论