原文引用： 首先，预编译跟前后端没有关系，预编译一样可以用于后端渲染。 看看下面的测试时间，单位: ms 模板字符串: var s = '{{#datas}}{{name}} abcdefg {{type}} {{date}}{{/datas}}'; 数据对象: 放入100000行数据 var stack = []; for (var i = 0; i < 100000; i++) { stack.push({ name: 'name-' + i, type: 'type-' + i, ...

问题：textarea数据是数据库直接输出填充，请问如何做到自适应? 回答： var tt = document.getElementsByTagName("textarea").item(0), len = tt.value.length, width = tt.clientWidth, style = (window.getComputedStyle ||function(a){return a.currentStyle})(tt, null), fs = parseInt(style['font-size...

当我们在 chrome 浏览器中填写表单之后，如果表单中包含密码域，浏览器将会提示用户是否记住密码。一旦记住密码，即便这次填写的是错误的，下次登录时浏览器也会任性的给你自动填充信息。 这是开发者不喜欢看到的，对用户来说，也是不太安全的，通过 console.log(document.getElementById("passwordInput").value)就能拿到密码明文。虽加强了体验，但削弱了安全性，也让有「强迫症」的程序员感到颇为不爽。 当页面加载的时候直接将表单域设置为空，貌似是不起作用的。原因是，浏览器在页面加载到一定程度时（我也不知道是什么时机）从自己的数据库中...

判断用户是否第一次访问页面，先不说怎么做，想想什么场景下会用到？ 如果我们页面的体积过大，用户第一次访问，会消耗大量的时间(2-5s)去下载页面所需要的资源，给用户带来的体验是很不好的，尤其是移动端的用户。如果我们可以在用户第一次访问的时候只加载主要内容，在这个主要内容中引导用户做更多的加载资源的操作，一方面可以让用户熟悉系统，一方面也给页面加载资源争取了巨量的时间，何乐而不为？！ 我们能最快想到的方案是，使用 cookie ，服务器根据 cookie 的属性（如某个 Tag 的值为 1 或者 0）来判断要给用户呈现什么样的内容，这样做有几点不好： 需要服务器协助，而很多时候前端对服务器的控...

网友问题： var name = "The Window";   var object = {     name : "My Object",     getNameFunc : function(){         return this.name;     } }; var a = object.getNameFunc; alert(a()); alert(object.getNameFunc());原因： object.getNameFunc() ，此时的 object.getNameFunc 为引用类型，其 base 为 ...

今天在查看页面控制台的时候，无意中看到了一个暴露到全局的变量 i，全局变量是不会被压缩工具压缩成简写的字母，这个被频繁使用的变量名暴露到全局也是个相当大的隐患，可能一个不小心就覆盖了第二次暴露到全局的同名变量。 刚开始我就怀疑是自己出现了这样愚蠢的错误： function A() { // 在一个函数中多次用到了 for 循环，为了节省变量，都是用了变量 i for(var i = 0; ...) { //... } for(i = 0; ...) { //... } for(i = 0; ...) { ...

很多国外的网站，访问的时候可以看到，页面先是大面积白一下，然后恢复正常。原因是网页上用到了 webfont，这些页面很多情况都是直接引用 google 的 webfont 地址，中华大局域网下，由于网络原因，页面虽已经全部加载，引用的 webfont 资源却还未下载成功，这就导致了使用了 webfont 的内容呈现空白状态，没有被渲染出来。 如，访问该网站：http://zurb.com/playground/foundation-icon-fonts-3 为啥国内很少有这种事儿发生？英文字符并不多，生成 webfont 所占用的 unicode range 很小，故英文字体的 webfont...

在复杂的网络环境和浏览器环境下，自测、QA测试以及 Code Review 都是不够的，如果对页面稳定性和准确性要求较高，就必须有一套完善的代码异常监控体系，本文从前端代码异常监控的方法和问题着手，尽量全面地阐述错误日志收集各个阶段中可能遇到的阻碍和处理方案。 ☞ 收集日志的方法 平时收集日志的手段，可以归类为两个方面，一个是逻辑中的错误判断，为主动判断；一个是利用语言给我们提供的捷径，暴力式获取错误信息，如 try..catch 和 window.onerror。 1. 主动判断 我们在一些运算之后，得到一个期望的结果，然而结果不是我们想要的 // test.js function calc...

本只是想给博客添加个水印，github 上搜索了半天，找了一个比较小巧的库，叫做 images。 这个库的地址是：http://github.com/zhangyuanwei/node-images，它是一个跨平台极为轻量的图片编解码工具，同时附加了一些图片的操作函数，如： .size()比例伸缩 .draw(img, x, y)在图片上绘制一个图片 .encode()将图片解码到 buffer 中 给图片加水印主要就用到了.draw()函数。 首先需要安装images库： npm install images然后开撸，基本代码如下: var images = require('image...

经常在微博上看到很多内容使用的什么长微博截图，并且截图上还附加了很多其他的信息。之前对纯前端截图有些研究，正好本博客有这个需求，今天就把这东西实现了下。 需要声明的是，JavaScript 目前还不能实现网页截屏，就算以后能够实现，也一定是浏览器提供了相关接口，JS 去调用这些接口。既然不能截屏，那我们能做的只有通过拿到像素点的信息来”拼凑”图片。 先说说我们看到的截屏方式 用过 phantomJS 的同学都知道，它提供了一个截屏函数，通过它可以整屏获取页面截图，而且他支持的格式也比较多：JPG/PNG/GIF/PDF。通过简单的两句命令就可以把一个网页截取下来： // r...

Google 上搜索了下 phantomjs 关键词，展示最多的是测试和截屏相关的内容。phantomjs 提供了大量的 API，让我们可以操作 webkit 网页沙箱中的内容，也可以将网页中的信息输出到外层，进行分析处理。而本文着重要讲述的是，如何更好的与 webkit 网页沙箱交互，如何注入脚本，如何修改请求。 QA 测试最烦恼的是 UI 测试，包括网页元素的正确呈现，网页交互之后的元素变化等，人工测试很容易疏忽一些问题，并且 UI 层面的测试用例也不好写，这让人很头痛。为了让程序能够很好地分析页面 UI，也有很多人做了图片对比工具，通过 phantomjs 提供的 screen capt...

底部有更新, 疑惑已经解开。 我一直都没搞明白，for 循环的var声明是怎么使用的。 for(var i = 0; i < len; i++ ) { // code… } 最后的结果是这样？ {var i = 0; // code… } {var i = 1; // code… } {var i = 2; // code… } 还是这样： var i; {i = 1; // code… } {i = 2; // code… } {i = 3; // code… } 但是根据 ES6 中 let 关键词的例子： var a = []; for ...

NodeJS 自 2009 年显露人间，到现在已经六个年头了，由于各种原因，中间派生出了个兄弟，叫做 iojs，最近兄弟继续合体，衍生出了 nodejs4.0 版本，这东西算是 nodejs new 1.0 版本，原班人马都统一到一个战线上。我没有太关注 nodejs 背后的开发，但一直是它的忠实使用者，通读了 v4.1.2 的 文档，感觉从开发者角度去看，也没啥大的变化，所以这两个兄弟分开这么久，主要是在底层内建模块上做改造，上层建筑尚未有大的变更，具体可以看 这篇文章。 如果你一直用着 nodejs，然而一直都在写最基本的小 demo，很少深入的去剖析 nodejs 的性能问题，甚至连如何...

今天看了不少文章，比较感兴趣的是 Cache API。它是浏览器 Request/Response 的缓存管理工具，其使用风格和运用场景让我瞬间联想到了 ServiceWorker 和 Fetch API，相信很多同学也多次看到过这两个东西，本文会对它们做一个简洁的介绍，并谈一谈我对这些新玩具的看法。 Fetch API 传统的 XMLHttpRequest，出了两个版本，在 XHR2.0 中引入了跨源请求、上传进度事件和对二进制数据的支持等，这些 API 的增强让 AJAX 可以很方便地与 HTML5 API 相结合，例如 File System API、Web Audio API、WebG...