第1期 - 九溪徒步

封面图来源于杭州九溪。周末去了趟杭州，逛了龙井村茶园、在九溪徒步，意外感觉不错。不失为夏日的避暑良方

茶园

九溪十八涧

技术分享-浏览器相关

Chrome DevTools 开发调试

MAC 快捷键：Command + Option + J 打开终端

console.clear() // 清空控制台
console.info() // 提示性信息
console.count() // 统计函数调用次数

占位符 %s 字符串；%d 整数；%i 整数；%f 浮点数；%o 对象的链接；%c css 格式字符串

console.log('今晚%s%c 老虎', '打', 'color: red')

传入参数标识起始/结束位置统计运行时间

console.time('t')
Array(900000).fill({}).forEach((v, index) => v.index = index) // test
console.timeEnd('t')

追踪代码的调用栈

console.trace()
function foo() {
  console.trace()
}
foo()

console.table() 将复合类型的数据转为表格显示, 划重点 这个吊

var arr = [
  { name: '梅西', qq: 10 },
  { name: 'C 罗', qq: 7 },
  { name: '内马尔', qq: 11 },
]
console.table(arr)

console.dir() 按便于阅读和打印的形式将对象打印（没get到它好用的点 感觉和log无区别）

var obj = {
  name: 'justwe7',
  age: 26,
  fn: function () {
    alert('justwe7')
  },
}
console.log(obj)
console.dir(obj)

console.assert() 断言，用来进行条件判断。表达式为 false 时，则显示错误信息 (不会中断程序执行)

var val = 1
console.assert(val === 1, '等于 1')
console.assert(val !== 1, '不等于 1')
console.log('代码往下执行呢啊')

console.group(), groupEnd() 分组输出信息，可以用鼠标折叠 / 展开. 这个也吊！

console.group('分组 1')
console.log('分组 1-1111')
console.log('分组 1-2222')
console.log('分组 1-3333')
console.groupEnd()
console.group('分组 2')
console.log('分组 2-1111')
console.log('分组 2-2222')
console.log('分组 2-3333')
console.groupEnd()

https://juejin.cn/post/6854573212412575757

Chrome 浏览器快捷键

Command+L 快捷搜索历史纪录、书签、网址

Command+T：新建标签页

Command+Y：历史纪录

Command+Shift+B：隐藏显示书签栏

Command+Shift+J：去下载

Command + Shift + N：隐身模式

Command + 数字：定位到 TAB 页面

Command + Shift + Delete：清楚浏览器纪录

Command + Shift + []：上下 Tab 切换

浏览器输入url到页面打开发生了什么？

  1. 解析输入的 URL ，确定 http/https 协议、主机名、端口号、路径及查询参数 等
  2. 对获取到的URL进行DNS解析，先在本地 DNS 缓存中查找，没找到再发起DNS查询，获取URL对应的IP地址
  3. 根据获取到的IP地址，建立TCP连接
  4. 客户端向服务器发送http请求，服务器处理请求生成对应的http响应
  5. 根据响应加载资源页面

浏览器存储

localStorage 数据在不同会话间保留，存储的数据没有过期时间设置，数据可以长期保留

sessionStorage 数据在页面会话结束时会被清除。重新加载或恢复页面仍会保持原来的页面会话，多个相同的 URL 的 Tabs 页面，会创建各自的 sessionStorage，关闭对应浏览器标签或窗口，会清除对应的 sessionStorage

Cookies 记录用户登陆信息等 https://www.cloudflare.com/zh-cn/learning/privacy/what-are-cookies/

IndexedDB 客户端数据库，可以存储大量结构化数据

前端跨域

产生由来：同源（协议+域名+端口号）策略引起的

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

JSONP -填充式 JSON /参数式 JSON（JSON with padding）

解决方式：动态创建

当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。而数据就是传入回调函数中的 JSON 数据

// 动态创建<script>标签，设置其src，回调函数在src中设置：
var script = document.createElement("script");
script.src = "https://xxx/yy?name=ccc&callback=handleResponse";
document.body.insertBefore(script, document.body.firstChild);
// 在页面中，返回的JSON作为参数传入回调函数中，我们通过回调函数来来操作数据。
function handleResponse(response){
    // 对response数据进行操作代码

referrer 检查实现定向分享（是一种约定 而非规则）

encodeURIComponent 将 referrer 内容包装，然后通过referrer作为路由参数进行传参查询，获取当前页面的 URL，并将其编码后作为 referrer 参数传递给 JSONP 请求

function handleJSONPResponse(data) {
    // 处理从跨域服务器返回的数据
    console.log(data);
}
function shareData() {
    // 获取当前页面的 URL
    var currentURL = window.location.href;
    // 使用 encodeURIComponent 编码 URL，以确保安全传递
    var encodedURL = encodeURIComponent(currentURL);
    // 构造 JSONP 请求，并包括 referrer 参数
    var script = document.createElement('script');
    script.src = 'http://example.com/jsonp-api?referrer=' + encodedURL;
    document.body.appendChild(script);
}

创建一个script标签，去请求另一个网站的js。 js里会夹带一些数据，这些数据会在我的网站中调用一个全局函数(callback) 由于是script标签，无法确定接口请求的状态码，只知道成功和失败 只支持 GET 请求，且潜在存在安全风险，因为它需要信任跨域服务器返回的数据，在使用 JSONP 时，应确保只从受信任的来源获取数据

CORS

在服务器端进行配置，通过在响应头中包含 CORS 相关的头部信息，服务器可以明确指定哪些域有权限访问资源。

Access-Control-Allow-Origin：指定哪些域名可以访问资源。可以是单个域名、多个域名、或使用通配符*表示所有域名 Access-Control-Allow-Methods：指定允许的HTTP请求方法，如GET、POST Access-Control-Allow-Headers：指定允许的HTTP请求头，例如Content-Type、Authorization等 Access-Control-Allow-Credentials：指定是否允许发送凭据（例如，Cookie或HTTP认证信息） Access-Control-Expose-Headers：指定哪些HTTP响应头可以在客户端访问

前端实现：通过传送 cookie 给服务端，以识别跨域通行

代理服务器

在同一域内设置一个代理服务器，该服务器可以将请求转发到目标服务器，并将响应返回给前端

WebSocket 是一种双向通信协议，它可以建立持久的连接，不受同源策略的限制

发布日期：2023/08/11
上一篇 | 去首页 | Twitter