Web性能优化-加载优化（一）

望峰
349 阅读8分钟

随着网络发展成浏览器应用程序平台，我们大多数应用程序的使用已从具有快速，可靠网络连接的功能强大的台式机转移到具有缓慢，不可靠连接的低功耗移动设备。因此，无论平台，网络或设备如何，速度更快的应用具有更好的用户体验。当我们编写加载和运行速度更快的页面（包括台式机用户）时，每个人都会受益。

  • 加载时间是导致页面放弃和忠诚度的主要因素；53％的用户报告说他们放弃了加载时间超过三秒钟的网站
  • 与访问速度较慢的网站相比，访问速度更快的网站上的用户访问频率更高，停留时间更长，搜索更多并且购物频率更高；
  • 缓慢的加载不利于搜索引擎优化（SEO），因为它会降低网站的排名，从而减少访问次数，阅读次数和转化次数。（Google将于2018年将网站速度作为其移动搜索的排名信号）

网站的加载性能可以通过以下几方面进行提升：

一、文字内容优化

进行文本内容压缩时，注意一旦修改了一部分代码以进行部署，通常将无法再读取它，更不用说对其进行维护了。始终将开发文件和部署文件分开，以避免用开发版本替换部署文件。

压缩代码

  • 通过在不更改其有效性或功能的情况下删除其空白和不必要的字符来压缩文本资源

    function forIn(obj, fn, thisArg) {
  for (var key in obj) {
    if (fn.call(thisArg, obj[key], key, obj) === false) {
      break;
    }
  }
}

    缩小后

    function forIn(obj,fn,thisArg){for(var key in obj){if(fn.call(thisArg,obj[key],key,obj)===false) {break;}}}

    可以用相同的方式最小化HTML和CSS，以便缩短相关代码的加载时间。

    缩小工具包括：

    1. Minifier：可通过复制和粘贴来最小化JavaScript或CSS。
    2. HTML Minifier：可以处理HTML，并自动识别代码类型。
    3. grunt-html-minify：集成到Grunt工作流程中的html压缩包。
    4. gulp-html-minifier：一个集成到Gulp工作流程中的html压缩包。
    5. html-minifier：其中包括一个有用的图表，将其压缩结果与其他方法进行了比较。

  • 压缩文字资源

    • 使用gzip在服务器上自动压缩整个文件集

      Gzip在文本资源上表现最佳，并且可以定期实现高达70％的压缩（对于大文件甚至更高）。但是，对于已经单独压缩的非文本资源（例如图像）通常不会显著减小大小。

      Gzip可以进一步压缩已经压缩的文件，这是一种有效的方法。实际上，要获得基于文本的资源的最大压缩率，先在部署之前分别对其进行压缩，然后在响应时通过启用Gzip的服务器对其进行压缩。

减少第三方库的使用

绝大多数的CSS和JavaScript库会尽力减少和压缩其下载文件，但总的来说，它们仍然是相当严重的带宽消耗者。
例如，jQuery（取决于版本和所应用的压缩算法）的大小可能从28k到250k以上。如果需要给定库的大多数功能，则可以；
但是如果只需要一两个特定的api，则可以通过将这些功能替换为一次性功能或CSS规则来节省大量下载时间。

    例如，一个网站可能使用jQuery的方便toggleClass功能来翻转类，以执行特定的操作。

    $(el).toggleClass(className);
    
    但是你不需要引用整个Jquery，可以自己实现此功能
    
    if (el.classList) {
      el.classList.toggle(className);
    } else {
      var classes = el.className.split(' ');
      var existingIndex = classes.indexOf(className);
    
      if (existingIndex >= 0)
        classes.splice(existingIndex, 1);
      else
        classes.push(className);
    
      el.className = classes.join(' ');
    }

二、图形化的内容优化

各种图像都可以提供即时数据并提高读者的理解力和保留率。但是，与文本不同，图像需要大量时间和带宽来下载和渲染。图形内容大概占据典型网站总带宽的60％-85％，显然，获得显着性能提升的主要方法之一是减少图像加载所需的时间。

删除不必要的图像

