Note
  • Introduction
  • Mocha
  • Mongodb
  • Javascript Snippet
  • Comon code snippets
  • React & Webpack
  • Meteor
  • Http
  • Useful command
  • Async, Await / Promise
  • Google Maps API
  • Vue 2.x, React, Angular 1.x
  • Redis
  • Website Performance Optimization
  • 尚未整理
  • Regular Expression
  • Blockchain
    • Bitcoin
  • Make a Landing Page
  • CSS Tricks
  • Date
  • Chrome Dev Tool - Tuning Performance
  • Segment and keen.io
  • SlackBot
Powered by GitBook
On this page

Was this helpful?

Website Performance Optimization

PreviousRedisNext尚未整理

Last updated 5 years ago

Was this helpful?

CRP (Critical Render Path)

  • Critical Render Path

  • How DOM Construct

    • Tokenizer to parse HTML tag,

      • html-> head -> meta ,

      • html-> body -> div

  • Use Timeline ( Performance ) tool to investigate load time

  • DOM-> CSSOM (CSS Object Model) -> Render Tree

  • display:none will cascading down to its children so that doen't showup at Render Tree.

  • Steps of Rending HTML Documents

Layout

  • Enhance

  • Rendering Blocking Problem

  • Parser Blocking Problem

    • async doesn't blocking critical render path, it start the request, but parser still continue to parse.

    • Inline script cannot apply async sytax.

  • Three Methods (CRP Metric )

    • Minimize Bytes

    • Reduce Critical Resources (Number of critical resource)

    • Shorten the CRP Path ( Minimum CRP Path)

  • Reference

  • https://classroom.udacity.com/courses/ud884