源代码里面确实是有很多很多很多的代码,用成百上千来形容都有些小了。
但是因为他是源代码,并没有被格式化,所以在看的时候很乱,没有一点点的章法,建议你用开发者工具(F12)看一下,会明了许多。
百度的首页是很简洁,但是其背后隐藏的内容就很丰富了而且每一个代码块而且一个都不能少,都有其相应的作用。
大致有这么几个原因
为了适配更多的浏览器,要知道,并不只是一种浏览器在使用百度,而且每一个浏览器还有各种版本,如果是要做到每一个用户所看到的的百度首页一模一样,就是需要那么多的代码;
在源代码里面有很多引用的JS、CSS样式,这些不是谷歌工程师码的,而是引用的,这部分是可以复用的,你我他都可以使用。当然,也不排除这些都是百度工程师们自己写了自己用,毕竟现在很多大型互联网公司都是自己写工具自己使用,然后感觉不错再发布出去;
还有一些是在你在搜索框输入时候吧,他会计算然后智能推荐,这个也是在代码里的,只是隐藏了,我们看不到,并不代表没有;
最后一个,就是各种链接及文章了吧,百度和谷歌不同,谷歌是只有一个搜索栏,百度搜索栏下面还有文章的啊,加载的时候还是要在源代码里的;
对了,也不排除其他不为人知的原因的,比如上一次的搜索记录、浏览记录什么的,这个不确定,不算原因,纯属猜测。
出于好奇,特意重温了下百度首页,大家可以看下源代码里的代码和开发者选项里的代码有啥区别
最后,刚入门程序员小白一枚,如有错误,欢迎各位指正,好及时更正。
谢谢。
对了,今天晚上记得赏月哦。
不请自来。没图,手打。
百度首页其实只是看起来简洁罢了,内部涵盖的东西还是挺多的,当然也全都是web前端代码,只是在查看源代码比较乱。
主要乱的部分首先是样式部分,百度首页的样式代码全部挤在<title>下面,一大坨看着就晕,而且百度这里的样式全部都尝试了兼容各种内核,几乎可以说是代码量n倍增长。
样式下面是头部的JS代码,然后,又是一大坨样式…
结束完恶心的样式代码之后就是页面的主元素标签,除了那个搜索框之外其实还有新闻,天气,热点,搜索历史,消息那些东西,那些都是在数据库里面存放,然后通过后端代码加到前端的,并非是手写,因为手写的代码肯定会注意格式美观。后端代码生成还有个东西就是很多的编码(比如base64之类的)放在这里。
再下面就是大量的js代码,结束,大致就是这个样子
其实在未登录状态,代码这边其实比较简洁的。登录之后就变得…
这个,也没多少复杂度啊,我一个一个跟你分析分析
head 一般用来放css和js的地方
比如字体或按钮、输入框的样式和动作等等
这仨是隐藏的,平常看不见,看起的名字貌似是执行某个动作返回的样式效果
我们常用的菜单部分,不登录是没有这么多的
这是常用的搜索,看图的对应关系
搜索框下个性化的链接
剩下的大部分是样式文件,或者隐藏元素,用于某种特定的效果,还有就是根据UI切图拼接的代码,举个最简单的例子:比如左中右各有三个图,在代码里可能就是四个div元素,四套css样式文件,其中一个div是外层父类的。只是看起来多而已。
有什么问题可以留言或评论!
以上,希望能帮到你,祝好!
大概成功都是由努力堆积而成,越简单就越不简单,一个简洁的页面,当然也是程序员们用代码砌成,一层又一层。
(1)包含很多二级页面的入口
(2)有很多浏览器兼容性的代码
(3)内嵌样式
希望我的回答能帮助到你!
关注是为了再一次的交流,戳一戳右上角的关注吧!