异步编程@(南洋) javascript异步编程3种方法。javascript语言的执行环境是单线程的。 一次只能完成一个任务。为了解决这个问题,javascript将任务执行模式分成两种:同步和异步。 异步编程的方法回调函数12345f1();// f2 需要等待f1的执行结果f2();f3(); 如果f1需要大量时间计算,这会阻塞f3的执行。可以修改为12345678910111213141516171819function f1(callback){  setTimeout(function () {      // f1的任务代码      callback();    }, 1000);  }f1(f2);f3(); // f3先于出结果/ ...
閱讀全文 »

视频直播前端方案@(南洋) 流媒体本质上是:现实的图像,经过编码器压缩,持久化为点播文件或者直播流,经过传输,在终端解码和展示。 http live streaming(hls)适用移动端HTTP Live Streaming(HLS)是苹果公司实现的基于HTTP的流媒体传输协议,可实现流媒体的直播和点播。原理上是将视频流分片成一系列HTTP下载文件。 由于大多数移动设备的H5页面的HTML5新的video标签都支持HLS协议,所以在移动端非常适合使用HLS协议进行直播。 上图所示的m3u8格式就是支持HLS协议的流媒体格式。 使用方法也非常简单,直接在html中嵌入一个video标签及可。123<video class="video" controls=" ...
閱讀全文 »

callback hell翻译 文章来源 http://callbackhell.com/ 回调地狱一篇如何进行javascript异步编程的指导文章。 什么是“回调地狱”?javascript异步编程,或者说使用回调进行javascript编程,是很难凭直觉得到想要的返回值的。很多代码长的像下面一样: 123456789101112131415161718192021222324fs.readdir(source, function (err, files) { if (err) { console.log('Error finding files: ' + err) } else { files.forEach ...
閱讀全文 »

viewport探索 flexible.js解读http://www.quirksmode.org/mobile/viewports.htmlhttp://www.quirksmode.org/mobile/viewports2.htmlhttp://www.quirksmode.org/mobile/metaviewport/#t10http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html 这在这篇文章介绍了viewport的三种视口、以及等过此三视口分析了淘宝的flexible.js方案的实现原理。 现代浏览器中实现缩放的方式,无怪乎都是「拉伸」像素。 在屏幕上,首先介绍的两个概念。「css像素」、「设备像素」 ...
閱讀全文 »

原文:http://www.quirksmode.org/mobile/metaviewport/#t10 第三种viewport多年前 我提到了移动端的浏览器有两种viewport:visual viewport很layout viewport。如果有必要可以重读这几篇文章。文章我假设这两个viewport的知识大家已经掌握了。 ideal viewport结果表明存在第三种viewport,我把他叫做ideal viewport。这个viewport能将设备上的页面设置能最理想的尺寸。因此,每种设备的ideal viewport的尺寸是不一样的。 在老的便宜的没有retina屏幕的机型上,ideal viewport跟物理像素一致,但这不是必须的。更新物理像素更高的设备保持旧的ideal ...
閱讀全文 »

seajs在IE9及以下的window.load事件调用失败          最近在在项目中遇到一个情况。项目使用seajs作为模块加载器,在js文件中的define回调中我们把函数都放在$(function () {})回调中去执行,意味着在文档加载完成后执行。           但是这个页面是商品详情页,包含着大量的详情图片,众所周知,加载的图片都会影响最后的load时间。          &n ...
閱讀全文 »

@(南洋) You don’t konw JS 阅读心得———by lyu dada javascript作用域 一门语言需要一套设计良好的规则来存储变量,并且之后可以方便的找到这些变量,这逃规则被称为作用域。 这也意味着当我们访问一个变量的时候,决定这个变量能否访问到的依据就是这个作用域。 一、词法作用域作用域共有两种主要的工作模型,第一种是最为普通的,被大多数编程语言(包括javascript)采用的词法作用域,另一种叫做动态作用域。而我们平时所提及的作用域,就是这里所说的词法作用域。 要了解词法作用域,必须要了解javascript引擎以及编译器的大概工作方式。一般程序中的源码在执行前会进行编译三步骤。 分词/语法分析 解析/语法分析 代码生成 而在分词/词法分析这个步骤,就已经 ...
閱讀全文 »

click300延迟与点击穿透由来:ios safari双击放大页面,由于浏览器大都具备这种特性,所以浏览器都约定在300毫秒的间隔来判断是否是双击还是单击,超过300毫秒还没第二次点击浏览器才判断此次点击是单击。点击穿透事件介绍:并不是说绑定了click事件然后产生了穿透,而是一系列因果集合而产生了穿透这个不需要的现象。产生穿透事件的条件:1、两个dom在屏幕的垂直方向是重叠的,并且z-index不同。2、采用touch系列的点击事件去点击朝外的dom,并且这个dom隐藏或者移开。3、在下方的dom绑定了click或者默认的点击事件(a标签,buttom等)只有满足上述条件才会触发穿透事件,就是点击外dom,外dom消失,但下边的dom也会触发click事件(比如跳转链接)产生此现象的原因 ...
閱讀全文 »

高性能动画 参考资料http://melonh.com/sharing/slides.html?file=high_performance_animation#/奇舞团黄薇 一、简介        先按照浏览器渲染页面的顺序介绍下浏览器是如何渲染一个页面的。结合chrome开发工具中的timeline。1、解析HTML—对应chrome中的Parse HTML2、根据解析后的Dom节点和CSS构成了render-tree — 对应timeline中的Recalculate Style3、再由render-tree进行第一次渲染,将css中的布局属性(宽高大小定位)结合dom渲染 — Layout4、第二次渲染 ...
閱讀全文 »

viewport详解(翻译+总结)来源:http://www.quirksmode.org/mobile/viewports.html首先需要了解的是css像素并不等于设备像素,因为存在一些情况比如300px的div却占了1000x1000的屏幕,这两者的像素并不相等。下文会经常出现css像素设备像素等名词。 pc端1、screen.width&screen.height这是显示器的设备像素大小,永远不变,并不是浏览器的,包含了整个屏幕。但并没有什么卵用。2、window.innerWidth浏览器的可视区域宽度,如果用户通过浏览器的zoom缩放,innerWidth也会随时变化。是通过css的像素进行测量的,而不是通过设备屏幕像素。比如,300px宽的elem在zoom放大后占满了 ...
閱讀全文 »