前端知识点-HTML 篇含浏览器相关知识输入url到页面渲染，包含dns查找 1. DNS 解析 - 查找缓存 - C

IP

ip分5类，A，B，C，D，E类
它总共32位2进制位，每八位分为一组，组成一个十进制的数字。
A类ip前8个2进制位代表网络号，后面的代表主机
B类ip前16个2进制位代表网络号，后面的代表主机
C类ip前24个2进制位代表网络号，后面的代表主机
D,E类ip在中国没有，它是美国专用的。
所以，

A;1.0.0.0-127.255.255.255 B;128.0.0.0-191.255.255.255 C;192.0.0.0-223.255.255.255 D;224.0.0.0-239.255.255.255 E;240.0.0.0-254.255.255.255

上边A,B,C类的地址有私有ip，是不能在因特网中使用，只能在局域网中用。它们是 10.0.0.0-10.255.255.255 172.13.0.0-172.31.255.255 192.168.0.0-192.168.255.255

HTTP

多路复用

http 和 https

http: 最广泛网络协议，BS模型，浏览器高效
https: 安全版，通过SSL 加密，加密传输，身份认证，密钥

https 相对于http加入ssl层，加密传输，身份认证
需要到 ca 申请收费的证书
安全但是耗时多，缓存不是很好
注意兼容 http 和 https
连接方式不同，端口号也不同，http事80， https 是443

Html

这里是javascript中制作滚动代码的常用属性

页可见区域宽： document.body.clientWidth;
网页可见区域高： document.body.clientHeight;

window.innerHeight;
网页可见区域宽： document.body.offsetWidth (包括边线的宽);
网页可见区域高： document.body.offsetHeight (包括边线的宽);
网页正文全文宽： document.body.scrollWidth;
网页正文全文高： document.body.scrollHeight;
网页被卷去的高： document.body.scrollTop;
网页被卷去的左： document.body.scrollLeft;
网页正文部分上： window.screenTop;
网页正文部分左： window.screenLeft;
屏幕分辨率的高： window.screen.height;
屏幕分辨率的宽： window.screen.width;

屏幕可用工作区高度： window.screen.availHeight;

浏览器相关知识

浏览器内核

Trident：IE，UC浏览器（Webkit内核+Trident内核）等。 Gecko：跨平台内核，火狐 Webkit：Safari Blink：Chrome内核， Opera

把鼠标移到按钮并点击时

hover-focus-active

浏览器的工作原理

Process-per-site-instance
Process-per-site
Process-per-tab
Single-process

浏览器的多进程

浏览器是多进程多的，不同类型的标签页都会开启一个新进程，相同类型的标签页会合并成一个进程

JS 为什么是单线程

js的单线程，与它的用途有关，作为浏览器脚本语音，JavaScript 的主要用途是与用户互动，以及操作DOM，这决定了它只能是单线程，否则会带来很复杂的同步问题

一次完整HTTP 事务是怎样的过程

域名解析
发起TCP的3次握手
建立TCP连接后发起的http请求
服务端响应http请求，浏览器得到html代码
浏览器解析html代码，并请求html代码中的资源
浏览器对页面进行渲染呈现给用户

输入url到页面渲染，包含dns查找

1.DNS 解析

查找缓存
- Chrome 搜索自身的 DNS 缓存，看有没有该域名对应的 IP 地址
- Chrome 会搜索操作系统自身的 DNS 缓存（浏览器没有找到缓存或者缓存已经失效）
- 读取本地的 HOST 文件（操作系统中的缓存没有找到）
浏览器发起一个 DNS 的一个系统调用（向本地主控 DNS 服务器，一般由宽带运营商提供的，发起的一个域名解析请求）
- 宽带运营商服务器查看本地缓存有没有过期
- 运营商服务器代替浏览器发起的一个迭代 DNS 解析的请求（ baidu.com 的 IP 地址是多少？
  1、寻找根域的 DNS IP 地址
  2、COM 域的顶级域的 IP 地址
  3、baidu.com 域的 IP 地址）
  2.TCP 连接
SYN：synchronous 同步序列编号（Synchronize Sequence Numbers）是TCP/IP建立连接时使用的握手信号备注：SYN攻击属于DDoS攻击的一种，它利用TCP协议缺陷，通过发送大量的半连接请求，耗费CPU和内存资源。SYN攻击除了能影响主机外，还可以危害路由器、防火墙等网络系统
seq：顺序号(Sequence number) 大小为四字节
ack：确认号(Acknowledge number) 大小为四字节
ACK：确认(acknowledgement)
PSH：push 传送
FIN：finish 结束
RST：reset 重置
URG：urgent 紧急

