detuan20000827-CSDN博客

转载移动端 HTML5 <video> 视频播放优化实践

遇到的挑战移动端HTML5使用原生<video>标签播放视频，要做到两个基本原则，速度快和体验佳，先来分析一下这两个问题。下载速度以一个8s短视频为例，wifi环境下提供的高清视频达到1000kbps，文件大小大约1MB；非wifi环境下提供的低码率视频是500kbps左右，文件大小大约500KB；参考QzoneTouch多普勒测速，2g网络的平均速度是14KB/...

2016-08-18 14:57:00 742

转载页面跳转时，统计数据丢失问题探讨

为了更好地了解用户对产品的使用情况，业务中，我们经常会收到埋点统计的需求，比如：我要说话收集一段时间内用户光标在页面中的运动情况，包括光标移动、点击等行为统计用户滚屏行为统计用户在站点的停留时长收集页面链接的点击数量等无论是移动端还是 PC 端，相信很多朋友都遇到了这么几个十分让人头疼的问题：我要说话统计某个链接的点击量，但是这个链接点击后直接跳转...

2016-03-16 11:27:00 206

转载研究首屏时间？

做移动web页面，受移动网络网速和终端性能影响，我们经常要关注首屏内容展示时间（以下简称首屏时间）这个指标，它衡量着我们的页面是否能在用户耐心消磨完之前展示出来，很大程度影响着用户的使用满意度。怎么获取首屏时间呢？我们经常要先问自己：页面是怎么加载数据？A：加载完静态资源后通过ajax请求去后台获取数据，数据回来后渲染内容在每个点打上一个时间戳，首屏时间 ...

2016-02-28 11:19:00 382

转载近几年前端技术盘点以及 2016 年技术发展方向

Web 发展了几十个春秋，风起云涌，千变万化。我很庆幸自己没有完整地经历过这些年头，而是站在前人的肩膀上行走。Web 技术发展的速度让人感觉那几乎不是继承式的迭代，而是一次又一次的变革，一次又一次的创造。这几年的前端，更为之甚！我从 12 年底开始接触前端，12 年之前的前端发展情况只能从上一辈的笔触中领会。本文会盘点从 09 年开始到 15 年间前端技术的革新，同时也会从多个角度，...

2016-02-28 11:07:00 197

转载当前端也拥有 Server 的能力

今天看了不少文章，比较感兴趣的是 Cache API。它是浏览器 Request/Response 的缓存管理工具，其使用风格和运用场景让我瞬间联想到了 ServiceWorker 和 Fetch API，相信很多同学也多次看到过这两个东西，本文会对它们做一个简洁的介绍，并谈一谈我对这些新玩具的看法。Fetch API传统的 XMLHttpRequest，出了两个版本，在 XHR...

2016-02-28 11:00:00 100

转载 NodeJS的代码调试和性能调优

NodeJS 自 2009 年显露人间，到现在已经六个年头了，由于各种原因，中间派生出了个兄弟，叫做 iojs，最近兄弟继续合体，衍生出了 nodejs4.0 版本，这东西算是nodejs new 1.0版本，原班人马都统一到一个战线上。我没有太关注 nodejs 背后的开发，但一直是它的忠实使用者，通读了 v4.1.2 的文档，感觉从开发者角度去看，也没啥大的变化，所以这两个兄弟...

2016-02-28 10:59:00 142

转载前端代码异常日志收集与监控

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

2016-02-28 10:58:00 136

转载页面跳转时，统计数据丢失问题探讨

为了更好地了解用户对产品的使用情况，业务中，我们经常会收到埋点统计的需求，比如：我要说话收集一段时间内用户光标在页面中的运动情况，包括光标移动、点击等行为统计用户滚屏行为统计用户在站点的停留时长收集页面链接的点击数量等无论是移动端还是 PC 端，相信很多朋友都遇到了这么几个十分让人头疼的问题：我要说话统计某个链接的点击量，但是这个链接点击后直接跳转...

2016-02-28 10:55:00 285

转载 js数组，数字函数，字符串函数，表单验证，hashMap，堆栈，日期函数，call函数...

