恶补Web知识训练营 (2) 2017/4/14 – Payne 网络协会2017培训 恶补Web知识训练营 (2) 2017/4/14 – Payne

简要内容 Web 资源优化那些事 window.performance 查Timing 了解 HTTPS 在浏览器实现的密码学算法

什么网站会让你讨厌？ 等半天页面都出不来 按钮什么的点不了 上传文件老是失败 页面加载时不友善提醒 电脑的页面在手机上超难看

为什么网页加载很慢 客户的网络本身很慢 自己的服务器带宽限制／时延大 过多多余的HTTP请求资源 脚本执行效率低下 ……

解决客户网络慢 这个是不可能完美解决的，属于硬伤。 传统做法是针对较慢的上网用户提供“3G”（只有 一丢丢样式）、极简（纯文字）的版本。 由于中国互联网服务商纷纷响应总理号召，近年网 络已经大幅度提速了，基本排除以上情况。

自己的服务器带宽限制大 出于成本的考虑，在国内的个人的网站或者小团队的 网站，带宽在1M～2M之间。 访客较少时带宽的限制不明显，但是访问量大之后 （经常性达到带宽顶峰）限速的影响会体现出来。 【参见: ping1008.me 】

自己的服务器时延大 这类问题一般出现在部署在国外的网站。 一般海外便宜的主机都在美国、欧洲，甚至较不发达的国 家。（距离中国近的服务器一般很贵） 这些国家由于国际光缆走线的复杂（去印度的网络绕了一 个太平洋和印度洋）、海外各个路由节点的限速问题导致 与国内的通信链路比较差。 【参见：以前的goushi.me】

一口气解决带宽和时延问题！ 建议直接对主站、静态资源站点加一层CDN。 国内网站备案之后可以选择国内的CDN服务商。企业可以 买网宿（91cdn）、蓝汛（ChinaCache）。个人和小团队 可以直接用云服务商提供的CDN服务，一般都有自带。 国外网站可以使用免费的CloudFlare【但是对国内优化很 差】，有钱人的商人可以选Akamai。

前后端分离—— So great! 普通网站的前端主要消耗流量的资源都是HTML文档、 JavaScript脚本、CSS样式、图片、模板文件等资源。 实际通过API对接的数据（后端），在一般情况下不 是流量消耗、占用带宽的大头。 为了方便对主要消耗带宽的静态资源进行优化，非常 有必要实施前后端分离。

前后端分离场景 一个场景——新闻网页。 要求：展示一系列新闻 情况： 新闻可能有10000页 一般访客都是只看第一页和最新的新闻 考虑搜索引擎抓取（SEO优化）

场景分析 由于考虑到搜索引擎抓取新闻，因此不能完全通过AJAX抓取新闻的 列表以及详情信息。 需要配合CMS为每一页新闻单独生成一个静态的HTML文档文件 （减少数据库查询带来的性能问题）。 为了减少HTML文档带来的带宽消耗，对全部的页面实施Uglify （压缩代码）。 为了减少HTTP请求资源的数目，全部的CSS样式合并成一个文件， 同理JavaScript也是如此。

场景分析 为了减少客户端对HTTP资源的请求，静态资源服务器需要 设置静态资源的Expires协议头（需要手动设置），需要带 上E-Tag和Last Modified（nginx自动会做）。 为了更新缓存的静态资源，需要对变更的静态资源文件重新 命名以确保不会用到旧的缓存的资源。

案例效果 HTML文档实现Uglify 静态资源都有独立的命名

响应带上Expires等缓存协议头减少HTTP请求数 案例效果 CSS全部合并并且实现Uglify 响应带上Expires等缓存协议头减少HTTP请求数

案例效果

代码执行效率低下 由于渲染HTML的页面需要时间，反复的渲染页面（FPS需 要很高的一些绚丽的特效）或者元素过多（好比说一口气展 示100000张高清大图）会导致网页巨卡无比。 建议避免高频变换可见部分的元素（对于待操作的元素先隐 藏再展示），看不见的元素可以适当从网页文档流移除（超 级多图），并且实行懒加载的方式加载图墙（避免瞬间下载 过多图片）。

首屏时间 浏览器显示第一屏页面所消耗的时间，从开始加载到浏览器 页面屏幕可以显示区域有内容显示的时间。 首屏时间越短，意味着用户可以更快看到网页，给人一种快 的感觉。 因此，缩短首屏时间对于提升用户体验非常有帮助。

如何在代码上查看网页各种时间 使用 window.performance.timing 可以查看当前页面中 与时间相关的信息。 具体文档：https://developer.mozilla.org/zh- CN/docs/Web/API/PerformanceTiming

常用的时刻 navigationStart：上一个页面开始卸载的时刻； fetchStart：当前页面准备开始请求的时刻； domainLookupStart：准备解析域名DNS的时刻； connectStart：开始建立连接的时刻； requestStart ：请求开始的时刻； responseStart/End：开始／结束接收请求的时刻；

常用的时刻 domLoading：开始DOM解析的时刻； domInteractive：结束DOM解析，开始加载内嵌资源的 时刻； domComplete：文档全部解析完成的时刻； loadEventStart：load事件处理程序开始执行的时刻； loadEventEnd： load事件处理程序结束执行的时刻。

获取首屏时间 单单只是靠Performance是没办法获取真正意义的首屏时 间的。 最接近首屏时间的算法是： loadEventEnd – fetchStart。 但是时间会比真正的首屏时间长。 因此需要不断检测 document.body.offsetHeight >= document.body.clientHeight，才可以获得准确的首屏时 间

何为HTTPS 超文本传输安全协议（英语：Hypertext Transfer Protocol Secure，缩写：HTTPS，常称为HTTP over TLS， HTTP over SSL或HTTP Secure）是一种网络安全传输协 议。 在计算机网络上，HTTPS经由超文本传输协议进行通信， 但利用SSL/TLS来加密数据包。HTTPS开发的主要目的， 是提供对网络服务器的身份认证，保护交换数据的隐私与 完整性。

怎么用HTTPS 首先，服务器需要支持HTTPS。 关于服务器配置HTTPS，可以参考博文： https://blog.micblo.com/2017/01/20/%E5%88%A9%E7%94% A8Certbot%E4%BC%98%E9%9B%85%E8%8E%B7%E5%8F%96 Let-s- Encrypt%E5%85%8D%E8%B4%B9SSL%E8%AF%81%E4%B9% A6/ 支持HTTPS的网站，直接在协议上面用 “https://” 即可

HTTPS究竟做了什么 握手 交换密钥 加密通信

关键知识点 RSA 非对称加密通信（握手交换key） AES 对称加密通信 （实际数据传输） Diffie-Hellman 交换密钥 SHA1/SHA256 签名 HSTS 强制HTTPS 数字证书

SSL／TLS握手简要示意图

Crypto 在Web 由于原本的Web API是不涉及 Crypto的，因此原本在网页 实现密码学的算法需要额外带库。 Crypto库：https://www.npmjs.com/package/crypto-js

HTML5的 Crypto 基于 Promise 的 密码学套件： https://developer.mozilla.org/zh- CN/docs/Web/API/Crypto/subtle 支持AES、RSA等加密算法，以及各种Hash算法。

一个小例子 AES-GCM 的生成密钥、加密、解密例子： http://codepen.io/sc-payne/pen/MmYvMK