3.发送 HTTP 请求
URL：统一资源定位符，是一种资源位置的抽象唯一识别方法。组成：<协议>://<主机>:<端口>/<路径> 端口和路径有事可以省略（HTTP默认端口号是80）常用状态码

1xx：指示信息--表示请求已接收，继续处理。
2xx：成功--表示请求已被成功接收、理解、接受。
3xx：重定向--要完成请求必须进行更进一步的操作。
4xx：客户端错误--请求有语法错误或请求无法实现。
5xx：服务器端错误--服务器未能实现合法的请求。

4.服务端处理请求并返回HTTP响应报文

5.浏览器解析渲染页面

1623833000(1).jpg

了解GUI渲染线程的执行过程后，我们可以根据其渲染原理进行渲染优化:

尽可能提前引入css文件，例如在头部引入css文件。
简化并优化CSS选择器，尽量将嵌套层减少到最小。
尽可能早加载css文件中引用的资源，例如自定义字体文件，可以使用预加载，在link标签加入’rel=”preload” as=”font”‘该元素属性,不然会造成渲染阻塞。
在DOM和CSS渲染之后加载js文件，例如在尾部加载js文件，或者使用该元素属性”defer”和”async”,进行js文件异步加载，但是在不同浏览器会有兼容性问题。

减少和避免回流重绘

减少逐项更改样式，最好一次性更改 style，或者将样式定义为 class 并一次性更新
避免循环操作DOM，让DOM离线后再修改
- 1.创建一个 documentFragment ，在它上面应用所有DOM操作，最后再把它添加到 window.document
- 2.先把DOM节点 display:none ( 会触发一次 reflow)，然后做修改后，再把它显示出来
- 3.克隆一个DOM节点在内存里，修改之后，与在线的节点相替换
避免多次读取offset等属性，无法避免则将它们缓存到变量
将复杂的元素绝对定位或固定定位，使得它脱离文档流，否则回流代价会很高
改变字体大小也会引发回流，所以尽可能减少这种操作
table布局，一个小改动会造成整个table的重新布局，所以，少用为好

行类元素

常用

a, button, input, label, select, textarea, script, span, img
b（加粗，用于吸引读者的注意到该元素的内容上）
i（斜体）
br（在文本中生成一个换行（回车）符号）
small（文本字体小一号，表示边注释和附属细则，包括版权和法律文本）
abbr（缩写元素，可选title属性提供完整的描述）
cite（表示一个作品的引用，且必须包含作品的标题，这个引用可能是一个根据适当的上下文约定关联引用的元数据的缩写）
em（标记出需要拥护着重阅读的内容，\<em>是可以嵌套的，嵌套层级越深，则其包含的内容被认定为越需要着重的部分）

不常用

sub（定义了一个文本区域，出于排版的原因，与主要的文本相比，应该展示得更低并且更小。）  
sup（定义了一个文本区域，出于排版的原因，与主要的文本相比，应该展示得更高并且更小。）  
map（\<map> 属性 与 \<area> 属性一起使用来定义一个图像映射(一个可点击的链接区域).）  
kbd（HTML键盘输入元素(\<kbd>) 用于表示用户输入，它将产生一个行内元素，以浏览器的默认monospace字体显示。）  
strong（表示文本十分重要，一般用粗体显示。）  
code（呈现一段计算机代码）  
dfn（标记被定义的术语）  
samp（用于标识计算机程序输出，通常使用浏览器缺省的 monotype 字体）  
var（表示变量的名称，或者由用户提供的值。）  
bdo  
object（表示引入一个外部资源，这个资源可能是一张图片，一个嵌入的浏览上下文，亦或是一个插件所使用的资源。）  
q（引用标签 (\<q>)表示一个封闭的并且是短的行内引用的文本. 这个标签是用来引用短的文本，所以请不要引入换行符; 对于长的文本的引用请使用 \<blockquote\> 替代.）

<em> 标签表示其内容的着重强调
<i> 标签表示从正常散文中区分出的文本

块级元素

常用

div, form, header, footer, h1-h6, hr, ul, ol, p, section, canvas, aside, dd,dl,
audio, video, table, thead,tbody,tfoot

不常用

