美文网首页
前端性能优化(蛋人网)

前端性能优化(蛋人网)

作者: Jayzen | 来源:发表于2017-02-15 17:57 被阅读81次

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的多域名设置
对于单个域名的资源,有一个并发下载的限制,如果多个域名,相当于增加了网站的并发下载数量。
没看懂

相关文章

  • 前端性能优化(蛋人网)

    01 前端性能优化介绍02 网页性能优化03 浏览器的加载和渲染机制04 如何在Rails的视图layout中放置...

  • 前端性能优化(中)

    性能优化调研系列文章 《前端性能优化(上)》 《前端性能优化(中)》 《前端性能优化(下)》 《前端性能优化(上)...

  • 前端性能优化(下)

    性能优化调研系列文章 《前端性能优化(上)》 《前端性能优化(中)》 《前端性能优化(下)》 《前端性能优化(中)...

  • 前端性能优化(上)

    性能优化调研系列文章 《前端性能优化(上)》 《前端性能优化(中)》 《前端性能优化(下)》 为什么要进行前端性能...

  • 前端面试必问及加分点---性能优化篇

    如何进行网站性能优化 你有用过哪些前端性能优化的方法? 谈谈性能优化问题 代码层面的优化 前端性能优化最佳实践

  • 前端性能优化概述

    前端性能优化概述 前言 性能优化是一个让人很纠结的话题,每一个前端工程师都知道前端性能优化是很重要都一个环节。但是...

  • 前端性能优化

    对于前端的性能优化,主要有分为加载优化和性能优化。在Google官方文档中,给出了性能优化有哪些好处。前端优化的最...

  • 常用的后端性能优化六种方式:缓存化+服务化+异步化等

    性能优化专题 前端性能优化 数据库性能优化 jvm和多线程优化 架构层面优化 缓存性能优化 常用的后端性能优化六大...

  • 关于前端性能优化问题详解

    关于前端性能优化问题详解 出处:http://segmentfault.com/blogs 前端性能优化指南 AJ...

  • 前端性能优化

    前端性能优化 下面是我认知的前端性能优化的策略,本书主要着手 JavaScript 优化展开阐述。 JavaScr...

网友评论

      本文标题:前端性能优化(蛋人网)

      本文链接:https://www.haomeiwen.com/subject/tcgqwttx.html