发表于 | 分类于

Mearsure Performance with Rail Model

response,animation,idle,load
TL;DR

- Focus on the user;the goal isn't to make your site perform fast on any specific device, its to ultimately make users happy.
- Respond to users immediately;acknowledge user input in under 100ms.
- When animating or scrolling,produce a frame in under 10ms.
- Maxmize main thread idle time.
- Keep users engaged;deliver interactive content in under 1000ms.

Focus on the user

Response:respond in under 100ms

Animation:produce a frame in 10ms

Idle:maximize idle time

Use idle time to complete deferred work. For example, keep pre-load data to aminimum so that your app loads fast, and use idle time to load remainning data/

Deferrend work should be grouped into blocks of about 50ms. Should a user begin interacting, then the highest priority is to respond to that.

To allow for <100ms response,the app must yield control back to main thread every <50ms,such that can execute its pixel pipeline,react to user input,and so on.

Working in 500ms blocks allows the task to finish while still ensuring instant response.

Load:deliver content under 100ms

Load your site in under 1 second.
Focus on optimizing the critical rendering path to unblock rendering.
You don't have to load everything in under 1 second to produce the perception of a complete load.Enable progressive rendering and do some work in the background.Defer non-essential loads to periods of idle time.

reference:https://developers.google.com/web/fundamentals/performance/rail

发表于 | 分类于

  • max-width
    使用max-width替代width可以使浏览器更好地处理小窗口的情况。所有主流浏览器斗支持max-width，包括ie7+.

    1
    2
    3
    4
    #main{
        max-wdith:600px;
        margin:0 auto;
    }

  • box-sizing
    传统的盒子模型不直接，所以新增了box-sizing的css属性。当你设置元素的CSS box-sizing:border-box;时，此原属的内边距和边框不再会增加它的宽度。

    不过 box-sizing 是个很新的属性，目前需要使用 -webkit- 和 -moz- 前缀。这可以启用特定浏览器实验中的特性。同时记住它是支持IE8+的。

  • position

    1. static
      默认值。任意CSS position:static;的元素表示不会被特殊定位。
    2. relative
    3. fixed
      一个固定定位CSS position:fixed;元素会相对于视窗来定位，这意味着即使页面滚动，它还是会停留在相同的位置。和CSS position:relative;一样，top\right\bottom\left属性都可用。
      脱离文档流。
      移动浏览器对fixed支持很差。
    4. absolute
      absolute 是最棘手的position值。 absolute 与 fixed 的表现类似，但是它不是相对于视窗而是相对于最近的“positioned”祖先元素。如果绝对定位（position属性的值为absolute）的元素没有“positioned”祖先元素，那么它是相对于文档的 body 元素，并且它会随着页面滚动而移动。记住一个“positioned”元素是指 position 值不是 static 的元素。