HTML5在线教程和技术博客

  • NodeJS、Java和PHP性能考量和若干参考结论

    首先需要说明的是,严格而言NodeJS和Java、PHP并非对等概念,NodeJS是基于JS的一个应用程序,而Java/PHP是语言。我们这里实际指的是分别使用node、java和php来实现一个网页应用,在这样的相等用例下,各自的性能表现。自从2013年Paypal应用迁移到Node后,NodeJS被越来越多的巨头所使用。这里面当然不只是技术层面的考虑,还...

    阅读全文 收藏 评论 (5) 阅读 (1237) 2016-12-14 19:51:26  
  • 前端开发框架技术选型:Angular2 VS React VS jQuery

    Angular和React是主流的2个前端开发框架,但是严格来说两者并非对等的概念。Angular是一个基于MVC(或者MVVM)的框架,包含model(模型)/view(视图)/controller(控制器),React只有view(视图)层。而Angular2使用TypeScript重建了整个框架,好处是可以利用TypeScript的增强语法。相对而言Angular是一个重量级的开发框...

    阅读全文 收藏 评论 (0) 阅读 (1921) 2016-12-12 12:58:22  
  • Web界面编程状态变化和JS开发框架(React/Angular/Ember)

    UI编程中的一个关键课题就是界面组件化(可复用)以及组件状态管理。稍早一些的windows程序员可能接触过MFC,其界面编程中有一个DDX(DoDataExchange)的机制,用来绑定界面组件和数据成员。通过这样的绑定,由框架来负责当数据发生变化时完成相应UI的更新,而无需开发者编写代码,这无疑简化了编程。而在早期的Web开发中,...

    阅读全文 收藏 评论 (0) 阅读 (863) 2016-12-11 18:46:50  
  • CSS3弹性布局内容对齐(justify-content)属性使用详解

    内容对齐(justify-content)属性应用在弹性容器上,把弹性项沿着弹性容器的主轴线(main axis)对齐。该操作发生在弹性长度以及自动边距被确定后。 它用来在存在剩余空间时如何加以分配,也会在发生内容溢出时影响项目的对齐。注意:弹性布局中有两个基本术语main axis和cross axis,一般情况下,我们可以把它们各自看作是...

    阅读全文 收藏 评论 (0) 阅读 (793) 2016-12-08 16:14:54  
  • CSS3弹性布局弹性流(flex-flow)属性详解和实例

    弹性布局是CSS3引入的强大的布局方式,用来替代以前Web开发人员使用的一些复杂而易错hacks方法(如使用float进行类似流式布局)。其中flex-flow是flex-direction和flex-wrap属性的简写方式,语法如下:flex-flow: &flex-direction< || &flex-wrap{>> >>>>display:>flex;>> }>> .flex-container.first>{>> >>>>flex-flow...

    阅读全文 收藏 评论 (0) 阅读 (1043) 2016-12-08 16:11:30  
  • 如何使用CSS3合成模式(blend-mode)和滤镜(filter)实现彩色蜡笔(时光机)照片特效

    在之前的文章中我们已经详细讲解过CSS3滤镜(filter,也可称之为过滤器)的工作方式,本文将实现一个当下流行的时光机相片特效实例来说明其实际用途。
    我们首先实现一个勾勒轮廓的效果,这可以通过两张相同背景图细微错位然后求差值来获得:.colored-pencil-effect:before>{ >>>>>>>>background-image:>url(/uploads/1...

    阅读全文 收藏 评论 (0) 阅读 (619) 2016-11-29 00:18:02  
  • 深入理解CSS3滤镜(filter)功能和实例详解

    CSS3滤镜功能源自SVG滤镜规范,SVG滤镜最早用来给矢量图添加类似PS中像素图的一些特效。
    把这个滤镜功能引入到普通HTML元素中可以带来很有趣的效果(模糊、变形、色度等),这赋予开发者更多创意表达的空间。为止SVG和CSS工作组联合起来制定一个协调统一的滤镜规范:

    阅读全文 收藏 评论 (0) 阅读 (1827) 2016-11-23 17:22:59  
  • 深入理解JS和CSS3动画性能问题和技术选择

    本文对比了JS及其框架和CSS3的动画性能,并深入剖析了其内在原因。技术结论大致如下:1. jQuery出于设计原因,在动画性能上表现最差2. CSS3由于把动画逻辑推给了浏览器,优化了内存消耗、DOM操作和默认利用了RAF,所以要比jQuery动画性能更好3. CSS3可能会引起浏览器主线程和复合器线程之间过度数据交互,从而导致性能下降4...

    阅读全文 收藏 评论 (0) 阅读 (2804) 2016-11-13 12:38:23  
  • 通过实例深入理解HTML5/CSS3/SVG/WebGL的技术本质

    常常听到人们对于HTML5的讨论,看了页面头部这个那个就是HTML5,误认为HTML5只是新增些标签“而已”,学完了W3School似乎就理解了。实际上很多从业人员并不理解业界为什么要推出HTML5系列技术标准,为什么HTML5代表了下一代网页技术。...

    阅读全文 收藏 评论 (0) 阅读 (1654) 2016-11-06 00:15:47  
  • 使用HTML5 FileReader和Canvas压缩用户上传的图片

    手机用户拍的照片通常会有2M以上,这对服务器带宽产生较大压力。因此在某些应用下(对图片要求不那么高)我们可以在客户端来压缩图片,然后再提交给服务器。总体思路是:1. 使用HTML5的FileReader接口来读取用户上...

    阅读全文 收藏 评论 (1) 阅读 (700) 2016-11-04 22:44:27