http://stevesouders.com/cuzillion/
這個東西可以 讓你快速的建立各種不同的情況以測試在不同瀏覽器的行為
這邊是他的例子
Inline Scripts Block Rendering
Stylesheets Block Downloads in Firefox and JavaScript Execution in IE
IE8 Parallel Script Loading
2009年5月24日 星期日
High.Performance.Web - Rule 6 - Put Scripts at the Bottom
Rule 6 - Put Scripts at the Bottom
PROBLEM 1: Everything below the script won't render until the script is loaded.
PROBLEM 2: All components below the script don't start downloading until the script is done.
這邊給了許多例子, 來展示把script 放在上面和放在底部的差別, 看了以後就把自己的script 搬到底部去吧
PROBLEM 1: Everything below the script won't render until the script is loaded.
PROBLEM 2: All components below the script don't start downloading until the script is done.
這邊給了許多例子, 來展示把script 放在上面和放在底部的差別, 看了以後就把自己的script 搬到底部去吧
High Performance Web Sites memo(2)
HTTP Overview 2
A GET request includes a URL followed by headers.The HTTP response contains a
status code, headers, and a body.
------------------------
Compression
The size of the response is reduced using compression if both the browser and server
support it.Browsers announce their support of compression using the Accept-
Encoding header.Servers identify compressed responses using the Content-Encoding
header.
------------------------
Conditional GET Requests
If the browser has a copy of the component in its cache, but isn’t sure whether it’s
still valid, a conditional GET request is made.If the cached copy is still valid, the
browser uses the copy from its cache, resulting in a smaller response and a faster user
experience.
Typically, the validity of the cached copy is derived from the date it was last modified.
The browser knows when the component was last modified based on the Last-
Modified header in the response
It uses the If-Modified-Since header to send the last modified date back to the server.The
browser is essentially saying, “I have a version of this resource with the following last
modified date. May I just use it?”
If the component has not been modified since the specified date, the server returns a
“304 Not Modified” status code and skips sending the body of the response, resulting
in a smaller and faster response.
In HTTP/1.1 the ETag and If-None-Match headers are another way to make conditional GET requests
--------------------------------
Expires
Conditional GET requests and 304 responses help pages load faster, but they still
require making a roundtrip between the client and server to perform the validity
check
The Expires header eliminates the need to check with the server by making it
clear whether the browser can use its cached copy of a component
----------------------
Keep-Alive
Persistent Connections (also known as Keep-Alive in HTTP/1.0) was introduced to
solve the inefficiency of opening and closing multiple socket connections to the same
server
It lets browsers make multiple requests over a single connection.Browsers
and servers use the Connection header to indicate Keep-Alive support.The
Connection header looks the same in the server’s response.
The browser or server can close the connection by sending a Connection: close
header.Technically, the Connection: keep-alive header is not required in HTTP/1.1,
but most browsers and servers still include it.
Pipelining, defined in HTTP/1.1, allows for sending multiple requests over a single
socket without waiting for a response.Pipelining has better performance than persistent
connections
http://docs.google.com/Present?docid=dfb9f5wn_168fc36vgdr
Why is "primed cache same session" different from "primed cache different session"?
Browsers store resources in memory so they don't need to read them from disk.
---------------
Two considerations with disk cache
* Is the resource fresh (vs. expired)?
* If it's expired, is it valid (vs. updated)?
If a resource is fresh, no HTTP request is made – it's just read from disk.
If a resource is expired, a Conditional GET request is made.
* If the resource is valid, it's read from disk and the Conditional GET response is empty.
* If the resource has been updated, the Conditional GET response contains the updated version.
A GET request includes a URL followed by headers.The HTTP response contains a
status code, headers, and a body.
------------------------
Compression
The size of the response is reduced using compression if both the browser and server
support it.Browsers announce their support of compression using the Accept-
Encoding header.Servers identify compressed responses using the Content-Encoding
header.
------------------------
Conditional GET Requests
If the browser has a copy of the component in its cache, but isn’t sure whether it’s
still valid, a conditional GET request is made.If the cached copy is still valid, the
browser uses the copy from its cache, resulting in a smaller response and a faster user
experience.
Typically, the validity of the cached copy is derived from the date it was last modified.
The browser knows when the component was last modified based on the Last-
Modified header in the response
It uses the If-Modified-Since header to send the last modified date back to the server.The
browser is essentially saying, “I have a version of this resource with the following last
modified date. May I just use it?”
If the component has not been modified since the specified date, the server returns a
“304 Not Modified” status code and skips sending the body of the response, resulting
in a smaller and faster response.
In HTTP/1.1 the ETag and If-None-Match headers are another way to make conditional GET requests
--------------------------------
Expires
Conditional GET requests and 304 responses help pages load faster, but they still
require making a roundtrip between the client and server to perform the validity
check
The Expires header eliminates the need to check with the server by making it
clear whether the browser can use its cached copy of a component
----------------------
Keep-Alive
Persistent Connections (also known as Keep-Alive in HTTP/1.0) was introduced to
solve the inefficiency of opening and closing multiple socket connections to the same
server
It lets browsers make multiple requests over a single connection.Browsers
and servers use the Connection header to indicate Keep-Alive support.The
Connection header looks the same in the server’s response.
The browser or server can close the connection by sending a Connection: close
header.Technically, the Connection: keep-alive header is not required in HTTP/1.1,
but most browsers and servers still include it.
Pipelining, defined in HTTP/1.1, allows for sending multiple requests over a single
socket without waiting for a response.Pipelining has better performance than persistent
connections
http://docs.google.com/Present?docid=dfb9f5wn_168fc36vgdr
Why is "primed cache same session" different from "primed cache different session"?
Browsers store resources in memory so they don't need to read them from disk.
---------------
Two considerations with disk cache
* Is the resource fresh (vs. expired)?
* If it's expired, is it valid (vs. updated)?
If a resource is fresh, no HTTP request is made – it's just read from disk.
If a resource is expired, a Conditional GET request is made.
* If the resource is valid, it's read from disk and the Conditional GET response is empty.
* If the resource has been updated, the Conditional GET response contains the updated version.
High Performance Web Sites memo(1)
High Performance Web Sites
Chapter A: The Importance of Frontend Performance
The first bar, labeled html, is the initial request for the HTML document.The
browser parses the HTML and starts downloading the components in the page
The HTML document is only 5% of the total response time.The user spends
most of the other 95% waiting for the components to download; she also spends a
small amount of time waiting for HTML, scripts, and stylesheets to be parsed, as
shown by the blank gaps between downloads.
One redirect ????
One cached image , conditional GET request
the HTTP status codes and headers
affect the browser’s cache
you can see a blank space with no downloads that occurs immediately
following the HTML document’s HTTP request.This is time when the browser
is parsing HTML, JavaScript, and CSS, and retrieving components from its
cache
there are as many as six or seven simultaneous HTTP requests.This behavior is due to the
number of different hostnames being used, and whether they use HTTP/1.0 or
HTTP/1.1
Parallel requests don't happen during requests for scripts.That's because in
most situations, browsers block additional HTTP requests while they download
scripts.
Chapter A: The Importance of Frontend Performance
The first bar, labeled html, is the initial request for the HTML document.The
browser parses the HTML and starts downloading the components in the page
The HTML document is only 5% of the total response time.The user spends
most of the other 95% waiting for the components to download; she also spends a
small amount of time waiting for HTML, scripts, and stylesheets to be parsed, as
shown by the blank gaps between downloads.
One redirect ????
One cached image , conditional GET request
the HTTP status codes and headers
affect the browser’s cache
you can see a blank space with no downloads that occurs immediately
following the HTML document’s HTTP request.This is time when the browser
is parsing HTML, JavaScript, and CSS, and retrieving components from its
cache
there are as many as six or seven simultaneous HTTP requests.This behavior is due to the
number of different hostnames being used, and whether they use HTTP/1.0 or
HTTP/1.1
Parallel requests don't happen during requests for scripts.That's because in
most situations, browsers block additional HTTP requests while they download
scripts.
2009年5月22日 星期五
5 Tips to Scale Your Ruby on Rails Application
5 Tips to Scale Your Ruby on Rails Application
1) Cache, cache, cache and more cache.
Cache at the client, Ajax, gateway, reverse proxy, expiration, etags, built-in page, fragment caching, Use memcache to cache results
2) Segregate data and data serving
Datasets that are independent should go into separate databases
Serve static assets from a separate tier, or use Amazon S3 or a CDN like Akamai to serve those assets.
Maybe you can get away with a simpler key-value data store for some of your simpler data. There are ruby clients, so use Hadoop for scaling the storage and analysis of large amounts of unstructured data
If you have heavy data reporting needs, do your reporting from a copy of your main database, not from your production database!
1) Cache, cache, cache and more cache.
Cache at the client, Ajax, gateway, reverse proxy, expiration, etags, built-in page, fragment caching, Use memcache to cache results
2) Segregate data and data serving
Datasets that are independent should go into separate databases
Serve static assets from a separate tier, or use Amazon S3 or a CDN like Akamai to serve those assets.
Maybe you can get away with a simpler key-value data store for some of your simpler data. There are ruby clients, so use Hadoop for scaling the storage and analysis of large amounts of unstructured data
If you have heavy data reporting needs, do your reporting from a copy of your main database, not from your production database!
2009年5月20日 星期三
在model 裡叫 controller的 method 或是 一些其他的helper
叫application controller 的 method
叫一些好用的helper
奇怪, 後來在做就不行了 當初到底做了啥 @@
叫一些好用的helper
奇怪, 後來在做就不行了 當初到底做了啥 @@
2009年5月19日 星期二
Rails Rich editor, TinyMCE, jquery, attachment_fu, ja_tiny_mce
因為想要提供Rails Rich Editor 的功能, 就找到了 tiny_mce plugin 可以很簡單的把 TinyMCE editor 整合進來,
但是因為很貪心的想要有可以插圖的功能所以就找到了 tiny_mce_plus, 可是沒想到他是用prototype , 我想用jquery 阿, 所以又找到了j_tiny_mce
可是又沒想到他卻是用 paperclip 我已經有用attachment_fu 了 不想再弄一套阿, 加上這個也跑不起來 @@, 只好自己動手改了這個九成都是別人code 的 plugin ja_tiny_mce
1: 安裝 ja_tiny_mce, migrate 存上傳圖檔時需要的東西
cd vendor/plugins
git clone git://github.com/ilake/ja_tiny_mce.git
script/generate ja_tiny_mce_migration
rake db:migrate
2, 安裝需要的 plugins:
rake ja_tiny_mce:plugins
這邊會把attachment_fu, responeds_to_parent, will_paginate 到你的plugin 資料夾, 因為需要用到jquery 所以include 一下jquery file 或者 安裝一下 jrails 吧
還有因為上傳圖一定會用到 user , 我們這邊用的是restful_authentication 來做登入登出
當然你可以把 TinyMcePhotosController 的 current_user 改成你相對應的user
3, layout 裡要include TinyMCE 需要的js:
<%= javascript_include_tiny_mce_if_used %>
<%= tiny_mce if using_tiny_mce? %>
4, controller 裡要加上 uses_tiny_mce 做設定:
uses_tiny_mce(:options => AppConfig.default_mce_options, :only => [:new, :edit])
AppConfig.default_mce_options 在 config/initializers/tiny_mce_plus_config.rb 你可以改變default的設定或加入自己的
5. View 裡面要設定哪個textarea 你要用tinymce
:class => "mceEditor"
6. 安裝需要的controller, view, helper
rake ja_tiny_mce:install
will Install following files:
app
|-- controller
|-- tiny_mce_photos_controller.rb
|-- helpers
|-- remote_link_renderer.rb
|-- models
|-- tiny_mce_photo.rb
|-- views
|-- tiny_mce_photos
|-- _photo_list.html.erb
config
|-- initializers
|-- tiny_mce_plus_config.rb
public
|-- images
|-- tiny_mce
|-- javascripts
|-- tiny_mce
其他:
1. 上傳圖片時跳出的視窗view 是在 public/javascripts/tiny_mce/plugins/curblyadvimage/image.htm 裡, 有需要就自己改吧
2. 用到的function 在這 public/javascripts/tiny_mce/plugins/curblyadvimage/js/functions.js
但是因為很貪心的想要有可以插圖的功能所以就找到了 tiny_mce_plus, 可是沒想到他是用prototype , 我想用jquery 阿, 所以又找到了j_tiny_mce
可是又沒想到他卻是用 paperclip 我已經有用attachment_fu 了 不想再弄一套阿, 加上這個也跑不起來 @@, 只好自己動手改了這個九成都是別人code 的 plugin ja_tiny_mce
1: 安裝 ja_tiny_mce, migrate 存上傳圖檔時需要的東西
cd vendor/plugins
git clone git://github.com/ilake/ja_tiny_mce.git
script/generate ja_tiny_mce_migration
rake db:migrate
2, 安裝需要的 plugins:
rake ja_tiny_mce:plugins
這邊會把attachment_fu, responeds_to_parent, will_paginate 到你的plugin 資料夾, 因為需要用到jquery 所以include 一下jquery file 或者 安裝一下 jrails 吧
還有因為上傳圖一定會用到 user , 我們這邊用的是restful_authentication 來做登入登出
當然你可以把 TinyMcePhotosController 的 current_user 改成你相對應的user
3, layout 裡要include TinyMCE 需要的js:
<%= javascript_include_tiny_mce_if_used %>
<%= tiny_mce if using_tiny_mce? %>
4, controller 裡要加上 uses_tiny_mce 做設定:
uses_tiny_mce(:options => AppConfig.default_mce_options, :only => [:new, :edit])
AppConfig.default_mce_options 在 config/initializers/tiny_mce_plus_config.rb 你可以改變default的設定或加入自己的
5. View 裡面要設定哪個textarea 你要用tinymce
:class => "mceEditor"
6. 安裝需要的controller, view, helper
rake ja_tiny_mce:install
will Install following files:
app
|-- controller
|-- tiny_mce_photos_controller.rb
|-- helpers
|-- remote_link_renderer.rb
|-- models
|-- tiny_mce_photo.rb
|-- views
|-- tiny_mce_photos
|-- _photo_list.html.erb
config
|-- initializers
|-- tiny_mce_plus_config.rb
public
|-- images
|-- tiny_mce
|-- javascripts
|-- tiny_mce
其他:
1. 上傳圖片時跳出的視窗view 是在 public/javascripts/tiny_mce/plugins/curblyadvimage/image.htm 裡, 有需要就自己改吧
2. 用到的function 在這 public/javascripts/tiny_mce/plugins/curblyadvimage/js/functions.js
訂閱：
文章 (Atom)