《高性能网站建设指南》（二）-- 网站优化的方式

oliver1204 commented 7 years ago

1. 减少HTTP请求

CSS Sprites
内联图片 data: url (h5 -> 发送验证码) 例如：<img src="data: image/gif;base64,B01GOD1HFUAIDHF;AOHF;ADH;FDF;ADHF;DOIFHOAI;AIF;ADIFOAD;IF;AD=">

 computed: {
   captchaImage() {
      return `//mainsite-restapi/v1/captchas/`
   }
}

<img :src="captchaImage">

合并脚本和样式表

2. 使用内容发布网络（CDN）-- Content Delivery Network

如果应用程序Web服务器离用户很近，则一个HTTP请求所花费的时间将缩短(最早，很多网站都会提供电信 / 网通等不同二级域名，供不同运营商用户选择，这无疑增加了使用成本。当前，一般网站都使用 DNS 服务来解决这个问题：按地域、运营商等条件，将用户 DNS 请求解析到最合适的 IP)，如果组件Web服务器离用户很近，则多个HTTP请求响应时间将会缩短。而且增加组件Web服务器相对于增加应用程序Web服务器而言简单很多，因此CDN非常的实用。 CDN是一组分布在不同地理位置的Web服务器，用于有效的向用户发布内容。优势：

成本也较低。
缩短响应时间
可提供资源备份、扩展存储能力和进行缓存。
有助于缓解WEB流量峰值压力。弊端：
CDN服务商在其所有客户之间共享器Web服务器，所以响应时间受其他网站的影响。
修改 HTTP 响应头必须通过服务器供应商来完成等。

3. 压缩

原理 Web客户端通过Accept-Encoding: gzip deflate头来表示其支持压缩，服务器端从中选择一种压缩方式，通过Content-Encoding告诉客户端。最通用的压缩方式是gzip格式。

压缩通常是压缩脚本和样式表，甚至是HTML和JSON ,对用图片和 PDF 一般不会压缩。因为不必要的压缩会给服务器端带来额外的CPU消耗，客户端也需要消耗资源来解压缩。

打理缓存浏览器直接与服务器连接是简单的，如果中间存在代理的情况就变得复杂了。代理通常会将从服务器端拿到的数据进行缓存，如果浏览器访问某一个被缓存过的路径，那么代理将会把缓存中的内容返给浏览器。如果缓存中的内容是被压缩过的，但是浏览器是不支持压缩的，那么情况将会非常严重，反之浏览器支持压缩，但是缓存中的内容是未经压缩的，那么效果也会非常不理想。为了解决这一问题，在Web服务器的响应头中添加Vary头。Web服务器告诉代理根据一个或多个请求头来改变缓存的响应。服务器的Vary头中包含Accept-Encoding,这将使得服务器端的响应有多种选择,即：
```
Vary:  Accept-Encoding
```
HTTP 内容协商 https://imququ.com/post/vary-header-in-http.html

4. 减少DNS的查询

首先介绍两篇关于 DNS 的文章,感觉写的好棒！ http://www.ruanyifeng.com/blog/2016/06/dns.html https://imququ.com/post/http-alt-svc.html

请求支持keep-alive特性，同时可以覆盖TTL(time-to-live)和浏览器的时间限制。换句话说，质押浏览器的服务器可以愉快的聊天，就没有必要去查询DNS。

5. 图片多的页面使用`webP`

1、https://segmentfault.com/a/1190000005898538 2、http://isux.tencent.com/introduction-of-webp.html 使用时，检测浏览器是否支持 webp 即可

const VueImg = Object.create(null)

VueImg.canWebp = false
const img = new Image()
img.onload = () => { VueImg.canWebp = true }

6. 避免重定向

oliver1204 commented 7 years ago

7、向 script 标记添加异步关键字可以指示浏览器在等待脚本可用期间不阻止 DOM 构建，这样可以显著提升性能。

<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link href="style.css" rel="stylesheet">
    <title>Critical Path: Script Async</title>
  </head>
  <body>
    <p>Hello <span>web performance</span> students!</p>
    <div><img src="awesome-photo.jpg"></div>
    <script src="app.js" async></script>
  </body>
</html>

详见

oliver1204 commented 7 years ago

8、性能渲染

性能渲染

oliver1204 / randomNotes