读书笔记--高性能网站

时间 2019-12-13

标签读书笔记高性能网站栏目网站开发繁體版

原文原文链接

《高性能网站建设指南》

性能黄金法则：javascript

只有10%~20%的最终用户响应时间花在了下载HTML文档上。其他的80%~90%时间花在了下载页面中的全部组件下。java

HTTP概述：数据库

（1）、压缩：浏览器：Accept-Encoding（gzip、deflate）服务器：Content-Encoding浏览器

（2）、缓存：浏览器：If-Modified-Since 服务器：Last-Modified缓存

　　若是组件自生成日期以来，没有改变过，服务器返回304—Not Modified服务器

　　服务器：Expires网络

　　条件GET请求和304响应有助于让页面加载更快，但仍须要在客服端和服务器之间进行一次往返确认，以执行有效性检查。异步

　　Expires头经过明确指出浏览器是否可使用组件的缓存副原本消除这个需求。函数

规则一、减小HTTP请求（CSS Sprites，合并脚本和样式表）性能

规则二、使用内容发布网络（CDN）：其是一组分布在多个不一样地理位置的Web服务器，用于更加有效地向用户发布内容。

　　　 CDN用于发布静态内容，如图片、脚本、样式等，提供动态HTML页面会引入特殊的存储需求—数据库链接等，这些复杂性超越了CDN的能力范围。

规则三、添加Expires（HTTP1.0）头：页面的初访者会进行不少HTTP请求，但经过使用一个长久的Expires头，使这些组件能够被缓存，这会在后续的页面浏览中避免没必要要的HTTP请求。

Expires缺点：Expires头使用一个特定的时间，并要求服务器与客户端的时钟同步，且，过时日期须要常常检查，一旦Expires失效，还须要在服务器配置中提供一个新的日期。

HTTP1.1引入Cache-Control使用max-age来指定组件被缓存多久（是以秒为单位），从而消除Expires限制。如
：Cache-Control: max-age = 31536000

规则四、压缩组件：经过减小HTTP响应的大小来减小响应时间。若是HTTP请求产生的响应包很小，传输时间就会减小，由于只须要将很小的包从服务器传递给客服端。

HTTP1.1 客服端
服务端

Accept-Encoding:gzip, deflate
Content-Encoding:gzip

注：图片和PDF不该该压缩，由于它们原本就已经被压缩了。试图对它们进行压缩，只会浪费CPU资源，还可能会增长文件大小。

Apache1.3使用mod-gzip模块压缩文件为gzip

Apache2.x使用mod-deflate模块压缩文件为deflate

解决代理缓存问题：

Vary: Accept-Encoding 默认状况下，mod-gzip会向全部响应添加Vary: Accept-
Encoding头，以驱使代理执行正确操做。

Cache-Control:private 禁止代理缓存，防止边缘情形，服务器发送加了gzip的文件给不支持gzip的浏览器。

规则五、将样式表放在顶部：样式表在页面中的位置并不影响下载时间，但会影响页面呈现。遵循HTML规范，将其放在顶部，两种状况（白屏和无样式内容闪烁FOUC）都无需承担风险。

规则六、将脚本放在底部，这样页面既能够逐步呈现，也能够提升下载的并行度。

规则七、避免CSS表达式

规则八、使用外部JavaScript和CSS

内联更快一些，只限于首次请求，由于外部要承担更多的http请求。但外部文件能够缓存。若是网站中的每一个页面都使用了相同JavaScript和CSS，使用外部文件能够提升这些组件的重用率。

规则九、减小DNS查找

DNS（Domain Name
System），将主机名映射到IP地址上。减小惟一主机名的数量就能够减小DNS查找的数量。但减小惟一主机名的数量会潜在地减小页面中并行下载的数量。

另：能够经过Keep-Alive，它能够经过重用现有链接，从而避免TCP/IP开销来减小时间，且确保服务器支持Keep-
Alive，还能减小DNS查找。

规则十、精简JavaScript

规则十一、避免重定向

重定向用于将用户从一个URL从新路由到另外一个URL，重定向有多种—301,302是最多见的两种。重定向会使页面变慢，由于它延迟了整个HTML文档的传输。

规则十二、移除重复脚本

规则1三、配置Etag

当缓存组件过时时，会发送http请求，服务器会检测过时组件是否和原始服务器上的组件匹配，有两种方式：

一、比较最新修改日期HTTP1.0—服务器（Last-Modified），浏览器（If-Modified-Since）

