压缩整个网页(HTML 和 JS)
我发现了一些工具像这个,可以让我为 javascript 创建“自动提取”javascript网页中的代码,它采用多种技术来最小化传输大小。
我有一个一个网页,其中确实有相当大的javascript代码块。但由于我还没有开始优化文件大小,所以我也在考虑对我网站的 HTML 部分做同样的事情。在我的博客页面上,PHP 脚本从大量文本文件中提取 HTML 片段,并将它们连接成一个巨大的 HTML 文件并发送出去。 Chrome 告诉我,使用 gzip 压缩它可以将文件大小减少三分之二。
不过,我确实关闭了 gzip 压缩,因为发生的情况是,如果您下载了我通过 Internet Explorer 托管的任何 zip 存档,那么 erp derp 会忽略对它们进行gunzip,因此 IE 下载的文件总是损坏的。我想如果我解决了这个小问题,我就可以重新打开 gzip,但目前我想尝试看看是否可以制作一个自解压的 HTML 页面。是否可以让 javascript 提取一个巨大的 HTML 字符串并将整个块添加为 body 元素的子元素?那行得通吗?
I have found some tools like this one that let me create "auto-extracting" javascript for javascript code in a web page, which employ a variety of techniques to minimize transfer size.
I have a webpage which does have a rather large chunk of javascript code in it. But since I haven't gotten around to optimizing the filesize yet I was thinking about doing the same sort of thing with the HTML bits of my website too. On my blog page the PHP script pulls HTML snippets from a large number of text files, and concatenates them into one giant HTML file which is sent out. Chrome tells me that compressing it with gzip would reduce the filesize by two-thirds.
However I did turn off the gzip compression because what was happening was if you downloaded any of my zip archives I hosted via Internet Explorer, it would herp derp neglect to gunzip them so the file downloaded by IE is always corrupted. I guess I can turn gzip back on if I fix this little issue, but for the time being I'd like to try to see if I can make a self-extracting HTML page. Is it possible to have javascript extract a giant HTML string and add the entire chunk as child of the body element? Would that work?
这样做会比较慢,而且很容易出错。任何 Javascript 错误都会导致整个页面无法渲染,你的 SEO 将被彻底破坏。坚持定期渲染 HTML:当浏览器下载/解析 HTML 时,它将开始获取其他资源(图像、脚本、CSS)并渲染布局。不要过于关注严格最小的下载大小,而是关注最快的整体体验。
大量使用免费提供的 CDN。其中有两大巨头:Google 和 Microsoft,它们托管着各种脚本,例如 jQuery 和 Modernizr。尽可能坚持使用谷歌,他们似乎比微软有更高的采用率,因此更有可能获得热缓存。除此之外,将 CDNJS 用于其他公开可用的库——它们有很多。
缩小现有的 Javascript,并为静态和动态页面启用内容压缩。不要强迫它,让浏览器请求它。您在哪个版本的 IE 上看到损坏情况?自 IE6 以来,我还没有发现这是一个问题...
使用 Javascript 加壳程序会使您的网站显得更慢,但代价是您会节省更多的传输字节。不仅脚本必须运行,而且现在您还要求用户的浏览器在脚本运行之前执行额外的(可能很大)额外步骤。
如果您尝试下载单个文件(使用“另存为”对话框),则无法使用内容类型为“application/zip”的 gzip。 PHP 提供了实际的 Zip 格式,请改用这些库。
It will be slower to do that, and very error prone. Any Javascript error will cause the entire page to not render, and your SEO will be absolutely destroyed. Stick to regularly rendered HTML: as the browser is downloading / parsing the HTML, it will begin fetching other resources (images, scripts, css) and rendering the layout. Don't be so focused on strictly smallest download size, but rather quickest overall experience.
Make heavy use of the freely available CDNs. There are the big two: Google and Microsoft, that host a variety of scripts like jQuery and Modernizr. Stick to Google where possible, they seem to have a much higher adoption than Microsoft and thusly a higher chance of a warm cache. Past that, use CDNJS for other publically-available libraries -- they have a lot.
Minify your existing Javascript, and enable content compression for static and dynamic pages. Don't force it on, let the browser request it. What version of IE are you seeing corruption on? I haven't seen that be an issue since IE6...
Using the Javascript packers will make your site appear slower at the expense of saving a few more bytes of transfer on your end. Not only does a script have to run, but now you're asking the users' browser to perform an additional (potentially large) extra step before your scripts can run.
If you're trying to download individual files (with the Save-As dialog), you can't use gzip with a content type of 'application/zip'. The actual Zip format is available with PHP, use those libraries instead.