浅谈对浏览器的认识
在前端开发工作中，浏览器就是我们前端开发者的承载体，处理的所有的页面都需要浏览器中表现。当看到我们完成的代码在浏览器中出现出来美轮美奂的网站，我总是会感受到工作的成就感，还有就是能感受到浏览器给我们生活中带来的巨大便利、以及它的强大展现能力。
什么是浏览器（网页浏览器）？
网页浏览器（英语：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 元素相对应的，但并非一一对应。
- 构建呈现树时，需要计算每一个呈现对象的可视化属性。
- 具有继承和共享样式数据。
- ...
我们应该怎么做？
了解浏览器的特性后，在我们的日常开发中应该顺应这些浏览器的特性，减少浏览器解析的运行时间，从而更快看到我们的页面，提高页面的响应速度。
- 书写符合 W3C 语法规范的代码，使用正确的标签、字符。虽然各自的浏览器都有容错机制，但是我们还是应该避免或减少浏览器跑着部分的解析。次之，万一某一天这个容错机制没了，或者改了，那。。。
- 避免过于复杂的标记层次结构，及多层嵌套。应尽可能减少结构代码，这是持续优化的过程。
- 样式结构优化，合理书写选择器。应避免
div div div div {...}这种无节操的书写操作...。 - 合并公共css代码。抽离公共的css ，提高耦合度。
- 优雅降级渐进增强。哪怕现阶段有不同包自动处理兼容代码，但是这个思想在书写代码的时候应该需要的。
- 书写便于阅读、符合 W3C 语法规范的js。绝不能出现死循环这样的低级错误，一定要测试自己书写的代码，对自己的代码负责。项目中、团队中，最好定好书写规范。
- 尽可能减少DOM的操作。实现项目中必然会对DOM进行操作，但是我们要减少，毕竟每次操作DOM都是重绘。
