斌の顶级理解

Improve a little bit every day.

0%

发表于 更新于

在前端浏览器中，用户一般不会在一个页面停留很久，即使有一点内存泄漏，重新加载页面内存也会跟着释放。而且浏览器也有自己的自动回收内存的机制，所以前端并没有特别关注内存泄漏的问题。

但是如果我们对内存泄漏没有什么概念，有时候还是有可能因为内存泄漏，导致页面卡顿。了解内存泄漏，如何避免内存泄漏，都是不可缺少的。

内存的生命周期

内存也会有生命周期，不管什么程序语言，一般可以按照顺序分为三个周期：

  • 分配期：分配所需要的内存
  • 使用期：使用分配的内存进行读写
  • 释放期：不需要时将其释放和归还
阅读全文 »

发表于 更新于 分类于

1、内容可编辑属性

1
2
3
4
5
6
<h2> Earth 616 superheroes </h2> 
<ul class="content-editable" contenteditable="true">     
 <li> 1. Iron Man</li>     
 <li> 2. Captain America</li>     
 <li> 3. Black Panther</li> 
</ul>

2、详情标签（Details）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<details>     
<summary>Click here to see more from Earth 616</summary>              
<table>
  <tr>                    
    <th>ID</th>                    
    <th>Name</th>                    
    <th>Location</th>                    
    <th>Job</th>                
  </tr>                
  <tr>                    
    <td>1</td>                    
    <td>John Doe</td>                    
    <td>Earth</td>                    
    <td>Human</td>                
 </tr>          
</table>  
</details>
阅读全文 »

发表于 更新于 分类于
01、实现全屏
1
2
3
4
5
6
7
8
9
10
11
12
function fullScreen() {
    const el = document.documentElement
    const rfs =
    el.requestFullScreen ||
    el.webkitRequestFullScreen ||
    el.mozRequestFullScreen ||
    el.msRequestFullscreen
    if(typeof rfs != "undefined" && rfs) {
        rfs.call(el)
    }
}
fullScreen()
02、退出全屏
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function exitScreen() {
    if (document.exitFullscreen) {
        document.exitFullscreen()
    }
    else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen()
    }
    else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen()
    }
    else if (document.msExitFullscreen) {
        document.msExitFullscreen()
    }
    if(typeof cfs != "undefined" && cfs) {
        cfs.call(el)
    }
}
exitScreen()
03、页面打印
阅读全文 »

发表于 更新于 分类于 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
.container{
  width:1400px
  margin:2epx auto
  columns:4
  column-gap:40px;
}

.container .box{
  width:100%
	margin-bottom: 10px;
}

.container .box img{
  max-width:100%
	border-radius:15px;
}

@media (max-width:1200px) {
  .container {
    width:calc(100% - 40px);
		columns:3;
  }
}

@media (max-width:768px) {
  .container {
		columns:2;
  }
}

@media (max-width:480px) {
  .container {
		columns:1;
  }
}

发表于 更新于 分类于 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
function uploadFile(file) {
  const chunkSize = 1024 * 1024 * 2; // 分片大小，每个分片2MB
  const fileSize = file.size; // 文件大小
  const chunkNum = Math.ceil(fileSize / chunkSize); // 分片数量
  let uploadedSize = 0; // 已上传大小
  let chunks = []; // 分片列表
  // 上传分片
  function uploadChunks() {
    if (chunks.length === chunkNum) {
      // 所有分片上传完成，合并分片
      mergeChunks();
      return;
    }
    const start = chunks.length * chunkSize; // 分片起始位置
    const end = Math.min(start + chunkSize, fileSize); // 分片结束位置
    const chunk = file.slice(start, end); // 获取分片
    const fd = new FormData(); // 创建表单数据
    fd.append('chunk', chunk);
    fd.append('chunkNum', chunks.length + 1);
    fd.append('fileName', file.name);
    fd.append('fileSize', fileSize);
    const xhr = new XMLHttpRequest(); // 创建 AJAX 请求
    xhr.open('POST', 'upload.php', true);
    xhr.onload = function() {
      if (xhr.status === 200) {
        const res = JSON.parse(xhr.responseText);
        if (res.code === 0) {
          uploadedSize += chunk.size;
          chunks.push(res.data);
          // 更新上传进度
          const progress = uploadedSize / fileSize;
          updateProgress(progress);
          // 继续上传下一个分片
          uploadChunks();
        }
      }
    };
    xhr.send(fd);
  }
  // 合并分片
  function mergeChunks() {
    const xhr = new XMLHttpRequest();
    xhr.open('POST', 'merge.php', true);
    xhr.onload = function() {
      if (xhr.status === 200) {
        const res = JSON.parse(xhr.responseText);
        if (res.code === 0) {
          // 上传完成
          const url = res.data;
          uploadSuccess(url);
        } else {
          // 上传失败
          uploadFail()
        }
      }
    };
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.send(JSON.stringify({
      fileName: file.name,
      fileSize: fileSize,
      chunks: chunks
    }));
  }
  // 更新上传进度
  function updateProgress(progress) {
    // 更新进度条等UI
  }
  // 上传成功
  function uploadSuccess(url) {
    // 处理上传成功后的逻辑
  }
  // 上传失败
  function uploadFail(err) {
    // 处理上传失败后的逻辑
  }
  // 开始上传
  uploadChunks();
}

