2015年02月_zhangzhao100110

情人节表白话像电影字幕一样呈现

明天就是情人节了，程序猿屌丝们是不是都是单身dog呢？今年很罕见，我不是单身啦。情人节老送花啊，巧克力啊，戒指，耳环啊等等这些东西当然。。。。不可避免啦。我们程序猿应该有我们自己的素养和浪漫情怀，今天我做了一个界面送给我的女朋友，用来表达我的爱意。界面打开后自动播放“滴答”的音乐，字幕像电影开场一样，一点一点的显示出来，引人入胜。其实我还做了另一个界面，类似微信里滑一滑翻页的效果...

2015-02-13 13:31:41 465

自适应table

在手机竖屏和PAD端表格显示的自适应处理，摘自《高性能HTML5》复制粘贴就可以看效果哦。d <!DOCTYPE HTML><html> <head> <title> New Document </title> <meta name="Generator" content=&quo

2015-02-12 14:53:06 482

AngularJS表单提交例子

AngularJS中的数据绑定 AngularJS创建实时模板来代替视图，而不是将数据合并进模板之后更新DOM。任何一个独立视图组件中的值都是动态替换的。 ng-app属性声明所有被其包含的内容都属于这个AngularJS应用，这也是我们可以在Web应用中嵌套AngularJS应用的原因。只有被具有ng-app属性的DOM元素包含的元素才会受Ang...

2015-02-12 14:44:46 352

WebKit渲染过程----《WebKit技术内幕》读书笔记

webkit一般性渲染过程在浏览器中，有一个最重要的模块，它主要作用是将页面转变成可视化的图形结果，这就是浏览器内核。通常，它也被称为渲染引擎。所谓的渲染，就是根据描述或者定义构建数学模型，通过模型生成图像的过程。浏览器的渲染引擎就是能够将HTML/CSS/JavaScript文本及其相应的资源文件转换成图像结果的模块。根据渲染引...

2015-02-04 22:49:56 335

原创使用Chrome DevTools的Timeline和Profiles提高Web应用程序的性能

转：http://www.oschina.net/translate/performance-optimisation-with-timeline-profiles 我们都希望创建高性能的Web应用程序。由于我们的应用程序变得越来越复杂，我们可能想要支持丰富的画面以及理想的60帧/秒，这能保证我们的应用程序响应灵敏且生动流畅。知道如何衡量和提高性能，是一个有用的技...

2015-02-04 09:54:13 135

原创 Chrome渲染分析之Rendering工具使用

转：http://www.ghugo.com/chrome-rendering-tools-1/ 页面的绘制时间（paint time）是每一个前端开发都需要关注的的重要指标，它决定了你的页面流畅程度。而如何去观察页面的绘制时间，找到性能瓶颈，可以借助Chrome的开发者工具。本文主要介绍Chrome渲染分析工具 Rendering。如上图，按F12调出开发者工具，然后按“E...

2015-02-04 09:41:49 1152

原创 Chrome渲染分析之Timeline工具的使用

转载：http://www.ghugo.com/chrome-timeline/ 概述这个工具真的很强大，Timeline工具栏提供了对于在装载你的Web应用的过程中，时间花费情况的概览，这些应用包括处理DOM事件, 页面布局渲染或者向屏幕绘制元素。Timeline可以通过事件，框架，和实时内存用量3个方面的数据来监测网页，通过这些数据，我们可以方便的找出页面中存在问题的地方。T...

2015-02-04 09:38:38 137

原创《高性能HTML5》优化笔记

目录什么是高性能开发原则性能准则什么是高性能当谈到“高性能”时，很多人想到的是页面加载时间，这是对Web开发性能的传统定义。其实性能并不仅仅是指页面加载，它还包括以下几个方面。页面加载时间浏览器性能网络性能开发效率页面加载时间页面加载时间过慢会使用户离开网...

2015-02-02 21:56:20 106

zeromike