浅谈对浏览器的认识

浅谈对浏览器的认识

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

什么是浏览器（网页浏览器）？

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

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

主流网页浏览器有Mozilla Firefox、Internet Explorer、Microsoft Edge、Google Chrome、Opera及Safari。

—— 摘自 【 维基百科】

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

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…