关于动态改变 css 导致页面闪动的问题

我仿照v2ex的自定义css功能，给我的网站也加了一个可以让用户自定义css这样的设置

自定义的css是保存在数据库的一个字段，每次刷新页面的时候读出这个字段，然后用<style>xxx</style>包络在页面尾部（和v2ex的逻辑一样）

但是实际效果是，每次刷新页面，都会一瞬间变成原来的css，然后过0.x秒才变成自定义的css（有一个很明显的闪动效果），非常影响用户体验，而v2ex自定义之后不会出现这种情况。所以想请教一下如何做到让用户自定义的css不出现页面闪动。

dring

2015-02-24 15:16:23 +08:00

@blahgeek 说的对
CSS样式无论是否行内，一定要放<head>里，不然页面都会重新渲染。

lyragosa

2015-02-24 15:27:40 +08:00

@dring
@blahgeek
但如果页面后面又出现了css文件，放在head里面会被后面覆盖掉吧。
我想让用户的css始终最后加载

dring

2015-02-24 15:30:33 +08:00

@lyragosa
1、如果是head里又出现了CSS，style放head内最后就行
2、如果CSS在body中加载，本身就是不规范的，大的网站理论也不会这么做

lyragosa

2015-02-24 15:36:30 +08:00

@dring 唔，这样的话，v2ex是如何做到在body最后引入内联css，又不重新渲染页面的呢……

lyragosa

2015-02-24 15:50:03 +08:00

@dring 同步输出，在php输出页面的时候就已经有了，不是js后拉进去的。

经过测试了一下，可能是因为我的页面读入速度慢的原因？我把css放在body的最前面就不会出现闪动了……

dring

2015-02-24 15:54:22 +08:00

@lyragosa
建议看看这篇文章 http://news.cnblogs.com/n/178402/
有可能有所帮助

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/172482

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.