Slow page loads

[markbrown4]

When I activate :autoprefixer page loads in development take a few seconds.

Why is this?

[tdreyno]

At a guess, the core autoprefixer library we are using is written in Javascript, so every time a CSS file needs to be prefixed, a node runtime needs to be booted up and executed.

Is the build also significantly slower?

Thoughts @porada ?

[porada]

That’s probably the reason. I’m not sure how we could improve it, though.

[tdreyno]

@porada My only other guess is that it's running more times or on more files than expected. But otherwise, yeah.

[porada]

Checked Rack#prefix with RubyProf. If I read this log correctly, the ExecJS runtime is indeed slow.

Measure Mode: wall_time
Thread ID: 70288381698560
Fiber ID: 70288397242160
Total: 1.262328
Sort by: self_time

 %self      total      self      wait     child     calls  name
 96.43      1.217     1.217     0.000     0.000        4   IO#read
  0.91      0.012     0.012     0.000     0.000        4   <Class::IO>#popen
  0.79      0.017     0.010     0.000     0.007        4   ExecJS::ExternalRuntime::Context#write_to_tempfile
  0.74      1.258     0.009     0.000     1.249        4   ExecJS::ExternalRuntime::Context#exec
  0.42      0.005     0.005     0.000     0.000        4   IO#write
  0.14      0.003     0.002     0.000     0.001        1   AutoprefixerRails::Processor#build_js
  0.12      0.002     0.002     0.000     0.000        4   <Object::ExecJS::ExternalRuntime>#compile_source
  0.09      0.001     0.001     0.000     0.000        1   <Class::IO>#read
  0.05      0.001     0.001     0.000     0.000        4   <Class::File>#unlink
  0.05      0.001     0.001     0.000     0.000        8   IO#close
  0.03      0.000     0.000     0.000     0.000        4   File#initialize
  0.02      1.229     0.000     0.000     1.229        4   ExecJS::ExternalRuntime#exec_runtime
  0.01      0.001     0.000     0.000     0.000        4   ExecJS::ExternalRuntime::Context#extract_result
  0.01      0.000     0.000     0.000     0.000        3   JSON::Ext::Generator::State#generate
  0.01      0.000     0.000     0.000     0.000       21   String#encode
  0.01      0.000     0.000     0.000     0.000        4   Process::Status#success?
  0.01      0.000     0.000     0.000     0.000        4   <Module::ExecJS>#cygwin?
  0.01      0.646     0.000     0.000     0.646        2   ExecJS::ExternalRuntime::Context#eval
  0.01      0.000     0.000     0.000     0.000        4   JSON::Ext::Parser#initialize
  0.01      0.000     0.000     0.000     0.000        4   <Class::File>#stat
  0.01      0.612     0.000     0.000     0.612        9  *Class#new
  0.01      0.000     0.000     0.000     0.000       17   <Class::File>#basename
  0.00      0.000     0.000     0.000     0.000        4   Time#strftime
  0.00      0.001     0.000     0.000     0.001        4   Dir::Tmpname#create
  0.00      0.000     0.000     0.000     0.000        4   Dir::Tmpname#make_tmpname
  0.00      0.000     0.000     0.000     0.000        4   JSON#parse
  0.00      0.000     0.000     0.000     0.000       17   Regexp#=~
  0.00      0.000     0.000     0.000     0.000       12   <Object::Object>#[]
  0.00      0.000     0.000     0.000     0.000       12   Kernel#initialize_dup
  0.00      0.000     0.000     0.000     0.000        5   Hash#merge
  0.00      0.000     0.000     0.000     0.000       42   Hash#key?
  0.00      0.000     0.000     0.000     0.000        4   JSON::Ext::Parser#parse
  0.00      0.000     0.000     0.000     0.000        4   Array#each
  0.00      0.000     0.000     0.000     0.000        8   ExecJS::Encoding#encode
  0.00      0.000     0.000     0.000     0.000        4   <Class::File>#expand_path
  0.00      0.000     0.000     0.000     0.000        5   Hash#initialize_copy
  0.00      0.000     0.000     0.000     0.000        4   <Class::Dir>#tmpdir
  0.00      0.000     0.000     0.000     0.000        3   JSON#generate
  0.00      0.000     0.000     0.000     0.000        5   <Class::File>#join
  0.00      0.000     0.000     0.000     0.000        5   Module#===
  0.00      0.548     0.000     0.000     0.548        1   ExecJS::ExternalRuntime::Context#call
  0.00      0.000     0.000     0.000     0.000        4   String#encoding
  0.00      0.000     0.000     0.000     0.000        4   File#to_path
  0.00      0.001     0.000     0.000     0.001        4   ExecJS::ExternalRuntime::Context#create_tempfile
  0.00      0.000     0.000     0.000     0.000        1   Array#pop
  0.00      0.000     0.000     0.000     0.000        1   Pathname#plus
  0.00      0.714     0.000     0.000     0.714        1   AutoprefixerRails::Processor#runtime
  0.00      0.000     0.000     0.000     0.000        3   JSON::Ext::Generator::State#initialize_copy
  0.00      1.262     0.000     0.000     1.262        1   Middleman::Autoprefixer::Extension::Rack#prefix
  0.00      0.000     0.000     0.000     0.000        4   File#path
  0.00      0.000     0.000     0.000     0.000        4   String#split
  0.00      0.000     0.000     0.000     0.000        4   Kernel#rand
  0.00      0.000     0.000     0.000     0.000       17   Pathname#chop_basename
  0.00      1.262     0.000     0.000     1.262        1   AutoprefixerRails::Processor#process
  0.00      0.000     0.000     0.000     0.000        2   ExecJS::Runtime#context_class
  0.00      0.000     0.000     0.000     0.000        8   Fixnum#to_s
  0.00      0.000     0.000     0.000     0.000        3   Kernel#dup
  0.00      0.000     0.000     0.000     0.000        4   <Class::Time>#now
  0.00      0.000     0.000     0.000     0.000        4   ExecJS::ExternalRuntime#binary
  0.00      0.495     0.000     0.000     0.495        1   <Module::ExecJS>#compile
  0.00      0.000     0.000     0.000     0.000        8   <Class::String>#try_convert
  0.00      0.000     0.000     0.000     0.000        8   Fixnum#divmod
  0.00      0.612     0.000     0.000     0.612        2   ExecJS::ExternalRuntime::Context#initialize
  0.00      0.000     0.000     0.000     0.000        4   Dir::Tmpname#tmpdir
  0.00      0.000     0.000     0.000     0.000        8   Fixnum#|
  0.00      0.000     0.000     0.000     0.000        4   Fixnum#+
  0.00      0.000     0.000     0.000     0.000        2   Kernel#respond_to?
  0.00      0.000     0.000     0.000     0.000        4   Time#initialize
  0.00      0.000     0.000     0.000     0.000        4   <Class::IO>#open
  0.00      0.000     0.000     0.000     0.000        2   Hash#to_hash
  0.00      0.000     0.000     0.000     0.000        2   JSON::Ext::Generator::State#configure
  0.00      0.000     0.000     0.000     0.000        1   AutoprefixerRails::Result#initialize
  0.00      0.001     0.000     0.000     0.001        1   AutoprefixerRails::Processor#read_js
  0.00      0.000     0.000     0.000     0.000        4   File::Stat#directory?
  0.00      0.000     0.000     0.000     0.000        4   File::Stat#writable?
  0.00      0.000     0.000     0.000     0.000        1   AutoprefixerRails::Processor#process_proxy
  0.00      0.000     0.000     0.000     0.000        4   Kernel#respond_to_missing?
  0.00      0.000     0.000     0.000     0.000        4   File::Stat#world_writable?
  0.00      0.000     0.000     0.000     0.000       15   String#rindex
  0.00      0.000     0.000     0.000     0.000        5   Symbol#to_s
  0.00      0.216     0.000     0.000     0.216        1   ExecJS::Runtime#eval
  0.00      0.000     0.000     0.000     0.000       16   String#[]
  0.00      0.000     0.000     0.000     0.000        1   Hash#keys
  0.00      0.000     0.000     0.000     0.000        1   Pathname#join
  0.00      0.000     0.000     0.000     0.000        4   String#initialize_copy
  0.00      0.495     0.000     0.000     0.495        1   ExecJS::Runtime#compile
  0.00      0.000     0.000     0.000     0.000        1   Pathname#relative?
  0.00      0.000     0.000     0.000     0.000        3   Pathname#initialize
  0.00      0.001     0.000     0.000     0.001        1   Pathname#read
  0.00      0.000     0.000     0.000     0.000        1   Pathname#absolute?
  0.00      0.000     0.000     0.000     0.000        2   Kernel#class
  0.00      0.000     0.000     0.000     0.000        1   Hash#each_pair
  0.00      0.000     0.000     0.000     0.000       10   Array#unshift
  0.00      0.000     0.000     0.000     0.000        6   Array#shift
  0.00      0.216     0.000     0.000     0.216        1   <Module::ExecJS>#eval
  0.00      0.000     0.000     0.000     0.000        1   Array#reverse_each
  0.00      0.000     0.000     0.000     0.000        1   Kernel#Pathname
  0.00      0.000     0.000     0.000     0.000        9   Array#first
  0.00      0.000     0.000     0.000     0.000        1   Pathname#+
  0.00      0.000     0.000     0.000     0.000        1   Pathname#to_s
  0.00      0.000     0.000     0.000     0.000        1   AutoprefixerRails::Processor#params_with_browsers
  0.00      0.000     0.000     0.000     0.000        1   AutoprefixerRails::Processor#convert_options
  0.00      0.000     0.000     0.000     0.000        1   Symbol#=~
  0.00      0.000     0.000     0.000     0.000        1   Kernel#is_a?
  0.00      0.000     0.000     0.000     0.000        1   Hash#has_key?

