From Udacity Course:
https://developers.google.com/web/fundamentals/performance/critical-rendering-path/page-speed-rules-and-recommendations
Dom is the representation of the html markup.
Whenever you request data from google, google is doing something very cleaver. It immediately returns the header of Google search page as it is the same for every request.
parsing partial html could be a very good optimization~
How to measure quality of rendering? Using google chrome or phone
CSS object model
cascading rule with no partial css loading allowed
parent类的css effect会对children node 产生影响, persist
Tricky:
The more specific rule is more consuming because it will need to traverse up
First rule says whenever we meet h1, we set font size =16px. div p because it's not just p it's div p. So we need to make sure the case is two nodes where parent is div, child is p. So when we hit p, we need to go back see if parent is div...
render tree:
render tree only captures visible elements.
top part is DOM tree, bottom part is CSS Object model
we start from DOM, and see if there's any css node matching it.
Layout
<meta name = "viewport"..> 这个设置为device的size.
painting 染色
paint的region size也是consideration
CRP process:
Optimization:
keep html as small as possible
For example, minify the file by deleting the comments, compress, and cache.
Browser would block rendering until it downloads all the css files and build up both DOM and CSSOM.
But, it could be optimized...
for example:
这段css表示如果device是landscape mode, 用某种css style, 如果要打印page，用某种style
这个情况，如果我们不需要打印，我们就没必要block rendering
it's why sometimes it's good to split css files into multiple ones.
now it wouldn't block rendering on style-print.css unless we want to print.
practice:
JS可以manipulate DOM, CSSOM
上述case里， in line的javascript 会block DOM parsing, 中间要先执行完JS才能回来继续parse DOM. 但是JS 执行速度还挺快的，影响不是很大
这个例子是使用externel javascript file.
要先去Fetch js file, 才能执行js, 才能回到DOM。。更慢。。
但是inline JS的话 如果在许多file里都要用到similar code,会出现redundant的情况
CSS可以block js execution, 比如cs file 还没到的话， js 要先等着
网友评论