基于大数据的用户行为预测在前端性能优化上的应用
首先,我得说,这篇文章有点标题党了,其实内容并没有标题看起来那么高大上。其次,本文只是做一个技术方案可能性的探讨,并没有提供完善的解决方案,至多给了一个 Demo 供参考。
目的
前端性能优化,我觉得最主要的目的就两个:1、提升页面加载速度;2、节约服务器资源。
这里特别提一下节约服务器资源,很多人在做前端性能优化的时候,往往只考虑前端性能的问题,而完全忽视前端的性能优化对后端服务器性能的影响。其实,对于一个网络流量比较大的站点来说,节约服务器资源就是省钱啊。比如,js 文件、图片文件的大小越小,服务器所需的磁盘 IO 贷款和网络 IO 贷款也就越小,自然就可相应省下部分开支了。
现有的方法
前端性能优化,我们目前主流的技术方案主要也就两个:1、合并;2、压缩;3、缓存。
举个例子,一个网站有 A,B,C,D 四个页面,分别需要引用 a\b, a\b\c, a\b\c\d, a\d 这几个 js 文件。于是我们考虑到 a 这个 js 文件在四个页面中均有引用,所以不参与合并。然后把 b\c 两个 js 文件合并成 x,把 b\c\d 三个 js 文件合并为 y。现在 A,B,C,D 四 ...
《深入浅出NodeJS》mindmap
接触NodeJS有快两年了,但因为和我的工作内容关系不大,所以一直没有系统的学习。最近终于有空能系统地了解学习一下这门技术,于是买了一本朴灵老师的《深入浅出NodeJS》仔细研读。这本书内容不算很高深,但是讲得还算细致,豆瓣上面评分也不错。个人认为还是挺适合我的。
根据自己的理解,整理了mindmap,以便今后复习。
如何设计一个异步Web服务——任务调度
接上一篇《如何设计一个异步Web服务——接口部分》
Application已经将任务信息发到了Service服务器中,接下来,Service服务器改如何对自身的资源进行合理分配以满足Application对功能、性能、用户体验等各方面的需求呢?
可以从如下几个方向入手去考虑:
当task提交到Service后,我们希望Service能够尽可能快的完成这个task并返回结果。
当大量task同时提交Service后,我们希望Service不要因为需要同时处理大量task导致性能下降,甚至失去响应。
当有多个task被提交到Service时,我们不希望某一个task占用了所有计算资源,导致其他task长时间处于等待状态。
根据上面的要求,我们会产生如下的设计要求:
根据第一点要求,为了能够尽快完成一个task,我们可以使用多线程(或多进程)技术,将一个task拆分为多个子task然后并行处理,充分利用多核CPU的计算资源。
根据第二点要求,我们需要为Service实现一个任务队列,以免大量并发请求导致Service计算资源被耗尽。同时,大量的并发也会导致CPU ...
如何设计一个异步Web服务——接口部分
需求比较简单,提供一个异步Web服务供使用者调用。比如说,某应用程序需要批量地给图片加lomo效果。由于加lomo效果这个操作非常消耗CPU资源,所以我们需要把这个加lomo效果的程序逻辑放到一台单独的服务器上去运行,以免影响应用本身所在服务器的性能。
这篇先讲讲服务的接口部分,侧重于理清应用和服务之间的调用关系,有时间的话,后面再写一篇关于服务内部任务分派资源调度的随笔。
根据这个需求,我们可以很快设计出一套流程:
Application通过向service的addTask接口post任务相关的信息创建一个任务,同时,service将此任务的任务id,即taskId返回给Application,以便Application接下来可以用这个taskId通过getStatus接口查询此任务的进行状态。
问题一:
Application作为一个独立的应用,他肯定需要有自己的任务管理逻辑。也就是说,Application在向Service发出创建任务的请求前,肯定需要先往自己的DB中写入一条对应这个任务的相关数据,以便后续跟踪每个任务的状态和数据。那么application在收到respon ...
html元素双击事件触发机制猜想及疑惑
今天有个同事遇到一个奇怪的问题,我照着他的代码做了一些简化写了这个demo
123456789101112131415161718192021222324252627282930<!DOCTYPE html><html><head> <style type="text/css"> div{position: absolute;top: 0;left: 0;height: 50px} #back{background-color: blue;left: 20px;width: 200px;z-index: 0} #front{background-color: green;top:10px;width: 100px;z-index: 1} </style></head><body> <div id="back"></div> ...
javascript典型bug——错误的闭包
昨天 QT 给我的一个功能提了一个 bug。大概意思就是说,一段在不同位置都会被调用的代码,在 A 处被调用的时候,似乎会对其他调用的地方产生影响。
我仔细 debug 了半天,终于找到了原因。简化过的代码如下:
1234567891011121314151617181920function C(name, id) { this.name = name; var privateId = id; if (typeof this.showName != "function") { C.prototype.showName = function () { console.log(this.name); }; C.prototype.showId = function () { console.log(privateId); }; }}var c1 = new C("name1", "id1");var ...
Closure Compiler应用程序使用入门[译]
Hello World 示例Closure Compiler 应用程序是一个 Java 命令行工具,用来对 JavaScript 代码进行压缩、优化和排错。按照下面的步骤,用一个简单的 JavaScript 程序尝试 Closure Compiler 应用程序。
要让程序成功运行,你需要 Java Runtime Environment version 6。
1、下载 Closure Compiler
创建一个叫 closure-compiler 的工作目录。
下载 Closure Compiler compiler.jar 文件并保存到 closure-compiler 目录。
2、创建一个 JavaScript 文件
创建一个名为 hello.js 的 JavaScript 文件,并输入下面的内容:
12345// A simple function.function hello(longName) { alert("Hello, " + longName);}hello("New User");
将这个文件保存到 c ...
《javascript语言精粹》mindmap
最近刚刚读完《javascript语言精粹》,感觉其中的内容确实给用js作开发语言的童鞋们提了个醒——js里面坑很多啊
不过,我也并不完全认同书中所讲的所有内容,有些书中认为是糟粕的特性,我觉得其实也无伤大雅。
根据自己的理解和认识,做了个归纳,方便以后自己时不时温习一下。
博客园数据统计
今天突发奇想,想统计一下博客园上的这么多文章的阅读次数和发布时间之间有没有什么关系。
于是自己写了一个简单的 js 脚本,把博客园首页的 200 页内容,共 4000 篇文章的发布时间、阅读次数、推荐次数、评论次数都统计了下来。
(不知道有没有给服务器带来负担,抱歉啊,管理员童鞋)
然后把 js 生成的数据弄到 excel 里面做出了下面这几张图。
文章数 — 阅读次数 分布图
这张图的横轴是文章的阅读次数,步进 100,纵轴是计算出来的文章的篇数。可见,绝大部分文章的阅读次数都在 300 ~ 1600 之间。
话说此前我发过 4 篇文章了,阅读次数分别是 100+、400+、500+、2400+, 唉—— 说多了都是泪啊~~
然后我发现有几篇文章的阅读数完全像出了 bug 一样,动辄 1w+、2w+,好吧,这种属于小概率事件。于是我把采样数据中阅读数大于 5400 的都删掉了(一共就 83 篇),然后制作了下面两幅图。
阅读次数 — 发布时间 分布图
还是有点意思的吧,呵呵。凌晨 1 点到早上 8 点前这段时间发布的文章,基本上阅读 ...
javascript中的继承
在过去的很多时候,javascript 都仅仅被用来当作一个“小工具”,比如用来处理一下异步请求、输入项校验、交互动画等等。这两年,随着 html5 的普及程度日趋提高和各种浏览器技术的不断推广,javascript 在 web 开发中占据越来越重要的位置。
本文尝试向大家展示几种在 javascript 中常见的“类继承”手法并理清他们各自的优缺点及之间的区别,希望对大家使用 javascript 有所帮助。另外,本文内容均基于本人对 javascript 的个人理解,难免有些理解上的偏差和错误,还请各位不吝赐教。同时,阅读此文前,你除了要对 javascript 的简单使用有所了解,最好还会一两门面向对象的编程语言,比如 java、C++、C#…
个人认为,要弄清楚 javascript 中的继承方式,首先要弄清楚这三个属性:prototype、constructor、__proto__
prototype: 存在于“构造函数”对象中。他本身也是一个对象,用来存放所有由该构造函数所产生的对象实例的公共属性和方法。是不是有点绕?呵呵。
constructor: 存在所有的对象中。他 ...