优化--前端(全占课,未完成作业:);CDN; Http/2的设置(未完成)
关键渲染路径: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 节点)