PageSpeed 学习 [2]

05 Dec 2017

Course

蛋人网 前端性能优化

Network因素

  • DNS:延迟,稳定性,容错性 (DNS慢的话,就更换DNS服务器)
  • CDN (可以缓存一些小的静态文件)
  • IP地址: IP Anycast

Web Page网页 因素

  • 减少HTTP Request的数量
    • 合并css与js
    • 图片sprite sheets (把小图标放在一张大图上,应用场景有限)
    • 利用Cache: 设置过期时间(HTTP response header里)(貌似都是在前端服务器Apache/egnix来设置的)
  • 减少HTTP Response的大小
    • AJAX (异步请求)
    • 压缩response,比如css,js,json,html,xml,etc. (gzip)(不推荐针对图片开启压缩,图片的压缩甚至可能导致体积变大…..)
  • 减少HTTP Request的大小
    • 为assets设置独立的域名:减少headers数据的传输
  • 增加Web Paged的加载速度和执行速度(渲染时间)
    • 浏览器的加载和渲染机制
      • css在头部:head标签中
      • js在页面底部 (另外,async与defer是只有在HTML5中才支持)
      • 避免使用inline css和js
      • 为静态资源设置独立域名
      • lazy load (不显示的内容,就不要先加载,滚动那个地方以后再加载再显示)
  • 增加Assets的下载速度
    • 减少静态资源的大小
    • 压缩静态资源
    • CDN
    • 过期时间
  • 预加载数据

rails实操:js与css在layout中的位置

在environment/production.rb中可以设置js与css的压缩方式

# environment/produciton.rb
config.assets.js_compressor = :uglifier
config.assets.css_compressor = :sass

在header里写 <%= yield :stylesheets %>

在</body>之前写

<%= javascript_include_tag 'application' %>
<%= yield :javascripts %>

在另外的地方则利用content_for来写inline js

<%= 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 -%>

assets多域名设置 config.action_dispatch.x_sendfile_header = 'X-Accel-Redirect' 这个是默认设置开启的,让前端服务器来管理静态文件

config.action_controller.assets_host = 'http://assets.example.com' rails这个默认提供的设置方法是不支持assets多域名设置

在ApplicationController里引入一个module include Concerns::AssetUrlGenerator

不过这个module要自己来实现

# app/concerns/asset_url_generator.rb
module Concerns
  module AssetUrlGenerator
    
    def self.included(base)
      base.send :extend, ClassMethods

      base.class_eval do
        helper_method :gen_asset_abs_url

        ActionController::Base.asset_host = Proc.new { |source| gen_asset_host(source) }
      end
    end

    private
    def gen_asset_abs_url asset_relative_path
      asset_relative_path = asset_relative_path.to_s

      if Rails.env.production? or Rails.env.staging?
        "http://#{self.calss.gen_asset_host(asset_relative_path)}#{asset_relative_path}"
      else
        asset_relative_path
      end
    end

    module ClassMehtods
      def gen_asset_host asset_relative_path
        path_md5 = Digest::MD5.hexdigest(asset_relative_path).to_s
        asset_host = case Rails.env.to_s
        when 'production'
          AppConfig.assets.host % (path_md5[0].ord % AppConfig.assets.host_counter.to_s
        when 'staging'
          AppConfig.assets.host # staging iamges url test
        else
          nil
        end

        asset_host
      end
    end
  end
end
development: $common

test:
  <<: *common
  host: "http://localhost:5001"

production:
  <<: *common
  host: "http://eggman.tv"
  assets:
    host: "asset%d.eggman.tv"
    host_counter: 5
server {
  listen 80;
  server_name asset0.eggman.tv asset1.eggman.tv asset2.eggman.tv assets3.eggman.tv asset4.eggman.tv asset5.eggman.tv

  location ~* \.(jpg|png|jpeg|gif|js|css)$ {
    root /disk1/www/eggman/current/public;
    expires max;
  }

  location / {
    rewrite ^(.*($ http://eggman.tv$1 permanent;
  }
}

其它

-%>%>的区别 Difference between -%> and %> in rails - Stack Overflow 前者不会输出newline而已

Asset Pipeline

是由sprockets-rails gem来完成的 uglifier使用来压缩js的

therubyracer是js的一个解释

Udacity Website Performance Optimization Testing Course

FD5771E3-E2F8-4E50-B3FE-5E6EFF9D7A39

上面这个就是Critical Rendering Path 16554A0D-4F9A-43CA-ACD2-9FEC282E3188

一段html就这样被解析为了 DOM Tree

接续顺序为:Characters -> Tokens -> Nodes -> DOM

这个DOM Tree无非就是想呈现出每一个Node之间的关系,有了关系就又了结构

Constructing the Object Model这个不错 说了上面同样的内容

CSSOM

CE042990-08B2-43F2-B575-242D6146B542

css is render blocking

用time tool来查看css渲染速度,再决定是否要优化

980px原来是浏览器默认的窗口宽度 如果你不用viewport去设置宽度的话,就会用980px这个默认宽度,而在手机上打开的时候,就是一个缩小版的(字号很小)因为为了980px。 而这样我们一般就需要用viewport来设置成设备宽度 <meta name="viewport" content="width=device-width">

布局变更也会影响性能,所以尽量批量更新布局

Rails Performance Techniques Series - GoRails

Rails Performance Techniques Series - GoRails