核心：浏览器进程、网络进程、渲染进程

TCP协议：如何保证页面文件能被完整的送达浏览器 衡量web性能时候有个指标FP(first paint)，指从页面加载到首次绘制的时长。网络加载速度是影响FP的一个重要因素。了解网络协议就变得十分重要。不管是http还是websocket都是基于TCP/IP的。 一个数据包的旅程网络中的文件通常被分为很多数据包来传输，这些数据包在传输过程中很容易丢失或出错，如何保证他们的完整性呢？ 互联网，是一套理念和协议组成的体系架构。其中，协议是一套众所周知的标准和规范，如果各方都同意使用，那么他们之间的沟通就变得毫无障碍。 1.IP地址，把数据包送达指定主机互联网上不同的在线设备都有唯一的地址，地址只是一个数字，这和大部分家庭收件地址类似，你只需要知道一个家庭的具体地址，就可以往这个地址发送包裹，这样物流系统就能把物品送到目的地。 2.UDP，把数据包送达应用程序到达主机的数据包如何知道是交给浏览器还是交给英雄联盟呢，UDP头信息包含了源端口号和目的端口号，而且传输速度很快。 缺点： 1.虽然 UDP 可以校验数据是否正确，但是对于错误的数据包，UDP 并不提供重发机制，只是丢弃当 ...

Chrome架构：仅仅打开一个页面，为什么有4个进程 并行处理同一时间处理多个任务，能大大提升性能 进程和线程（像工厂和流水线的关系）​ 一个进程就是一个程序的运行实例。启动一个程序的时候，操作系统会为这个程序开辟一块内存，用来存放代码、执行中的数据、执行任务的主线程， 这样一个运行环境我们叫做一个进程。 ​ 线程是由进程启动和管理的 ​ 要注意的点：多进程处理 ​ 1.进程中任意一个线程出错，都会导致进程崩溃 ​ 2.线程之间共享进程中的数据 ​ 3.当进程被关闭时，操作系统会将分配的内存回收 ​ 4.进程之间的内容相互隔离 ​ 进程隔离是为了保护各进程互不干扰，不会一个进程崩溃导致其他进程崩溃。进程之间通信有（IPC）机制 单进程浏览器1.不稳定。早期浏览器采用插件来实现web视频，web游戏等，插件是很不稳定的，插件崩溃导致进程就崩溃了；渲染引擎模块也不稳定，一段复杂的js代码就可能导致渲染引擎模块崩溃，进程也跟着崩溃了。 2.不流畅。所有模块在同一个进程，多个模块在同一个线程，没有更好运用并行处理，效率肯定不高；脚本和插件也会让浏览器变的卡顿；内存泄漏也会导致 ...

前言 浏览器工作原理这块的学习笔记和总结（找的课程学的），加深理解和记忆 对于应用，浏览器一直很重要浏览器发展历程中三个大的进化路线 1.应用程序web化随着云计算的普及和html5的快速发展，越来越多的应用转向了B/S及浏览器/服务端架构。 2.web应用移动化还有技术层面的问题没有解决（如渲染流程复杂，性能不如原生，功能不如原生强大和灵活，无法离线使用，不能实时推送消息，移动端没有web应用的一级入口 3.web操作系统化web操作系统这个概念可能有两层含义：一、利用web技术构建一个纯粹的操作系统，如chromeOS；二、浏览器底层结构往操作系统架构方向发展，这样发展肯定会导致许多的改变。（1.chrome朝着SOA即面向服务的架构（将不同的功能单元进行拆分，通过服务之间定义好协议和接口来联系起来）发展，未来很多模块会以服务的方式提供给上层应用；2.在浏览器引入对多种编程语言的支持，比如新支持的WebAssembly ; 3.简化渲染流程；4.加大对系统设备特性的支持; 5.提供对复杂web项目开发的支持。） 为什么要学习浏览器工作原理1.评估项目web开发 ...

Vuex是什么Vuex是为Vue.js提供的状态管理模式/工具。 官方文档https://vuex.vuejs.org/zh/api/#replacestate 描述当多个组件共享状态时，会出现1.多个视图依赖同一个状态 2.不同视图的行为会改变同一个状态。这种复杂庞大的系统如果采用props和emit事件的方式进行父子组件传值会导致代码很难维护，兄弟组件的传值更是不方便（bus中央事件总线和父组件中转） 将共享状态抽离，进行集中管理，我们的组件树构成一个巨大的‘视图’，无论树的哪个位置，都能获取状态或触发行为改变状态。这就回到了Vuex。 原理核心内容1state,getter,mutation,action, module(模块) 安装1cnpm install vuex --save 引入12345678910111213141516171819// store.jsimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex ...

简介String, array 1.字符串方法1.1方法，都不改变原字符串let str = ‘abcdEFG’ 1.1.1 str.charAt();返回指定位置的字符1str.charAt(1) // 'b' 1.1.2 str.charCodeAt();返回指定位置的unicode码1str.charCodeAt(1) // 98 1.1.3 str.concat();拼接字符串1str.concat('a',1) // 'abcdEFGa1' 1.1.4 str.split(‘’);转为数组1str.split('') // [a,b,c,d,E,F,G] 1.1.5 str.slice(1,2);截取字符串，左闭右开，如果是负数，则是字符串长度+这个负数的值，一般不要写负数1str.slice(1,2) // 'b' 1.1.6 str.substring(1,2);截取字符串，左闭右开，如果是负数，当0来做，以两个参数中小的值作为起始1str.subs ...

简介flex，是flexible box的缩写，意为弹性布局，为盒模型提供一定的灵活性。是2009年W3C提出的一种布局方案，支持IE10+。 语法采用 Flex 布局的元素，称为容器。它的所有子元素自动成为容器成员，称为项目。 12345678// 任何容器都可以指定为弹性布局，设置后子元素的float，clear，vertical-align属性失效.box{ display: flex;}// 行内元素可以设置inline-flex，设置后可以设置宽度.box{ display: inline-flex;} 1. 设置在容器上的属性123456flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content 1.1 flex-direction规定方向 1234// （默认）水平方向，从左到右 | 水平方向，从右到左 | 垂直方向，从上到下 | 垂直方向，从下到上.box{ flex-direction: row | row-reverse ...