做网站 域名不属于/查关键词

浏览器想要在各设备上运行涉及到对操作系统的适配

window、chrome最适配

浏览器内核：
Trident：IE
Gecko：Firefox
WebKit：safari 、chrome 、 android、 webOS

在浏览器地址栏输入chrome://version，回车可以查看浏览器信息
chrome内核是 blink
Safari内核是WebKit
浏览器内核主要指的是浏览器的渲染引擎
2013 年以前，代表有 Trident（IE），Gecko（firefox），Webkit（Safari chrome 等）以及 Presto（opera)。
2013 年，谷歌开始研发 blink ，chrome 28 以后开始使用，opera 也放弃了自主研发的 Presto 引擎，和谷歌一起研发 blink 引擎，国内各种 chrome系的浏览器（360、UC、QQ、2345 等等）也纷纷放弃 webkit，投入 blink 。

输入URL，WebKit调用其资源加载器加载该URL对应的网页
WebKit收到的资源可能是同步或者异步的。
网页被交给HTML解释器转变成一系列的词语Token
解释器根据词语创建Node节点，形成DOM树
如果节点是JavaScript代码的话，调用JavaScript引擎解释并执行，JavaScript代码可能会修改DOM树结构
如果节点需要依赖其他资源（e.g:图片、CSS…) 调用资源加载器来加载他们，但是他们是异步的，不会阻碍当前DOM树的创建；但是如果是JavaScript资源URL（没有标记异步方式的那种），则需要停止当前DOM树的构建。直到JavaScript资源加载并被JavaScript引擎执行后才继续执行。

DOMConent事件
onload事件：所有资源都加载


上述四个结构一般会稳定存在，直到网页被销毁，对于网页渲染意义非凡。

浏览器渲染

绘制的顺序其实就是元素进入堆栈样式上下文的顺序。这些堆栈会从后往前绘制，因此这样的顺序会影响绘制。
块渲染对象的堆栈顺序：背景颜色、背景图片、边框、子代、轮廓

浏览器的优化——渲染队列机制：
我们修改了元素的几何属性，导致浏览器触发重排或重绘时。会把该操作放进渲染队列，等到队列中的操作到了一定的数量或者到了一定的时间间隔时，浏览器就会批量执行这些操作。

现在大部分浏览器有渲染队列优化，不排除有些浏览器以及老版本的浏览器效率仍然低下，建议通过改变class或者csstext属性集中改变样式

常见的触发硬件加速的css属性：transform、opacity、filters、Will-change

window.requestAnimationFrame() 该方法传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行
回调函数执行次数通常是每秒60次，但在大多数遵循W3C建议的浏览器中，回调函数执行次数通常与浏览器屏幕刷新次数相匹配。为了提高性能和电池寿命，因此在大多数浏览器里，当requestAnimationFrame() 运行在后台标签页或者隐藏的 里时，requestAnimationFrame() 会被暂停调用以提升性能和电池寿命。
与防抖节流函数使用 settimeout 基于时间来管理队列不同，window.requestAnimationFrame 基于设备的刷新频率，因此不用传时间参数，但是函数的执行仍然使用的是浏览器的页面事件循环系统
window.requestAnimationFrame 相比节流函数降低了可控性，但是提升了性能和精确度，在处理 scroll、move 之类的事件时，若不考虑低版本浏览器兼容性，更加推荐使用。

浏览器进程

Browser进程：浏览器的主线程，负责浏览器界面的显示、各个页面的管理，创建销毁其他类型进程
Renderer进程：一个网页的渲染进程，每个网页都是独立的进程，可能有多个，沙箱模型启动之后也会有改变
GPU进程：最多只有一个，当仅当GPU硬件加速打开的时候才会被创建，主要用于对3D图形加速调用的实现
NPAPI插件进程
Pepper插件进程

浏览器运行状态的信息文件

网页结构

框结构

NPAPI不安全 NaCl沙箱技术
Native Client:将第三方开发的代码运行在一个单独的受限的环境中
沙箱模型：将一个进程运行在受限环境

Chrome浏览器V8引擎的出现，提升了JavaScript的执行效率，甚至出现了作为后端语言的Node.js

app.appcache
window.applicationCache

iframe

