Skip to main content

browser

目录​

内容​

1.event loop

  • 浏览器环境
    • 1.首先执行同步任务，遇到异步任务会挂起，异步任务回调结束了会将其根据异步任务的类型分类
    • 2.微任务将微任务推入微任务队列，遇到宏任务将宏任务推入队列
    • 3.同步任务执行完成，先清空微任务队列，先进先出。遇到微任务，或宏任务，继续按照步骤1走
    • 4.微任务清空完成、清空宏任务。遇到微任务，或宏任务，继续按照步骤1走
    • 微任务
      • Promise>MutationObserver
    • 宏任务：
      • setTimeout、setInterval、setImmediate、messageChannel
  • node环境
    • 微任务：process.nextTick(在nextTickQueue后执行)>Promise
    • 宏任务分类：
      • timer：执行上一轮setTimeout、setInterval到期后的callback
      • i/o：上一轮循环少数I/o
      • poll：fs.readFile、
      • check：setImmediate,callback
      • close: socket.on('close',...)
    • nodev12版本前：
      • 执行顺序：
        • 执行同步代码，宏任务按照任务分类从上到下执行
        • 每一个宏任务队列执行完成会清空微任务队列,宏任务未到时间的，下一次循环执行
    • nodev12版本后：
      • 执行同步代码、遇到微任务将微任务推入微任务队列，遇到宏任务将宏任务推入宏任务队列
      • 优先清空微任务队列，清空宏任务队列，按照分类从上到下清空，宏任务未到时间的，下一次循环执行

2.缓存

  • appcache：
    • 设置：html 设置<html manifest="list.manifest">
    • 声明：list.manifest文件，并配置可缓存的资源
    • 缺点，控制文件失效很麻烦
  • serverwork

3.浏览器存储

  • cookie的诞生是基于http无状态的特性
    • cookie组成部分：
      • name（cookie的名称）
      • domain（cookie的生效域名）
      • value（cookie的值）
      • path（生效的路径）
      • expires、max-age（生效的时间）
      • http-only: true（只能通过http携带走cookie，不能使用js操控）
      • sameSite:
        • Strict，只会向当前协议、主机、端口一致的请求发送cookie
        • Lax，允许部分第三方携带cookie。默认是Lax
        • None，是否跨站都会发送cookie
    • 跨域携带cookie：
      • withCredentials = true;
    • js操作cookie
      • 读取浏览器中的cookie
        • console.log(document.cookie);
      • 写入cookie
        • document.cookie='myname=zhoushaw;path=/;domain=.baidu.com;secure';
        • httpOnly只能服务端设置
    • 服务端设置cookie（response内有cookie字段）
      • set-cookie: name=val;path=paths;domain=domain
      • 设置多个cookie时，多个set-cookie
    • 特点：
      • 存储内容小，4kb左右大小
      • 设置了一定的失效时间
      • 用于解决http无状态的问题
      • cookie过多会导致http性能问题，通过cdn形式让静态资源不要携带cookie
    • 安全：
      • 用于存储用户状态
      • 可以设置为只能http请求时携带，不能js读取
      • secure，设置为只能https时携带
      • same-site,只能在同域名中携带cookie
  • localstorage
    • 特点：
      • 长时间存储，下次访问网站，网站可以直接读取以前保存的数据
      • 存内容大，接近5m
      • 客户端使用，不与服务端通信
      • 接口封装较好
      • 只能存储字符串，对象要转化成字符串存储
    • 作用范围：
      • 协议、主机名、端口相同可以访问
    • 场景：
      • 存储base64位图片
    • 操作：
      • 读数据：window.localStorage.getItem('name')
      • 写数据：window.localStorage.setItem('name','zhoushaw')
      • 删除数据：window.localStorage.remove('name')
      • 清空数据：window.localStorage.clear()
  • sessionstorage:
    • 特点：
      • 会话时存储，标签或浏览器关闭后清空
      • 大小5m左右
      • 仅在客户端使用，不与服务端通信
      • 接口封装较好
      • 只能存储字符串，对象要转化成字符串存储
    • 作用范围：
      • 协议、主机名、端口、窗口
    • 场景：
      • 有效维护表单数据，刷新不丢失
      • 存储本次会话的浏览足迹
    • 操作：
      • 读数据：window.sessionStorage.getItem('name')
      • 写数据：window.sessionStorage.setItem('name','zhoushaw')
      • 删除数据：window.sessionStorage.remove('name','zhoushaw')
      • 清空数据：window.sessionStorage.clear()
  • indexDB:
    • 详细参考：http://www.ruanyifeng.com/blog/2018/07/indexeddb.html
    • 用于客户端存储大量结构化数据：文件、blobs、JavaScript对象，使用索引来实现对该数据的高性能搜索，indexDB是一个运行在浏览器上的非关系数据库
    • 特点：
      • 存储大小不会小于250m
      • 键值对存储：存储数据类型广，包括文件、blobs、JavaScript对象
      • 异步读取，减少性能损耗
      • 同源限制，域名只能访问自身的数据库，不能访问其他域名数据库
      • 支持事务，一些列操作中有一个失败，整个事务取消，数据库回滚到事件发生前的状态
    • 操作：
      • 打开数据库：var request = window.indexedDB.open(databaseName, version);
      • 打开数据库失败：request.onerror = function (event) { console.log('数据库打开报错'); };
      • 打开数据库成功： 
            var db;
            request.onsuccess = function (event) { 
                db = request.result;
                console.log('数据库开成功');
            }
      • 新建数据库:
        • onupgradeneeded
        request.onupgradeneeded = function(event) {
            db = event.target.result;
            var objectStore = db.createObjectStore('person', { keyPath: 'id' });
        }

