标签: 浏览器

Local Network Access

LNA 是 chrome 从 142 版本开始默认启用的一个功能，简单来说，LNA 出于保护本地服务的目的，会阻拦公网网站向本地网络发起的请求。本地网络的概念可以参考这个链接。

一些参考资料：

chrome blog

chrome status

LNA Adoption Guide

CrabSAMA2025/12/10大约 4 分钟

滚动锚定

背景

在我们开发过程中，有些时候会遇到容器内添加元素的需求，一般往下添加是没问题的，但是当我们有在运行过程中动态往上方添加元素时，就会发现不同浏览器有不同的行为。很常见的一种场景就是消息列表向上滚动加载的场景。

复现

这一段代码可以模拟这种case：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="container" style="display: flex; gap: 10px; flex-direction: column;">
    <div style="background: red; height: 100px; width: 100px;"></div>
    <div>bottom</div>
  </div>
  <script>
    const container = document.getElementById('container')
    setInterval(() => {
      const div = document.createElement('div')
      div.style.background = 'red'
      div.style.height = '100px'
      div.style.width = '100px'
      container.insertBefore(div, container.firstChild)
    }, 300)
  </script>
</body>
</html>

CrabSAMA2024/10/30大约 3 分钟

同源策略

一个源的定义

如果两个页面的协议，端口（如果有指定）和域名的相同，则两个页面具有相同的源。

举个例子：

下表给出了相对http://a.xyz.com/dir/page.html同源检测的示例:

CrabSAMA2022/5/27小于 1 分钟

浏览器对象

window——不但充当全局作用域，而且表示浏览器窗口

innerWidth / innerHeight
获取浏览器窗口内部宽高。
内部宽高是指除去菜单栏、工具栏、边框等占位元素后，用于显示网页的净宽高。

outerWidth / outerHeight
获取浏览器窗口的整个宽高。

navigator——表示浏览器的信息

常见属性：

navigator.appName：浏览器名称；
navigator.appVersion：浏览器版本；
navigator.language：浏览器设置的语言；
navigator.platform：操作系统类型；
navigator.userAgent：浏览器设定的User-Agent字符串。

CrabSAMA2021/3/10大约 2 分钟

DOM操作

HTML文档被浏览器解析后是一颗DOM树，要改变HTML的结果，可以通过JavaScript来操作DOM。
DOM是一个属性结构，操作DOM就是这几个操作：

更新：更新该DOM节点的内容，相当于更新了该DOM节点表示的HTML的内容；
遍历：遍历该DOM节点下的子节点，以便进行进一步操作；
添加：在该DOM节点下新增一个子节点，相当于动态增加了一个HTML节点；
删除：将该节点从HTML中删除，相当于删掉了该DOM节点的内容以及它包含的所有子节点。

DOM获取

CrabSAMA2021/3/10大约 8 分钟

浏览器的加载机制与白屏现象

从资源请求完成到页面的显示：

解析HTML字符串构建DOM树
解析CSS样式，产生CSSOM树
执行js脚本文件，js加载完成，通过DOM API 和 CSSOM API 来操作DOM树和CSSOM树
浏览器根据DOM树和CSSOM树构建渲染树（rendering tree），渲染树包括显示的节点和节点显示的样式信息，如果某个节点设置了样式 display: none，那么就不会在渲染树中显示，如果设置visibility:hidden渲染树中存在该节点，但不显示。
根据渲染树对每一个节点在页面上进行布局。（reflow）
遍历渲染树，为每一个节点绘制对应的样式，显示到屏幕。(repaint)

CrabSAMA2020/8/19大约 3 分钟

浏览器的缓存机制

简书文章链接

缓存位置

Service Worker
Service Worker 是运行在浏览器背后的独立线程，一般可以用来实现缓存功能。

使用 Service Worker 的话，传输协议必须为**HTTPS。因为 Service Worker 中涉及到请求拦截**，所以必须使用 HTTPS 协议来保障安全。

CrabSAMA2020/8/10大约 10 分钟

Cookie、Session、Token

知乎链接：https://zhuanlan.zhihu.com/p/152224669

Cookie

Cookie是一个具体的东西，指的就是浏览器里面能永久存储的一种数据，仅仅是浏览器实现的一种数据存储功能。
Cookie由服务器生成，发送给浏览器，浏览器把Cookie以key-value形式保存到某个目录下的文本文件内，下一次请求同一网站时会把该Cookie发送给服务器。
由于cookie是存在客户端上的，所以浏览器加入了一些限制确保Cookie不会被恶意使用，同时不会占据太多磁盘空间，所以每个域的Cookie数量是有限的。
Cookie是不可跨域的：每个 cookie 都会绑定单一的域名，无法在别的域名下获取使用，一级域名和二级域名之间是允许共享使用的（靠的是 domain）。
重要属性：

CrabSAMA2020/8/5大约 6 分钟