考虑是否确实需要每个图像，如果需要，考虑是否立即需要。是否可以稍后在更重要的内容之后加载？如果不是，是否可以对其进行优化，以使其对页面加载的影响最小？下载内容（尤其是图形内容）所需的时间应该花在交换图像提供的信息上。

选择适当的图像类型

  • 将PNG用于剪贴画，线条图或需要透明度的地方
  • 将JPG用于照片
  • 将GIF用于需要动画的地方

删除图像元数据

元数据或“有关数据的数据”存在于大多数图像中，并且可能包括（例如，在照相机照片上）有关照相机/电话型号，日期和时间戳，照片应用设置，文件格式，高度和宽度，地理位置坐标等。图像编辑器可能在其保存的文件中包含元数据，例如作者名称，分辨率，色彩空间，版权和关键字。 查看图片元数据网站 VerExif

调整图像大小

  • 根据预期用途调整图像大小

    可能有一个1200 x 600像素的图片，以60 x 30的比例呈现（作为5％的缩略图），鼠标悬停时将其放大到完整尺寸。但如果用户从未真正将鼠标悬停在缩略图上，则浪费了图像下载时间的95％。最好花一些时间制作单独的，适当大小的缩略图，仅在实际需要时才显示完整大小的图像。

  • 裁剪图像以仅显示重要内容 忽略图像中对信息传递不重要的部分。（额外的背景和空白，不必要的边框以及意外的对象）

降低图像质量

我们希望图像在合理范围内看起来尽可能好，这样就意味着以100％的质量保存JPG，对吧？其实不必要，在大多数情况（即几乎所有情况）下，您可以降低JPG的质量，从而降低文件的大小，而不会遇到任何可见的质量差异。

  • 100%的JPG图
  • 25%的JPG图

压缩图片

工具tinypng

HTTP请求

以上是从资源大小上考虑加载性能，我们还可以考虑减少下载频率。减少页面所需的资源数量，按比例减少了它必须发出的HTTP请求的数量。

合并文本资源

  1. 合并多个css（注意css的相同selector的优先级问题）
  2. 合并多个js
  3. html模版合并

合并图形资源

雪碧图

注意：雪碧图可能无法在HTTP2上获得所需的结果。这主要是因为服务器请求在HTTP2上的速度更快，因此合并文件以消除请求可能实际上没有效果。另外，如果将相对静态和相对动态的资源组合在一起，导致资源更新强制重新加载，没有利用缓存，会造成不利影响。

HTTP缓存

启用缓存

高速缓存通过根据某些页面资源的更改频率或不频繁程度对它们进行分类来工作。例如，站点的徽标图像可能几乎永远不会更改，但是站点的脚本可能每隔几天更改一次。确定哪些类型的内容更静态和哪些更动态。

浏览器缓存实际上可能发生在原始服务器和客户端浏览器之间的任何中间站点，例如代理缓存或内容交付网络（CDN）缓存。

缓存头

缓存头主要分为两种：cache -control 和 expires。以上定义了缓存的特性。通常，cache -control被认为是一种比expires更为现代和灵活的方法，但是两个标头可以同时使用。

缓存控制

可以使用逗号分隔列表中的各种选项来启用缓存控制,例如：max-age=2592000, public。 缓存控制具有许多选项

  • no-cache：指定可以缓存内容，但在将提供给客户之前，必须对每个请求进行重新验证。强制客户端检查新鲜度，如果资源没有改变，避免再次下载资源。
  • no-store：指定浏览器和任何中间站点都不能以任何方式缓存内容，对于可能包含敏感数据的资源，或者对于几乎每次访问都会改变的资源来说，这是一个很好的选择。
  • public：指示内容可以由浏览器和任何中间站点缓存。
  • private：指定可以由用户的浏览器存储但不能由任何中间站点缓存的内容。通常用于特定于用户的但不是特别敏感的数据。
  • max-age：定义在必须重新验证内容或再次从原始服务器下载之前，内容可以缓存的最长时间。此选项通常替换expires标头（请参见下文），并采用以秒为单位的值，最大有效期限为一年（31536000秒）。

待续。。。。

avatar
文章
阅读
粉丝