发表于

进程与线程

进程是资源分配的最小单位, 线程是cpu调度的最小单位

一个进程就是程序运行的实例, 详细解释就是, 启动一个程序时, 操作系统会为该程序创建一块内存, 用来存放代码, 运行中的数据, 和一个执行任务的主线程主线程, 这个运行环境就是主线程.

进程是运行在虚拟内存上的, 虚拟内存是用来解决用户对硬件资源的无限需求和有限的硬件资源之间的矛盾. 从操作系统上看, 虚拟内存即交换文件; 从处理器角度看, 虚拟内存即虚拟地址空间

进程和线程的关系

  • 进程中的任意一线程出错, 都会导致整个进程崩溃
  • 线程间共享进程的数据
  • 当一个进程关闭以后, 操作系统会回收进程所占的内存, 防止内存泄漏
  • 进程之间内容相互隔离, 数据不会共享, 也避免了数据写出到其他线程上

进程和线程的区别

  • 进程能看做独立应用, 线程不能
  • 资源: 进程是cpu资源分配的最小单位, 线程是cpu调度的最小单位
  • 通信: 线程之间可以直接共享同一进程的资源, 而进程通信需要借助进程间通信
  • 系统开销: 由于创建或撤销进程, 系统都要为之分配或回收资源, 而进程通信需要借助进程间通信

浏览器的渲染进程的线程共有五种:

  1. GUI渲染进程, 负责渲染浏览器, 解析html, css, 构建DOM树, 构建CSSOM树, 构建渲染树和绘制页面; 当发生重绘和回流时就会执行该线程

  2. js引擎线程, 也称js内核, 负责处理js脚本程序, 解析js脚本

    GUI线程和JS引擎线程是互斥的, 所以如果js执行时间过长, 会造成页面渲染不连贯, 页面渲染加载阻塞

  3. 时间触发线程, 属于浏览器而不是js引擎, 用来控制事件循环

  4. 定时器触发线程, 定时器触发线程是setInterval, setTimeout所在线程, 浏览器定时计数, 不是js引擎计数, 以为js是单线程的, 计时完毕后, 添加到事件任务会被添加到任务队列等待执行, 计时器最小为4ms

  5. 异步http请求线程, xmlHttpRequest连接后通过浏览器新开一个线程请求

进程之前的通信方式

  1. 管道通信 管道是最基本的线程通信机制. 管道就是操作系统内核开辟出的一段缓冲区进程1可以将数据拷贝到这段缓冲区上, 进程2就可以读取了
    • 管道只能单向通信
    • 依赖文件系统
    • 生命周期随进程
    • 面向字节流服务
    • 管道内部提供同步机制

浏览器渲染

  • 首先解析收到的文档, 根据文档定义一棵DOM树, DOM树是由DOM元素及属性结点组成
  • 对CSS进行解析, 生成CSSOM规则树
  • 根据DOM和CSSOM规则树构建渲染树. 渲染树的结点被称为渲染对象, 渲染对象和DOM大部分都是一一对应的
  • 当渲染对象被创建并添加到树中时, 没有位置和大小, 生成渲染树后进行回流(重绘), 这一阶段浏览器主要弄清各个结点在页面的几何位置和大小
  • 布局阶段结束后, 遍历渲染树并调用paint方法, 将他们显示在屏幕上, 绘制使用UI组件

这个过程是逐步完成的, 它会解析一部分就显示一部分

浏览器渲染优化

针对js : js会阻塞html和css的解析, 优化如下

  • 将js文件放在body后面
  • body中间尽量不要写script
  • async是在下载完成后, 立即异步加载, 加载后立刻执行

针对CSS

  • link 浏览器会派发一个新等线程(http线程)去加载资源, 与此同时GUI线程会 继续向下渲染代码
  • style GUI直接渲染
  • @important 会阻碍渲染, 直到引用的资源被返回

针对DOM树和CSSOM树

  • html代码层级不要太深
  • 减少css代码层级

减少回流和重绘

  • 减少dom操作
  • 不要使用table布局

浏览器本地存储方式

  1. cookie

    最早被提出的本地存储方式, 在此之前, 服务端是无法判断网络中两个请求是否是同一个用户发起的, 为了解决这个问题, cookie就出现了

    cookie的特性

    • cookie一旦被创建, 名称就无法修改
    • cookie无法跨域名, a域名和b域名的cookie是无法共享的, 这也是由cookie的隐私安全性决定的, 这样就能阻止非法获取其他网站的cookie
    • 每个域名下的cookie数量不能超过20个, 每个cookie的大小不能超过4kb
    • cookie在请求一个新页面时会被发送过去

    跨域名共享cookie的方法:

    • 使用nginx反向代理

    cookie使用场景

    • 最常见的使用场景是cookie和session结合使用, 将sessionId存储到cookie中, 每次发送请求都会携带这个sessionId, 这样服务端就会知道是谁发送的请求, 从而响应相应的信息

    LocalStorage

    localStorage是html5新引入的特性

    **优点: **

    大小为5M

    localStorage是持久存储, 除非主动清理, 否则一直存在

    仅存储在本地, 不像cookie那样每次http请求都会携带

    缺点

    隐私模式无法读取localStorage

    受同源策略限制,

浏览器同源策略

同源是指: 协议, 域名, 端口号必须一致

限制如下

当前域名下js脚本不能访问其他域下的cookie, localStorage, sessionStorage

当前域下js脚本不能访问操作其他域下的DOM

当前域下ajax无法发送跨域请求

解决跨域问题:

**CORS: **

浏览器事件机制

事件是指用户操作网页时发生的交互动作, 如click/move, 还可以是文档加载, 窗口滚动,大小调整. 事件被封装成一个对象, 该对象包含所有event信息(属性)和对事件进行的操作(方法)

现代浏览器有三种事件模型:

DOM0级事件, 这种模型不会传播, 没有事件流概念, 直接在元素的属性上绑定事件

DOM2级别事件: addEventListener绑定事件, 分三个阶段, 捕获阶段, 事件从document对象依次向子元素传播, 最终到达被点击的结点, 目标阶段, 当事件不断的传递直到目标节点的时候，最终在目标节点上触发这个事件. 冒泡阶段：事件冒泡即事件开始时，事件发生所在的节点，然后逐级传播到较为不具体的节点

stopPropagation()

Vue基础

当一个Vue实例被创建, Vue会遍历data中所有的属性, 用Object.defineProperty将他们都转换为getter, setter, 并在内部追踪相关依赖