高性能 CSS3 动画

发表于 css3 分类,标签:
注:本文出自腾讯AlloyTeam的元彦,文章也可以在github上浏览。请尊重版权,转载请注明来源,多谢~~高性能移动Web相较PC的场景需要考虑的因素也相对更多更复杂,我们总结为以下几点:流量、功耗与流畅度。在PC时代我们更多的是考虑体验上的流畅度,而在Mobile端本身丰富的场景下,需要额外关注对用户基站网络流量使用的情况,设备耗电量的情况。关于流畅度,主要体现在前端动画中,在现有的前端动画体系中,通常有两种模式:JS动画与CSS3动画。JS动画是通过JS动态改写样式实现动画能力的一种方案,在PC端兼容低端浏览器中不失为一种推荐方案。而在移动端,我们选择性能更优浏览器原生实现方案:CSS3动画。然而,CSS3动画在移动多终端设备场景下,相比PC会面对更多的性能问题,主要体现在动画的卡顿与闪烁。目前对提升移动端CSS3动画体验的主要方法有几点:尽可能多的利用硬件能力,如使用3D...

模块的写法

发表于 Require 分类,标签:
随着网站逐渐变成"互联网应用程序",嵌入网页的Javascript代码越来越庞大,越来越复杂。网页越来越像桌面程序,需要一个团队分工协作、进度管理、单元测试等等......开发者不得不使用软件工程的方法,管理网页的业务逻辑。Javascript模块化编程,已经成为一个迫切的需求。理想情况下,开发者只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块。但是,Javascript不是一种模块化编程语言,它不支持"类"(class),更遑论"模块"(module)了。(正在制定中的ECMAScript标准第六版,将正式支持"类"和"模块",但还需要很长时间才能投入实用。)Javascript社区做了很多努力,在现有的运行环境中,实现"模块"的效果。本文总结了当前"Java...

require.js的用法

发表于 Require 分类,标签:
这个系列的第一部分和第二部分,介绍了Javascript模块原型和理论概念,今天介绍如何将它们用于实战。我采用的是一个非常流行的库require.js。一、为什么要用require.js?最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了。后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载。下面的网页代码,相信很多人都见过。  <scriptsrc="1.js"></script>  <scriptsrc="2.js"></script>  <scriptsrc="3.js"></script>  <scriptsrc="4.js"></script>  <...

使用SVG中的Symbol元素制作Icon

发表于 svg 分类,标签:
原文出处:腾讯ISUX   欢迎分享原创到伯乐头条前言随着大屏幕分辨率的普及以及各种移动设备层出不穷的移动互联网时代的到来,我们在网站设计时更应该关心内容在各种设备上的阅读性和显示效果。我们都希望能在任何时间,任何设备上都能清楚的,高效的传递信息给用户。而随着各种高清视网膜屏幕的出现,现在web设计也需要考虑各种高清屏幕的显示效果,同样前端在代码实现的时候也需要根据屏幕的不同来输出不同分辨率的图片。为了使我们的网页能够适配视网膜屏幕上的高分辨率,在前端开发中一般需要准备两套不同尺寸的图片来应对,一套在普通屏幕上显示;一套在高清屏幕上显示。为了解决屏幕分辨率对图标影响的问题,字体图标即iconfont顺势而生。字体图标是一种全新的设计方式。更重要的是相比图片而言,使用字体来制作图标可以不受于屏幕分辨率的影响,这对于现在各种分辨率屏幕的移动互联...

AMD:浏览器中的模块规范

发表于 JS 分类,标签:
AMD规范就是其中比较著名一个,全称是AsynchronousModuleDefinition,即异步模块加载机制。从它的规范描述页面看,AMD很短也很简单,但它却完整描述了模块的定义,依赖关系,引用关系以及加载机制。从它被requireJS,NodeJs,Dojo,JQuery使用也可以看出它具有很大的价值,没错,JQuery近期也采用了AMD规范。在这篇文章中,我们就将介绍AMD的性质,用法,优势以及应用场景。从AMD中我们也能学习到如何在更高层面去设计自己的前端应用。AMD:浏览器中的模块规范前面提到,为实现与Node.js相同方式的模块写法,大牛们做了很多努力。 但浏览器环境不同于服务器端,它的模块有一个HTTP请求过程(而Node.js的模块文件就在本地),这个请求过程多数使用scripttag,script默认的异步性导致很难实现与Node.js一模一样的模块...

