前端笔记-关键知识点

---

前言

浏览器原理是每一个前端程序员想要深入学习必知必会的知识,本文旨在将一些重要知识以及理解写下来,供以后查阅使用

---

# 一、基本概念 以google浏览器为例,浏览器实际上一个多进程应用,在日常使用中我们经常会,打开一个一个网页链接,浏览器也会新建一个又一个的标签页,实际上每一个标签页都是一个进程,而在每一个进程之下,实际上也分了很多个线程,比如执行JS代码的线程,处理异步操作的线程等等,可以把页面上每一个标签页都当做是一个单进程多线程的应用来看待

二、浏览器的组成

浏览器组成包括:

1.用户界面-有地址栏.前进/后退按钮,书签目录等,也就是除了显示页面以外一些能提供用户操作的组件

2.浏览器殷勤-查询及操作渲染引擎的接口

3.渲染引擎-显示请求的内容,主要解析HTML和css,并显示解析结果

4.网络-完成网络调用,如http请求,可以支持多个平台

5.UI后端-用来绘制类似组合选择框及对话框等基本组件,不特定于某个平台,底层使用操作系统的用户接口

6.JS解释器-解释和执行JS代码

7.数据存储-浏览器需要在硬盘保存类似cookie的各种数据,HTML5定义了web database技术,这是一种轻量级完整的客户端存储技术

三、内核

浏览器内核包括两部分:渲染引擎和js引擎,由于js引擎越来越独立,内核就倾向于只指渲染引擎,负责请求网络资源加以解析排版并呈现给用户
默认情况下,渲染引擎可以显示html,xml文档及图片,它也可以借助插件显示其他类型数据,例如使用PDF阅读插件,可以显示PDF格式

四、渲染流程

从资源的下载到最终的页面呈现,渲染流程可以简单理解成一个线性串联的变换过程的组合,原始输入为URL地址,最终输为页面Bitmap,中间依次经过了Loader.parser.Layout和Paint模块

五、副作用

副作用概念:副作用是在计算结果的过程中,系统状态的一种变化,或者与外部世界进行的可观察的交互.
副作用肯呢个包含,单不限于:
更改文件系统.
往数据库插入记录.
发送一个http请求.
可变数据.
打印/log.
获取用户输入.
DOM查询.
访问系统状态.
这个列表还可以继续写下去,概括的说,只要是根函数外部环境发生的交互就是副作用

六、DIP IOC DI IOC容器

依赖倒置原则(DIP)

DIP的概念:

一种软件架构设计的原则(抽象概念),依赖导致原则,它转换了依赖,高层模块不依赖于低层模块的实现,而底层模块依赖于高层模块定义的接口
Bob Martins对DIP的定义:高层模块不应该依赖于低层模块,两者应该依赖于抽象,抽象不应该依赖于实现,实现应该依赖于抽象

DIP的优点:

系统更柔韧:可以修改一部分代码而不影响其他模块
系统更健壮:可以修改一部分代码而不会让系统崩溃
系统更高效:组件松耦合,且可复用,提高开发效率

控制反转(IOC)

DIP和IOC的关系

DIP是一种软件设计原则,它仅告诉你两个模块之前如何依赖,IOC是一种软件设计模式,它告诉你应该怎样做来解除相互依赖模块的耦合

IOC的概念

IOC是一种反转流.依赖和接口的方式(DIP的具体实现方式),它为相互依赖的组件提供抽象,将依赖(低层模块)对象的获得交给第三方(系统)来控制,即依赖对象不在被依赖模块的类中直接通过new来获取,创建和使用都交给第三方来控制.

其他概念补充

软件设计原则:原则为我们提供指南,它告诉我们什么是对的,什么是错的,它不会告诉我们如何解决问题,它仅仅给出一些准则,以便我们可以设计好的软件避免不良的设计.一些常见的原则,比如DRY,OCP.DIP等
软件设计模式:模式是在软件开发过程中总结得出的一些可重用的解决方案,它能解决一些实际的问题,一些常见的模式比如工厂模式,单例模式等等

依赖注入(DI)

DI和IOC之间的关系

IOC的一种实现方式,用来反转依赖(IOC的具体实现方式)

DI概念

将依赖对象的创建和绑定转移到被依赖对象的外部来实现,它提供一种机制,将需要依赖(底层模块)对象的引用传递给被依赖(高层模块)对象\

具体实现方式

构造函数注入,属性注入和接口注入

IOC容器

简介

依赖注入的框架,用来映射依赖,管理对象创建和生存周期(DI框架)

功能

(1)动态创建,注入依赖对象
(2)管理对象生命周期
(3)映射依赖关系