Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[性能优化] <head> 头部块优化 #23

Open
jschyz opened this issue Sep 11, 2018 · 0 comments
Open

[性能优化] <head> 头部块优化 #23

jschyz opened this issue Sep 11, 2018 · 0 comments

Comments

@jschyz
Copy link
Owner

jschyz commented Sep 11, 2018 •
edited
Loading

一般来说HTML在开始接收到返回数据的时候就开始解析HTML并构建DOM树（详见： how brower work ）。如果没有JS（JavaScript）阻塞的话一般会相继完成。

<link href="//res.jiuyan.info/.../base.css" rel="stylesheet"> 
<script> 
// rem 布局脚本 
</script> 
</head>

通常情况下，上面代码的link部分和script部分如果单独出现，都不会阻塞页面的解析：

  • CSS不会阻止页面继续向下继续。
  • 内联的JS很快执行完成，然后继续解析文档。

然而，当这两部分同时出现的时候，问题就来了。

  • CSS加载阻塞了下面的一段内联JS的执行，而被阻塞的内联JS则阻塞了HTML的解析。

通常情况下，CSS不会阻塞HTML的解析，但如果CSS后面有JS，则会阻塞JS的执行直到CSS加载完成（即便JS是内联的脚本），从而间接阻塞HTML的解析。

优化

一个小小的内联JS放错位置也会让性能下降很多。

CSS的加载会在HTML解析到CSS的标签时开始，所以CSS的标签要尽量靠前。
但是，CSS链接下面不能有任何的JS标签（包括很简单的内联JS），否则会阻塞HTML的解析。
如果必须要在头部增加内联脚本，一定要放在CSS标签之前。

image

结果对照

image

将DOM Processing平均值基线远远降到 1s 以下
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@jschyz