新人求解，如何编写更加高性能的 Javascript 代码？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

这是一个创建于 3096 天前的主题，其中的信息可能已经有所发展或是发生改变。

今天闲得无聊想弄 AJAX ，然后一下午的时间就弄出了这个玩意：

https://gist.github.com/DoraJDJ/4ef581e202f5dcf4dd5245500d8aebdc

功能也很简单，就是利用 jQuery 和 AJAX ，从我在本机上开的一个 API 服务器里获取数据，然后将信息整理成 HTML 写进去。

虽然我在本机里运行速度较快（排除服务端因素），但我还是觉得代码有点乱，比如下面这个处理日期时间的部分：

var dateStr = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + date.getHours() + ':' + date.getMinutes();

虽然处理日期可以用 Moment.js 完成，但是我不怎么喜欢在前端里使用过于多的 JS 库，所以在这部分我写的过于长而复杂，感觉会影响一定的性能（？）。

我想在此请教一下，这个代码需不需要做一些优化或修正，以及写 JS 代码的一些技巧？

代码

ajax

JavaScript

本机

31 条回复 • 2016-07-07 08:08:28 +08:00

abelyao

2016-07-06 18:04:15 +08:00

多写，多尝试重写，周而复始，水平和思路自然会提高一些。
针对某一行代码，告诉你有什么奇技淫巧，不一定对编程的思路和角度有提升。

abelyao

2016-07-06 18:06:28 +08:00

“不怎么喜欢在前端里使用过于多的 JS 库”，就我个人而言，是赞成你这个观点的。
遇到一些不复杂的功能，可以直接尝试写插件、写函数，为一个项目写，写完尝试着让这个类库能适应更多项目，这个过程思考如何去提升通用性，降低耦合，应该会对自己的编程水平有所提升。

kokdemo

2016-07-06 18:07:36 +08:00

我已经在努力 jquery free 了，好多老的项目都用原生 js 重写了。

learnshare

2016-07-06 18:10:39 +08:00

上面这个代码，经常需要产生 2016-07-06 18:13:34 这种，个位的数字补零

shyling

2016-07-06 18:15:30 +08:00 via iPad

