简介
了解了浏览器原理后对自己前端知识的帮助
- 你可以知道你写的前端代码，是浏览器通过怎么的配合，展示到页面
- 你写的每一行代码将变得有意义，对于浏览器的优化啊 对于页面加载速度呀 优化页面解析速度
- 了解了web性能优化，写代码过程中有意无意中会尽量优化，而不是一味写代码 只是完成工作任务
主要内容
这篇笔记主要是浏览器渲染进程，进程线程配合展示页面 | 浏览器对于代码的解析 主要是V8引擎的任务
浏览器页面是消息队列和事件循环系统来驱动的
渲染进程中消息队列.PNG
什么是进程 什么是线程
进程：一个进程是一个运行程序 进程之间互补干扰
线程：依赖进程存在 线程之间内存共享
进程间通信：IPC通信机制
之间关系：
- 进程中的任意一线程执行出错 都会导致整个进程崩溃
- 进程关闭之后，操作系统会回收进程所占的内存
目前浏览器进程架构
浏览器进程2.PNG
最新Chrome 浏览器包括：
1个浏览器主进程、GPU进程、网络进程、渲染进程、插件进程
- 浏览器进程：主要负界面显示、用户交互、子进程管理、提供存储功能
- 渲染进程：将html、css、js转换为用户可以交互的界面JavaScript 引擎 V8 都是运行在该进程中，默认情况下，Chrome会为每个Tab标签创建一个渲染进行·。处于安全考虑，渲染进程都是运行在沙箱模式下。
- 其他不介绍 可参考浏览器进程与线程
以前浏览器进程框架带了的安全问题（浏览器沙盒 自己所困惑的点列出来）
在单进程浏览器中，页面是通过各个线程配合生效的
安全问题：
线程之间共享进程中的数据，进程之间的内容相互隔离。也就是说单线程浏览器中的页面是可以通过一些手段获取到浏览器的所有权限，然后再通过浏览器攻击到操作系统的。这就导致了单线程浏览器不安全的题。
因为浏览器插件可以使用 C/C++ 等代码编写，通过插件可以获取到操作系统的任意资源，当你在页面运行一个插件时也就意味着这个插件能完全操作你的电脑。如果是个恶意插件，那么它就可以释放病毒、窃取你的账号密码，引发安全性问题。
至于页面脚本，它可以通过浏览器的漏洞来获取系统权限，这些脚本获取系统权限之后也可以对你的电脑做一些恶意的事情，同样也会引发安全问题。总而言之，就是浏览器对于脚本与插件的运行没有一个隔离环境的存在，导致了各种安全问题的出现。
目前浏览器对于安全问题的解决：
最后我们再来看看上面的两个安全问题是怎么解决的。 采用多进程架构的额外好处是可以使用安全沙箱，你可以把沙箱看成是操作系统给进程上了一把锁，沙箱里面的程序可以运行，但是不能在你的硬盘上写入任何数据，也不能在敏感位置读取任何数据，例如你的文档和桌面。Chrome 把插件进程和渲染进程锁在沙箱里面，这样即使在渲染进程或者插件进程里面执行了恶意程序，恶意程序也无法突破沙箱去获取系统权限
目前浏览器进程中 关注渲染进程安全问题
[目前多进程架构]中总结的各进程主要功能，这里值得我们注意的是渲染进程所有的内容都是通过网络获取的，会存在一些恶意代码利用浏览器漏洞对系统进行攻击，所以运行在渲染进程里面的代码是不被信任的。这也是为什么 Chrome 会让渲染进程运行在安全沙箱里，就是为了保证系统的安全。
消息记录
smy:
沙盒只是隔离自己的操作系统 本地电脑
smy:
但是不能保证浏览器上的东西是否安全
smy:
比如你使用了浏览器记住密码功能
平易近人:
所以js的东西就只会在浏览器里乱动
用户输入url 浏览器进程配合图
输入url进程图.PNG
浏览器开发者工具所看到的进程
Chrome 的默认策略是，每个标签对应一个渲染进程。但如果从一个页面打开了另一个新页面，而新页面和当前页面属于同一站点的话，那么新页面会复用父页面的渲染进程。官方把这个默认策略叫 process-per-site-instance。
渲染流程
html 加载DOM树 ——> dom是保存在内存中的树状结构
css——>styleSheeps 样式 属性值也要标准化 样式计算
布局计算
分层计算 图层树
图层绘制
Gpu光栅化
合成
渲染进程.PNG
了解了重排、重绘后的 web性能优化方法
重排：通过js 或者css改变元素在几何方面的属性，会跟新整个渲染流水
重绘：改变了元素的颜色
优化方法
- 避免使用js改变样式 尽力多使用class
- 减少dom操作 使用高级api document.create.DocumentFragment.replaceChild()
3.暂存引用 变量赋值 let a =div.offLeft 用变量a 操作接下来的事情
4.脱离文档流 例如：个别图层
5.table(尽量避免table布局) 外面很小的改动可能对造成table从新布局（改动table内部元素除外）
6.对dom属性的读写要分离
网友评论