javascript下载文件

代码片段如下

/**
 * 创建并下载文件
 * @param  {String} fileName 文件名
 * @param  {String} content  文件内容
 */
function createAndDownloadFile(fileName, content) {
    var aTag = document.createElement('a');
    var blob = new Blob([content]);
    aTag.download = fileName;
    aTag.href = URL.createObjectURL(blob);
    aTag.click();
    URL.revokeObjectURL(blob);
}

发表评论

纤程,线程

我们的操作系统需要运行各种各样程序,为了程序的管理,进行了各种各样的抽象,对内存的管理,抽象了虚拟内存,对程序抽象出了进程。随着cpu核心的增多,进程的抽象有点笨重,主要原因是

  • 创建进程的开销比较大,父子进程之间需要拷贝的东西比较多,虽然为解决内存共享的一些问题,提出了写时拷贝技术,但是写时拷贝会造成延时
  • 进程之间通信的开销高,共享数据和同步数据比较麻烦
阅读 “纤程,线程” 发表评论

利用mp4fragment 转换mp4格式

最近做一个项目,利用到Media Source Extensions 需要将普通的mp4文件转换问fragment格式的mp4文件,从https://www.bento4.com/downloads/ 下载对应的的二进制文件,对应的bin目录文件下有mp4fragment 可执行程序。教研的视频文件有120来个,打算使用shell脚本来执行这些程序

对应shell记录如下

#!/bin/sh

cd "/Users/vipkid/Downloads"
rm -rf  fragmentDir
rm -rf  cutMp4
## 创建 fragementDir
mkdir fragmentDir 
## 创建 mp4
mkdir cutMp4


path="/Users/vipkid/Downloads/final_trail_videos_1215"

files=$(ls $path)
# 裁剪mp4
for FILE in $files
    do
    ./ffmpeg -i  $path"/"$FILE -filter:v "crop=720:540:560:200" -c:a copy "/Users/vipkid/Downloads/cutMp4/"$FILE
    echo $FILE
    done
# 转换格式
for FILE in $files
   do
    cd "/Users/vipkid/Downloads/Bento4-SDK-1-6-0-637.universal-apple-macosx/bin/"
     ./mp4fragment  --verbosity 3  "/Users/vipkid/Downloads/cutMp4/"$FILE  "/Users/vipkid/Downloads/fragmentDir/"$FILE 
    echo $FILE
   done
#!/bin/sh

## 裁剪文件 将文件裁剪成 320 240的 然后转换为fragment mp4
cd "/Users/vipkid/Downloads"
## 创建 fragementDir
mkdir cut320
mkdir fragmentDir320


path="/Users/vipkid/Downloads/cutMp4"

files=$(ls $path)
# 裁剪mp4
for FILE in $files
    do
    ./ffmpeg -i  $path"/"$FILE -vf scale=320:240 -acodec aac -vcodec h264 "/Users/vipkid/Downloads/cut320/"$FILE
    echo $FILE
    done
# 转换格式
for FILE in $files
   do
    cd "/Users/vipkid/Downloads/Bento4-SDK-1-6-0-637.universal-apple-macosx/bin/"
     ./mp4fragment  --verbosity 3  "/Users/vipkid/Downloads/cut320/"$FILE  "/Users/vipkid/Downloads/fragmentDir320/"$FILE 
    echo $FILE
   done
发表评论

vk前端核心项目slider重构过程思考 todo

在vk不做数图业务之后,现在负责slider业务的重构,slider其实是交互式课件的加载器,渲染器,主要有以下4个功能

  • 信令部分,负责实时信令的转发,通过历史信令恢复课件状态
  • 加载,渲染课件
  • 与教室交互,调用教室的能力
  • 教具功能,(提供划线,放大器,橡皮擦,几何图形,倒计时,)

对应不同业务需求

