优化--前端（全占课，未完成作业：）;CDN; Http／2的设置（未完成)

前端效能：

关键渲染路径：Google 文档

JavaScript 加载最佳化

让html和javascript同时渲染：

设置<script>的async或者defer属性（boolean属性）（这是新html标准的用法,适应ie>9）

<%= 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 节点)

Amazon Cloudfront * Cloudflare