最近更新了我们的网站，它是经过了设计上的全面验收的。但实际上，作为软件开发者，我们会注重很多技术相关的零碎的东西。我们的目标是控制性能，注重性能，未来可伸展，为网站增添内容是一种乐趣。接着就来告诉你，为什么我们的网站速度比你们的快吧（抱歉，确实是这样的）。 性能设计 在我们的项目中，我们每天都会和设计师和产品负责人讨论关于平衡美观和性能的问题。对于我们自己的网站，这样做是很简单的。简言之，我们认为好的用户体验从快速的内容传输开始，也就意味着 性能 > 美观。 好的内容、布局、图片和交互是吸引用户的重要因素。这每个因素都会影响页面的加载时间和终端用户体验。每一步我们都在探讨如何在获得好的用户体验和保证设计美感的同时，最小化对性能的影响。 内容优先 我们想要把核心内容尽快地呈现给用户，意味着我们要处理好基本的 HTML 和 CSS。每个页面都应该达到基本的目的：传递信息。JS、CSS、网页字体、图片、网站分析等优化都是位居于核心内容之下的。 可控性 给理想网站定义了标准后，我们总结出：要想达到预期效果，就要能对网站各方面的控制都游刃有余。我们选择构建自己的静态站点生成器，包括资源传输，并且由我们自己操控。 静态站点生成器 我们用 Node.js 实现了静态站点生成器。它是采用带有简短 JSON 页面描述标签的Markdown 文件来生成整个网站结构和它所有的资源。为了包括特殊的页面脚本，也可以附带一个 HTML 文件。以下是一个简单化的描述标签和 markdown 文件，用于博客的发布，用它来生成真正的 HTML。 JSON 描述标签:
markdown 文件:
图片传输 平均一个 2406kb 的网页中 1535kb 是图片。就因为图片在网站中占据了这么大的一个比例，所以它也是性能优化的重点之一。 WebP格式 WebP是一种现代图片格式，为网页图片提供了出色的低损耗、有损压缩。WebP格式的图片实质上比其它格式的小，有时可以比同样的 JPEG 图片小 25%。 WebP被大多数人所忽略，也没被经常使用。截止到写这篇文章的时候，WebP 仅支持Chrome, Opera 和 Android (仍超过了我们50%的用户)，但我们可以优雅降级为 JPG/PNG。 使用
我们使用Scott Jehl 的 picturefill 来使那些不支持 我们使用 作为那些不支持 生成 尽管图片传输方式已经确定了，我们仍需要思考该怎样有效地执行。我喜欢 生成图片 在构建过程中，原图片的多个实例，包括JPG, PNG和WebP格式，我们使用 gulp responsive 来生成。 最小化图片 在markdown文件中写[图片描述](image.jpg). 在构建过程中使用自定义Markdown渲染器来为已经完全成熟的 SVG动画 我们为自己的网站选择了特定的图标类型，其中SVG插图占了主要地位。这样做有以下几个原因：
自定义网页字体 在深入之前，这里有一个关于在浏览器设置自定义字体的简短介绍。当浏览器发现CSS里面有@font-face 的定义，但是用户的电脑并不支持该字体时，它会尝试下载该字体文件。在下载时，多数浏览器根本不会用这种字体来展示文本。这种现象称为“不可见文本的闪现” 或者 FOIT。如果你有留意，你会发现网页上都有这种情况存在。如果你问我，我会告诉你这会影响用户体验。它延迟了用户读取他们所需内容的时间。我们可以迫使浏览器改变这种行为，变成 “无样式内容闪现” 或者称为 FOUT。我们告诉浏览器先使用普通字体，像 Arial 或者 Georgia。当自定义的字体下载完成后，再代替标准字体并且重新渲染。这样，即使自定义字体下载失败，仍然不会影响内容的可读性。然而，有人会认为这是一种妥协的做法，但我们认为自定义字体只是一种优化。尽管没有自定义字体，网页看起来也完好，也能百分百的正常运行。勾选/不勾选复选框来切换我们的网页字体，来自己体验一下： 切换下载的字体类 使用自定义网页字体可以改善我们的用户体验，只要你能够优化他们，并且负责任地为之服务。 字型子集设定 到目前为止，子集设定是改善网页字体性能最快的方式。我将会向每个使用自定义字体的网页开发者推荐它。如果你能完全控制网页内容，并且知道它将要展示哪些特性的话，你可以完全使用子集设定。但是，即使是仅仅把字体设为西方语言，也会对文件大小造成很大的影响。例如，我们的 Noto Regular WOFF 字体，默认是246KB，将其设为西方语言后，大小下降到31KB。我们使用 Font squirrel webfont, 这种字体真的很易用。 字体监听器 Bram Stein 推出的字体监听器是一个很了不起的脚本，可以帮助检查字体是否已被加载。至于你是如何加载字体的，是通过一个网页字体服务，还是自己上传就不可知了。在这个监听器告诉我们所有自定义的字体已经下载完毕后，我们就可以在 元素上添加一个字体加载完毕的类，我们的页面就会重新用新的字体：
注意： 为了简短，我没有给上面CSS中的 Noto 加上 @font-face 的声明。 我们可以设定一个cookie来记住所有的字体已经被加载过，就可以让他们缓存在浏览器里面了。我们使用这个cookie来做重复的浏览，这个我后续会解释。 在不久的将来，我们或许不需要 Bram Stein 的脚本来监听这个行为。CSS开发团队已经提案一个新的 @font-face 描述器，也叫 font-display。它的属性值控制着一个可下载的字体是如何在还没加载出来时就渲染页面的。这是CSS对font-display的描述：它将带给我们像上面方法一样的行为效果。你可以读读更多关于 font-display 的属性。 JS和CSS懒加载 一般来讲，我们都是尽可能快的加载需要的资源。我们移除一些堵塞的请求来加快页面渲染，优化首屏，用浏览器缓存来处理重复的页面。 JS懒加载 设计上，我们的网站并没有很多JS。我们发展了一个JavaScript工作流来处理我们目前已有的js, 以及未来会用到的js资源。 JS在 块里面渲染，这是我们想要的。JS应该只是用来提高用户体验，不应该是访问者需要的关键。处理JS堵塞渲染的简单方法就是把脚本放在页面的尾部。这样网页就会在整个HTML 渲染完毕后才去加载JS。 另一种可以把脚本放在 head 执行的方案是在 我们把这小段脚本放在页面头部，来检测浏览器是否支持原生JavaScript的document.querySelector 和 window.addEventListener 属性。如果支持，我们通过
rel='stylesheet' href='0d82f.css'> Apache 服务端逻辑看起来像一行一行的备注，一般以 如果是true的话，我们就假定这是用户的第一次浏览。 第一次浏览我们添加了 |
|
|
来自： 昵称34978982 > 《H5》