1.javascript的数组APIJs代码收藏代码//定义数组 var pageIds = new Array(); pageIds.push('A'); 数组长度 pageIds.length; //shift：删除原数组第一项，并返回删除元素的值；如果数...

2015-05-28 22:24:00 145

转载模拟form提交数据

最近在做一个项目，发现ajax不能enctype=”multipart/form-data” 属性的表单，没办法，只能使用form表单直接提交的方法了，但是form表单直接提交会跳转页面，这样很不友好，也不是项目需求，于是上网搜索了一番，发现可以使用隐藏的iframe来实现。具体的原理是form表单提交到iframe里面处理，而这个iframe是隐藏的，所以提交表单的时候当前页面没有...

2015-05-27 07:17:00 158

转载多屏判断css改写

1 function replaceBodyClass(){ 2 for(var i in map){ 3 if(map[i](width)){ 4 document.body.className = document.body.className.replace(/screen-\w+/, "screen-"+i) 5 ...

2015-05-27 06:50:00 81

转载关于博客

很久没写博客了，其实对于程序员来说，个人觉得应该坚持写博客，把自己遇到的一些难题，一些知识点积累起来，现在是感觉遇到了一些陈旧的问题以后，发现自己遇到过，但是自己又不想再开发一遍，这个时候就会想去找之前的代码在哪里。如果这时候有个良好的积累习惯，那么很多东西都在很快的时间就能找到了。转载于:https://www.cnblogs.com/taoze/p/4532343.html...

2015-05-27 06:46:00 110

转载解决firefox下button文字不能垂直居中的问题

button使用行高让文字垂直居中，但是在firefox里文字会偏下，而且点击的时候中间会有一个虚线框。button的padding和margin我都程序定义过了，我想这可能跟浏览器的私有属性有关。于是用firebug查看浏览器系统样式发现以下代码：button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner...

2013-06-01 12:23:00 279

转载一句css代码让你的网站变灰

html{-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);filter: grayscale(100%);filter: url("data:image/svg+xml;utf8...

2013-06-01 12:21:00 122

转载关于javascript的分号

javascript的分号代表语句的结束符，但由于javascript具有分号自动插入规则，所以有部分人以为不用写，让人比较模糊不清，在一般情况下，一个换行就会产生一个分号，但实际可能不是这样，也就是说在javascript中换行可能产生分号，也可能不产生，是否自动插入分号，主要看上下行。在 ECMAScript 中对分号自动插入规则也有相应的解释：空语句，变量语句，表达式语句，do...

2013-05-07 07:14:00 141

转载 firefox下img元素和空div以及选中div中文字拖拽问题

最近在做拖拽功能的时候，FF下遇到了几个问题，自己顺便整理了一下。问题：在Firefox下以图片为句柄的拖拽无法触发onmouseup事件，在空的div中也无法触发onmouseup事件，同时在所有浏览器下选中文字后div的mouseup事件失效；整理了几个方法：1.onmousemove加在document上2.firefox : 如果被拖拽的对象里面没有...

2013-03-11 10:53:00 170

转载重温Javascript继承机制

上段时间，团队内部有过好几次给力的分享，这里对西风师傅分享的继承机制稍作整理一下，适当加了些口语化的描述，留作备案。一、讲个故事吧澄清在先，Java和Javascript是雷锋和雷峰塔的关系。Javascript原名Mocha，当时还叫做LiveScript，创造者是Brendan Eich，现任Mozilla公司首席技术官。1994年，历史上第一个比较成熟的网络浏览器——N...

2013-03-04 21:57:00 111

转载针对多点触控浏览器进行的开发

在本文中，我会深入研究iOS和Android设备提供的触摸事件API，探索一下可以构建哪些类型的应用，给出一些最佳做法，并论及一些使得可触控应用（touch-enabled application）的开发变得更加容易的有用技术。针对多点触控浏览器进行的开发前言诸如智能手机和平板电脑一类的移动设备通常会有一个电容式触摸屏（capacitive touch-s...

2013-02-25 17:49:00 120

转载 mustache

mustache官网是这么介绍的：Logic-less templates.Available inRuby,JavaScript,Python,Erlang,PHP,Perl,Objective-C,Java,.NET,Android,C++,Go,Lua,ooc,ActionScript,ColdFusion,Scala,Clojure...

2013-02-04 17:33:00 122

转载 iOS内嵌webview页面

iOS内嵌webview页面制作经验因为工作中做到iOS内嵌页面，以后也会越来越多地遇到，所以打算总结一下这方面的经验。切图的时候，不要把文字切到图中我看到有的同事切图的时候把文字也切到图里，包括普通图和@2x的图。这样做其实很不好，因为：设计搞中的字体可能跟iOS实际的字体不一样，二者在同一个屏幕出现的时候就会很违和。比如文字用了iOS字体，后面的...

2013-02-04 10:43:00 276

转载 ++操作符

1 var s=1;2 console.log(typeof s); //number3 s+="1";4 console.log(typeof s); //string5 console.log(s); //116 s++;7 console.log(typeof s); //number8 console.log(s); /...

2013-02-03 19:51:00 96

转载使用面向对象的技术创建高级 Web 应用程序

JavaScript使用面向对象的技术创建高级 Web 应用程序本文来自：Ray Djajadinata本文讨论:JavaScript 是基于原型的语言用 JavaScript 进行面向对象的编程JavaScript 编码技巧JavaScript 的未来本文使用了以下技术:JavaScript...

2013-01-22 08:08:00 107

转载 CSS 与 HTML5 响应式图片

随着Retina 屏幕的逐渐普及，网页中对图片的适配要求也越来越高。如何让图片在放大了两倍的Retina屏幕显示依然清晰，曾经一度困扰着网页开发者，好在CSS3 与 HTML5 已经着力在改变这种现状。那么到底什么是响应式图片呢？什么是响应式图片？响应式图片是指：用户代理根据输出设备的分辨率不同加载不同类型的图片，不会造成带宽的浪费。同时，在改变输出设备类型或分辨率时...

2013-01-16 14:12:00 135

转载如何创建一个基本的插件

一个典型的插件的代码如下：(function($){ $.fn.myNewPlugin = function() { return this.each(function(){ // 一堆代码... }); };}(jQuery));那几行代码，没把你搞晕吧？其实里面的重点就...

2013-01-08 13:46:00 86

转载进一步理解javascript对象、数组和哈希表

在javascript中，对象实际上就是一个哈希表，比如下面这个user对象：function user(n, a){ this.name = n; this.age = a; this.toString = function() { return "Name:" + this.name + ", Age:" + this.a...

2013-01-07 16:23:00 107

转载 javascript 对象及原型继承有关的属性：constructor、prototype、isPrototypeOf、instanceof、in 、hasOwnProperty 等等...

constructor：对象的构造器,是一个函数。prototype：构造器的原型，只有函数才具有这个属性。isPrototypeOf：如果对象A存在于对象obj的原形链中，则A.isPrototypeOf(obj)返回true，而obj必定继承了A的属性。__proto__：访问对象的原型链在当前对象的上一级对象，即对象的父级对象，非W3C或ECMAscrip...

2013-01-05 17:21:00 122

转载再谈javascript图片预加载技术

比onload更快获取图片尺寸文章更新：2011-05-31lightbox类效果为了让图片居中显示而使用预加载，需要等待完全加载完毕才能显示，体验不佳（如filick相册的全屏效果）。javascript无法获取img文件头数据，真的是这样吗？本文通过一个巧妙的方法让javascript获取它。这是大部分人使用预加载获取图片大小的例子：var imgLoad = ...

2012-11-07 17:44:00 90

转载编写可维护的代码

优秀的Stoyan Stefanov在他的新书中（《Javascript Patterns》）介绍了很多编写高质量代码的技巧，比如避免使用全局变量，使用单一的var关键字，循环式预存长度等等。这篇文章不仅仅从代码本身来考虑如何优化编码，也从代码的设计阶段来考虑，包括书写API文档，同事的review，使用JSLint。这些习惯都能帮助你编写更加高质量的、更易于理解的、可维护的代码（让...

2012-11-07 17:23:00 120

转载 Html 元素的坐标体系增加对clientLeft的说明

1. offsetTop、offsetLeft、offsetWidth、offsetHeight假设 obj 为某个 HTML 控件。obj.offsetTop 指 obj 距离上方或上层控件的位置，整型，单位像素。obj.offsetLeft 指 obj 距离左方或上层控件的位置(具体为从obj的外侧边界到外层控件的内侧边界)，整型，单位像素。（注意：以上是IE中的解释...

2012-11-07 14:30:00 121

转载 (JAVASCRIPT篇)

1,判断字符串是否是这样组成的，第一个必须是字母，后面可以是字母、数字、下划线，总长度为5-20var reg = /^[a-zA-Z][a-zA-Z_0-9]{4,19}$/;reg.test("a1a__a1a__a1a__a1a__");2，截取字符串abcdefg的efgvar str = "abcdefg";if (/efg/.test(str)) {...

2012-11-07 10:41:00 130

转载 10条建议让你创建更好的jQuery插件

10条建议让你创建更好的jQuery插件在开发过很多 jQuery 插件以后，我慢慢的摸索出了一套开发jQuery插件比较标准的结构和模式。这样我就可以 copy & paste 大部分的代码结构，只要专注最主要的逻辑代码就行了。使用相同的设计模式和架构也让修复bug或者二次开发更容易。一套经过验证的架构可以保证我的插件不出大的问题，不论插件简单还是复杂。我在这里...

2012-10-26 10:53:00 76

转载 ctrl+Enter发布

$('body').keypress(function(e){ if(e.ctrlKey && e.which == 13 || e.which == 10) { $('#submit').click(); }});if(e.ctrlKey && e.which == 13 || e.which =...

2012-10-15 15:07:00 142

转载获得background-position

var Point = []; var p = $("#xx").css("background-position"); //IE的修复，IE中无法获得background-position， //只能获得background-position-x和background-position-y if (typeof (p) === "undefi...

2012-09-26 15:58:00 86

转载做了随机抽奖的

var alldata = "a,b,c,d,e,f,g,h,j,k"; var timer; var data = alldata.split(','); var dataLen = alldata.split(',').length-1; function chageValue(){ $('#oknum').val( data[getN...

2012-09-19 18:29:00 58

转载 apache ant

转发武器档案名称：apache ant最新版本：1.8.2用途：文件构建工具下载：http://labs.renren.com/apache-mirror//ant/binaries/apache-ant-1.8.2-bin.zipant使用文档：http://ant.apache.org/manual/index.html必备指数：使用难度：...

2012-08-09 17:32:00 112

转载 YUI Compressor

YUI Compressor是java程序，如果你对java很熟悉的话，大可快速的上手使用yuicompressor.jar；如果你和明河一样，对java很陌生，没关系，一样可以使用YUI Compressor，只不过使用的是淘宝UED前端制作的批处理工具，算是可视化的YUI Compressor工具，使用极其傻瓜化。今天向大家介绍的就是这款工具。点此下载1.配置java运行环境...

2012-08-08 16:59:00 187

转载文本框文本域提示自动显示隐藏jQuery小插件

2012-08-06 14:49:00 141

转载关于判断类型的方法

老问题：关于判断类型的方法：　　1. typeof:这个很常用也很好用，缺点是当变量是对象时，这个方法无法精确区分到底是哪一种对象，比如array,function,String,Number,Boolean都有可能：var a = new String("abc");　　var b = function(){};　　var c = [];　　alert(typ...

2012-08-05 23:43:00 231

转载 offsetLeft,Left,clientLeft的区别

假设 obj 为某个 HTML 控件。obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置，整型，单位像素。obj.offsetLeft 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置，整型，单位像素。obj.offsetWidth 指 obj 控件自身的...

2012-07-17 11:35:00 76

转载判断全角空格和半角空格

代码写的很烂，请大牛多多指教，判断内容是否有空格，$(function(){ var checkStr = function(){ var form = $('form[name=get]'); var inputTexts = form.find('input[type=text]'); var input; for (var i = 0; i < inputText...

2012-07-02 23:18:00 791

空空如也

空空如也