Web性能是用户体验的一个基本元素。在第一部分在本系列文章中，我讨论了一种自动化web性能优化相关任务的方法。在本系列的第二部分中，我们将稍微多讲一些先进的技术用于提高前端web性能。
这就是我们将要讨论的内容:优化HTML结构
- 在底部引用JavaScript和CSS文件
- 处理无样式内容的闪光(FOUC)
- 内联CSS和JavaScript
服务器配置
- 浏览器缓存
- 文件应该缓存多长时间?
- 如何覆盖缓存
- 数据压缩
在应用了所有这些之后优化在我的网站上，我得到了满分(100/100)PageSpeed见解手机和桌面网页的性能分析得分。
优化HTML结构
很长一段时间，我认为我的外部CSS和JavaScript引用应该在<头>标签。在HTML文档开始时引用JS和CSS资源对我来说是有意义的，因为我需要这些东西使我的网页看起来和功能正常。但是有脚本而且链接HTML文档开头的元素会阻止页面的呈现，这意味着在资源下载和处理完成之前，浏览器不会处理和显示任何后续的HTML元素。
许多JavaScript文件，特别是那些在编写时考虑到异步编程的JavaScript文件，通常不需要在<头>标记并可以加载到HTML文档的更下方，这样它们就不会阻止浏览器呈现页面内容。在HTML文档末尾引用CSS文件有点棘手。这是因为当您在文档末尾加载CSS文件时，用户可能会开始看到没有任何样式的页面内容，因为来自外部样式表的样式规则还没有加载和处理。
这种情况叫做无风格内容的闪光(FOUC)。
在底部引用JavaScript和CSS文件
只要有可能，我们应该在文档底部引用外部资源。就在结案之前身体标签。
< html > < >头……主管< / > < >身体…<！脚本和链接元素最好放在这里——>< /身体> < / html >处理无样式内容的Flash
为了解决FOUC问题，我所做的是身体元素的内联样式属性为0%不透明度。
<身体风格=不透明度:0>然后，在外部样式表中重置身体元素回到100%不透明度。
身体{透明度:1。重要;｝在加载和处理外部样式表之后，将显示内容。
这种技术的问题是，如果服务器出现故障，导致无法下载CSS文件，用户将只能看到空白页，因为给身体元素。
内联CSS和JavaScript
你也可以在里面包含CSS样式规则<时尚>标签和JS脚本<脚本>标记在HTML文档中。这提高了页面速度因为浏览器不需要请求和下载外部资源来呈现网页。然而，这只适用于少量的CSS和JS。否则，HTML文档的文件大小将会增加，而JS和CSS将无法从浏览器缓存中受益。多年来，我们不鼓励内联我们的CSS和JS，因为它使我们的项目更难模块化、扩展和维护。
然而，现在有很多构建工具可以处理这些问题。现在推荐你可以内联CSS和JS，它们是渲染你的上面的内容，以提高感知的页面性能所必需的。下面是一个脚本，它内联来自外部样式表的样式规则。这是基于一个例子可以在PageSpeed Insights文档中找到。
这种内联CSS样式规则的方法的问题是，如果用户禁用了JavaScript，您的样式规则将不会呈现。
< html > < >头……主管< / > < >身体…< /身体> < / html >服务器配置
如果可以访问服务器配置，可以做几件事来提高站点速度:浏览器缓存和数据压缩。
浏览器缓存
允许你的网站文件(外部样式表，JavaScript文件，图片等)被浏览器缓存，这意味着当用户请求网站上的网页时，不需要每次都下载这些文件。这可以加快用户在浏览到另一个网页时的体验，因为样式表和网页字体等内容不需要再次下载，因为它们已经存储在用户的浏览器缓存中。那么我们如何允许浏览器缓存我们的文件呢?
当浏览器向我们的web服务器请求文件时，服务器会做的一件事就是发送文件的HTTP头信息。文件的HTTP头文件包含关于被请求文件的元数据，以及关于浏览器应该如何处理该文件的指示。我们可以指定的标准HTTP报头字段之一是cache - control．
cache - control允许我们定义希望浏览器如何缓存文件。我们可以用cache - control头字段，告诉浏览器是否应该缓存该文件，以及应该缓存该文件多长时间。事实证明，在我的网站上，没有cache - controlSVG文件的HTTP头字段。
我在我的服务器上使用lighttpd模块，所以我打开了它的配置文件(lighttpd.conf)并添加了以下行来设置信息指导1个月。
到期。Url = ("/svg/" => "access plus 1 months")重新启动我的web服务器后，我使用Chrome DevTools检查SVG文件，以确保我的配置按计划进行。
你可以看到头选项卡cache - control字段现在指定信息指令。
cache - control:信息= 2592000顺便说一下,信息以秒为单位指定。2,592,000秒= 30天。
文件应该缓存多长时间?
在这方面没有具体的规定完全您的文件应该缓存多长时间，但是最佳实践是尽可能长时间地缓存它们。缓存持续时间取决于更新站点文件的频率和缓存的文件类型。
例如，您可以设置一个更长的信息对于不经常更改的文件，例如网站的logo、JS文件和CSS文件。作为参考，HTML5样板有这些缓存持续时间(你可以在它的. htaccess样板)：
| 文件类型 | 缓存时间 |
|---|---|
| CSS文件 | 1年 |
| JavaScript文件 | 1年 |
| 图片(如PNG, JPG, GIF, SVG) | 1个月 |
| HTML文档 | 没有缓存 |
覆盖浏览器缓存
如果我们在资源缓存过期之前更新资源，我们将需要一种方法来强制浏览器重新下载该资源。有很多方法来处理这种情况。一种简单的方法是简单地更改资源的名称并更新对它的引用。
例如，如果我们更新一个名为styles.css，我们可以将其重命名为styles.v2.css．您可以使用gulp-rev-all在资源发生更改时重命名资源，因为手动这样做是不可伸缩的。然后我们还需要更新HTML，以便链接引用styles.css现在点styles.v2.css．这通常是通过服务器端脚本(如PHP)和/或CMS模板文件完成的，以便更新在整个站点中传播。
或者，您也可以使用gulp-rev-replace包。
数据压缩
压缩文件可以让浏览器更快地下载它们。当浏览器向服务器请求页面资源时，服务器将告诉浏览器资源已被压缩。然后浏览器将下载资源，然后解压缩它。
网站上最常用的数据压缩器之一是GZip．
在Apache上启用GZip
对于Apache web服务器，你可以添加GZip压缩指令. htaccess文件。下面的一组指令说明了哪些文件应该压缩，哪些文件不应该压缩。本说明仅在以下情况下执行mod_gzip已在服务器上安装并启用。
mod_gzip_on Yes mod_gzip_dechunk Yes mod_gzip_item_include file .(html?|txt|css|js|php|pl)$ mod_gzip_item_include handler ^cgi-script$ mod_gzip_item_include mime ^text/. < mod_gzip_on Yes mod_gzip_dechunk Yes mod_gzip_item_include file .(html?|txt|css|js|php|pl)* mod_gzip_item_include mime ^application/x-javascript* mod_gzip_item_exclude mime ^image/。^内容编码:.*gzip。* < / ifModule > 或者，您也可以使用Apache的mod_deflate模块。
在nginx上启用GZip
如果你在nginx服务器上，下面是GZip数据压缩指令，可以放在你的服务器的配置文件中。(以下依赖于nginx的HttpGzipModule．）
gzip;gzip_comp_level 2;gzip_http_version 1.0;gzip_proxied任何;gzip_min_length 1100;gzip_buffers 16 8 k;Gzip_types文本/纯文本/html文本/css应用程序/x-javascript文本/xml应用程序/xml应用程序/ rss文本/ javascript;#禁用IE < 6，因为有一些已知的问题gzip_disable”MSIE[1 - 6]。(? ! * SV1)”;#为下游代理添加vary头，以避免将缓存的gzip文件发送到IE6gzip_vary;如果你在nginx上使用lighttpd:
#添加mod_compress到你的模块服务器。模块=(…“mod_compress”……)压缩。Allowed-encodings = ("gzip"， "deflate")压缩。Filetype = ("text/plain"， "text/html"， "text/javascript"， "text/css"， "text/xml")#不要忘记创建一个缓存目录并在这里添加路径压缩。cache-dir = "<您的缓存目录>"在我的例子中，web服务器启用了gzip压缩，但它不能压缩SVG文件，所以我必须将其添加到服务器应该压缩的文件类型列表中。
压缩。Filetype =(…，“图像/ svg + xml”）注意:不要忘记在修改配置文件后重新启动web服务器。
检查GZip压缩
为了验证GZip压缩是否真的适用于SVG文件，我使用了Chrome DevTools。在数据压缩:
大小:4.4KB内容:4.1KB数据压缩后:
尺寸:280B内容:4.1KB文件大小减少了-93.6%只需一个简单的调整web服务器配置!
结论
现在是揭晓真相的时刻。在完成我所讨论的所有事情之后，我的站点的PageSpeed得分是多少?桌面页面速度洞察得分
移动pagespespeed Insights Score
我关于网页性能优化的系列文章到此结束。
我希望阅读这篇文章能帮助你制作更快的网站!此外，我希望你已经发现了一些自动化构建过程的想法和技术，这样你就可以在未来的开发项目中不用花太多精力就能实现web性能优化。欢迎在Twitter和Facebook上分享如果这对你有帮助的话!
我们都能从更快的网络中受益。此外，如果你有提高网站速度的建议，请在评论中分享!转到第1部分
相关内容