由于slider模块,1v1直播课,大米网校, 超级课堂,数学课等几乎公司所有的直播涉及到课件的业务都在使用。不同业务对slider有不同需求,而且有些业务信令不同,如数学课的信令与1v1所使用的信令协议不一样,所使用的教具,数学课有12个教具,而1v1只有8个教具,教具ui也不一致,1v1的翻页按钮,与数学课的翻页按钮ui不一致。之前的架构将所有融合在一块导致slider代码臃肿。

信令影响各个UI模块

1.由于是响应式课件,学生可操作课件上按钮,动画,在老师端能显示对应学生的操作,老师能够限制学生操作

2.教具模块,例如学生老师能够实时划线,并显示在屏幕上,老师能够删除每一个划线,当学生断开连接,重新进入,能够保持当时状态(快照功能)

发表评论

闲聊v8垃圾回收器的演变历史(3)

这一章会介绍Orinoco垃圾回收器对应知识,之前垃圾回收是有序执行,stop-the-world(STW),Orinoco垃圾回收器是一个在大部分情况下进行并行以及并发运作,来快速的进行垃圾回收。下面是相关视频的介绍

Orinoco 垃圾回收介绍

我们都清楚任何垃圾回收器都有一些周期性需要完成的工作

  • 识别存活/死亡的对象
  • 回收/重用死亡对象占用的内存空间
  • 压缩/回收内存空间
阅读 “闲聊v8垃圾回收器的演变历史(3)” 发表评论

闲聊 v8 GC的进化(2)

垃圾回收的运行会阻断渲染进程的运行,这会影响浏览器的体验。V8引擎的开发者打算优化v8的垃圾回收模块,优化的垃圾收集器代号为Orinoco。Orinoco与之前未优化的垃圾回收器相比

  • 实现一个主要是并行和并发的垃圾收集器
  • 模糊代际边界(主要是新生代对象和老生代对象)
  • 减少了垃圾收集的时间和内存消耗,并提高了垃圾回收的吞吐量

在这篇文章中我们讨论新的垃圾收集器的三个特性,他们分别是

  • 并行compaction
  • 并行记忆集处理
  • 黑色分配

V8实现了代际垃圾收集器,新生代对象在经历两次回收生存下来的对象会被划分到老生代对象存储空间。对象在内存中移动的代价是很昂贵的,主要是在引擎中我们需要对象的需要复制到新的位置,此外我们还需要更新这些对象的指针。图1显示了Orinoco之前的阶段及其执行方式。基本上,对象先被移动,之后再更新这些对象之间的指针,所有这些都是按顺序进行的,消耗的时间过长。

对象依次顺序移动,然后更新指针
阅读 “闲聊 v8 GC的进化(2)” 发表评论

闲聊v8垃圾回收器的演变历史(1)

javascript 是带有gc机制的语言,与c,c++ 这种需要用户手动进行内存的管理语言不同,带有gc机制的语言,我们在写代码的过程无需管理已分配的内存块,减少我们编写的代码心智成本。

chrome浏览器js引擎是v8, 起初v8的大部分垃圾回收工作是在主渲染线程上进行的。我们清楚当浏览器器在16.66ms内无法完成一帧的渲染时,那么就会出现页面卡顿现象。当GC需要维护的对象变多时,垃圾回收过程所占用的时间也会导致页面卡顿。如下图所示

垃圾回收工作在渲染线程中进行
阅读 “闲聊v8垃圾回收器的演变历史(1)” 发表评论

打造vue3的历程

本文翻译转载自https://increment.com/frontend/making-vue-3/

重写下个Vue.js下一个主要版本的收获

在上一年,vue团队一直在开发vue3这个版本,我们希望在2020的上半年发布。(在写这篇文章的时候,我们还在开发中)。新版本功能定型在2018年末,vue2已经有两年多没有大的更新。对于一般的软件来说,这个时间不算长,但是前端有很多东西发生变化。

重写vue有两个关键原因,第一,javascript 新特征,主流浏览器都支持的不错,第二点,当前版本的设计和架构问题有很长时间没有解决了。

阅读 “打造vue3的历程” 发表评论