- 博客(193)
- 资源 (1)
- 收藏
- 关注
原创 长轮询(LongPoll)
之前去某公司面试,需要解决一个在线聊天室的消息实时性问题,且需要兼容低版本浏览器。 高版本浏览器自然不成问题,那么低版本的浏览器如何处理。 最先想到的方案,自然是轮询发ajax请求。在一定的程度上,这个方案可以解决实时性的问题。 但是随之带来的问题是,不停的向服务器发请求带来的服务器的压力,且多数时间都是无用请求。 后实在没有方案,向面试官请教之,得出一个方案: 长轮询。 服务器与客服端需
2017-06-09 15:30:27
1024
原创 首屏优化离线方案
别人是怎么做首屏优化的?最近对于前端性能方面的优化关注得比较多一点,来一下大公司是做首屏的。 这是天猫首页,不要滚动页面,直接审查元素看一下。发现首页上面有多少个模块(当然天猫对于关键模块是有算法优先支持的)或者说节点,你会发现,没有出现在视区中的元素节点,根本就没有生成节点,而是只是一堆的json数据。 很显然,天猫刚打开始的时候只是渲染了首屏的数据,最大限度减少加载量,而对于后面用户需要的
2017-05-19 18:56:13
1479
原创 前端技术总结
文章主要是用来记录一下一些常见问题,权当是复习了。1 请用原生JS实现对象的深度拷贝。其实这个题目还是挺基础的,主要考虑当objt是对象object或者数组时递归调用即可,当然这里还有一个小问题需要注意的就是对于纯对象的考量,这里直接用typeof parent[i] ==='object'可能会存在一定的问题。 具体代码如下:function extendsDeep(parent,child){
2017-05-08 19:30:00
1109
原创 IScroll 图片导致refresh不准确问题
最近同事在用iscrolljs做app端的滚动。 页面中的内容是采用ajax加载出来的,但是在上拉的时候,不知道为什么总是拉不到底部,而查看容器的高度又是正确的。
2017-01-06 18:11:17
1762
原创 [ 前端 ] 移动端填坑
1 IOS 表单元素点击自带背景阴影最近一直做移动端前端开发,发现一个神奇的东西,对于IOS下的,input或者label元素, 点击之后,总是会出现一个背景阴影的现象。
2016-12-08 13:23:19
568
原创 [源码解读] FastClick.js源码解读
最近H5 APP开发过程中,遇到各种许多问题,诸如点击无效,checkbox无法选中,点击穿透等问题。 一切罪责最终都指向了fastclick,于是决定要翻开其源码see see ,否则一些问题真如盲人摸象一般。 其实fastclick的代码还是蛮简单的,不多,就800多行,其中大部分代码都是在做一些Hack类的工作,主要用于判定各种类型的设备或者浏览器特性,而最终的核心代码也就是百来行吧。
2016-11-25 16:50:07
2411
原创 [ javascript ] 关于addEventListener绑定事件的一些细节.
最近在读 IScroll 源码,发现其中的_initEvent 事件方法有点奇怪。如下:其中的 utils.addEvent 方法如下: 这里出现的问题是: 之前我们使用addEventListener 绑定事件的时候,第二个参数不都是传入一个function么,为什么这里传入的是一个this ? 竟然是一个对象?
2016-11-18 15:50:37
2100
原创 [ 前端工程 ] 静态资源缓存的处理方式
原问题是: 一般浏览器对静态资源的缓存导致的更新不及时问题,我们是怎么处理的?有哪几种方式? 为什么会产生这些方式?(其实就是各种方式的优劣)
2016-11-11 19:02:06
9005
1
原创 [ 算法 ] Majority Element
Majority ElementGiven an array of size n, find the majority element. The majority element is the element that appears more than ⌊ n/2 ⌋ times.You may assume that the array is non-empty and the majority
2016-09-20 13:05:47
432
原创 关于前端的一点点感触
或许不同的眼界,就会有不同的眼光,同样的前端,有些人能做到前端架构,而有些人依旧还在不停的绑定事件。或许这就是眼光的问题吧。
2016-03-24 12:53:21
553
原创 曾经的你
“每当我下班后,独自一个走在回家路上,会想起那天夕阳下的奔跑,那是我逝去的青春”转眼毕业已经两年,从刚开始的离开学校时候的年少轻狂,从此谁也管不了我,到现在的朝九晚五。从一开始迷上老谢的重金属摇滚,后来单曲循环痛仰的’公路之歌’,在那‘一直南方开’的旋律中,期待着自己美好的未来。终于在经历世间百态之后,听到了许巍’曾经的你’,心中的感动不可言喻。一直很喜欢听许巍,在他的歌中总是能给
2015-08-19 22:31:15
938
原创 [ JavaScript ] JavaScript 实现继承.
对于javascript中的继承,由于js中没有后端语言中的类式继承,所以js中的继承,一般都是原型继承(prototype)。function P (name){ this.name = name; this.say = function(){ console.log('p'); }}function S (name,id){ this.id = id; this.
2015-08-18 22:31:58
695
翻译 [ Javascript ] 内存泄露以及循环引用解析
内存泄露在javascript中,我们很少去关注内存的管理。我们创建变量,使用变量,浏览器关注这些底层的细节都显得很正常。但是当应用程序变得越来越复杂并且ajax化之后,或者用户在一个页面停留过久,我们可能需要去注意一些问题,如一个浏览器花费了1G以上的内存,并且在不断的增加。这些问题常常都是因为内存泄露引起。Javascript 内存泄露这个javascript内存管理的核心概念
2015-07-11 16:43:07
5756
翻译 [ Javascript ] JavaScript中的定时器(Timer) 是如何工作的!
作为入门者来说,了解JavaScript中timer的工作方式是很重要的。通常它们的表现行为并不是那么地直观,而这是因为它们都处在一个单一线程中。让我们先来看一看三个用来创建以及操作timer的函数。var id = setTimeout(fn, delay); - 初始化一个单一的timer,这个timer将会在一定延时后去调用指定的函数。这个函数(setTimeout)将返回一个唯
2015-07-11 10:42:49
6609
原创 [ 前端工程 ] 正则匹配script脚本节点.
最近很长一段时间一直在关注前端工程方面的问题。思考上线之后文件合并的问题。根据个人思考,合并部署文件主要分以下步骤://1 读取文件,获取字符流//2 扫描字符串,进行正则匹配,读取中需要合并的文件路径,放入数组//3 根据数组,读取文件,对不同的文件进行合并//4 合并需要用到文本摘要算法//5 这里要注意,针对css 文件中的背景图片同样需要进行匹配,这样在上线可以
2015-06-27 13:15:22
2652
原创 [ nodeJS ] nodeJS 与 npm(node pagkage manager) 配置.
一直准备开始学习nodejs,但是不得不说nodejs在Windows上的安装与配置是个坑。尤其是npm的中模块位置的配置。好了废话不多说,首先下载nodejs版本。然后一路next即可,即可安装成功,其中你可以选择自己的安装路径。我这里是安装在d:\nodejs下面。安装完成之后命令行中输入:node -vnpm -v出现如下输出就算是
2015-06-06 12:16:22
1471
原创 [ javascript ] 反射与依赖注入!
对于javascript中的反射的理解,一直都是认为,利用数组对回调函数进行保存,之后在适当的时刻利用call或是apply 方法,对回调进行调用即可,一般如下操作:首先定义两个方法:var service = function() { return { name: 'Service' };}var router = function() { return { na
2015-05-30 09:25:32
5206
2
原创 [ 正则 ]正则表达式进阶!
关于正则表达式,网上百度能百度出一大堆。这里记录个人最近所悟,之前一直以为,正则表达式,难如上青天,各种符号互相参杂,完全看不懂。或许有句话说得对,当你不懂的时候,就该多读书。以下算了正则表达式的读书笔记吧:1 对于 ^ 元字符,一情况下,表示行首锚点。在以下两种情况下则具有特殊意义:1) 出现在的字符数组 [ ] 中,切不是第一个靠近[ 的字符,则为普通字符 ^.
2015-03-25 22:23:29
812
原创 IE6 select穿透问题(div 定位无法遮盖select)!
此问题,早有耳闻,但是一直都没有亲身碰到过,也就没有过多的去在意这些问题。这一回总算是见识到了ie的厉害,虽是在ie选项中大大的写着ie版本是ie11 ,但是有些部分确实走的ie6的内核,怪不得微软天天在各种window update.解决此问题的方法很简单,给你需要显示的内容的后面加一个iframe,让他去挡住select不要穿透过来,这样世界就算是清净了。如下html:
2014-11-17 12:30:01
3050
原创 [ javascript ] javascript中面向切面编程[Aop].
对于java中的aop,早有耳闻,所谓面向切面编程,不过一直都以为只是在后台才会用到。从做前端开始就没有这方面的需求,这一次对于一些东西做新的想法,发现有些东西还是可以去考虑考虑的。有一个公用的代码,可能在很多地方都会被用到,那么现在要做的就是,需要这个方法跑起来之前走一些东西,在这个方法跑完之后,还在处理一些东西。
2014-10-22 15:37:23
2120
原创 [ javascript ] getElementsByClassName与className和getAttribute!
对于javascript中的getElementsByClassName 在IE 6/7/8 不支持问题。那么需要模拟出getElementsByClassName 需要采用className属性,这里就涉及到javascript中的getAttribute问题。在ie 6/7 中,对于getAttribute存在Bug
2014-08-30 18:03:34
3968
原创 jQuery Sizzle.find [ 源码分析 ]
Sizzle.find = function( expr, context, isXML ) { var set, i, len, match, type, left; //expr是否为空 if ( !expr ) { return []; } for ( i = 0, len = Expr.order.length; i < len; i++ ) { type = Expr
2014-08-28 15:03:04
1621
原创 jQuery Sizzle 入口 [ 源码分析 ]
var Sizzle = function( selector, context, results, seed ) { //context 默认为document,可以人为指定 results = results || []; context = context || document; var origContext = context; //判断文档节点 if ( context
2014-08-28 14:46:50
2196
原创 jQuery Event add [ 源码分析 ]
/* * Helper functions for managing events -- not part of the public interface. * Props to Dean Edwards' addEvent library for many of the ideas. */jQuery.event = { add: function( elem, types, han
2014-08-28 14:05:19
2870
1
原创 Sizzle.filter [ 源码分析 ]
最近一直在研究Sizzle选择器,对于其中的原理确实不得不佩服!Sizzle中的filter方法,主要负责块表达式过滤元素集合,在方法内部会调用Sizzle.selector.fitler方法执行过滤操作。Sizzle.filter主要分5个关键步骤:1 使用LeftMatch确定表达式类型。2 调用Sizzle.selectors.preFilter预过虑函数,执行过滤前的修正。
2014-08-27 21:04:46
1382
转载 jquery选择器实例!
jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $("div") 选择所有的div标签元素,返回div元素数组 $(".myClass") 选择使用myClass类的css
2014-08-26 17:39:29
676
原创 Sizzle.selectors.relative [ 源码分析 ]
1 jQuery 对象Sizzle.selectors.relative中存放了块间关系符和对应的块间关系过滤函数,称为“块间关系过滤函数集” 块间关系符共有4种,其含义和过滤方式如图所示。 在函数Sizzle( selector, context, results, seed )从右向左进行过滤时,块间关系过滤函数被调用,用于检查映射集checkSet中的元素是否匹配块间关系
2014-08-24 11:00:00
1214
原创 javascript针对IE的文档加载IEContentLoaded
1. IEContendLoaded.js/* * * IEContentLoaded.js * * Author: Diego Perini (diego.perini at gmail.com) NWBOX S.r.l. * Summary: DOMContentLoaded emulation for IE browsers * Updated: 05/10/2007 *
2014-08-01 01:02:11
1211
2
原创 兼容IE 6/7 inline-block
.html,body,ul{ margin:0px; padding:0px; } .inline-demo{ width: 100px; height:30px; display:inline-block;/*for firefox and chrome and ie8+ *
2014-07-31 23:10:22
799
原创 javascript事件特性检测代替浏览器嗅探
事件特性检测:1 标准浏览器,包括ie,判断指定的元素是否存在 "on" + event 属性.2 在firefox 下,上述办法不适用,解决办法为:创建div对象,给div元素添加指定的属性,属性名为 "on" + event,之后判断添加属性的类型,如果browser 支持添加的事件,type of 之后应该为 "function".
2014-07-31 23:10:17
1394
原创 javascript中call与replace方法!
1 call 方法最大特点就是可以改变当前所调用的方法所在的作用域在作为对象的调用过程中,很多时候需要用到this,而在方法的调用中,this的值很多时候都是变动的那么如果需要在下一个被调用的方法中的this值和调用的方法的this一样,换言之,刚是要让他们处在同一个作用域中,怎么办呢那么就可以采用call方法,当然也可以使用apply,也可以使用new
2014-07-31 22:57:26
951
原创 JS window eval and load script!
var globalEval = function globalEval(src) { if (window.execScript) { window.execScript(src); return; } var fn = function() { window.eval.call(window,src); };
2014-06-04 09:46:48
1410
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人