浅谈对浏览器的认识

清疚 2024-04-17 13:49 9阅读 0赞

# 浅谈对浏览器的认识 #

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

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

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

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

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

—— 摘自 [【 维基百科】][Link 1]

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

Android WebView

IOS UIWebView

WeChat WebView

--------------------

## 浏览器的主要功能 ##

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

浏览器解释并显示 HTML 文件的方式是在 HTML 和 CSS 规范中指定的。这些规范由网络标准化组织 [W3C（万维网联盟）][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…][www.html5rocks.com_en_tutorial]

转载于:https://juejin.im/post/5d19d27651882579db031196

[Mozilla Firefox]: https://link.juejin.im?target=https%3A%2F%2Fzh.wikipedia.org%2Fwiki%2FFirefox
[Internet Explorer]: https://link.juejin.im?target=https%3A%2F%2Fzh.wikipedia.org%2Fwiki%2FInternet_Explorer
[Microsoft Edge]: https://link.juejin.im?target=https%3A%2F%2Fzh.wikipedia.org%2Fwiki%2FMicrosoft_Edge
[Google Chrome]: https://link.juejin.im?target=https%3A%2F%2Fzh.wikipedia.org%2Fwiki%2FGoogle_Chrome
[Opera]: https://link.juejin.im?target=https%3A%2F%2Fzh.wikipedia.org%2Fwiki%2FOpera%25E9%259B%25BB%25E8%2585%25A6%25E7%2580%258F%25E8%25A6%25BD%25E5%2599%25A8
[Safari]: https://link.juejin.im?target=https%3A%2F%2Fzh.wikipedia.org%2Fwiki%2FSafari
[Link 1]: https://link.juejin.im?target=https%3A%2F%2Fzh.wikipedia.org%2Fwiki%2FWikipedia%3A%25E9%25A6%2596%25E9%25A1%25B5
[W3C]: https://link.juejin.im?target=https%3A%2F%2Fwww.w3.org%2F
[www.html5rocks.com_en_tutorial]: https://link.juejin.im?target=https%3A%2F%2Fwww.html5rocks.com%2Fen%2Ftutorials%2Finternals%2Fhowbrowserswork%2F