火狐浏览器书签标记_内容与标记比例书签

火狐浏览器书签标记

When you care about performance, or SEO (or just doing a good job as web dev) an interesting data point is the ratio of page content vs. the markup used to present this content. Or... how much crap we put in HTML in order to present what the users want to see - the content.

当您关心性能或SEO(或只是作为Web开发人员做得很好)时，一个有趣的数据点就是页面内容与用于呈现此内容的标记之比。或者...为了显示用户希望看到的内容，我们在HTML中添加了多少废话。

So I played tonight with a bookmarklet to provide this piece of stats.

因此，今晚我玩了一个书签，以提供这一数据。

安装 (Install)

Right-click, add to favourites/bookmarks. Or simply click to see the ratio of this page.

右键单击，添加到收藏夹/书签。或者只需单击以查看此页面的比例。

content/markup

内容/标记

怎么运行的 (How it works)

Since the scripts on the page may modify the content and markup, the bookmarklet makes an Ajax request to get a fresh copy of the page from the server. Then it runs a few regular expressions ("borrowed" from prototype.js) to strip all tags and the scripts/styles content. The first metric it provides is the size of the stripped content divided by the size of the original markup.

由于页面上的脚本可能会修改内容和标记，因此小书签会发出Ajax请求，以从服务器获取页面的新副本。然后，它运行一些正则表达式(从prototype.js “借用”)来剥离所有标记和脚本/样式内容。它提供的第一个指标是被剥离内容的大小除以原始标记的大小。

Then the bookmarklet tries to be more fair and count the alt, title and value attributes as content, including the size of attribute names themselves. And this is the second, "fair", metric. The content attributes are inspected using DOM methods, not regexp, so they can be affected by any javascript that has modified the page. Oh well, life's not fair.

然后，bookmarklet会变得更加公平，并将alt ， title和value属性视为内容，包括属性名称本身的大小。这是第二个“公平”指标。内容属性是使用DOM方法而不是regexp进行检查的，因此它们可能会受到修改页面的任何javascript的影响。哦，生活不公平。

码 (Code)

The bookmarklet code is served from here. The code is also on github.

小书签代码从此处提供。该代码也在github上。

结果 (Results)

Here are some random results of running the bookmarklet on different sites.

这是在不同站点上运行小书签的一些随机结果。

http://www.cnn.com: Total size: 92004 bytes Content size: 11475 bytes Content-to-markup ratio: 0.12 Fair ratio * : 0.16

http://www.cnn.com：总大小：92004字节内容大小：11475字节内容与标记比率：0.12公平比率*：0.16

http://www.sitepoint.com Total size: 65989 bytes Content size: 16199 bytes Content-to-markup ratio: 0.25 Fair ratio * : 0.60

http://www.sitepoint.com总大小：65989字节内容大小：16199字节内容与标记比率：0.25公平比率*：0.60

Article on http://en.wikipedia.org: Total size: 21648 bytes Content size: 3315 bytes Content-to-markup ratio: 0.15 Fair ratio * : 0.35

http://en.wikipedia.org上的文章：总大小：21648字节内容大小：3315字节内容与标记比率：0.15公平比率*：0.35

http://www.phpied.com Total size: 31899 bytes Content size: 7933 bytes Content-to-markup ratio: 0.25 Fair ratio * : 0.48

http://www.phpied.com总大小：31899字节内容大小：7933字节内容与标记比率：0.25公平比率*：0.48

http://www.google.com SERP Total size: 29963 bytes Content size: 3351 bytes Content-to-markup ratio: 0.11 Fair ratio * : 0.14

http://www.google.com SERP总大小：29963字节内容大小：3351字节内容与标记比率：0.11公平比率*：0.14

Tell your friends about this post on Facebook and Twitter

在Facebook和Twitter上告诉您的朋友有关此帖子的信息

翻译自: https://www.phpied.com/content-to-markup-ratio-bookmarklet/