优化--前端（全占课，未完成作业：）

前端效能：

关键渲染路径：Google 文档

JavaScript 加载最佳化

让html和javascript同时渲染：

设置<script>的async或者defer属性（boolean属性）

<script src="demo_async.js" async></script>

<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload', :async => true %>

 async和defer区别:

 defer是在html和js都渲染后，再执行js. async是加载js后立即执行。

CSS 加载最佳化

拆出一些关键的 CSS 包成一个档案，这个档案比较小，因此可以加速首次渲染页面的时间。然后将其他没这个重要的 CSS 包在另一个档案，透过异步加载的方式。详细可以参考这篇的做法 Optimize CSS delivery in Rails app  https://icook.engineering/optimize-css-delivery-in-rails-app-16a7727cc984

作业：（未完成）

1. 请阅读 Google 的效能指南以及PageSpeed Insights 的评分标准，有中文翻译，但内容比本教程深，看懂多少是多少
2. 请安装 Chrome 外挂 Lighthouse
3. 侦测任一个你的网站，最好是已经部署的网站(Heroku、Linode 或是阿里云等)，在本机的话需要是 production 模式。请截图一张目前的 Performance 的分数报告
4. 请套用任何你学到的前端效能优化方式
5. 请分享你做了什么改进，以及截图一张最新的效能分数

---

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的网址。

中国境内 CDN 服务(网站需要备案才能申请使用)

• 百度云加速  阿里云  七牛云  又拍云

国外 CDN (随时申请随时使用，但是中国境内没有 CDN 节点)

• Amazon Cloudfront   * Cloudflare

---