浏览器

浏览器渲染过程
跨标签通信
事件循环 Event loop
重绘与回流
defer、async 加载策略
存储
- locationStorage
- sessionStorage
- cookie
事件流捕获、冒泡
web worker
缓存
- 缓存策略
- AppCache
- service worker
jsBridge
浏览器有哪些进程
中文搜索如何解决
首屏、白屏时间如何计算
点击穿透
跨域问题
- 通过 ifrome 进行跨域请求
通信

事件循环

const fs = require("fs");
setImmediate(() => {
  console.log("immediate1");
});
setTimeout(() => {
  console.log("timer1");
}, 0);
fs.readFile("./smallFile", () => {
  setTimeout(() => {
    console.log("timer2");
  }, 0);
  setImmediate(() => {
    console.log("immediate2");
  });
});

const fs = require("fs");
setTimeout(() => {
  console.log("timer");
}, 3);
fs.readFile("./bigFile.js", (err, data) => {
  console.log("fs read big file");
});
fs.readFile("./smallFile.js", (err, data) => {
  console.log("fs read small file");
});

service worker

window.addEventListener("load", function () {
  console.log("Will the service worker register?");
  navigator.serviceWorker
    .register("./serverworker.js")
    .then(function (reg) {
      console.log("Yes, it did.");
    })
    .catch(function (err) {
      console.log("No it didn't. This happened: ", err);
    });
});

运行

const CACHE_NAME = "fed-cache";

this.addEventListener("install", function (event) {
  this.skipWaiting();
  console.log("install service worker");
  // 创建和打开一个缓存库
  caches.open(CACHE_NAME);
  // 首页
  let cacheResources = [
    "http://localhost:8080/%E6%B5%8F%E8%A7%88%E5%99%A8/server%20worker/index.html",
    "http://localhost:8080/%E6%B5%8F%E8%A7%88%E5%99%A8/server%20worker/file.js",
  ];
  event.waitUntil(
    // 请求资源并添加到缓存里面去
    caches.open(CACHE_NAME).then((cache) => {
      cache.addAll(cacheResources);
    })
  );
});

this.addEventListener("active", function (event) {
  console.log("service worker is active");
});

web worker

//主线程 main.js
var worker = new Worker("worker.js");
worker.onmessage = function (event) {
  // 主线程收到子线程的消息
  console.log("Received message " + event.data.type, event.data.message);
};
// 主线程向子线程发送消息
worker.postMessage({
  type: "start",
  value: 12345,
});

通信

//web worker.js
onmessage = function (event) {
  // 收到
};
postMessage({
  type: "debug",
  message: "Starting processing...",
});

问题

localhost:3000 与 localhost:5000 的 cookie 信息是否共享
- 共享

seo 优化 1.逐渐递减的 title 2.不是装饰性的图片都增加 alt 3.单页应用异步获取数据较多，可以采用服务端渲染的模式 ssr 4.减少使用 iframe，爬虫无法读取 iframe 的内容将会认为该网站已废弃 5.优化网站性能，提高网页速度

网页性能优化

想要优化网页呢，主要是对网页的首页加载速度和动画的流畅程度

首先说提高加载速度:

1.如果网站已经成型后进行性能优化，我们可以通过 chrome 提供的 performance 检测资源加载速度进，查看针对性的资源进行优化 2.再者因为 html 的渲染模式，html 渲染在遇到 javascript 和 css 在头部时会进行阻塞，会停止解析 html 先下载资源在进行解析所有这就给首页白屏增加了很多时间 3.尽量减少页面的重排，html 在渲染时会计算 dom 元素的大小和位置，这时比较耗时的操作: 具体属性:屏幕旋转、浏览器视窗改变、大小位置相关 css 属性改变、增加和删除 dom 元素 4.可以将不需要提前加载的 javascript 文件放在页面 body 内容最后，这样便不会阻塞 dom 渲染 5.将 script 标签放在 head 中的话可以针对 javascript 资源来使用 defer 和 async 属性 defer 属性设置后，设置的 javascript 会等 html、dom 渲染完成后顺序执行，而 async 则是异步加载 javascript 加载完成立即执行

1.18 年比较热门的服务端渲染，提高首屏加载速度 2.将 css、js、合并压缩减少 http 请求，css 精灵图减少图片请求 3.重构 html 层，使页面布局更加合理 dom 元素更加少 4.使用 http 缓存，对静态资源进行缓存;分为强制缓存和协商缓存

属性：http 请求头中设置 cache-control 为 no-cache 表明使用协商缓存，no-store 不使用缓存， private 属性在第一次访问会获取请求，之后不会 max-age 表明过期时间在对应的时间段内不会进行重新请求 Expires 属性设置过期时间，只有过了时间点才回进行重新获取 5.使用事件代理减少 js 事件 6.减少 cookie 大小 7.减少使用 iframe，因为浏览器对相同域链接有限制所以会导致页面不能并行加载 8.减少使用 import 导入 css，嵌套层次加深会造成 css 文件串行下载

浏览器地址输入 url 到页面显示的过程在浏览器输入域名后，浏览器会查看是否有当前域名的 dns 缓存如果存在，直接通过 dns 缓存找到对应的 ip 地址，否则将重新进行 dns 查询查询成功并返回 ip 进行服务端 http 请求服务端获取到响应后，返回对应的资源返回的 html 资源，浏览器首先会将 head 头部资源进行加载，像 script 设置了 defer 例外当外链资源加载完毕后，开始解析 dom 树，最后生成我们所看到的网页

参考

https://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/

事件循环​

service worker​

web worker​

问题​

参考​

事件循环

service worker

web worker

问题

参考