少用 fp...(对不起，我黑了什么

DoraJDJ

2016-07-06 18:27:43 +08:00

@kokdemo 嗯，我是先用 jQuery 写一下简单实现，之后写好了就用原生重写一遍

murmur

2016-07-06 18:28:42 +08:00

页面上少做点东西性能就上来了每次加载一个页面资源比加载 windows 都多能快的起来么

kideny

2016-07-06 18:42:57 +08:00

用 jquery ，还谈性能。。。有点吃力。

FlowMEMO

2016-07-06 18:46:08 +08:00

先 profiling 找出瓶颈再优化
尽量少做微优化(micro optimization)

上述是对任何语言都有效的， js 的可以先看看 you don't know js 优化那章： https://github.com/getify/You-Dont-Know-JS/blob/master/async%20&%20performance/ch6.md

FlowMEMO

2016-07-06 18:57:49 +08:00

另外前端优化跟后端性能优化还是不一样的. 楼主 juqery 实现再 js 重写意义不大，前端性能瓶颈多数不在 js 上.
google 的 web Fundamentals 专门讲了性能，那个是前端所关心的内容.

murmur

2016-07-06 19:20:09 +08:00

@kideny 是这样的， jquery 早就不是性能的瓶颈，想保证不卡，至少要做到
1 、首屏不要放太多内容，别加载一个网站跟加载一个 windows 一样又是几 mb 的 bundle 又是图片又是视频还带着音乐（ HTML5 时代用视频代替展示动画已经不新鲜了）
2 、你祈祷用户用的是 chrome 或者 edge 不是 ie8 ，用户肯用最新版浏览器顶你做一年的优化
3 、你的 CDN 要给力，用户的网速要给力， 1m 的资源如果卡的话下载就是 5 秒以上，很难快的起来，如果你顺手再引了一个 google 的字体，那就更爽了

这 3 点都做到了再谈 js 的优化，我感觉很多网站的设计远远还没到优化 js 这一步， ie8 以上提供了 querySelctor 之后， jq 性能已经很好了
现在的 web 已经搞的走火入魔了， web worker 这种东西是干嘛用的么，真想灭掉桌面程序？我只是在浏览页面而已，不想让你占死我 cpu 啊。。真想用 web 干死桌面应用？再等几年吧。。然后， web worker 、 web gl 我还可以理解， web midi 又是什么鬼？随便一套好听的波表就几百兆几个 g ，这我就更不理解了。。

zhuangzhuang1988

2016-07-06 19:56:13 +08:00

cache+fp ...

rekulas

2016-07-06 21:08:04 +08:00

"过于长而复杂" 那只是你个人感觉而已，对计算机来说，处理起来非常简单。代码自然还有优化的空间，比如 content.push 一次性 push 进去比分开 push 要快，但是然并卵这点时间消耗还不如分开写直观好看点，个人觉得 js 慢基本都卡在网络上， js 本身逻辑导致的我这几年也才遇到 2 、 3 个，比如顺丰官网的发件

sagnitude

2016-07-06 21:16:47 +08:00

@murmur webmidi 是用来做手机端 web app 的，相似的还有 webusb ， webbluetooth ，
如果你用 android chrome ，它有一个功能“添加到主屏幕”可以把 webapp 添加到桌面上，这会产生一个很轻量级的应用，
如果 web app 可以接触更多的硬件 API ，比如蓝牙设备，比如 USB 口，比如 MIDI 设备，那么它的可用性就能增强，毕竟 js 门槛低， webapp 更新方便，如果 js 能做到所有的事情，那很多人就会考虑用 js 来做产品了，毕竟在同一个浏览器下开发 html 页面比开发全平台的 native app 方便多了

这些方面都是为了 web app 能在各方面接近原生手机应用而做的努力，你只考虑桌面浏览器的话现在是不需要这些

chairuosen

2016-07-06 21:24:23 +08:00

现在这个计算性能过剩的时代，‘卡’基本上都是 IO 造成的，计算上只要别动不动就遍历几万的数据，用户根本感觉不到

murmur

2016-07-06 21:25:06 +08:00

@sagnitude 现在随便一个宿主加上点音源内存轻松爆 4g 还是 c++开发的应用各种高速算法必须用 c++才能保证实时性这种东西用 js 怎么来操作呢？

FlowMEMO

2016-07-06 22:18:58 +08:00

@murmur js 用来操作 api ，实现是浏览器厂商用 c++实现就可以了，跑些简单的应用应该还是可以的吧.

sagnitude

2016-07-06 22:29:42 +08:00

@murmur
1. 软件上， NPAPI, NaCl, pNaCl, WebAssembly 都可以做到用 C++编写程序，用 js 调用，达到 C++级别性能，前面几个在目前的 Android Chrome 似乎是不可用的，但是 WebAssembly 已经可以打开
2. 硬件上，市面上 3G 内存手机已经大量铺货，下半年到明年， 4G 到 6G 内存手机会进入市场
3. 处理器上，我用 Geekbench 实测了一下:
小米红米 note3 ，使用高通 650 处理器，整机 1000
http://browser.primatelabs.com/geekbench3/7242545
PC 机， i7-4790k ， 32G 内存， 2 年前整机 1w+
http://browser.primatelabs.com/geekbench3/7242536
性能差距在 1 个数量级以内，价格差距在 1 个数量级以上

sagnitude

2016-07-06 22:38:25 +08:00

@murmur 手机都可以做到的话， PC 端 js 就更不是问题了

murmur

2016-07-06 22:46:32 +08:00

@sagnitude 手机当然可以做到， IOS 上水果、 cubase 都有移动版，但是如果硬绕过全 c++的开发把部分逻辑拿到浏览器里，那能做的就只有界面部分了，因为所有的逻辑都必须 c++写才够，某些算法可能还要用硬件 FFT 来加速
也许未来用 webmidi 可以做一些简单的应用，比如合成器、 launchpad 之类，但是真的生产力，还得用电脑上的宿主，毕竟一次要看那么多轨道，推子、旋钮，钢琴卷帘窗也不是手机那点屏幕能显示的下的
还一点就是音频延迟，以前 korg 出了个 linux 系统的合成器，大概 12ms 的输入-音频延迟都被质疑，不知道经过 android 封装和 chrome 两层，会有多大加成
从目前音游开发来看， android 的音频延迟不是一般大， ios 都非常好了， pc 上也要专业声卡的硬件 ASIO 保证延迟和效果
感觉讨论歪了。。不过也算是前沿技术

xiaoxiuaoliang

2016-07-06 22:48:22 +08:00

推荐'高性能 javascript'一书感觉很赞

murmur

2016-07-06 22:53:37 +08:00

另外给楼主一个建议，如果是针对传统企业开发或者要求比较高的互联网页面（ IE8 兼容性甚至 IE6 的），上手阶段能用库尽量别自己写，你面对的可是 IE 、 chrome 、 ff 、 safari 至少四个浏览器，还不算 360 安全浏览器这种非标准浏览器的，你不知道一路上会遇到多少坑，老板也不会给你时间填坑因为大把库可以用
如果你的东西只要 chrome 能跑就够了，你完全可以一开始就自己写功能函数

sagnitude

2016-07-06 23:02:57 +08:00

lz ，你贴的这一句里面， getYear(), getMonth()这些方法都是 native 代码，不用担心性能

mumuy

2016-07-06 23:07:45 +08:00

date.toLocaleString().replace(/\//g,'-').replace(/[^\d\s:\-]/g,'');
比你的短

DoraJDJ

2016-07-06 23:11:10 +08:00

@mumuy 哈哈，看上去确实缩短了很多
不过又感觉有点不对

目标：`2009-10-17 16:37`
实际：`2009-10-17 4:37:00`

mumuy

2016-07-06 23:15:06 +08:00

@DoraJDJ 哦哦，好像它是 12 小时进制的

DoraJDJ

2016-07-06 23:23:48 +08:00

@mumuy 自己在 MDN 上找到解决方法了：
`date.toLocaleString('chinese', {hour12: false}).replace(/\//g,'-').replace(/[^\d\s:\-]/g,'');`

mumuy

2016-07-06 23:26:23 +08:00

@DoraJDJ (new Date(Date.now()+2.88e7)).toJSON().replace(/^([\d\-]+)T([\d:]+)\..+$/,'$1 $2');

mumuy

2016-07-06 23:31:35 +08:00

@DoraJDJ (new Date(Date.now()+8*3.6e6)).toJSON().replace('T',' ').replace(/\..+/g,'');

mumuy

2016-07-06 23:32:43 +08:00

(new Date(Date.now()+2.88e7)).toJSON().replace('T',' ').replace(/\..+/g,'');

yxzblue

2016-07-07 08:08:28 +08:00

原生 js