前端性能优化（蛋人网）
2017-02-15 本文已影响81人
Jayzen
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文件
<!DOCTYPE html>
<html>
<head>
<title>JobDemo</title>
<%= yield :stylesheets %> //放置css内容
#css文件放置在head中
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
#js文件放置在body标签结束之前
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= yield :javascripts %> //放置js内容
</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的多域名设置
对于单个域名的资源，有一个并发下载的限制，如果多个域名，相当于增加了网站的并发下载数量。
没看懂
