昨天 nacal0C 大佬说我博客打开后 Safari CPU占用有120%多。。。自己手贱试了下,发现居然特么是真的😂。。。
一开始怀疑前段时间重构的时候 一不小心 JavaScript 哪里出什么问题了,然后打开 Chrome准备调试,结果发现 P 事没有。。。
这特么就很尴尬了😓
st=>start: Start|past:>http://www.google.com[blank]
e=>end: End:>http://www.google.com
op1=>operation: 我的操作|past
op2=>operation: Stuff|current
sub1=>subroutine: My Subroutine|invalid
cond=>condition: Yes
or No?|approved:>http://www.google.com
c2=>condition: Good idea|rejected
io=>inputoutput: catch something...|request
st->op1(right)->cond
cond(yes, right)->c2
cond(no)->sub1(left)->op1
c2(yes)->io->e
c2(no)->op2->e
st@>op1({"stroke":"Red"})@>cond({"stroke":"Red","stroke-width":6,"arrow-end":"classic-wide-long"})@>c2({"stroke":"Red"})@>op2({"stroke":"Red"})@>e({"stroke":"Red"})没办法,果断滚回 Safari,点开时间线 - 录制,发现「布局与渲染」那一块密密麻麻的样式已失效,心想估计就是这块的原因,导致一直重新布局计算的吧,事实证明也确实如此。
不过,天真的我此刻还在想着肯定是之前的 JavaScript 出了问题,第一时间进行了注释大法排除,结果到最后也是没一点 P 用,一生气,把主题 css 文件也给注释掉了,然后发现居然特么的好了,真特么无 F**k 说。
到了这里基本可以确定是 Safari 的 Bug 了,但是问题总要解决嘛,况且我也想知道问题到底出在了哪里,所以还是继续进行了注释大法排查。。
sequenceDiagram
Alice ->> Bob: Hello Bob, how are you?
Bob-->>John: How about you John?
Bob--x Alice: I am good thanks!
Bob-x John: I am good thanks!
Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
Bob-->Alice: Checking with John...
Alice->John: Yes... John, how are you?Bug 的话不知道是什么时候有的,但我这个macOS 10.13.2是有的,C0大佬不知道啥版本,然后,最终能确定其中的三个条件吧:
- 一个 Media Query
- 一个计算的宽度值(高度应该也是可以的)
- 一个应用于宽度上的过渡效果
- 一个计算的宽度值(高度应该也是可以的)
其中第一个条件比较玄学,试了[min|max]-width: 75rem 及以上的值都是可以的,但74rem就不行了,估计和浏览器宽度也有一定关系。
后面两个条件大体是确定了的,过度效果如常见的transition: 0.5s ease all; 同样包含宽度属性所以妥妥的也能触发。但其应用对象同样很玄学:我自己的博客是很多元素一改就触发,但在写样例代码的时候,如果把属性应用在了一个 div 上,则必须开着 F12 ,同时鼠标选中那个 div 或其子元素,然后再点刷新才能触发,所以后面我是直接应用在了 html 上,简单粗暴。
下面是测试用的样例代码,不长,就10几行,可以让你的 CPU 出现一核有难,7核围观的现象😃:
<!DOCTYPE HTML>
<html>
<head>
<title>Test Bug</title>
<style type="text/css">
@media screen and (min-width: 200rem) {}
html {
width: calc(100% - 20px);
transition: 0.5s ease width;
}
</style>
</head>
<body></body>
</html>有 Safari 的童鞋可以自己试试,当然,这里也有成品可供测试(右键新标签页打开) ![]()
话说,自从升到10.13,不说其他的,Safari 的Bug就遇到了很多,诸如启用独显后动画卡成狗,开发模式清空缓存生不生效看它老人家心情,还有各种渲染的色块异常的问题,简直糟心。
不过也是没办法,谁让它长得好看呢😂😂😂
st=>start: Start
op=>operation: Hello
cond=>condition: Yes or No?
e=>end
st->op->cond
cond(yes)->e
cond(no)->op
calc 这个语法还是慎用,有时候会导致这种情况 的
2018新年快乐!!!
新年快乐@(哈哈)
@(滑稽)Chrome Chrome Chrome !!!!!
拒绝使用电老虎@(喷)
水多\#(脸红)
冬天比较干燥,要多补水@(阴险)
也许这就是大佬吧