==uploadFile== 函数会先根据文件大小和分片大小计算出分片数量，然后依次上传每个分片，并记录已上传分片的信息。当所有分片上传完成后，会调用 ==mergeChunks== 函数将分片合并，并传递文件名、文件大小和分片信息给后端进行合并操作。最后，如果合并成功，就会调用==uploadSuccess==函数进行上传成功后的处理。

up6组件

https://gitee.com/xproer/up6-vue-cli

9aa3fcf4f5264caaaf01dbda5ba75a22~noop

阅读全文 »

发表于 更新于 分类于

chatGPT是什么

chatGPT是一种大型语言模型，使用人工智能技术进行训练和优化，能够模拟人类的自然语言交流，它是由OpenAi公司开发的，旨在帮助人们更加便捷地进行各种任务和沟通。

chatGPT是一种智能对话系统，它可以通过简单的自然语言输入回答各种问题，这使得用户可以像人类一样与chatGPT进行对话，而不需要掌握特殊的编程或指令技能，chatGPT可以用于解答各种问题，例如天气预报、旅游咨询、健康建议、文化解释、语言翻译等。其次，chatGPT强大的语言处理技术可以自动识别和解决各种语言交流中的难点和问题，可以处理复杂的句子和语法结构，识别并解决各种语言歧义和多义性问题，还可以进行语言翻译，使人们可以更容易跨语言交流。chatGPT可以通过不断的训练和优化来扩展其功能和应用领域，从而更好地为人们提供服务，总之chatGPT是一种功能功能强大且具有潜力的语言模型，它可以使人们更加方便和和容易地进行各种任务和沟通，虽然它仍然存在一些限制和不足之处，但随着技术的不断发展和完善，chatGPT的应用前景仍然非常广阔。

前瞻

从中期来看，ChatGPT可能对劳动力市场的影响分为两类：第一类，增强或放大一些技能，提升已经存在的职业价值；第二类，创造新的高技能工作机会，出现新的职业或行业。

阅读全文 »

发表于 更新于 分类于

▶vue性能瓶颈的几种情况：

1、一次渲染大量的数据的时候,存在大量数据并且都是复杂类型的时候,会导致vue对数据的劫持时间和渲染时间变长, js 连续执行时间过长，会导致页面长时间无法交互，而且渲染时间太慢，用户一次交互反馈的时间过长。

优化方案: 可以使用requestAnimation这个方法,将数据进行分割,分批次渲染,减少了 js 的连续运行时间，并且加快了渲染时间，利用加长总运行时间换取了渲染时间，用户既能快速得到反馈，而且不会因为过长时间的 js 运行而无法与页面交互。

2、当页面中存在大量数据,只是修改了一小部分导致页面也会导致页面卡顿,因为vue的更新以组件为粒度进行更新的，只要修改了当前组件中所使用的数据，组件就会整个去进行更新,造成大量的时间浪费。

优化方案: 将不同的模块划分成不同的组件,这样有效降低虚拟dom的diff运算时间过长的问题,比如将大量数据的模块单独放一个组件,其它放一个组件,由于vue是以组件为粒度更新,修改其它组件的情况下不会导致table的重新diff,提升页面响应速度高达几百倍。

阅读全文 »