有一个通用button(比如：推荐button)在任何页面都有可能用到。问题包含：

1. 如何最快显示出来。（假设它已经在页面靠前的位置）2. button有点击行为，如何尽快初始化（初始化依赖jquery）3. 作为通用组件，要考虑各种可能情况的影响（强调是各种可能情况！）给出一个最好的方案？

=================================(分割线)====================

问题点不仅仅是优化技巧，而是页面上js, css等限制因素如何管理。

我总觉得这就好像42那个终极问题一样，即使给出了精确的答案却发现不知道问题是什么。

如果想尽快看到那个Button，功能可用如果按照我的理解：
  1. Button用HTML直接渲染在那里，HTML足够简洁，没有阻塞性的HTML和CSS下载在它前面阻塞，渲染也不依赖CSS。
  2. Button的逻辑用经典的HTTP Post-Redirect实现，不依赖任何的javascript。
  3. Loader/Intitializer负责增强这个Button行为，前后基本行为一致，按照渐进增强的基本方法来。

我猜想其实问题需要的不是这样的答案，而是很多最佳实践（奇技淫巧）在这个方案的应用。不过就好像终极问题反过来：
  • 你需要问为什么最上面有一个Button？
  • 为什么不需要阅读就点击那个Button？
  • 我期望那个Button产生什么样的后果？
  • 为什么要这样设计，这真的是理性的需求么？

不过很不幸，一般我们还是只有终极答案但是终极问题却无法计算 :D

BTW：知乎这个编辑器实在是……逼疯我了（不过不排除是我的Chrome抽风了）

受邀回答。

根据需求，这是一个（或一组）常用的交互控制项，并且希望让用户尽快可用。

1. HTML方面，基本上就是将button的html代码插入到页面尽量前面的地方，并且不要犯一些低级错误（比如弄出很大的table来做layout并将button纳入其中）。至于语义化要求（使用合适的tag，如button/a之类的），以及其带来的好处（在CSS未正确载入时也能让用户辨识出其作用），乃是一般法则，不赘述。

2. CSS代码方面，其实按照一般用CSS来指定样式的方式，也已经OK。因为我们通常也不会延迟载入样式表，所以当HTML代码ready的时候，样式可以立即起作用，不会影响呈现的时机。唯一可能要考虑的是button的外观如果涉及图片，要做好图片没有载入时的fallback（而且以当前浏览器普遍实现的CSS3特性来说，不用图片也已经可以实现出很漂亮的按钮），或者干脆像@ytzong 说的，图片用data协议。

【尽快显示的需求也可能涉及许多其他一般性的问题。例如假如button的html代码之前有许多其他伺服器端生成的内容，使用bigpipe之类的技术有助于避免延迟。再如button如采用绝对定位或fixed定位，即不在文档flow之内，则对应html代码的位置有更大的灵活性，设计上也确保了所处视觉区域的精确。不过这些其实取决于架构或者设计等通常并非由前端工程师决定的因素。】

3. 按钮行为的尽快可用，这一条相信是主要挑战所在。目前而言，要尽快附加行为，就只有在按钮的html代码之后马上插入事件监听器和相关的脚本。（因为DOM缺乏element ready之类的事件。）

【有些同志提出优雅退化/渐进增强的方案，即以超链接或者表单提交方式进行伺服器端交互，这当然是很好的。但是我认为优雅退化和渐进增强的主要著眼点是针对特殊的UA、无脚本支持、或者某些极罕见情况的。页面尚未完全载入完毕时就发生点击还是比较常见的，应该尽量避免直接退化到伺服器交互。】

但是使用inline script或者直接在tag后插入&

如果按钮的行为所相关的脚本很复杂， 我们可以考虑将UI的响应和其他逻辑分开，UI的响应部分用同步方式，确保响应无延迟，而其他逻辑可以非同步延迟载入和执行。举例来说，常见button为状态切换（类似于本页面右上角的「关注」按钮），则不同状态显示的切换仅仅是css样式的切换，用简单的脚本修改class即可做到。

补充，本题需求没有明确，这是仅供站内使用的功能，还是可能提供给第三方使用的功能（例如jiathis那样的）。

如果是站内使用的，html可以由后端产生，css和js也可以任何分开或合并，所以并不存在特别的部署考量因素。假如是给第三方使用的，则在部署上一般希望是能引用一个脚本就可以搞定。这样，按钮的创建、样式和事件的绑定通常都是由脚本完成，如无特殊情况，也不会采用诸如延迟载入之类的手段，所以事情通常反倒比较简单。当然之前提到的各种可能性也仍然是适用的。
减少依赖，尽量把这个按钮的结构，表现，行为都和依赖的东西分开。就算依赖没载入也可用。样式style之html flush，放到body最顶层，最好绝对定位一个固定位置。js 写到标签属性里，相应逻辑，能写下的就写onxx里，写不下放到button上的script里

看具体环境了，目的只有一个：让浏览器尽快渲染这个按钮。

那么，「渲染按钮」的任务优先顺序就显得特别高。你可以让它尽早的处理，并把优先顺序较低的任务，放在「渲染按钮」的「完成」事件中处理。

也就是说，在渲染按钮时，其它任务可以暂停，或先不执行。

如果希望button跟页面同步出现的话就只能选择同步script了，但如果这个button的同步script在大并发下伺服器响应速度不理想将会卡著整个页面的载入，不论同步非同步，保证伺服器的响应速度是必须的；若选择jQuery的非同步载入，那就要让button的非同步执行次序尽量靠前，也就是非同步执行脚本尽量放在其他非同步脚本之前，不然等待页面其他非同步脚本的执行将会影响此button的初始化；还有需要调用动态数据就要考虑跨域问题了，这个用jsonp可以解决。不知问题所说的button是不是指google +1这种按钮设计，我觉得google +1这种按钮重度的JS加上国内这样的网路环境还是十分之慢的。
克军想要的是data flush吧？第一次flush&&&&
相关文章