noscript（如果页面上的脚本类型不受支持或者当前在浏览器中关闭了脚本，则在 HTML \<noscript> 元素中定义脚本未被执行时的替代内容。）  
pre（预格式化文本）  
address（联系方式信息）  
article（表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。）  
blockquote（代表其中的文字是引用内容。通常在渲染时，这部分的内容会有一定的缩进）  
output（标签表示计算或用户操作的结果）  
fieldset（用于对表单中的控制元素进行分组，包括 label）   
figure（代表一段独立的内容, 经常与说明（caption） \<figcaption> 配合使用, 并且作为一个独立的引用单元。当它属于主内容流（main flow）时，它的位置独立于主体。这个标签经常是在主文中引用的图片，插图，表格，代码段等等，当这部分转移到附录中或者其他页面时不会影响到主体。）  
figcaption（与其相关联的图片的说明/标题，用?于描述其父节点 \<figure> 元素里的其他数据。）

  <figure>
    <img src="/media/cc0-images/elephant-660-480.jpg"
        alt="Elephant at sunset">
    <figcaption>An elephant at sunset</figcaption>
  </figure>

src 和 href 的区别

请求资源类型不同

href 是超文本引用的简写，用来为当前元素和文档之间建立连接，常用的是link, a 标签 src 会将指向的资源下载并引用到当前文档中，常用的标签有script, img, iframe 标签

作用的结果不同

href 是为当前文档和引用资源建立联系，而src是替换当前的元素

浏览器的解析方式不同

href 引用的资源，浏览器会将其识别为 CSS 文档，并行下载资源并且不会停止对当前文档的处理，当浏览器解析到 src 时 ,会暂停其它资源的下载和处理，直接将该资源下载，编辑，执行完毕，图片和框架也是如此，类似于将所指资源应用到当前内容。这也是为什么建议把 js 脚本放在底部而不是头部的原因。

渐进增强（progressive enhancement）和优雅降级（graceful degradation）

根据目标客户端来分情况

querySelector 和 getElement 选择器API 的区别

querySelectorAll()方法使用css选择器作为参数并返回一个NodeList——包含着匹配节点的类数组对象，该方法不会返回HTML集合，因此返回的节点不会对应实时文档结构，着也避免了HTML集合引起的性能问题。

DOM

使用只返回元素节点的API遍历DOM,因为这些API的执行效率比自己实现的效率更高

属性名	被替代属性
children	childNodes
childElementCount	childNodes.length
firstElementChild	firstChild
lastElementChild	lastChild
nextElementSibling	nextSibling
previousElementSibling	previousSibling

对dom频繁操作，可以设置dom的display 属性为none，操作完成之后再修改为原display属性
慎用：hover （如果有大量的：hover，那么会降低相应速度，CPU升高）

瀑布流的实现

  // 设置图片宽度一致
  // 根据浏览器宽度以及每列宽度计算出列表个数，列表默认为0
  // 当图片加载完成，所有图片一次放置在最小的列数下面
  // 父容器高度去列表数组的最大值

  function fall() {
      const minGap = 20
      const itemWidth = 100
      const scrollBarWidth = getScrollbarWidth()
      const pageWidth = window.innerWidth - scrollBarWidth
      const column = Math.floor(pageWidth / (itemWidth + minGap))
      const gap = (pageWidth - itemWidth * column) / column / 2 // 真实的间距

      const items = document.querySelectorAll('.item')


      console.log('scrokkBarWidth', items);

      const heightArr = []

      function getScrollbarWidth() {
          const oDiv = document.createElement('div')

          oDiv.style.cssText = `width:50px; height:50px; overflow:scroll; background:red;`

          document.body.appendChild(oDiv);

          const scrollBarWidth = oDiv.offsetWidth - oDiv.clientWidth;

          oDiv.remove();

          return scrollBarWidth;
      }

      for (let i = 0, len = items.length; i < len; i++) {
          const height = items[i].offsetHeight;

          if (i < column) {
              items[i].style.cssText = `top:${gap}px; left:${(itemWidth + gap) * i +gap}px`

              heightArr.push(height);
          } else {
              let minHeight = heightArr[0];

              let minIndex = 0;
              for (let j = 0, jLen = heightArr.length; j < jLen; j++) {
                  if (minHeight > heightArr[j]) {
                      minHeight = heightArr[j]
                      minIndex = j;
                  }
              }

              items[i].style = `top:${minHeight+gap *2}px; left:${(itemWidth+gap) * minIndex + gap}px`

              heightArr[minIndex] = minHeight + gap + height;
          }
      }
  }
  // 页面加载完成调用一次。
  window.onload = fall;
  // 页面尺寸发生改变再次调用。
  window.onresize = fall;

前端知识点-HTML 篇 含浏览器相关知识

IP