【浏览器-题库】（一）｜8月更文挑战

希希118
522 阅读7分钟

目录

  1. PV UV 的区别 【PV页面访问量, UV(独立访客)一天24H内相同的客户端只算一次】
  2. 浏览器的储存 【cookie 4kb ，localStroage 5MB】
  3. 浏览器的缓存 【强缓存 > 协商缓存】
  4. 浏览器的渲染 【（dom树 + css树 = render树） -> 计算位置 -> 调用GPU 绘制，合成图层，显示在屏幕上 】
  5. 浏览器的跨域 【cors】
  6. 浏览器的执行机制【事件循环: 宏任务（script）->all微任务 -> 宏任务】
  7. 浏览器的垃圾回收
  8. 浏览器的安全

① PV UV 的区别

  • PV(页面访问量)：即Page View, 具体是指网站的是页面浏览量或者点击量，页面被刷新一次就计算一次。如果网站被刷新了1000次，那么流量统计工具显示的PV就是1000 。

  • UV(独立访客)：即Unique Visitor,访问您网站的一台电脑客户端为一个访客。00:00-24:00内相同的客户端只被计算一次。

一个UV可以用很多PV，一个PV也只能对应一个IP。比如，今天访问了一次你的网站，你的UV就加了1,我这次访问浏览了两个页面，你的PV就加2,我访问同一个页面，但刷新了一次，PV也是2.

② 浏览器的储存

  • cookie
  • localStorage
  • sessionStorage
  • IndexedDB

差异：

1）传递方式：

cookie在浏览器和服务器间来回传递(请求默认携带cookie)； sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存；

2）存储大小：

localStorage<=5M； sessionStorage<=5M； cookie<4K；（2012年左右，ie内核浏览器占主流地位，且ie6仍占有相当大的市场份额，所以在程序中应当使用少于20个cookie，且不大于4k）

3）有效性：

  • localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；
  • sessionStorage：仅在当前浏览器窗口关闭前有效，不能持久保持；
  • cookie：只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭也不会消失；

4）共享机制：

  • localStorage ：在所有同源窗口中都是共享的；
  • sessionStorage：同时“独立”打开的不同窗口，即使是同一页面，sessionStorage对象也是不同的；
  • cookie：在所有同源窗口中都是共享的

5）浏览器支持：

sessionStorage的浏览器最小版本：IE8、Chrome 5。

6）使用场景

  • cookie：保存回话信息
  • localStorage：持久保存的数据
  • sessionStorage：拥有独立特性的数据

③ 浏览器的缓存

1. Service Worker 是运行在浏览器背后的独立线程。 必须HTTPS。

三个步奏：注册（下载：sw.js），监听（等其他worker失效），查看缓存

1）sw线程能够用来和服务器沟通数据（service worker的上下文内置了fetch和Push API） 2）能够用来进行大量复杂的运算而不影响UI响应。 3）它能拦截所有的请求

  1. Memory Cache 将资源缓存在了内存中。事实上，所有的网络请求都会被浏览器缓存到内存中，当然，内存容量有限，缓存不能无限存放在内存中，因此，注定是个短期缓存。 内存缓存的控制权在浏览器，前后端都不能干涉。

  2. Disk Cache 存储在硬盘中的缓存 强缓存和协商缓存， HTTP Header 来实现的。

强缓存

Cache-Control > Expires(http1.0产物, 受本地时间影响)

强缓存命中返回 200 200（from cache）

协商缓存

ETag文件指纹对比(http1.1出现) > Last-Modified最后修改时间对比（Last-Modified 打开文件的时候会变，以秒计算的）

请求头last-modified的日期与响应头的last-modified一致 请求头if-none-match的hash与响应头的etag一致 这两种情况会返回Status Code: 304

优先级

强缓存 > 协商缓存

4.Push Cache

服务器推送，http2

④ 浏览器的渲染

  • 生成dom树：

字节数据-->字符串-->标记（token）-->node-->dom

  • 生成css树：

字节数据-->字符串-->标记（token）-->node-->cssdom

整体的渲染过程：

  • 1)处理 HTML 并构建 DOM 树。
  • 2)处理 CSS 构建 CSSOM 树。
  • 3)将 DOM 与 CSSOM 合并成一个渲染树。
  • 4)根据渲染树来布局，计算每个节点的位置。
  • 5)调用 GPU 绘制，合成图层，显示在屏幕上。

两个重要的概念，重绘与回流：

  • 重绘：当节点需要更改外观而不会影响布局的，比如改变 color 就叫称为重绘
  • 回流：布局或者几何属性需要改变就称为回流。

