分类: JavaScript (10)

Node.js中读取大文件的性能比较:indexOf与逐字节检查

在软件开发中,选择最有效的方法来解析大型数据集对于提高性能至关重要。我进行了一个实验,比较了使用 Node.js 统计大型文本文件中换行符数量的两种不同方法:使用 indexOf 和手动逐字节检查。


阅读全文

JavaScript AST初体验

最近在做一个工具自动把外部的Web Worker文件引用内联化,即碰到代码里有new Worker('worker.js'),就去读取worker.js的代码,然后把原Web Woker引用内联化为:new Worker(window.URL.createObjectURL(new Blob(["/* worker.js的内容 */"])))。这个功能看似简单,我一开始想用正则表达式来匹配出Web Worker的实例化参数,但发现有很多极端情况需要去做特殊考虑,最终在了解并尝试了JavaScript AST(Abstract Syntax Tree抽象语法树)Parser后,所有的问题迎刃而解。


2018年4月12日
阅读全文

Web Worker传输大量Transferable对象时的性能问题

最近正在做一个基于浏览器 File Reader API 的文本解析工具。为了让繁重的文本解析工作不影响页面线程的性能,使用 Web Worker 来负责处理文本解析应该是最优的。Web Worker 需要将解析后的每行文本传回给页面,当需要传输的文本行数达到数十万、百万行时,性能问题就变得尤为重要,一方面是传输的耗时,一方面是内存的消耗。多数浏览器实现了结构克隆,允许你对 Web Worker 传入、传出更复杂的数据类型,如:File, Blob, ArrayBuffer, JSON 对象等。然而当你使用postMessage()方法传输这些数据时,数据会被拷贝一份再进行传输,所以当你传输 100MB 的数据时,主进程和 Worker 进程都会增加 100MB 的内存使用,并且复制 100MB 的数据需要的时间可能达到几百毫秒。为了解决这个问题,postMessage()方法也支持传输 Transferable 数据类型,使用 Transferable 传输时,会直接把数据从一个执行环境(Worker 线程或主线程)传输到另一个执行环境,这样不会额外增加一份内存消耗,并且传输速度极快因为不需要数据拷贝。可是在实际使用中,如果需要传输大量的 Transferable 数据时,这种方法仍存在显著的性能问题。


2018年1月23日
阅读全文

使用FileReader.readAsArrayBuffer()在浏览器中处理大文件

HTML5 的FileReader API 可以让客户端浏览器对用户本地文件进行读取,这样就不再需要上传文件由服务器进行读取了,这大大减轻了服务器的负担,也节省了上传文件所需要的时间。不过在实践中我发现用FileReader.readAsText()可以轻易地处理一个 300k 的日志文件,但当日志文件有 1G、甚至 2G 那么大,浏览器就会崩溃。这是因为readAsText()会一下子把目标文件加载至内存,导致内存超出上限。所以如果 Web 应用常常需要处理大文件时,我们应该使用FileReader.readAsArrayBuffer()来一块一块读取文件。


2017年9月5日
阅读全文

探索ES6:箭头函数

匿名函数作为参数在JavaScript是很常见的,事件绑定、异步回调等都会用到匿名函数。ES6中引入了箭头函数,用于便捷地书写匿名函数。大致语法为:(参数) => {表达式或返回值},接下来让我们来看看箭头函数的用法。


2017年2月17日
阅读全文

JavaScript ES5中的Object.defineProperty()方法

JS中的对象类型:var obj = {a:1},可以通过变量.属性名的形式进行取值、赋值,这种方式虽然便捷,但其创建的属性值可以被任意修改,并可以通过for...in枚举。__Object.defineProperty()__可以定义、修改对象属性的值及其特性。如今流行的数据双向绑定的JS库中广泛使用了该方法。


2017年2月9日
阅读全文

ES6新特性:使用 "let" 来定义JavaScript变量

ECMAScript 2015 (ES6) 提供了一种更加严谨的变量声明方法: let 用于取代之前的 varlet 声明的变量作用域为所处的块级内而不像 var 作用于整个函数体内。虽然 var 的使用是相当宽松的,但这种特性往往会带来许多意想不到的bug,尤其是在一个复杂的工程中。本文将比照 var 来介绍一下 let 的特性。


2015年8月8日
阅读全文

实战onscroll事件性能优化

在绑定onscroll事件时,我们应当着重关注其性能问题,因为onscroll与其他的鼠标、键盘等事件相比,它被触发的频次很高,间隔很近。如果onscroll事件中涉及到大量的位置计算、元素重绘等工作且这些工作无法在下一个onscroll事件触发前完成,就会造成浏览器掉帧。加之用户鼠标滚动往往是连续的,就会持续触发onscroll事件导致掉帧扩大、浏览器CPU使用率增加、用户体验受到影响。由于开发人员的机器配置普遍都不错,可能同一个onscroll的事件在开发机上只需要10ms,然而在普通配置的机器上需要30ms,因此这类问题常会被开发人员忽视。这篇文章将介绍如何避免onscroll事件潜在的性能问题。


2015年6月19日
阅读全文

网页性能优化:防止JavaScript、CSS阻塞浏览器渲染页面

网页中引用的外部文件: JavaScritp、CSS 等常常会阻塞浏览器渲染页面。假设在 <head> 中引用的某个 JavaScript 文件由于各种不给力需要2秒来加载,那么浏览器渲染页面的过程就会被阻塞2秒,直到该JS文件下载并执行完后才继续。前端性能调优时必须排除任何潜在的渲染阻塞点,让浏览器在最短时间内渲染出整体页面。


2015年6月5日
阅读全文

详解JavaScript中attribute和property的区别以及最佳实践

使用JavaScript操作DOM元素时往往涉及到两个概念:attributepropertydocument.getElementById('test').getAttribute('id')$('#test').attr('id')document.getElementById('test').id$('#test').prop('id') 都能返回正确的id:"test"。这篇文章主要介绍一下 propertyattribute 的区别以及如何使用。


2015年5月23日
阅读全文