一页Web应用程序和内联JavaScript和CSS

We've built what is called a one page web app(a single html page + ajax)
In the pursuit of shaving as much http calls as possible, we bundled the JS and CSS in 2 files.

我们已经构建了所谓的单页Web应用程序(单个html页面+ ajax)为了尽可能多地调用HTTP调用,我们将JS和CSS捆绑在2个文件中。

Meanwhile we took a look at the way Google Buzz for mobile is built and there are some interesting points:

与此同时,我们了解了Google Buzz移动版的构建方式,并提出了一些有趣的观点:

inline SCRIPT and STYLE

内联SCRIPT和STYLE

no external JS and CSS

没有外部JS和CSS

data:images in CSS instead of url(...)

数据:CSS中的图像而不是网址(...)

Thus we went further and "inlined" the 2 JS and CSS files in SCRIPT and STYLE tags. Removing 2 precious http calls.

因此,我们进一步“内联”了SCRIPT和STYLE标签中的2个JS和CSS文件。删除2个珍贵的http呼叫。

Anyone experienced some troubles doing that on desktop browsers ?

有没有人在桌面浏览器上遇到麻烦?

I'm not trying to open a religious debate about unobtrusivity ;) It is about performance, network latency, mobile pages, etc...

我不打算开展关于不引人注意的宗教辩论;)它是关于性能,网络延迟,移动页面等...

6 个解决方案

#1

Never. Put them in the html head so they load first and don't fret.

决不。把它们放在html头部,这样它们首先加载,不要担心。

#2

It is worth noting here that inline CSS <style/> blocks trump linked CSS files when there is a conflict.

值得注意的是,当发生冲突时,内联CSS 阻止特朗普链接的CSS文件。</p>

For example

<style type="text/css">
  div .whiteBG {
    background-color: #fff;
  }
</style>

trumps a linked CSS file containing

胜过包含的链接CSS文件

  div .whiteBG {
    background-color: #ccc;
  }

even if the linked files are called last.

即使最后调用链接文件。

#3

Virtually no-one has to deal with the traffic Google do. I'd say it's virtually never worth following Google's lead in optimisations, because they just don't apply in the real world.

实际上没有人必须处理谷歌的流量。我认为它几乎不值得追随谷歌在优化方面的领先优势,因为它们并不适用于现实世界。

#4

Inlining and linked CSS and script files are equivalent. There's no difference other than the HTTP gets.

内联和链接的CSS和脚本文件是等效的。除了HTTP之外没有区别。

#5

Is performance a problem you currently have? What Google does to support 100ks of concurrent users isn't necessarily what you should be doing. I've found it much easier to maintain code when things like CSS and JavaScript are kept in separate include files. I only break what I consider good coding practices when there's a compelling reason. It's hard to imagine a one-page app is being killed by traffic for two include files that will be cached by user browsers after first use.

性能是你目前的问题吗? Google为支持100个并发用户做了什么并不一定是你应该做的。我发现当CSS和JavaScript之类的东西保存在单独的包含文件中时,维护代码要容易得多。当有令人信服的理由时,我只会打破我认为良好的编码实践。很难想象一个单页的应用程序被第一次使用后由用户浏览器缓存的两个包含文件的流量所杀死。

#6

I think you are over looking the fact that nobody actually coded the output you see with a system like Google Buzz, or Gmail. They depend on a very very sophisticated system that have built on Python and C to compile the source and make it very friendly to there homegrown "push" system they have.

我认为你完全没有看到没有人真正编写你用Google Buzz或Gmail等系统看到的输出。它们依赖于一个非常复杂的系统,它基于Python和C来编译源代码,并使它对自己开发的本地“推”系统非常友好。

I dont think you should be as concerned with the output as being multiple requests, I think that issue is totally secondary to being able to build and deploy your app. Later focus on plopping all your JS and CSS in the head, as this can be done pragmatically when you deploy.

我认为你不应该像多个请求一样关注输出,我认为这个问题完全是能够构建和部署你的应用程序的问题。后来专注于将所有JS和CSS放在头脑中,因为这可以在部署时以实际方式完成。

#1