二、比较实体标签HTTP1.1，且优先级高于1—服务器（Etag），浏览器（If-None-
Match），另当网站被宿主在多个服务器上时，Etag可能会阻碍缓存。

规则1四、使Ajax可缓存

《高性能网站进阶指南》

浏览器一般在运行JavaScript上花费的时间不多，绝大部分时间消耗在DOM上。

第二章：建立快速响应的Web应用

若是JavaScript代码执行时间超过0.1秒，页面将会给人不够平滑快捷的感受；超过1秒，则会感到应用程序缓慢；超过10秒，则die。

能够利用WebWorker和定时器解决。

第四章：无阻塞加载脚本

浏览器在下载和执行脚本时，出现阻塞的缘由在于，脚本可能会改变页面或JavaScript的名字空间，它们会对后续内容形成影响，如document.write改变页面。

下面列出来的技术既拥有外部脚本的好处，又能避免阻塞致使的减速影响：

　　一、 XHR Eval

　　二、 XHR注入

　　三、 Script in Iframe

　　四、 Script DOM Element

　　五、 Script Defer

　　六、 Document.write Script Tag，注：虽然多个脚本能够并行瞎子，但浏览器仍然阻塞其余类型的资源。

当外部脚本按常规方式加载时，它会阻塞行内代码的执行，竞争状态不会发生。一旦咱们开始异步加载脚本，就须要一种技术把行内代码和依赖行内代码的外部脚本整合起来。以下：

　　一、硬编码回调—将依赖函数改成在外部脚本中调用它。

　　二、 Window.onload—缺点：异步脚本必须阻塞onload;致使延迟执行

　　三、定时器—轮询

　　四、 Script onload—最佳

　　五、 Degrading Script Tags，以下：

<script src=’M.js’ type=’text/javascript’>



    var a = 1;



    function init(){M(a)};



</script>

第六章：布置行内脚本

虽然行内脚本不会产生额外的http请求，但会阻塞页面上资源的并行下载，还会阻塞逐步渲染。解决方案，以下：

　　一、行内脚本移至底部

　　二、使用异步回调启动JavaScript的执行

　　三、使用Script的defer属性

注：关于样式表，浏览器按照样式表在页面中列出的顺序应用它们，而与下载顺序无关。

当把行内脚本放置在样式表以后时，该行为明显地延迟资源的下载。这个顺序致使只有样式表下载完成而且行内脚本执行完毕，后续资源才能开始下载。

第八章：可伸缩的Comet

Comet，描述技术、协议和浏览器提供可行且可扩展的低延迟数据传输实现的集合，目标包括随时从服务端向客户端推送数据，提高传统Ajax的速度和可扩展性。

在客户端经常使用的技术包括轮询、长轮询、永久帧、XHR流以及WebSocket。

第十章：图像优化

该章内容包括：

　　一、Web上不一样图像格式的特征（GIF、JPEG和PNG）

　　二、自动化无损压缩

　　三、AlphaImage Loader滤镜

　　四、优化Sprites

　　五、其余图像技术

RGB颜色模型能够展现256256256中颜色，支持这么多颜色的图像格式叫作真彩色图像格式，如JPEG和真彩色类型的PNG.

为了节省图像信息存储空间，有一项技术是将图像中各类不一样颜色提取出来建一个表，这个表一般叫调色板，最经常使用的调色板图像格式为GIF和PNG8。

GIF：是一种调色板图像格式。

透明度只支持（0/1）状态，即透明或不透明；支持动画；

无损：也就是你打开任意一个GIF文件，作一些修改，保存关闭时，不会损失任何质量。

JPEG：有损，不支持透明和动画。JPEG是Web上用来存储照片的最佳格式。

PNG：彻底支持透明，且无损。

PNG又分为调色板PNG和真彩色PNG。

PNG8：调色板PNG

PNG24：真彩色PNG，但不支持alpha

PNG32：真彩色PNG，支持alpha

第十一章：划分主域

浏览器执行“每一个服务端最大链接数”的限制，是根据URL上的主机名，而不是解析出来的 IP地址。

第十三章：少用iframe

Iframe:

　　一、开销最高的DOM元素；

　　二、iframe阻塞onload事件，能够动态设置iframe的src属性和在onload事件后设置src属性来避免。

第十四章：简化CSS选择符

CSS选择符是从右到左进行匹配的。

选择符有：ID、类、类型、相邻+、子选择>、后代、通配符、属性、伪类和伪元素