Google 的 HTML 代码看着很乱,为什么要写成这样呢?

他的html代码用了什么不常用的技术..

回复内容:

我们在编写代码的时候常常用了很多空格或者缩进,这样一眼就能看出大概写什么,比如html在最左端,head和body往右边缩进一点,if,div什么的相对与head或body也向右边缩进一点。

这主要是为了给人看,但是多了这么多空格,可读性是增加了,可是页面的大小却大了。

如果压缩掉,原先10K的可能变成6K,那么就节省了4K,100个用户原先要下载1000K的,现在只要600K,流量就节省了400K,GOOGLE浏览量那么大,1000万用户呢?一亿用户呢?这样可以节约流量。
反正99%的人没事不会去看google的源码,可读性不重要,google内部是有带了空格的可读性好的版本,如果想改代码,改完了再压缩,才放上去。还有的看起来比较乱不是html也不是javascript等语言的,那么肯定就是加密过了的。跟乱码似的,但是浏览器还是能读出来

=== 下面内容更新于 2014-12-12 ===

Why does Google use inline JavaScript and CSS on its homepage?
这个同样也是为了节省请求次数,加快速度,节省流量。【Quora】基本的道理,郑诚的回答已经很清楚了

对于想更深入了解的,可以参考一下雅虎的前端优化XX条(记得最开始看的时候还是14条,现在已经34条了,天……)

对于已经看过这些原则,早已了然于胸的,我再补点料。
google首页可能是有史以来pv最高的页面,其优化也比较极端,极端到以下两种做法我在别的网站从来没见到过(我没有详细考证google的其他页面是否也有这样的处理):

1. 在服务器端处理跨浏览器兼容,根据User-Agent返回不同的页面内容
对于跨浏览器兼容,传统的做法包括:用js判断浏览器类型做不同处理、使用css hack、浏览器私有标记/属性。总而言之,在浏览器端搞定兼容性。
但这并不是唯一的解决方案,更不是对用户最优的。如果能承受工作量,可以做到在服务器端处理,则兼容性相关的代码不必传给用户,可以节省相关的网络流量。而google首页就是这样做的。
可以给firefox装个ua switcher,一试便知。

我觉得,大多数网站,可能没有这种页面简单,而又pv巨巨高的页面来玩这套。但将工作量向服务器端转移,可以成为一种思路,比如jquery库中,很多代码在处理特定浏览器中的问题,那不妨分浏览器编译出若干版本,在体积和执行效率上都有优势。

2. 为减小页面体积,不惜违背规范
这个要只是属性不写双引号之类的,也就不拿出来说事了。
但你打开google首页,找不到

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3126062.html

(0)
上一篇 2025年3月29日 20:11:27
下一篇 2025年3月29日 20:11:31

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 把 HTML5 简称为 H5 的人,会把 CSS3 说成 C3 吗?

    如果会,为什么要简读?Hyper 5 跟 Casading 3 能准确表示同样含义吗?如果不会,为什么 HTML 5 会受到这样的对待? 回复内容: 其实大部分用“H5”这个词的人不知道有CSS这个东西。大众指的H5其实应该称为mobile…

    编程技术 2025年3月29日
    100
  • 如果html传输全部使用json, browser 将会快很多?

    如果传输全部使用json, browser 将会快很多, 因为没有closing tag (xml or html), 大家怎么看这个问题? 回复内容: 浏览器会快很多?快在哪个步骤呢?是传输快还是解析快? 如果是说传输快,从信息的冗余来讲…

    编程技术 2025年3月29日
    100
  • HTML5 是一门编程语言吗?

    在个人的印象中,html一直不被算做一门编程语言,也看到过有人将其理解为一门标记语言。当前html5中出现的一些新特性,则使本人对这个问题越来越感到困惑,希望前辈们指点一二。 回复内容: HTML 乃至任何置标语言(markup langu…

    编程技术 2025年3月29日
    100
  • 当前主流HTML5的网页是否依然是以DIV + CSS为基础开发的?

    我是web前端的初学者,希望能够在学习中跟上主流,目前对于HTML和CSS都学习了语法,但考虑到在实际开发一个网站是如何通过这两者来进行的,有些不知所措。在网上搜了下大概都是讲通过DIV + CSS来布局网页的,但这个作为以往网页的开发手段…

    编程技术 2025年3月29日
    100
  • 如何系统的学习做网站?

    作为计算机专业学生,做网站方面只是略懂,在校学生会时改过一些校网站的代码,但从未从无到有的系统的做出一个网站,略懂HTML略懂css div略懂php 略懂cms,但还是想要系统的学一下web开发以达到以下水平:1.自己可以从无到有搭建出一…

    编程技术 2025年3月29日
    100
  • 相比px而言,在响应式web设计中,em有何优势?

    我把html中所有长宽全部改用百分比,为了更好的适配不同尺寸的显示设备,而字体这块一直没有很好的解决办法,1em=16px,em的值并不是根据显示器宽度设置的百分比,那为什么还要将px改为em?我该怎么让我的字体大小也能有效的配合整体的百分…

    编程技术 2025年3月29日
    100
  • 熟练JavaScript的步骤应该是?

    自学编程狗,已能熟练html和css,JavaScript看完了《JavaScript dom 编程艺术》,在看《锋利的jquery》,现在编canvas的html5游戏,发现老是有JavaScript的问题不懂,一百度,或者上网问大神又很…

    编程技术 2025年3月29日
    100
  • 利用gulp实现压缩的实例

    1,下载安装node 访问  ,然后点击大大的绿色的 install 按钮,下载完成后直接运行程序,就一切准备就绪。 npm 会随着安装包一起安装, 2,打开代码行 node -v //查看node版本,如果显示版本号,则安装成功。 npm…

    编程技术 2025年3月29日
    100
  • HTML入门必知

    这次给大家带来html入门必知,html入门必知的注意事项有哪些,下面就是实战案例,一起来看一下。 一、简介 1、超文本标记语言(Hyper Text Mark Language),是一种创建网页的标准标记语言,由浏览器来解析。 2、文档后…

    编程技术 2025年3月29日
    100
  • HTML5通讯录获取指定多个人的信息

    这篇文章主要介绍了详解HTML5+通讯录获取指定多个人的信息 ,非常具有实用价值,需要的朋友可以参考下。 本文介绍了HTML5通讯录获取指定多个人的信息,具体如下: 一、获取多个人的信息:要解决通讯录导入多个人的信息之前,要解决获取多个人的…

    编程技术 2025年3月29日
    100

发表回复

登录后才能评论