`
rapheal
  • 浏览: 171100 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

百“浏览器”争鸣的时代

阅读更多

前言

上一篇博客HTML|CSS|JS初探 提到了一些基本的概念,貌似有人踩,好吧,不应该影响我现在这种非常渴望分享交流的状态吧。

很多程序语言会从Hello World教起,貌似成了一种学习程序语言的潜规则了。但是我不大想写这样的东西,还是想按自己理解先解释一些概念吧。WEB应用离不开浏览器,于是,我打算从这里开始写点自己的想法。

 

浏览器

各种小白用户都知道怎么浏览网页:双击打开浏览器,输入网址,回车,即可看到对应的网页了。

那浏览器是啥呢,简单来说,就是用来看网页的一个程序。

上一篇博客说到了,其实页面基本都是HTML+CSS+JS构成的,那么浏览器肯定要懂这三样东西,倘若连它都不懂,那还怎么显示网页给你看。

至此,我们知道了,浏览器就是用来接收从网络上某个角落来的网页(姑且当做是网页吧~),然后接收完毕之后,负责显示页面给电脑前的你来阅读。

 

百家争鸣

前面说到浏览器一个重要的功能就是把接收到的网页显示给用户看,于是世界各地的公司们开始生产他们的浏览器了,微软有Internet Explorer系列,Mozilla有Firefox,Google有Chrome,苹果有safari……

很多人会举手说,我知道,我们中国有遨游浏览器,360浏览器。

好吧,这些确实是浏览器,但是呢,它们都是IE(Internet Explorer)内核,什么意思呢?它们的心脏跟大脑都是别人的,纯粹就是做一个各自认为方便用户的界面就丢出来给大伙用了,当然我不否认他们有些地方做得很好,但是从严格意义上,我不打算把他们归到浏览器中来讲。

现在我们知道了,原来我们的网页还可以用这么多软件来看的。个人推荐用Chrome,简洁快速。

 

浏览器解析页面

看到这个标题,不要说你,我自己都头大了,上次看过一篇文献讲了浏览器是如何工作的,还没彻底搞懂。

本人仅仅想在此稍微用通俗点的语言简单地描述一下浏览器解析页面的过程,以后有时间再慢慢写一篇稍微专业点的吧。

浏览器接收到页面这个过程呢其实就是浏览器接收从服务器传过来的HTML文件。

咦,前面不是讲了,那些好看的颜色都是CSS产生的,那些奇妙的效果都是JS制造的,这里怎么只变成了HTML文件了。

其实两者不矛盾,浏览器接收到HTML文件之后,就开始解析了。

  1. 当HTML里边描述道:我需要一套好看的装饰,此时浏览器就会去服务器找这套装饰,也就是CSS文件了。于是浏览器就根据HTML的结构跟装饰来绘画好看的页面了。
  2. 当HTML里边描述说:我现在需要一个芯片了,浏览器就会去服务器找这个芯片,也就是JS文件了。浏览器拿到这个芯片之后就开始运作它,至于它怎么控制效果,这里就不讲了。

当然了,浏览器还有可能会有图片,还有Flash,这些也像是一种资源,浏览器可以收到服务器的这些资源,根据HTML的描述把这些资源放到网页上去显示。

于是一个页面就呈现在你面前了,至于后来你在这个页面上边点击或者输入文字,通通都是由JS这个芯片去控制你的行为跟展示效果了。

万恶的IE

可能有些人看到这个标题的人会奇怪,同样是浏览器,为什么要说IE是万恶的。

大家都知道这个现象,我们每个人拿到同样的一个东西,我们各自的处理是不一样的。例如我们同样是收到一个任务要把一堆部件组成一辆自行车,即使这批部件是一模一样的,但是到最后,我们都没法保证我们组装后的自行车是一模一样的,有可能我组装的自行车座位高了一点点。

那这个现象对于众多浏览器也是一样会有的,收到同样地HTML文件,CSS文件,JS文件。但是各自绘画出来的页面是有所差别的。这就需要我们在其中加入一些特定的限制,使得网页在所有浏览器当中显示都是一致的。

于是回到“万恶的IE”这个话题,自然可以联想到,IE这家伙肯定是用很诡异的方式去处理网页,导致它显示出来的页面跟其他浏览器不一样,前端工程师/重构师就要花力气去理解它为什么会这样,要怎么样才能使得它画出来的页面跟别人一样。

目前WEB应用的布局样式(CSS)会先针对比较符合标准的Firefox浏览器(火狐)或者Chrome浏览器(谷歌)进行编写,然后再针对IE6-8分别进行一些调整,必要时做一些CSS hack(就是前面说到的要用一些针对IE的独特方式去处理)。

本篇总结

于是我们可以很容易知道,一个健壮的WEB应用,一定要针对现在所有主流的浏览器进行测试 ,这个是一个很重要的处理阶段。

本篇不同于技术贴,纯粹只是想引导一些新手了解一些前端情况,文中均为本人原创,欢迎交流指正。

0
1
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics