公司网站哪个建的好,jsp网站开发遇到问题,电子商务网站开发的说法,电商网络营销是干什么的浏览器的主要构成 用户界面 #xff0d; 包括地址栏、后退/前进按钮、书签目录等#xff0c;也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分。 浏览器引擎 #xff0d; 用来查询及操作渲染引擎的接口。 渲染引擎 #xff0d; 用来显示请求的内容#…浏览器的主要构成 用户界面 包括地址栏、后退/前进按钮、书签目录等也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分。 浏览器引擎 用来查询及操作渲染引擎的接口。 渲染引擎 用来显示请求的内容例如如果请求内容为html它负责解析html及css并将解析后的结果显示出来。 网络 用来完成网络调用例如http请求它具有平台无关的接口可以在不同平台上工作。 UI后端 用来绘制类似组合选择框及对话框等基本组件具有不特定于某个平台的通用接口底层使用操作系统的用户接口。 JS解释器 用来解释执行JS代码。 数据存储 属于持久层浏览器需要在硬盘中保存类似cookie的各种数据HTML5定义了web database技术这是一种轻量级完整的客户端存储技术 需要注意的是不同于大部分浏览器Chrome为每个Tab分配了各自的渲染引擎实例每个Tab就是一个独立的进程。
浏览器内核
主要分成两部分渲染引擎和 JS 引擎。
渲染引擎的职责就是渲染即在浏览器窗口中显示所请求的内容。默认情况下渲染引擎可以显示 html、xml 文档及图片它也 可以借助插件一种浏览器扩展显示其他类型数据例如使用 PDF 阅读器插件可以显示 PDF 格式。
JS 引擎解析和执行 javascript 来实现网页的动态效果。
最开始渲染引擎和 JS 引擎并没有区分的很明确后来 JS 引擎越来越独立内核就倾向于只指渲染引擎。
浏览器的渲染原理
1浏览器首先解析HTML代码将其转换为DOM文档对象模型DOM是一棵以HTML元素为节点的树状结构包含了网页中所有元素的属性和位置信息。
2然后对 CSS 进行解析生成 CSSOM 规则树。CSSOM包含了所有元素的样式信息如颜色、字体、布局等。
3根据 DOM 树和 CSSOM 规则树构建渲染树。渲染树的节点被称为渲染对象渲染对象是一个包含有颜色和大小等属性的矩 形渲染对象和 DOM 元素相对应但这种对应关系不是一对一的不可见的 DOM 元素不会被插入渲染树。还有一些 DOM 元素对应几个可见对象它们一般是一些具有复杂结构的元素无法用一个矩形来描述。
4布局当渲染对象被创建并添加到树中它们并没有位置和大小所以当浏览器生成渲染树以后就会根据渲染树来进行布局也 可以叫做回流。这一阶段浏览器要做的事情是要弄清楚各个节点在页面中的确切位置和大小。通常这一行为也被称为“自动 重排”。
5绘制布局阶段结束后是绘制阶段遍历渲染树并调用渲染对象的 paint 方法将它们的内容显示在屏幕上绘制使用 UI 基础组 件。
6交互和动画当用户与网页进行交互如点击、滚动等或页面中包含动画效果时浏览器会根据需要更新渲染树重新计算布局和绘制以呈现交互和动画效果。
值得注意的是这个过程是逐步完成的为了更好的用户体验渲染引擎将会尽可能早的将内容呈现到屏幕上并不会等到所有的 html 都解析完成之后再去构建和布局 render 树。它是解析完一部分内容就显示一部分内容同时可能还在通过网络下载其 余内容。 https://kb.cnblogs.com/page/129756/
渲染过程 JS 文件的处理
JavaScript 的加载、解析与执行会阻塞文档的解析也就是说在构建 DOM 时HTML 解析器若遇到了 JavaScript那么 它会暂停文档的解析将控制权移交给 JavaScript 引擎等 JavaScript 引擎运行完毕浏览器再从中断的地方恢复继续解 析文档。
也就是说如果你想首屏渲染的越快就越不应该在首屏就加载 JS 文件这也是都建议将 script 标签放在 body 标签底部的 原因。当然在当下并不是说 script 标签必须放在底部因为你可以给 script 标签添加 defer 或者 async 属性。
async 和 defer 的作用、区别
1脚本没有 defer 或 async浏览器会立即加载并执行指定的脚本也就是说不等待后续载入的文档元素读到就加载并执 行。
2defer 属性表示延迟执行引入的 JavaScript即这段 JavaScript 加载时 HTML 并未停止解析这两个过程是并行的。 当整个 document 解析完毕后再执行脚本文件在 DOMContentLoaded 事件触发之前完成。多个脚本按顺序执行。
3async 属性表示异步执行引入的 JavaScript与 defer 的区别在于如果已经加载好就会开始执行也就是说它的执 行仍然会阻塞文档的解析只是它的加载过程不会阻塞。多个脚本的执行顺序无法保证。
文档的预解析
当执行 JavaScript 脚本时另一个线程解析剩下的文档并加载后面需要通过网络加 载的资源。这种方式可以使资源并行加载从而使整体速度更快。需要注意的是预解析并不改变 DOM 树它将这个工作留给主解析 过程自己只解析外部资源的引用比如外部脚本、样式表及图片。
CSS 如何阻塞文档解析
理论上既然样式表不改变 DOM 树也就没有必要停下文档的解析等待它们然而存在一个问题JavaScript 脚本执行时可 能在文档的解析过程中请求样式信息如果样式还没有加载和解析脚本将得到错误的值显然这将会导致很多问题。
所以如果浏览器尚未完成 CSSOM 的下载和构建而我们却想在此时运行脚本那么浏览器将延迟 JavaScript 脚本执行和文档 的解析直至其完成 CSSOM 的下载和构建。也就是说在这种情况下浏览器会先下载和构建 CSSOM然后再执行 JavaScript 最后再继续文档的解析。
渲染页面时常见哪些不良现象
FOUC主要指的是样式闪烁的问题由于浏览器渲染机制比如firefox在 CSS 加载之前先呈现了 HTML就会导致展示 出无样式内容然后样式突然呈现的现象。会出现这个问题的原因主要是 CSS 加载时间过长或者 CSS 被放在了文档底 部。
白屏有些浏览器渲染机制比如chrome要先构建 DOM 树和 CSSOM 树构建完成后再进行渲染如果 CSS 部分放在 HTML 尾部由于 CSS 未加载完成浏览器迟迟未渲染从而导致白屏也可能是把 JS 文件放在头部脚本的加载会阻塞后面 文档内容的解析从而页面迟迟未渲染出来出现白屏问题。
如何优化关键渲染路径
为尽快完成首次渲染我们需要最大限度减小以下三种可变因素
1关键资源的数量。 2关键路径长度。 3关键字节的数量。
优化关键渲染路径的常规步骤如下
1对关键路径进行分析和特性描述资源数、字节数、长度。 2最大限度减少关键资源的数量删除它们延迟它们的下载将它们标记为异步等。 3优化关键字节数以缩短下载时间往返次数。 4优化其余关键资源的加载顺序您需要尽早下载所有关键资产以缩短关键路径长度。
减少HTTP请求合并CSS和JavaScript文件、使用CSS精灵技术合并图片等可以减少浏览器与服务器之间的通信次数从而提高渲染速度。按需加载对于较大的资源文件如图片、视频等可以采用懒加载技术只在用户需要时再进行加载以减少初始加载时的负担。优化CSS和JavaScript压缩和精简CSS和JavaScript文件可以减少文件大小提高加载速度。此外避免使用过多的全局变量和DOM操作也可以提高渲染性能。使用CDN将静态资源部署到内容分发网络CDN可以让用户从离他们最近的服务器获取资源降低延迟和提高加载速度。优化图像压缩和优化图像可以降低图像文件的大小减少加载时间。此外使用合适的图片格式如WebP和图片懒加载也可以提高性能。利用浏览器缓存为静态资源设置缓存策略让浏览器可以将已下载的资源暂时存储在本地以便下次访问时更快地加载。优化网页结构将关键的CSS和JavaScript代码放在文档头部避免渲染阻塞将非关键的代码放在文档尾部以便在网页内容加载完成后再执行。使用异步和延迟加载为JavaScript文件添加async和defer属性可以让浏览器并行加载资源提高加载速度。避免重定向减少重定向次数尤其是移动设备上的重定向可以提高渲染速度和用户体验。
重绘和回流
https://juejin.cn/post/6844903569087266823
重绘: 当渲染树中的一些元素需要更新属性而这些属性只是影响元素的外观、风格而不会影响布局的操作比如 background -color我们将这样的操作称为重绘。
回流当渲染树中的一部分或全部因为元素的规模尺寸、布局、隐藏等改变而需要重新构建的操作会影响到布局的操作这样 的操作我们称为回流。
常见引起回流属性和方法
任何会改变元素几何信息元素的位置和尺寸大小的操作都会触发回流。
1添加或者删除可见的 DOM 元素
2元素尺寸改变——margin、padding、width、height、border、display 3内容变化比如用户在 input 框中输入文字 4浏览器窗口尺寸改变——resize事件发生时 5计算 offsetWidth 和 offsetHeight 属性 6设置 style 属性的值 7修改网页的默认字体时。
回流必定会发生重绘重绘不一定会引发回流。回流所需的成本比重绘高的多改变父节点里的子节点很可能会导致父节点的一系列 回流。 如何减少回流
1使用 transform 替代 top
2不要把节点的属性值放在一个循环里当成循环里的变量
3不要使用 table 布局可能很小的一个小改动会造成整个 table 的重新布局
4把 DOM 离线后修改。如使用 documentFragment 对象在内存里操作 DOM
5不要一条一条地修改 DOM 的样式。与其这样还不如预先定义好 css 的 class然后修改 DOM 的 className。这也解释了为什么操作dom慢
浏览器缓存
https://juejin.cn/post/6844903672556552205#heading-3
https://segmentfault.com/a/1190000012573337
浏览器的缓存机制指的是通过在一段时间内保留已接收到的 web 资源的一个副本如果在资源的有效时间内发起了对这个资源的再一次请求那么浏览器会直接使用缓存的副本而不是向服务器发起请求。使用 web 缓存可以有效地提高页面的打开速度减少不必要的网络带宽的消耗。
web 资源的缓存策略一般由服务器来指定可以分为两种分别是强缓存策略和协商缓存策略。
强缓存
使用强缓存策略时如果缓存资源有效则直接使用缓存资源不必再向服务器发起请求。强缓存策略可以通过两种方式来设置分别是 http 头信息中的 Expires 属性和 Cache-Control 属性。
服务器通过在响应头中添加 Expires 属性来指定资源的过期时间。在过期时间以内该资源可以被缓存使用不必再向服务器发送请求。这个时间是一个绝对时间它是服务器的时间因此可能存在这样的问题就是客户端的时间和服务器端的时间不一致或者用户可以对客户端时间进行修改的情况这样就可能会影响缓存命中的结果。
Expires 是 http1.0 中的方式因为它的一些缺点在 http 1.1 中提出了一个新的头部属性就是 Cache-Control 属性 它提供了对资源的缓存的更精确的控制。它有很多不同的值常用的比如我们可以通过设置 max-age 来指定资源能够被缓存的时间 的大小这是一个相对的时间它会根据这个时间的大小和资源第一次请求时的时间来计算出资源过期的时间因此相对于 Expires 来说这种方式更加有效一些。常用的还有比如 private 用来规定资源只能被客户端缓存不能够代理服务器所缓存。还有如 n o-store 用来指定资源不能够被缓存no-cache 代表该资源能够被缓存但是立即失效每次都需要向服务器发起请求。
一般来说只需要设置其中一种方式就可以实现强缓存策略当两种方式一起使用时Cache-Control 的优先级要高于 Expires 。
协商缓存
使用协商缓存策略时会先向服务器发送一个请求如果资源没有发生修改则返回一个 304 状态让浏览器使用本地的缓存副本。 如果资源发生了修改则返回修改后的资源。协商缓存也可以通过两种方式来设置分别是 http 头信息中的 Etag 和 Last-Modified 属性。
服务器通过在响应头中添加 Last-Modified 属性来指出资源最后一次修改的时间当浏览器下一次发起请求时会在请求头中添加一个 If-Modified-Since 的属性属性值为上一次资源返回时的 Last-Modified 的值。当请求发送到服务器后服务器会通过这个属性来和资源的最后一次的修改时间来进行比较以此来判断资源是否做了修改。如果资源没有修改那么返回 304 状态让客户端使用本地的缓存。如果资源已经被修改了则返回修改后的资源。使用这种方法有一个缺点就是 Last-Modified 标注的最后修改时间只能精确到秒级如果某些文件在1秒钟以内被修改多次的话那么文件已将改变了但是 Last-Modified 却没有改变 这样会造成缓存命中的不准确。
因为 Last-Modified 的这种可能发生的不准确性http 中提供了另外一种方式那就是 Etag 属性。服务器在返回资源的时候在头信息中添加了 Etag 属性这个属性是资源生成的唯一标识符当资源发生改变的时候这个值也会发生改变。在下一次资源请求时浏览器会在请求头中添加一个 If-None-Match 属性这个属性的值就是上次返回的资源的 Etag 的值。服务接收到请求后会根据这个值来和资源当前的 Etag 的值来进行比较以此来判断资源是否发生改变是否需要返回资源。通过这种方式比 Last-Modified 的方式更加精确。
当 Last-Modified 和 Etag 属性同时出现的时候Etag 的优先级更高。使用协商缓存的时候服务器需要考虑负载平衡的问题因此多个服务器上资源的 Last-Modified 应该保持一致因为每个服务器上 Etag 的值都不一样因此在考虑负载平衡时最好不要设置 Etag 属性。
强缓存策略和协商缓存策略在缓存命中时都会直接使用本地的缓存副本区别只在于协商缓存会向服务器发送一次请求。它们缓存不命中时都会向服务器发送请求来获取资源。在实际的缓存机制中强缓存策略和协商缓存策略是一起合作使用的。浏览器首先会根据请求的信息判断强缓存是否命中如果命中则直接使用资源。如果不命中则根据头信息向服务器发起请求使用协商缓存如果协商缓存命中的话则服务器不返回资源浏览器直接使用本地资源的副本如果协商缓存不命中则浏览器返回最新的资源给浏览器。
Cookies、localstorage、SessionStrorage
1Cookie
大小只有4kb每次发起HTTP请求都会携带 1.Cookie一旦创建成功名称就无法修改无法跨域名 3.每个域名下Cookie的数量不能超过20个 4.有安全问题如果Cookie被拦截那就可获得session的信息 5.可以设置过期时间 6.可以设置很多字段
2LocalStorage
1.大小一般为5MB 2.持久储存除非主动清理不然会永久存在 3.仅储存在本地不像Cookie那样每次HTTP请求都会被携带
缺点 1.存在浏览器兼容问题IE8以下版本的浏览器不支持 2.如果浏览器设置为隐私模式那我们将无法读取到LocalStorage 3.LocalStorage受到同源策略的限制
3SessionStorage
是HTML5提出来的存储方案主要用于临时保存同一窗口(或标签页)的数据刷新页面时不会删除关闭窗口或标签页之后将会删除这些数据。
浏览器安全
CSRF
CSRF 攻击指的是跨站请求伪造攻击攻击者诱导用户进入一个第三方网站然后该网站向被攻击网站发送跨站请求。如果用户在被 攻击网站中保存了登录状态那么攻击者就可以利用这个登录状态绕过后台的用户验证冒充用户向服务器执行一些操作。
CSRF 攻击的本质是利用了 cookie 会在同源请求中携带发送给服务器的特点以此来实现用户的冒充。
一般的 CSRF 攻击类型有三种
第一种是 GET 类型的 CSRF 攻击比如在网站中的一个 img 标签里构建一个请求当用户打开这个网站的时候就会自动发起提 交。
第二种是 POST 类型的 CSRF 攻击比如说构建一个表单然后隐藏它当用户进入页面时自动提交这个表单。
第三种是链接类型的 CSRF 攻击比如说在 a 标签的 href 属性里构建一个请求然后诱导用户去点击。
CSRF 可以用下面几种方法来防护
第一种是同源检测的方法服务器根据 http 请求头中 origin 或者 referer 信息来判断请求是否为允许访问的站点从而对请求进行过滤。当 origin 或者 referer 信息都不存在的时候直接阻止。这种方式的缺点是有些情况下 referer 可以被伪造。还有就是我们这种方法同时把搜索引擎的链接也给屏蔽了所以一般网站会允许搜索引擎的页面请求但是相应的页面请求这种请求方式也可能被攻击者给利用。
第二种方法是使用 CSRF Token 来进行验证服务器向用户返回一个随机数 Token 当网站再次发起请求时在请求参数中加入服务器端返回的 token 然后服务器对这个 token 进行验证。这种方法解决了使用 cookie 单一验证方式时可能会被冒用的问题但是这种方法存在一个缺点就是我们需要给网站中的所有请求都添加上这个 token操作比较繁琐。还有一个问题是一般不会只有一台网站服务器如果我们的请求经过负载平衡转移到了其他的服务器但是这个服务器的 session 中没有保留这个 token 的话就没有办法验证了。这种情况我们可以通过改变 token 的构建方式来解决。
第三种方式使用双重 Cookie 验证的办法服务器在用户访问网站页面时向请求域名注入一个Cookie内容为随机字符串然后当用户再次向服务器发送请求的时候从 cookie 中取出这个字符串添加到 URL 参数中然后服务器通过对 cookie 中的数据和参数中的数据进行比较来进行验证。使用这种方式是利用了攻击者只能利用 cookie但是不能访问获取 cookie 的特点。并且这种方法比 CSRF Token 的方法更加方便并且不涉及到分布式访问的问题。这种方法的缺点是如果网站存在 XSS 漏洞的那么这种方式会失效。同时这种方式不能做到子域名的隔离。
第四种方式是使用在设置 cookie 属性的时候设置 Samesite 限制 cookie 不能作为被第三方使用从而可以避免被攻击者利用。Samesite 一共有两种模式一种是严格模式在严格模式下 cookie 在任何情况下都不可能作为第三方 Cookie 使用在宽松模式下cookie 可以被请求是 GET 请求且会发生页面跳转的请求所使用。
XSS攻击
XSS 攻击指的是跨站脚本攻击是一种代码注入攻击。攻击者通过在网站注入恶意脚本使之在用户的浏览器上运行从而盗取用户的信息如 cookie 等。
XSS 的本质是因为网站没有对恶意代码进行过滤与正常的代码混合在一起了浏览器没有办法分辨哪些脚本是可信的从而导致了恶意代码的执行。
XSS 一般分为存储型、反射型和 DOM 型。
存储型指的是恶意代码提交到了网站的数据库中当用户请求数据的时候服务器将其拼接为 HTML 后返回给了用户从而导致了恶意代码的执行。
反射型指的是攻击者构建了特殊的 URL当服务器接收到请求后从 URL 中获取数据拼接到 HTML 后返回从而导致了恶意代码的执行。
DOM 型指的是攻击者构建了特殊的 URL用户打开网站后js 脚本从 URL 中获取数据从而导致了恶意代码的执行。
XSS 攻击的预防可以从两个方面入手一个是恶意代码提交的时候一个是浏览器执行恶意代码的时候。
对于第一个方面如果我们对存入数据库的数据都进行的转义处理但是一个数据可能在多个地方使用有的地方可能不需要转义由于我们没有办法判断数据最后的使用场景所以直接在输入端进行恶意代码的处理其实是不太可靠的。
因此我们可以从浏览器的执行来进行预防一种是使用纯前端的方式不用服务器端拼接后返回。另一种是对需要插入到 HTML 中的代码做好充分的转义。对于 DOM 型的攻击主要是前端脚本的不可靠而造成的我们对于数据获取渲染和字符串拼接的时候应该对可能出现的恶意代码情况进行判断。
还有一些方式比如使用 CSP CSP 的本质是建立一个白名单告诉浏览器哪些外部资源可以加载和执行从而防止恶意代码的注入攻击。通常有两种方式来开启 CSP一种是设置 HTTP 首部中的 Content-Security-Policy一种是设置 meta 标签的方式
还可以对一些敏感信息进行保护比如 cookie 使用 http-only 使得脚本无法获取。也可以使用验证码避免脚本伪装成用户执行一些操作。
点击劫持
点击劫持是一种视觉欺骗的攻击手段攻击者将需要攻击的网站通过 iframe 嵌套的方式嵌入自己的网页中并将 iframe 设置为透明在页面中透出一个按钮诱导用户点击。
我们可以在 http 相应头中设置 X-FRAME-OPTIONS 来防御用 iframe 嵌套的点击劫持攻击。通过不同的值可以规定页面在特 定的一些情况才能作为 iframe 来使用。
同源策略
同源指的是两个域的协议、域名、端口号必须相同否则则不属于同一个域。
同源政策主要限制了三个方面
第一个是当前域下的 js 脚本不能够访问其他域下的 cookie、localStorage 和 indexDB。
第二个是当前域下的 js 脚本不能够操作访问操作其他域下的 DOM。
第三个是当前域下 ajax 无法发送跨域请求。
同源政策的目的主要是为了保证用户的信息安全它只是对 js 脚本的一种限制并不是对浏览器的限制对于一般的 img、或者 script 脚本请求都不会有跨域的限制这是因为这些操作都不会通过响应结果来进行可能出现安全问题的操作。
跨域的解决方案
https://segmentfault.com/a/1190000011145364
解决跨域的方法我们可以根据我们想要实现的目的来划分。
首先我们如果只是想要实现主域名下的不同子域名的跨域操作我们可以使用设置 document.domain 来解决。
1将 document.domain 设置为主域名来实现相同子域名的跨域操作这个时候主域名下的 cookie 就能够被子域名所访问。同时如果文档中含有主域名相同子域名不同的 iframe 的话我们也可以对这个 iframe 进行操作。
如果是想要解决不同跨域窗口间的通信问题比如说一个页面想要和页面的中的不同源的 iframe 进行通信的问题我们可以使用 location.hash 或者 window.name 或者 postMessage 来解决。
2使用 location.hash 的方法我们可以在主页面动态的修改 iframe 窗口的 hash 值然后在 iframe 窗口里实现监听函数来实现这样一个单向的通信。因为在 iframe 是没有办法访问到不同源的父级窗口的所以我们不能直接修改父级窗口的 hash 值来实现通信我们可以在 iframe 中再加入一个 iframe 这个 iframe 的内容是和父级页面同源的所以我们可以 window.parent.parent 来修改最顶级页面的 src以此来实现双向通信。
3使用 window.name 的方法主要是基于同一个窗口中设置了 window.name 后不同源的页面也可以访问所以不同源的子页面可以首先在 window.name 中写入数据然后跳转到一个和父级同源的页面。这个时候级页面就可以访问同源的子页面中 window.name 中的数据了这种方式的好处是可以传输的数据量大。
4使用 postMessage 来解决的方法这是一个 h5 中新增的一个 api。通过它我们可以实现多窗口间的信息传递通过获取到指定窗口的引用然后调用 postMessage 来发送信息在窗口中我们通过对 message 信息的监听来接收信息以此来实现不同源间的信息交换。
如果是像解决 ajax 无法提交跨域请求的问题我们可以使用 jsonp、cors、websocket 协议、服务器代理来解决问题。
5使用 jsonp 来实现跨域请求它的主要原理是通过动态构建 script 标签来实现跨域请求因为浏览器对 script 标签的引入没有跨域的访问限制 。通过在请求的 url 后指定一个回调函数然后服务器在返回数据的时候构建一个 json 数据的包装这个包装就是回调函数然后返回给前端前端接收到数据后因为请求的是脚本文件所以会直接执行这样我们先前定义好的回调函数就可以被调用从而实现了跨域请求的处理。这种方式只能用于 get 请求。
6使用 CORS 的方式CORS 是一个 W3C 标准全称是跨域资源共享。CORS 需要浏览器和服务器同时支持。目前所有浏览器都支持该功能因此我们只需要在服务器端配置就行。浏览器将 CORS 请求分成两类简单请求和非简单请求。对于简单请求浏览器直接发出 CORS 请求。具体来说就是会在头信息之中增加一个 Origin 字段。Origin 字段用来说明本次请求来自哪个源。服务器根据这个值决定是否同意这次请求。对于如果 Origin 指定的源不在许可范围内服务器会返回一个正常的 HTTP 回应。浏览器发现这个回应的头信息没有包含 Access-Control-Allow-Origin 字段就知道出错了从而抛出一个错误ajax 不会收到响应信息。如果成功的话会包含一些以 Access-Control- 开头的字段。
非简单请求浏览器会先发出一次预检请求来判断该域名是否在服务器的白名单中如果收到肯定回复后才会发起请求。
7使用 websocket 协议这个协议没有同源限制。
8使用服务器来代理跨域的访问请求就是有跨域的请求操作时发送请求给后端让后端代为请求然后最后将获取的结果发返回。
浏览器进程与线程
从本质上说进程和线程都是 CPU 工作时间片的一个描述
进程描述了 CPU 在运行指令及加载和保存上下文所需的时间放在应用上来说就代表了一个程序。
线程是进程中的更小单位描述了执行一段指令所需的时间。
进程是资源分配的最小单位线程是CPU调度的最小单位。
进程和线程之间的关系有以下四个特点
1进程中的任意一线程执行出错都会导致整个进程的崩溃。
2线程之间共享进程中的数据。
3当一个进程关闭之后操作系统会回收进程所占用的内存 当一个进程退出时操作系统会回收该进程所申请的所有资源即使其中任意线程因为操作不当导致内存泄漏当进程退出时这些内存也会被正确回收。
4进程之间的内容相互隔离。 进程隔离就是为了使操作系统中的进程互不干扰。
事件模型、事件循环
事件定义
事件是用户操作网页时发生的交互动作比如 click/move 事件除了用户触发的动作外还可以是文档加载窗口滚动和大小调整。事件被封装成一个 event 对象包含了该事件发生时的所有相关信息 event 的属性以及可以对事件进行的操作 event 的方法。
三种事件模型
事件是用户操作网页时发生的交互动作或者网页本身的一些操作现代浏览器一共有三种事件模型。
第一种事件模型是最早的 DOM0 级模型这种模型不会传播所以没有事件流的概念但是现在有的浏览器支持以冒泡的方式实 现它可以在网页中直接定义监听函数也可以通过 js 属性来指定监听函数。这种方式是所有浏览器都兼容的。
第二种事件模型是 IE 事件模型在该事件模型中一次事件共有两个过程事件处理阶段和事件冒泡阶段。事件处理阶段会首先执行目标元素绑定的监听事件。然后是事件冒泡阶段冒泡指的是事件从目标元素冒泡到 document依次检查经过的节点是否绑定了事件监听函数如果有则执行。这种模型通过 attachEvent 来添加监听函数可以添加多个监听函数会按顺序依次执行。
第三种是 DOM2 级事件模型在该事件模型中一次事件共有三个过程第一个过程是事件捕获阶段。捕获指的是事件从 document 一直向下传播到目标元素依次检查经过的节点是否绑定了事件监听函数如果有则执行。后面两个阶段和 IE 事件模型的两个阶段相同。这种事件模型事件绑定的函数是 addEventListener其中第三个参数可以指定事件是否在捕获阶段执行。
事件委托
事件委托本质上是利用了浏览器事件冒泡的机制。因为事件在冒泡过程中会上传到父节点并且父节点可以通过事件对象获取到 目标节点因此可以把子节点的监听函数定义在父节点上由父节点的监听函数统一处理多个子元素的事件这种方式称为事件代理。
使用事件代理我们可以不必要为每一个子元素都绑定一个监听事件这样减少了内存上的消耗。
并且使用事件代理我们还可以实现事件的动态绑定比如说新增了一个子节点我们并不需要单独地为它添加一个监听事件它所发生的事件会交给父元素中的监听函数来处理。
事件循环机制Loop
概念
EventLoop JS 代码的执行分为同步任务代码和异步任务代码当碰到同步代码时直接在执行栈中执行,当碰到异步任务并且时机符合时例如定时器的时间到了就把异步代码添加到任务队列中当执行栈中的同步代码执行完毕后才去任务队列中把异步代码拿到执行栈中执行其实这种返回轮询任务队列的过程就是 Event Loop;
微任务、宏任务
js代码主要分为两大类 同步代码、异步代码异步代码又分为微任务与宏任务
任务宏/微任务事件宏任务网络请求宏任务setTimeout()宏任务Fs.readFile()读取文件宏任务Promise微任务Async/await微任务
宏任务和微任务的执行顺序先同步再异步异步中先微任务再宏任务 重点
检测浏览器版本版本
检测浏览器版本一共有两种方式
一种是检测 window.navigator.userAgent 的值但这种方式很不可靠因为 userAgent 可以被改写并且早期的浏览器如 ie会通过伪装自己的 userAgent 的值为 Mozilla 来躲过服务器的检测。
第二种方式是功能检测根据每个浏览器独有的特性来进行判断如 ie 下独有的 ActiveXObject。
