前言
在面试过程中，不免会被问到网页优化的问题。对于一个网页的好坏，取决于访问速度的快慢。往往1秒钟的差距，会流失大量的潜在客户。所以，优化网页是前端开发人员的必备技能。优化的问题也一致探讨，最著名的则是Yahoo的35军规，它总结了网页在大部分情况下如何去进行优化措施。但往往规则靠死记硬背是不现实的，只有动手实践才能真真的掌握。
正文
往往在真实的生产环境中，前端花费大部分的时间去加载资源，下载资源。所以，加快网页加载速度最为有效的方法是减少http请求。
- 减少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等，对文件进行打包，分块，部分加载等。因此，这一类的问题造成的影响正在逐步的降低。
- 图片资源的加载
往往在大型项目的开发中，对于图片资源的处理是一件很费力的事情，我们单从减少http请求的角度来，看待图片请求的问题，最简单的方法往往是使用雪碧图的方式。如图：
在写css样式时，会使用background-image和background-position去加载各种背景图片资源。但是，如果将这些资源进行合并是能减少整体网页的请求次数，加载网页性能的。
- 使用base64的图片资源
首先，有人会疑问何为base64的图片资源。通常，图片在网络传输中，都是以base64加密的方式进行传输的。因此，我们为了减少不必要的网络请求，我们可以将一下图片进行base64加密，然后直接放到img标签的src中,或者图片背景资源的url中。
<img src="data:image/gif;base64,R0lGODlhHAAmAKIHAKqqqsvLy0hISObm5vf394uLiwAAAP///yH5B…EoqQqJKAIBaQOVKHAXr3t7txgBjboSvB8EpLoFZywOAo3LFE5lYs/QW9LT1TRk1V7S2xYJADs="
注：这种情况的使用，往往是在图片比较小的情况下，如果图片较大的话，往往会增加整体资源的体积，而使得下载资源时间增长。
- 使用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请求的方式.
-----------------------------------------
前言
在上一篇文章中，我们聊过了减少http请求的四个方法:
- 减少css和JavaScript
- 雪碧图
- image base64
- image map
正文
今天，我们来了解一下服务器相关方面，我们可以做的优化
首先，我们必须知道一个神器——CDN。它在现在的网站中发挥着无尽的作用。CDN（Content Delivery Network）,即基于内容的分布式分发网络，它帮助现在大多数网站进行静态资源的部署。正如，军规中提到的网络请求中，有80%-90%的响应时间是在资源下载中度过的，而CDN的机制可以帮助我们更快的获取到这些静态的资源。
首先，我们需要清楚为什么需要CDN这个东西，仅仅只是帮助网站提高加载速度么！其实，不仅仅如此，试想一下一些大型的网站（全国、甚至是全世界），访问的基数非常之大，静态资源的访问频繁，会使得主站服务器吃不消，即使给单个端口增至最大的带宽，也无法满足需求。因此，CDN在这里扮演者重要的角色。
CDN的网络结构大概是中心节点加上边缘节点组成的。这就相当于每个人访问网站时，如果网站部署了CDN，那么就会向最近的CDN服务器请求静态资源，而不是想传统的网站一样，只会去访问主站服务器。使用CDN时，还可以对内容进行缓存，以加快网站的访问速度。
例子：
当我们看到网页的资源是如下表示的，就表示它使用了CDN来进行静态资源的分发
<link crossorigin="anonymous" href="https://assets-cdn.github.com/assets/frameworks-77c3b874f32e71b14cded5a120f42f5c7288fa52e0a37f2d5919fbd8bcfca63c.css" integrity="sha256-d8O4dPMucbFM3tWhIPQvXHKI+lLgo38tWRn72Lz8pjw=" media="all" rel="stylesheet">
大致了解了CDN，我们再来哔哔缓存。一直以来，我都一度认为缓存是一个好东西，毕竟，很多时候只要做了这个处理，都可以得到良好的收益。
例如，你总是会频繁的访问一个网站，你可能会不断重复的去请求和下载同一个资源N次。这是相当不可取的。一旦，服务器做了缓存，那么，网站就会告诉你，这个东西你还能继续使用。在响应头中设置expires或者cache-control的属性，来设置相应资源文件的响应时间。这样，在你第一次访问完一个网站之后，当你再一次访问时，往往会收到304的响应状态码，因为资源的缓存还未到期。如果你有个资源万年不变，你就可以将expires的有效时间设置为10000年（当然是不可以的，expires是有最大值的哈）。
Expires: Thu, 15 Apr 2020 20:00:00 GMT
一旦你设置了这个值，浏览器将认为资源不会更新。但是，突然你又想更新一下资源你又要怎么办呢。那就在资源后面加上hash值或者版本号，example-2c3fde.js类似。
总结
在服务器上做优化，会使得整体网站的访问速度提升很多
No comments:
Post a Comment