4.重绘与回流

  • 前置内容：

    • 浏览器是流式布局的
    • 浏览器会将HTML解析成DOM（Document object model）、CSSOM（css object model）、两者合并生成render tree
    • 根据样式确定节点位置形状大小，将节点绘制在页面上

  • 回流（reflow）

    • 当render Tree中部分或全部元素的尺寸、结构或某些属性发生变化时，浏览器重新渲染部分或者全部文档的过程称为回流
    • 造成回流的操作：
      • 页面首次渲染
      • 浏览器窗口大小发生变化
      • 元素尺寸和位置发生变化
      • 元素内容发生变化（文字数量和图片大小）
      • 元素字体大小发生变化
      • 添加删除可见dom
      • 激活css伪类，例如：hover
      • 查询某些属性或调用某些方法
      • 导致回流的属性和方法：
        • clientWidth、clientHeight、clientTop、clientLeft
        • getBoundingClientRect()、scrollTo

  • 重绘（repaint）

    • 当元素的样式改变并不影响它在文档中的位置时
    • 如：color、background-color、visibility
    • 浏览器会将样式赋予给元素，并重新绘制它，这个过程称之为重绘

  • 性能影响：

    • 有时即使仅仅回流一个元素，它的父元素和兄弟元素都会受到影响，也会产生回流
    • 浏览器会对频繁的回流和重绘操作进行优化，将所有引起回流和重绘的操作放入队列中，等到一定的数量或者时间阈值后，一次性清空队列中的回流和重绘操作，这样可以把多次回流和重绘的操作变成一次
      • 当访问对象上的大小和位置属性时，浏览器会将队列一次性清空，以便于获取到回流和重绘后的值

  • 减少和避免回流

    • css
      • 避免使用table布局
      • 尽可能在dom树的末端改变class
      • 将动画运用到脱离文档流的元素上，position: absolute、fixed、
      • 避免使用css：calc()
    • JavaScript
      • 避免频繁操作，最好一次性操作style属性，将样式放在class中更改class
      • 避免频繁操作DOM，创建documentFragment,在上面应用所有的DOM操作,再添加到文档中
      • 避免频繁读取重绘和回流的属性，如果需要可以缓存起来
      • 复杂动画的元素使其脱离文档流，避免父元素和后续元素受到影响

5.点击穿透：

  • 出现原理
    • 原来页面支持双击放大
    • 移动端click事件会有300ms延迟，浏览器会判断是否缩放
    • 禁止浏览器缩放：
      • <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover" />

6.事件捕获与冒泡

  • 事件捕获与冒泡主要是为了解决，内层元素、与外层元素都绑定了事件，点击内层元素是内层元素先触发还是外层元素先触发
  • DOM0级事件绑定：
    • 直接通过dom绑定事件，默认冒泡
    • <div onclick="console.log('冒泡事件')">s2</div>
  • DOM2级事件绑定:
    • window.addEventListener
      • 事件名
      • 回调函数
      • 配置对象/是否捕获（默认false，冒泡阶段触发）
        • 是否捕获和是否最多调用一次
        • 是否捕获

7.停止冒泡和捕获与阻止默认行为

  • 当我们在内层元素添加事件时，点击事件会向上冒泡，我们不希望他向上冒泡可以通过
    • e.stopPropagation()
    • IE浏览器：e.cancelBubble
<div id='div' onclick='alert("div");'>
    <ul onclick='alert("ul");'>
        <li onclick='alert("li");'>test</li>
    </ul>