回流必定会发生重绘，重绘不一定会引发回流。 回流所需的成本比重绘高的多，改变深层次的节点很可能导致父节点的一系列回流。 当 Event loop 执行完 Microtasks 后，会判断 document 是否需要更新。因为浏览器是 60Hz 的刷新率，每 16ms 才会更新一次。

导致性能问题：

  • 1)改变 window 大小
  • 2)改变字体
  • 3)添加或删除样式
  • 4)文字改变
  • 5)定位或者浮动
  • 6)盒模型

减少重绘和回流的细节：

  • 1）使用 translate 替代 top
  • 2）使用 visibility 替换 display: none ，因为前者只会引起重绘，后者会引发回流（改变了布局）
  • 3）尽量算出结果再去重绘把 DOM 离线后修改，比如：先把 DOM 给 display:none (有一次 Reflow)，然后你修改 100 次，然后再把它显示出来
  • 4）动画实现的速度的选择，动画速度越快，回流次数越多，也可以选择使用 requestAnimationFrame Load 和 DOMContentLoaded 区别。Load 事件触发代表页面中的 DOM，CSS，JS，图片已经全部加载完毕。DOMContentLoaded 事件触发代表初始的 HTML 被完全加载和解析，不需要等待 CSS，JS，图片加载。

⑤ 浏览器的跨域

首先什么是跨域，违反浏览器同源策略的就是跨域。跨域本身就是就是为了保护浏览器的安全， 主要是用来防止 CSRF 攻击的

那什么是同源策略？所谓的同源，指的是协议，域名，端口相同。浏览器处于安全方面的考虑，只允许本域名下的接口交互，不同源的客户端脚本，在没有明确授权的情况下，不能读写对方的资源。

解决同源策略的方案：

    1. jsonp
    1. iframe
    1. postMessage
    1. CORS
    1. webscoket
    1. 反向代理服务器
    1. nginx代理
    1. node代理

⑥ 浏览器的执行机制

javascript是一门单线程语言， Event Loop是javascript的执行机制libuv

需明白什么叫事件循环事件，微任务，宏任务。以及如何运行。

可了解：juejin.cn/post/700070…

⑦ 浏览器的垃圾回收GC

64位下新生代的空间为64M，老生代为1400M 32位下新生代的空间为16M，老生代为700M.

javaScript使用垃圾回收机制来自动管理内存，垃圾回收是一把双刃剑

  • 优势：可以大幅度简化程序的内存管理代码，降低程序的负担，减少因时常运转而带来的内存泄露问题。
  • 劣势：意味着程序员将无法掌控内存。js没有暴露任何关于内存的API。我们无法强迫其进行垃圾回收，也无法干预内存管理。

1、V8最初是为了浏览器设计的，不太可能遇到大内存的场景 2、js垃圾回收的时候程序会暂停线程执行，会占用一定时间。

它有两种情况会回收，一种是定时回收，一种内存不够了回收。

1.新生代算法 Scavenge GC（GC 复制算法） 分为两个空间：form 跟 to。

2.老生代算法 标记清除算法 标记压缩算法

对垃圾回收算法有兴趣的朋友：www.jianshu.com/p/a8a04fd00…

垃圾回收GC的全拼是 Garbage Collection 其在维基百科的定义是： 在计算机科学中，垃圾回收（英语：Garbage Collection，缩写为GC）是一种自动的内存管理机制。当一个电脑上的动态内存不再需要时，就应该予以释放，以让出内存，这种内存资源管理，称为垃圾回收（garbage collection）

垃圾回收算法有多种，先看看几个评价垃圾回收算法性能的几个方面，再具体看看各种算法的优缺点

  • 吞吐量 throughput
  • 最大暂停时间
  • 堆使用效率
  • 访问的局部性

Ⅷ 浏览器的安全

  • 1.xss跨站脚本攻击

原理：（1）构造URL （2）发布内容式 （3）蠕虫式

  • 2.CSRF跨站请求伪造

1)验证码。 2）HTTP Referer是header的一部分 3）token

  • 3.sql脚本注入

拼接脚本

  • 4.上传漏洞

(1)检查服务器是否判断了上传文件类型及后缀。 (2) 定义上传文件类型白名单，即只允许白名单里面类型的文件上传。 (3) 文件上传目录禁止执行脚本解析，避免攻击者进行二次攻击。

Ⅸ CommonJS 与 ES6 模块

1、CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。

2、CommonJS 模块是运行时加载，ES6 模块是编译时输出接口（静态编译）。

3、CommonJs 是单个值导出，ES6 Module 可以导出多个

4、CommonJs 是动态语法可以写在判断里，ES6 Module 静态语法只能写在顶层

5、CommonJs 的 this 是当前模块，ES6 Module 的 this 是 undefined

6、CommonJs 引入后可以修改，ES6 Module引入后是只读的不可修改

十 参考

总结

avatar
文章
阅读
粉丝