RequireJS 2.0 正式发布

发表于 Require 分类,标签:
就在前天晚上RequireJS发布了一个大版本,直接从version1.0.8升级到了2.0。随后的几小时JamesBurke又迅速的将版本调整为2.0.1,当然其配套的打包压缩工具r.js也同时升级到了2.0.1。此次变化较大,代码也进行了重构,层次更清晰可读。功能上主要变化如下: 1,延迟模块的执行。这是一个很大变化,以前模块加载后factory立马执行。性能上肯定有一些损耗。2.0修改实现,再没人诟病AMD的模块是立即执行的。现在也可以等到require的时候才执行。 2,config增加了shim,map,module,enforceDefine。shim参数解决了使用非AMD方式定义的模块(如jQuery插件)及其载入顺序。使用shim参数来取代1.0版本的order插件。其实在1.0版本中就曾经有人开发过use和wrap插件来解决此类问题。考虑到很多开发者...

RequireJS入门(三)

发表于 Require 分类,标签:
这篇来写一个具有依赖的事件模块event。event提供三个方法bind、unbind、trigger来管理DOM元素事件。event依赖于cache模块,cache模块类似于jQuery的$.data方法。提供了set、get、remove等方法用来管理存放在DOM元素上的数据。示例实现功能:为页面上所有的段落P元素添加一个点击事件,响应函数会弹出P元素的innerHTML。 创建的目录如下为了获取元素,用到了上一篇写的selector.js。不在贴其代码。 index.html如下1234567891011121314151617<!doctypehtml><html>    <head>        &l...

RequireJS入门(二)

发表于 Require 分类,标签:
上一篇是把整个jQuery库作为一个模块。这篇来写一个自己的模块:选择器。为演示方便这里仅实现常用的三种选择器id,className,attribute。RequireJS使用define来定义模块。 新建目录结构如下这次新建了一个子目录js,把main.js和selctor.js放入其中,require.js仍然和index.html在同一级目录。 HTML如下123456789101112131415161718<!doctypehtml><html>    <head>        <title>requirejs入门(二)</title>   &n...

Require,js入门

发表于 Require 分类,标签:
RequireJS由JamesBurke创建,他也是AMD规范的创始人。 RequireJS会让你以不同于往常的方式去写JavaScript。你将不再使用script标签在HTML中引入JS文件,以及不用通过script标签顺序去管理依赖关系。 当然也不会有阻塞(blocking)的情况发生。好,以一个简单示例开始。 新建一个目录,结构如下 目录r1下有index.html、jquery-1.7.2.js、main.js、require.js。require.js和jquery-1.7.2.js去各自官网下载即可。 index.html如下1234567891011<!doctypehtml><html>    <head>   &...

Linux运行.sh文件

发表于 linux 分类,标签:
一个中等水平的Linux用户一定少不了经常执行.sh文件,当然了,你可以在图形界面下面直接双击该文件,但无疑比较浪费时间。现在介绍第一种方法:(在ubuntu下的)首先你要打开一个终端。然后输入sudosu随后输入密码。这样就取得了root用户权限。然后找到那个文件(当然是在终端里面用命令找,你可别开一个文件管理器。)执行./sh文件名字就可以了。比如你有一个sh文件叫1.sh,这个文件在硬盘的/tmp目录里面,要执行的话,就要这样:C代码$ sudo su  pass your password:(这里输入密码的时候是看不到输入的东西的,不过确实已经输入进去了。)  #cd /tmp   #./1.sh  这样就OK了。SH文件是Linux系统...