前端性能优化（蛋人网）

01 前端性能优化介绍
02 网页性能优化
03 浏览器的加载和渲染机制
04 如何在Rails的视图layout中放置JavaScript和CSS
05 Rails中Assets的多域名设置

01 前端性能优化介绍
影响前端优化的影响因素：
1、network网络

dns:延迟、稳定性、容错性 #解决方式是更改dns服务器
cdn:content delivery network  #一般放置图片使用比较多
ip地址：ip anycast

02 网页性能优化
2、webpage网页

减少http request 数量
减少http request 大小
减少http response 大小
增加web page的加载速度和执行速度（渲染时间）
增加assets的下载速度
预加载数据

减少http request 数量

合并js和css  #合并是双刃剑，合并文件导致文件变大，但是浏览器支持多个文件同时下载
图片spirit sheet  #把图片都放在同一个图片中
过期时间（http response header）

减少http response 大小

ajax
压缩response, 比如js,css等

减少http request 大小

为asset设置独立的域名；减少header数据的传输

03 浏览器的加载和渲染机制
浏览器的加载和渲染机制
说明：页面代码的前后顺序即是代码的加载顺序，一般情况下认为页面首先有样式，再有交互，因此把css放在前面，js放在后面。
html5中有async和defer两个标签，用来更好处理js代码

css在头部：head标签中 #首先被下载
js在页面底部 #body标签结束之前，js会首先被下载，会阻塞其他下载，下载之后会立马执行，在执行过程中也会阻塞其他下载（阻塞意味着网站不可交互）
避免使用inline js和css #很难做独立的缓存控制
为静态资源设置独立域名 #提高连接数量，提高加载速度
load lazy #看不到的图片不要加载，比如瀑布流形式的加载

增加asset的加载速度

减少静态资源的大小
压塑静态资源
cdn
过期时间  #设置过期时间，在过期之前获取缓存中的信息，提高加载速度

preload预加载数据

04 如何在Rails的视图layout中放置JavaScript和CSS
参考前面的内容说明，css文件放置在head中，js文件放置在body标签结束之前。
这是layouts文件

  
    
   <%= yield :stylesheets %> //放置css内容
    #css文件放置在head中
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= csrf_meta_tags %>
  

  
    <%= yield %>
    #js文件放置在body标签结束之前
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    <%= yield :javascripts %> //放置js内容
  

这是待渲染的文件

<%= content_for :stylesheets do %>
  <%= stylesheet_link_tag 'hello', media: 'all' %>
<% end -%>


  content


<%= content_for :javascripts do %>
  <%= javascript_include_tag 'video.min'%>
  
<% end -%>

05 Rails中Assets的多域名设置
对于单个域名的资源，有一个并发下载的限制，如果多个域名，相当于增加了网站的并发下载数量。
没看懂