* indicates recursively called methods

[markbrown4]

Is it possible to cache compiled assets if they haven't changed?
If it takes some time to compile on changes that's understandable, making every page refresh considerably slower makes it hard to use this plugin in development though.

Are most people these days working with middleman using gulp or webpack for builds?

[porada]

Is it possible to cache compiled assets if they haven’t changed?

That’s a good idea. Unfortunately, it’s a non-trivial feature.

[tdreyno]

I use webpack for JS, but autoprefixer and Sass for CSS.

@porada I'm actually adding a bit of this kind of caching in core right now. I can extend it to autoprefixer as well

[porada]

Great, please do!

Looking forward to see this in action. 💪

[porada]

@tdreyno, any progress on caching?

[tdreyno]

@porada core now emits file change events that try to handle includes and mixins. It's a bit broad, but would allow you to make a cache and invalidate it if you get a change event for the file path.

[porada]

@tdreyno, thanks for the update. Is this documented somewhere?

[tdreyno]

You can see how the front matter extension is doing a little cache that gets invalidated on file changes, here: https://github.com/middleman/middleman/blob/master/middleman-core/lib/middleman-core/core_extensions/front_matter.rb#L30

[porada]

Thanks, this is great.

Opened #25 specifically for the implementation. Closing this issue for now.