关键渲染路径：Google 文档
JavaScript 加载最佳化
让html和javascript同时渲染：
设置<script>的async或者defer属性（boolean属性）（这是新html标准的用法,适应ie>9）
<script src="demo_async.js" async></script>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload', :async => true %>
async和defer区别:
✅defer是在html和js都渲染后，再执行js. 如果 JavaScript 里面有依赖 DOM 的话，适合用这个方式。
async是加载js后立即执行。
Inline 型式的 JavaScript 问题
无论是底部或 async/defer 做法，JavaScript 执行的顺序都需要注意不然会出错。之前在百宝箱教程中都假设 JavaScript 是放在 head，因此放在 HTML 内的 JavaScript 会出错。例如在 app/views/events/_form.html.erb 中，我们在 HTML 写了：
<script>
$("#event_category_id").select2( { theme: "bootstrap"} );
</script>
这段代码无论是把 JavaSript 改放在下方，或是用 async/defer，会因为找不到 jQuery 的 而出错，因为它的执行顺序跑在 jQuery 加载之前了 :(
那要怎么调整呢？
JavaScript 放底部的调整方式：
解决方式是我们在 javascript_include_tag 下再多加一行 yield :handwrite_javascript。（多一个区块）
然后再将原先写的 JavaScript 代码，用 content_for 把原先的网页包起来。那么这一段 JavaScript 就会在javascript_include_tag 以下执行了。
defer 的调整方式：推荐
不过如果使用了 'turbolinks:load'应该就无需使用DOMContentLoaded了。
将原本写的 JavaScript 代码，延后到 DOMContentLoaded 事件后才触发：
例如百宝箱的 app/views/admin/events/_form.html.erb 本来有一段使用 select2 的代码：
app/views/admin/events/_form.html.er
<script>
+ window.addEventListener('DOMContentLoaded', function() {
$("#event_category_id").select2( { theme: "bootstrap"} );
+ })
</script>
async 的调整方式：
HTML 中不能有 inline 形式的 JavaScript 了，因为我们不知道那些 async 的 JavaScript 到底什么时候会被加载，因此所有代码都必须放在打包后的 application.js 中。
请将把 layout 的 <body> 改成 <body id="<%= "#{controller_name}-#{action_name}"%>">，这样就可以在全局载入的 application.js 中指定只有这一页才执行的js code，例如：
$(document).ready(function(){
if ( $("#events-edit").length > 0 ) {
$("#event_category_id").select2( { theme: "bootstrap"} );
}
})
CSS 加载最佳化
拆出一些关键的 CSS 包成一个档案，这个档案比较小，因此可以加速首次渲染页面的时间。然后将其他没这个重要的 CSS 包在另一个档案，透过异步加载的方式。详细可以参考这篇的做法 Optimize CSS delivery in Rails app https://icook.engineering/optimize-css-delivery-in-rails-app-16a7727cc984
作业：（未完成）
- 请阅读 Google 的效能指南以及PageSpeed Insights 的评分标准，有中文翻译，但内容比本教程深，看懂多少是多少
- 请安装 Chrome 外挂 Lighthouse
- 侦测任一个你的网站，最好是已经部署的网站(Heroku、Linode 或是阿里云等)，在本机的话需要是 production 模式。请截图一张目前的 Performance 的分数报告
- 请套用任何你学到的前端效能优化方式
- 请分享你做了什么改进，以及截图一张最新的效能分数
CDN(content-delivery-network)
CDN 就是专门用来提供静态档案的服务器( CSS/JavaScript和图片等)，用户从距离最近的 CDN 服务器下载静态档案，如果 CDN 上面没有需要的档案，那么 CDN 会从我们的服务器上下载一份回去缓存起来。
如何再Rails上使用cdn
修改 config/enviorments/production.rb
config.action_controller.asset_host = "https://cdn.jd.com" <-cdn的网址。
一个更快的加速技巧：
如果使用的是 HTTP 1.1 通讯协定，一次对一个域名开2个连接，所以：
修改 config/environments/production.rb ：
config.action_controller.asset_host = "http://cdn％d.jd.com"
然后起多个域名，但是都连到同一台主机上，也就是输出网址改成：
- cdn0.jd.com/images/demo.jpg
- cdn1.jd.com/assets/admin.css
- cdn2.jd.com/assets/admin.js
- cdn3.jd.com/assets/fonts/font-awesome.ttf
下载速度就快了。
申请服务：
中国境内 CDN 服务(网站需要备案才能申请使用)
国外 CDN (随时申请随时使用，但是中国境内没有 CDN 节点)