1.了解浏览器工作原理的必要性
（1）了解浏览器如果加载文件，可以在引入外部文件时对对应的文件存放到合适的位置，减缓浏览器的性能消耗加速文件的加载
（2）了解浏览器的解析过程 可以构建dom结构的时候 注意html css的布局优化 以浏览器最佳的解析方式书写 加快dom结构的渲染
（3）了解浏览的渲染过程 可以在设置元素属性 编写js文件的时候减少 reflow repain对浏览器性能的消耗
2.浏览器的功能
浏览器的主要功能是将用户选择的web资源以界面的形式呈现出来 首先他需要向服务器请求资源 并且根据一定的格式把这些
资源合理的排列在浏览器的界面上面 请求的资源通常是HTML css js一些基础的格式 当然也包含一些图片 或者视频资源
3.浏览器从拿到url路径到渲染到浏览器上面的整个流程
1.输入网址
2.浏览器查找域名的ip地址
3.浏览器给web服务器发送一个http请求
4.网站服务的永久重定向响应
5.浏览器跟踪重定向的地址 就是数据资源请求的地址 重新向服务器发送一个请求
6.服务器端根据浏览器的请求进行响应的处理 然后返回一个响应
7.服务器根据浏览器的资源请求进行资源的分配 返回到客户端
8.浏览器根据拿到的资源进行加载 解析 和渲染 然后呈现到浏览器上面
4.浏览器的渲染过程
基本流程
浏览器首先解析HTML进行dom树的构建 然后构建render树 对render树进行布局 最后绘制render树
解析过程
（1）通过解析HTML、svg，XHTML会生成一个dom树
（2） 解析css 产生css规则树
（3）js通过domapi 和cssOM api 来操控dom树以及css规则树
5.拿一个HTML浏览器如何进行加载 解析 以及渲染来描绘浏览器的工作流程
首先浏览器获取到HTML文件之后 会自上而下的进行加载 并且在加载的过程中对其进行解析和渲染 （注意 自上而下 碰到就解析和渲染）
（1）浏览器会将一个HTML解析成一个dom树
dom树的构建过程 是一个深度遍历的过程 当前节点的所有子节点都构建完成之后才会去构建下一个节点的子节点
（2）.碰到css将其解析成css 规则树
（3）根据dom树以及css规则树来构建render树
（4）render的构建成功 表示浏览器已经熟悉网页中的所有的节点 以及节点中各个节点的关系 下一步就是layout的过程 就是布局
（5）最后会绘制 将render树进行遍历 并且使用UI后端层绘制每一个节点
重点部分
reflow 回流 ：浏览器花时间去渲染 当发现某一部分的布局改变时 会进行回流重新渲染（严重浪费性能 的行为）
repaint 重绘： 改变某一个元素的背景颜色 文字颜色 等 不会影响元素周围布局结构的改变 只会引起浏览器的repaint对某一部分进行重绘
了解其渲染过程 以及引起重新渲染的原因 可以采取一些措施防范减少性能的损耗
reflow 引起的主要原因
1，页面初始化的时候 进行页面的初次渲染（不能避免）
2，操作dom
3，某些元素的尺寸变化 引起布局的改变
4，css的某些属性发生改变
减少reflow repaint的方式（优化建议）
1，不要一条一条的对dom进行样式的修改 这样不如预先定义好css的className 修改className
2,不要把dom节点的属性值放在一个循环里当成循环里的变量
3，为动画的HTML元素使用flex或者absolute的position 那么修改他们的css是不会重绘布局的
4，千万不要使用table布局 很小的一个改动会导致整个table布局的改变导致浏览器的回流
HTML页面的加载和解析流程
1，用户输入网址 浏览器向服务器发送请求 服务器返回HTML文件
2，浏览器开始载入HTML文件 在header标签里面遇到link标签 浏览器会发送一个css请求
3，服务器根据浏览器的请求返回对应的css文件
4，浏览器拿到css开始进行页面的渲染
5，浏览器解析HTML的时候遇到img标签会发送一个图片资源的请求 浏览器不会等待图片资源的下载会继续向下渲染
6，图片下载完成 引起布局改变 浏览器会进行回流重新渲染
7，当遇到javascript脚本时会里面执行（如果存在dom操控）浏览器会继续进行回流
8，遇到标签如果下面不存在代码表示这次浏览器完成了这次的加载解析渲染的
加载和解析过程应注意 （优化建议）
（注意）css匹配规则是从右往左进行的 为了减少性能的消耗注意css书写的习惯
1，dom深度尽量浅
2，减少inline javascript css的数量
3，严格遵循css的规则
4，避免为存在id选择器的标签添加类名 id可以确定唯一的元素
5，避免使用后代选择符 尽量使用子选择符 子元素匹配符的概率要大于后代元素匹配符
6，避免使用通配符
javascript的加载与执行特点
1，载入后马上执行
2，执行时会阻塞页面的后续内容的进展
因为浏览器在渲染过程中需要一个稳定的dom树 js中可能存在对dom操控引起回流的操作 所以会阻塞下面的进程
了解了javascript的加载特点我们可以想到一些减少甚至避免的情况 （优化建议）
1，把所有的script放到页面的底部 body闭合标签之前 以确保在脚本执行前页面已经完成了dom树的渲染
2，尽可能的合并一些脚本 script标签越少 页面加载越快 响应的速度越快
3，采用无阻塞下载javascript脚本的方式
（1）使用script标签的defer属性
（2）使用动态创建script元素下载并且执行代码
