01 前端性能優(yōu)化介紹
02 網(wǎng)頁性能優(yōu)化
03 瀏覽器的加載和渲染機(jī)制
04 如何在Rails的視圖layout中放置JavaScript和CSS
05 Rails中Assets的多域名設(shè)置
01 前端性能優(yōu)化介紹
影響前端優(yōu)化的影響因素：
1、network網(wǎng)絡(luò)
dns:延遲孩灯、穩(wěn)定性、容錯性 #解決方式是更改dns服務(wù)器
cdn:content delivery network #一般放置圖片使用比較多
ip地址：ip anycast
02 網(wǎng)頁性能優(yōu)化
2松蒜、webpage網(wǎng)頁
減少http request 數(shù)量
減少http request 大小
減少http response 大小
增加web page的加載速度和執(zhí)行速度（渲染時間）
增加assets的下載速度
預(yù)加載數(shù)據(jù)
減少http request 數(shù)量
合并js和css #合并是雙刃劍，合并文件導(dǎo)致文件變大恋技，但是瀏覽器支持多個文件同時下載
圖片spirit sheet #把圖片都放在同一個圖片中
過期時間（http response header）
減少http response 大小
ajax
壓縮response, 比如js,css等
減少http request 大小
為asset設(shè)置獨立的域名奸焙；減少header數(shù)據(jù)的傳輸
03 瀏覽器的加載和渲染機(jī)制
瀏覽器的加載和渲染機(jī)制
說明：頁面代碼的前后順序即是代碼的加載順序，一般情況下認(rèn)為頁面首先有樣式哀澈，再有交互，因此把css放在前面度气，js放在后面割按。
html5中有async和defer兩個標(biāo)簽，用來更好處理js代碼
css在頭部：head標(biāo)簽中 #首先被下載
js在頁面底部 #body標(biāo)簽結(jié)束之前磷籍，js會首先被下載适荣，會阻塞其他下載，下載之后會立馬執(zhí)行院领，在執(zhí)行過程中也會阻塞其他下載（阻塞意味著網(wǎng)站不可交互）
避免使用inline js和css #很難做獨立的緩存控制
為靜態(tài)資源設(shè)置獨立域名 #提高連接數(shù)量弛矛，提高加載速度
load lazy #看不到的圖片不要加載，比如瀑布流形式的加載
增加asset的加載速度
減少靜態(tài)資源的大小
壓塑靜態(tài)資源
cdn
過期時間 #設(shè)置過期時間比然，在過期之前獲取緩存中的信息丈氓，提高加載速度
preload預(yù)加載數(shù)據(jù)
04 如何在Rails的視圖layout中放置JavaScript和CSS
參考前面的內(nèi)容說明，css文件放置在head中强法，js文件放置在body標(biāo)簽結(jié)束之前万俗。
這是layouts文件
<!DOCTYPE html>
<html>
<head>
<title>JobDemo</title>
<%= yield :stylesheets %> //放置css內(nèi)容
#css文件放置在head中
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
#js文件放置在body標(biāo)簽結(jié)束之前
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= yield :javascripts %> //放置js內(nèi)容
</body>
</html>
這是待渲染的文件
<%= content_for :stylesheets do %>
<%= stylesheet_link_tag 'hello', media: 'all' %>
<% end -%>
<div>
content
</div>
<%= content_for :javascripts do %>
<%= javascript_include_tag 'video.min'%>
<script type="text/javascript">
</script>
<% end -%>
05 Rails中Assets的多域名設(shè)置
對于單個域名的資源，有一個并發(fā)下載的限制饮怯，如果多個域名该编，相當(dāng)于增加了網(wǎng)站的并發(fā)下載數(shù)量。
沒看懂
