laizimo/zimo-article

网页性能优化漫谈(一)

laizimo opened this issue · 1 comments

laizimo commented

前言

在面试过程中，不免会被问到网页优化的问题。对于一个网页的好坏，取决于访问速度的快慢。往往1秒钟的差距，会流失大量的潜在客户。所以，优化网页是前端开发人员的必备技能。优化的问题也一致探讨，最著名的则是Yahoo的35军规，它总结了网页在大部分情况下如何去进行优化措施。但往往规则靠死记硬背是不现实的，只有动手实践才能真真的掌握。

正文

往往在真实的生产环境中，前端花费大部分的时间去加载资源，下载资源。所以，加快网页加载速度最为有效的方法是减少http请求。

  1. 减少css标签、javascript标签

以前，我们经常可以在网站后台看到如下的场景：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="example1.css">
    <link rel="stylesheet" href="example2.css">
    <link rel="stylesheet" href="example3.css">
    <link rel="stylesheet" href="example4.css">
    <link rel="stylesheet" href="example5.css">
    <title>example</title>
</head>
<body>
     // ...dom内容
    <script src="example1.js"></script>
    <script src="example2.js"></script>
    <script src="example3.js"></script>
    <script src="example4.js"></script>
    <script src="example5.js"></script>
</body>
</html>

在这样的情况下，往往页面的加载速度会降低，一般页面大概适合2-3个script文件进行加载，所以，我们第一步要做的就是，将这么多的资源文件适当的合并起来，css文件也是如此。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="bundle.css">
    <title>example</title>
</head>
<body>
//...
    <script src="bundle1.js"></script>
    <script src="bundle2.js"></script>
</body>
</html>

在现在的工业化开发中，都往往会用到打包工具，像webpack、gulp等，对文件进行打包，分块，部分加载等。因此，这一类的问题造成的影响正在逐步的降低。

  1. 图片资源的加载

往往在大型项目的开发中，对于图片资源的处理是一件很费力的事情，我们单从减少http请求的角度来，看待图片请求的问题，最简单的方法往往是使用雪碧图的方式。如图：
雪碧图
在写css样式时，会使用background-image和background-position去加载各种背景图片资源。但是，如果将这些资源进行合并是能减少整体网页的请求次数，加载网页性能的。

  1. 使用base64的图片资源

首先，有人会疑问何为base64的图片资源。通常，图片在网络传输中，都是以base64加密的方式进行传输的。因此，我们为了减少不必要的网络请求，我们可以将一下图片进行base64加密，然后直接放到img标签的src中,或者图片背景资源的url中。

<img src="data:image/gif;base64,R0lGODlhHAAmAKIHAKqqqsvLy0hISObm5vf394uLiwAAAP///yH5B…EoqQqJKAIBaQOVKHAXr3t7txgBjboSvB8EpLoFZywOAo3LFE5lYs/QW9LT1TRk1V7S2xYJADs="
    注：这种情况的使用，往往是在图片比较小的情况下，如果图片较大的话，往往会增加整体资源的体积，而使得下载资源时间增长。
  1. 使用image map(感觉不常用，本人没使用过)
    有些在线的网站可以将图片制作成map，然后在html中使用，如图：
<img src="image.png" alt="Website map" usemap="#mapname" />
<map name="mapname">
  <area shape="rect" coords="9,372,66,397" href="http://en.wikipedia.org/" alt="Wikipedia" title="Wikipedia" >
</map>

这种图片处理的方式，也与雪碧图的原理差不多，可以减少对图片资源的请求

总结

在优化网站性能的方式有很多种，这只是第一篇——减少http请求的方式。