HTML内联框架元素 () 表示嵌套的browsing context。它能够将另一个HTML页面嵌入到当前页面中。成为同域的新页面
每个嵌入的浏览上下文（embedded browsing context）都有自己的会话历史记录(session history)和DOM树。包含嵌入内容的浏览上下文称为父级浏览上下文。顶级浏览上下文（没有父级）通常是由 Window 对象表示的浏览器窗口。
JavaScript程序由文档中包含和引用的所有JavaScript代码组成，这些分开的代码共享同一个window全局对象，可以通过这个对象访问表示HTML文档的底层对象document。
如果网页中包含嵌入的窗格iframe元素，被嵌入文档与嵌入它的文档中的JavaScript代码拥有不同的全局对象和document对象，可以看作两个不同的JavaScript程序。
但是关于JavaScript程序的边界并没有正式的定义，如果包含文档与被包含文档是从同一个服务器加载的（同源），则两个文档可以交互。

父子关系
window.frames 伪数组（类数组的对象）
window.parent 引用父窗口对象
iframe跨域限制
脚本访问框架内容必须遵守同源策略，并且无法访问非同源的 window 对象的几乎所有属性。同源策略同样适用于子窗体访问父窗体的 window 对象。跨域通信可以通过 window.postMessage 来实现。

allow ：为<iframe>指定其特征策略。例如 
allow="fullscreen",可以通过调用 <iframe> 的 requestFullscreen() 方法激活全屏模式。
allow="payment"，跨域的 <iframe> 就可以调用 Payment Request API
csp 
对嵌入的资源配置内容安全策略。 查看 HTMLIFrameElement.csp (en-US) 获取详情。
var csp = HTMLIFrameElement.csp
HTMLIFrameElement.csp = cspimportance ：表示 <iframe> 的 src 属性指定的资源的加载优先级。 auto (default)、high、low
name：用于定位嵌入的浏览上下文的名称。该名称可以用作 <a> 标签与 <form> 标签的 target 属性值，也可以用作 <input> 标签和 <button> 标签的 formtarget 属性值，还可以用作 window.open() 方法的 windowName 参数值。
referrerpolicy：表示在获取 iframe 资源时如何发送 referrer 首部
sandbox：对呈现在 iframe 框架中的内容启用一些额外的限制条件。属性值可以为空字符串（这种情况下会启用所有限制），也可以是用空格分隔的一系列指定的字符串

window.open

Window 接口的 open() 方法，是用指定的名称将指定的资源加载到浏览器上下文（窗口 window ，内嵌框架 iframe 、标签 tab ）

let windowObjectReference = window.open(strUrl, strWindowName, [strWindowFeatures]);let windowObjectReference;
let strWindowFeatures = `menubar=yes,location=yes,resizable=yes,scrollbars=yes,status=yes
`;function openRequestedPopup() {windowObjectReference =window.open("http://www.cnn.com/","CNN_WindowName",strWindowFeatures);
}

如果定义了 strWindowFeatures 参数，那么没有在这个字符串中列出的特性会被禁用或移除 （除了 titlebar 和 close 默认设置为yes）
如果已经存在以 strWindowName 为名称的窗口，则不再打开一个新窗口，而是把 strUrl 加载到这个窗口中，并忽略参数 strWindowFeatures 。
如果没有指定url，带有默认工具栏的空白窗口（加载about:blank）
strUrl设为空字符串时，可以在不改变窗口地址的情况下获得一个已经打开的同名窗口的引用。如果要在每次调用 window.open()时都打开一个新窗口，则要把参数 strWindowName 设置为 _blank。

调用失败，返回 null
成功，打开的新窗口对象的引用。如果父子窗口满足“同源策略”，可以通过这个引用访问新窗口的属性或方法。

编写浏览器插件

这里主要了解了一下chrome浏览器的插件机制

只是共享DOM（各通过JavaScript自定义属性并不会被共享），并不共享页面内嵌JavaScript的命名空间，插件无法访问到页面自身内嵌的JavaScript的变量和函数。

manifest的permission属性：很重要，使用许多功能前需要配置一下该字段
浏览器允许插件不受跨域限制，但是需要manifest的permission属性声明跨的域
插件是注入当前页面的，localstorage是基于域名的，在manifest的permission属性中声明storage获得调用浏览器存储API 的权利
cookie
bookmarks
history
downloads
webRequest
proxy

与web APP的清单有啥不同？

浏览器多语言

i18n

代理

代理可以让用户通过代理服务器浏览网络资源，以达到匿名访问等目的。代理的类型有很多种：HTTP代理、socks代理