浏览器知识小整理
一、对web标准的理解：
1.web标准是一系列标准的集合，主要由三部分组成：
-
结构(Structure)——html
-
表现(Presentation)——css
-
行为(Behavior)——js(dom+es)
对于结构要求：标签小写且闭合、不允许随意嵌套
对于表现和行为要求：外链CSS与JS，结构表现行为分为三块符合W3C规范；
id和class属性命名规范，减少维护难度,易改版
2.web标准的优点：
-
易维护：只修改CSS就能改变整站的样式
-
响应快：HTML文档体积更小
-
可访问性好：语义化HTML 编写的网页，更易被屏幕阅读器识别
-
兼容性：不同样式表可以让网页在不同的设备上呈现不同样式
-
SEO：语义化HTML更易被搜索引擎解析，提升排名
二、浏览器内核：
1.浏览器内核——渲染引擎+JS引擎，取得网页内容、整理讯息、计算网页显示方式输出至显示器；
执行JS语言实现网页动态效果；不同浏览器内核对网页编写语法的解释不同
2.五（四）大内核：
-
Trident：IE、腾讯、遨游、360、猎豹、世界之窗、2345 存在很多兼容性问题
-
Gecko：Firefox 最大优势跨平台 开源，开放程度高
-
Webkit：Safari、早期Chrome 、360和搜狗的高速模式 开源，相对安全
-
Presto（已废弃）： 早期Opera 13年之后Opera加入谷歌后弃用 渲染速度快
-
Blink：现在Chrome（28—）、Opera（15—）内核 2013年4月发布
三、浏览器的主要构成
1.用户界面 - 包括地址栏、后退、前进按钮、书签目录等，也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分
2.浏览器引擎 - 用来查询及操作渲染引擎的接口。
3.渲染引擎 - 显示请求的内容，如果请求内容为html，他负责解析html及css，并将解析后的结果显示出来。
4.网络 - 用来完成网络调用，例如Http请求，它具有平台无关的接口，可以在不同平台上工作。
5.UI后端 - 用来绘制类似组合选择框对话框等基本组件，具有不特定某个平台的通用接口，底层使用操作系统的用户接口。
6.JS解释器 - 用来解释执行JS代码
7.数据存储 - 属于持久层，浏览器需要在硬盘中保存类似cookie的各种数据，html5定义了web database技术，这是一种轻量级完整的客户端存储技术。
四、浏览器渲染原理
1.流程：JS > style > layout > paint > composite
-
JS：实现动画效果与DOM元素操作
-
style（计算样式）确定每个DOM元素应该用什么CSS规则
-
layout（布局）计算每个DOM元素大小位置;reflow(回流) web页面元素是相对的，其中任意一个元素位置发生变化，会联动其他元素发生变化
-
Paint（绘制）绘制DOM元素的文字、颜色、图像、边框和阴影
-
Composite（渲染层合并）：合并图层显示屏幕
2.优化渲染性能
优化JS执行效率：避免使用setTimeout 和 setInterval 尽量使用 requestAnimationFrame
耗时长的JS代码放到Web Workers中做
降低样式的计算范围和复杂度：尽量保持CLASS简短
避免大规模复杂布局：使用Flexbox替代老布局
简化绘制的复杂度、减少绘制区域
