阅读 83

浅谈对浏览器的认识

浅谈对浏览器的认识

在前端开发工作中,浏览器就是我们前端开发者的承载体,处理的所有的页面都需要浏览器中表现。当看到我们完成的代码在浏览器中出现出来美轮美奂的网站,我总是会感受到工作的成就感,还有就是能感受到浏览器给我们生活中带来的巨大便利、以及它的强大展现能力。

什么是浏览器(网页浏览器)?

网页浏览器(英语:Web Browser,常简称为浏览器)是一种用于检索并展示万维网信息资源的应用程序。这些信息资源可为网页、图片、影音或其他内容,它们由统一资源标志符标识。信息资源中的超链接可使用户方便地浏览相关信息。

网页浏览器虽然主要用于使用万维网,但也可用于获取专用网络中网页服务器之信息或文件系统内之文件。

主流网页浏览器有Mozilla FirefoxInternet ExplorerMicrosoft EdgeGoogle ChromeOperaSafari

—— 摘自 【 维基百科】

截止到写文时间,除了上述的通用浏览器,目前市场份额也占大部分的浏览器:

Android WebView

IOS UIWebView

WeChat WebView


浏览器的主要功能

浏览器的主要功能就是向服务器发出请求,在浏览器窗口中展示您选择的网络资源。这里所说的资源一般是指 HTML 文档,也可以是 PDF、图片或其他的类型。资源的位置由用户使用 URI(统一资源标示符)指定。

浏览器解释并显示 HTML 文件的方式是在 HTML 和 CSS 规范中指定的。这些规范由网络标准化组织 W3C(万维网联盟)进行维护。 多年以来,各浏览器都没有完全遵从这些规范,同时还在开发自己独有的扩展程序,这给网络开发人员带来了严重的兼容性问题。如今,大多数的浏览器都是或多或少地遵从规范。


浏览器的高层结构

浏览器的用户界面并没有任何正式的规范,但是多年来的最佳实践自然发展以及彼此之间相互模仿,浏览器的用户界面有很多彼此相同的元素。浏览器的主要组件为:

  • 用户界面 - 包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口显示的您请求的页面外,其他显示的各个部分都属于用户界面。
  • 浏览器引擎 - 在用户界面和呈现引擎之间传送指令。
  • 呈现引擎 - 负责显示请求的内容。如果请求的内容是 HTML,它就负责解析 HTML 和 CSS 内容,并将解析后的内容显示在屏幕上。
  • 网络 - 用于网络调用,比如 HTTP 请求。其接口与平台无关,并为所有平台提供底层实现。
  • 用户界面后端 - 用于绘制基本的窗口小部件,比如组合框和窗口。其公开了与平台无关的通用接口,而在底层使用操作系统的用户界面方法。
  • Javascript 解释器 - 用于解析和执行 JavaScript 代码。
  • 数据存储 - 浏览器需要在硬盘上保存各种数据,常见的有:Cookie、LocalStorage、SessionStorage。

浏览器-解析器

有两种基本类型的解析器:自上而下解析器和自下而上解析器。直观地来说,自上而下的解析器从语法的高层结构出发,尝试从中找到匹配的结构。而自下而上的解析器从低层规则出发,将输入内容逐步转化为语法规则,直至满足高层规则。

HTML 解析器

  • HTML 解析器的任务是将 HTML 标记解析成解析树。
  • HTML 的词汇和语法在 W3C 组织创建的规范中进行了定义。
  • 解析器的输出“解析树”是由 DOM 元素和属性节点构成的树结构。
  • 具有容错机制,在浏览 HTML 网页时从来不会看到“语法无效”的错误。
  • ...

CSS 解析器

  • CSS 是上下文无关的语法,可以使用简介中描述的各种解析器进行解析。
  • 呈现树和 DOM 树的关系,呈现器是和 DOM 元素相对应的,但并非一一对应。
  • 构建呈现树时,需要计算每一个呈现对象的可视化属性。
  • 具有继承和共享样式数据。
  • ...

我们应该怎么做?

了解浏览器的特性后,在我们的日常开发中应该顺应这些浏览器的特性,减少浏览器解析的运行时间,从而更快看到我们的页面,提高页面的响应速度。

  1. 书写符合 W3C 语法规范的代码,使用正确的标签、字符。虽然各自的浏览器都有容错机制,但是我们还是应该避免或减少浏览器跑着部分的解析。次之,万一某一天这个容错机制没了,或者改了,那。。。
  2. 避免过于复杂的标记层次结构,及多层嵌套。应尽可能减少结构代码,这是持续优化的过程。
  3. 样式结构优化,合理书写选择器。应避免 div div div div {...} 这种无节操的书写操作...。
  4. 合并公共css代码。抽离公共的css ,提高耦合度。
  5. 优雅降级渐进增强。哪怕现阶段有不同包自动处理兼容代码,但是这个思想在书写代码的时候应该需要的。
  6. 书写便于阅读、符合 W3C 语法规范的js。绝不能出现死循环这样的低级错误,一定要测试自己书写的代码,对自己的代码负责。项目中、团队中,最好定好书写规范。
  7. 尽可能减少DOM的操作。实现项目中必然会对DOM进行操作,但是我们要减少,毕竟每次操作DOM都是重绘。

内容参考网上文章整理,仅限个人学习使用:

www.html5rocks.com/en/tutorial…

关注下面的标签,发现更多相似文章
评论