浏览器学习

2022/1/26 23:04:26

编程Tag： 标签浏览器文档 window 学习内核 reflow

本文主要是介绍浏览器学习，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

meta元数据

描述 HTML 文档的元数据，所有主流浏览器都支持 <meta> 标签

1 元数据（Metadata）是数据的数据信息。

2 <meta> 标签提供了 HTML 文档的元数据。

3 元数据不会显示在客户端，但是会被浏览器解析

国内的主流浏览器都是双核浏览器，为自动切核，“内核控制标签”<meta>

只要你在自己的网站里增加一个meta标签，告诉360浏览器这个网站应该用哪个内核渲染，

那么360浏览器就会在读取到这个标签后，立即切换对应的内核，并将这个行为应用于这个二级域名下所有网址。

浏览器默认内核的指定只需在head标签中添加一行代码即可：
若页面需默认用极速核，增加标签：<meta name="renderer" content="webkit">
若页面需默认用ie兼容内核，增加标签：<meta name="renderer" content="ie-comp">
若页面需默认用ie标准内核，增加标签：<meta name="renderer" content="ie-stand">
content的取值为webkit,ie-comp,ie-stand之一，区分大小写，分别代表用webkit内核，IE兼容内核，IE标准内核。

window是浏览器顶层对象 window.document

DOM 是为了操作文档出现的 API，document 是其的一个对象；
BOM 是为了操作浏览器出现的 API，window 是其的一个对象。

常见window事件

window.onload

页面上所有的资源（图片，音频，视频等）被加载以后才会触发load事件

页面的load事件会在DOMContentLoaded被触发之后才触发。

// 以最后一个onload为准
window.onload = function () {
  console.log(11);
}
window.onload = function () {
  console.log(22);
}
// 使用addEventListener可以添加多个事件
window.addEventListener('load', function () {
  console.log(33);
})
window.addEventListener('load', function () {
  console.log(44);
})

DOMContentLoaded

DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式，图片等 ie9以上

当文档中没有脚本时，浏览器解析完文档便能触发 DOMContentLoaded 事件；

如果文档中包含脚本，则脚本会阻塞文档的解析，而脚本需要等位于脚本前面的css加载完才能执行。

document.addEventListener('DOMContentLoaded', function () {
  console.log(55);
})

在 jQuery 中经常使用的 $(document).ready(function() { // ...代码... }); 其实监听的就是 DOMContentLoaded 事件，

而 $(document).load(function() { // ...代码... }); 监听的是 load 事件。

浏览器渲染原理

当我们在浏览器地址输入URL时，浏览器会发送请求到服务器，服务器将请求的HTML文档发送回浏览器，浏览器将文档下载下来后，便开始从上到下解析。

解析html：构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树

　　DOM Tree：浏览器将HTML解析成树形的数据结构。

　　CSS Rule Tree：浏览器将CSS解析成树形的数据结构。

　　Render Tree: DOM和CSSOM合并后生成Render Tree。

　　layout: 有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系，从而去计算出每个节点在屏幕中的位置。

　　painting: 按照算出来的规则，通过显卡，把内容画到屏幕上。

　　reflow（回流）：当浏览器发现某个部分发生了点变化影响了布局，需要倒回去重新渲染，内行称这个回退的过程叫 reflow。reflow 会从 <html> 这个 root frame 开始递归往下，依次计算所有的结点几何尺寸和位置。reflow 几乎是无法避免的。现在界面上流行的一些效果，比如树状目录的折叠、展开（实质上是元素的显示与隐藏）等，都将引起浏览器的 reflow。鼠标滑过、点击……只要这些行为引起了页面上某些元素的占位面积、定位方式、边距等属性的变化，都会引起它内部、周围甚至整个页面的重新渲染。通常我们都无法预估浏览器到底会 reflow 哪一部分的代码，它们都彼此相互影响着。

　　repaint（重绘）：改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性时，屏幕的一部分要重画，但是元素的几何尺寸没有变。

注意：(1)display:none 的节点不会被加入Render Tree，而visibility: hidden 则会，所以，如果某个节点最开始是不显示的，设为display:none是更优的。

　　 (2)display:none 会触发 reflow，而 visibility:hidden 只会触发 repaint，因为没有发现位置变化。

　　　(3)有些情况下，比如修改了元素的样式，浏览器并不会立刻reflow 或 repaint 一次，而是会把这样的操作积攒一批，然后做一次 reflow，这又叫异步 reflow 或增量异步 reflow。但是在有些情况下，比如resize 窗口，改变了页面默认的字体等。对于这些操作，浏览器会马上进行 reflow。

这篇关于浏览器学习的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！