</div>
  • 取消默认事件
var a = document.getElementById("testA");
    a.onclick =function(e){
    if(e.preventDefault){
        e.preventDefault();
    }else{
        window.event.returnValue == false;
    }
}

8.webworker多进程

  • 阮一峰 web worker
  • 出现原因：
    • 由于JavaScript是单线程，在CPU计算能力增加多核的情况下，单线程无法充分利用CPU资源会导致CPU资源的浪费
    • worder在后台运行，不会对UI造成阻塞，这样有利于随时与主进程进行通信，这样有利于随时与主进程通信
  • 使用注意：
    • 资源必须是同源，受同源策略限制
    • DOM限制，无法使用document、window等对象，worker可以使用navigator、location对象
    • 通信联系
    • 脚本限制，不可以使用alert、confirm。但是可以使用XMLHt'tprequest
    • 文件限制，不能加载本地资源，必须是网络资源
  • 使用：
    • 主线程：
      • worker = new Worker(file)创建线程
      • 主线程调用worker.postMessage()方法，向 Worker 发消
      • 主线程通过worker.onmessage指定监听函数，接收子线程发回来的消息
      • 关闭子进程：
        • worker.terminate();关闭子线程
      • 监听子线程错误：
        • worker.onerror、worker.addEventListener(error,...)
    • 子线程：
      • 监听主进程消息：self.addEventListener()、self.onmessage指定监听函数
      • Worker 加载脚本importScripts
      • 关闭进程：self.close();

9.JSbridge

  • 参考文章

  • 功能：给JavaScript提供调用Native的能力，核心是Native和非Native的通信通道，而且是双向通信通道

  • Native 与 JavaScript 的每次互相调用看做一次 RPC 调用

  • Native向webView注入api

  • UIWebView可以拦截所有的网络请求，JavaScript可以在发起自定义的网络请求

    • jsbridge://methodName?param1=value1&param2=value2
    • 可以通过加载iframe加载对应的链接，然后移除掉
    • webView对jsbridget进行拦截，转而执行响应的调用逻辑
    • 速度较慢
    var url = 'jsbridge://doAction?title=分享标题&desc=分享描述&link=http%3A%2F%2Fwww.baidu.com';
    var iframe = document.createElement('iframe');
    iframe.src = url;
    document.body.appendChild(iframe);
    setTimeout(function() {
        iframe.remove();
    }, 100);

  • android有三种调用方式：

    • 对url协议进行解析，通过插入iframe
    • 通过重写alert、confirm、prompt方法，分别被WebView的onAlert、onConfirm监听
    • 基于webView的能力，向window上注入对象或方法。通过调用对象或方法进行调用，js需要等执行完逻辑才能到回调里
    • native调用JavaScript
      • 通过webview的loadUrl,webView.loadUrl("javascript:" + javaScriptString);
      • evaluateJavascript,webView.evaluateJavascript(javaScriptString,callback)

10.浏览器有几个线程

  • GUI渲染线程
  • JavaScript线程
  • 事件触发线程
  • 插件线程
  • 定时器触发线程
  • 异步http请求线程

11.浏览器渲染html

渲染过程

  • 构建DOM（文档对象模型）

    • 将html构建成多个tokens
    • 将tokens解析成对象的形式，描述属性、信息
    • 将object组成一棵树的结构,

  • 构建CSSOM（样式对象模型）

    • 构建与DOM构建一致

  • 构建Render Tree

    • 结合DOM和CSSOM构建Render树

  • Layout

    • 计算每个元素相对于viewPort的位置

  • Paint

    • 将render Tree转成像素，显示在屏幕上

  • 渲染阻塞的优化方案： 浏览器在遇到css、script时会中断渲染，加载并执行script

  • css

    • 通过meida，在符合条件情况加载，横屏，或者特定尺寸

  • script

    • html在解析过程中遇到<script>会将控制权交给JavaScript引擎会阻塞渲染，直到执行结束，从中断的地方继续渲染
    • 通过async、defer来延后执行

13.垃圾回收

GC垃圾回收 常见内存泄漏

  • 作用：
    • 找到内存空间的垃圾
    • 回收这一部分内存，让程序能够再次使用这一部分空间
  • 引用计数法
    • 对引用的对象标记+1，对于循环引用将会导致GC无法回收，应该被回收的内存
    • 对象置空后-1，引用为0时会即可回收
  • 标记清除
  • 内存泄漏：
    • 由于某种原因程序未释放或无法释放造成系统内存泄漏
    • 导致运行减速或系统崩溃

14.标签通信

  • postMessage
  • localstorage
  • shareWorker