01 前端性能優(yōu)化介紹
02 網(wǎng)頁(yè)性能優(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)定性、容錯(cuò)性 #解決方式是更改dns服務(wù)器
cdn:content delivery network #一般放置圖片使用比較多
ip地址：ip anycast
02 網(wǎng)頁(yè)性能優(yōu)化
2、webpage網(wǎng)頁(yè)
減少http request 數(shù)量
減少http request 大小
減少http response 大小
增加web page的加載速度和執(zhí)行速度（渲染時(shí)間）
增加assets的下載速度
預(yù)加載數(shù)據(jù)
減少http request 數(shù)量
合并js和css #合并是雙刃劍，合并文件導(dǎo)致文件變大，但是瀏覽器支持多個(gè)文件同時(shí)下載
圖片spirit sheet #把圖片都放在同一個(gè)圖片中
過(guò)期時(shí)間（http response header）
減少http response 大小
ajax
壓縮response, 比如js,css等
減少http request 大小
為asset設(shè)置獨(dú)立的域名；減少header數(shù)據(jù)的傳輸
03 瀏覽器的加載和渲染機(jī)制
瀏覽器的加載和渲染機(jī)制
說(shuō)明：頁(yè)面代碼的前后順序即是代碼的加載順序，一般情況下認(rèn)為頁(yè)面首先有樣式，再有交互，因此把css放在前面，js放在后面。
html5中有async和defer兩個(gè)標(biāo)簽，用來(lái)更好處理js代碼
css在頭部：head標(biāo)簽中 #首先被下載
js在頁(yè)面底部 #body標(biāo)簽結(jié)束之前，js會(huì)首先被下載，會(huì)阻塞其他下載，下載之后會(huì)立馬執(zhí)行，在執(zhí)行過(guò)程中也會(huì)阻塞其他下載（阻塞意味著網(wǎng)站不可交互）
避免使用inline js和css #很難做獨(dú)立的緩存控制
為靜態(tài)資源設(shè)置獨(dú)立域名 #提高連接數(shù)量，提高加載速度
load lazy #看不到的圖片不要加載，比如瀑布流形式的加載
增加asset的加載速度
減少靜態(tài)資源的大小
壓塑靜態(tài)資源
cdn
過(guò)期時(shí)間 #設(shè)置過(guò)期時(shí)間，在過(guò)期之前獲取緩存中的信息，提高加載速度
preload預(yù)加載數(shù)據(jù)
04 如何在Rails的視圖layout中放置JavaScript和CSS
參考前面的內(nèi)容說(shuō)明，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è)置
對(duì)于單個(gè)域名的資源，有一個(gè)并發(fā)下載的限制，如果多個(gè)域名，相當(dāng)于增加了網(wǎng)站的并發(fā)下載數(shù)量。
沒(méi)看懂
