一、浏览器兼容1.1、概要世界上没有任何一个浏览器是一样的，同样的代码在不一样的浏览器上运行就存在兼容性问题。不同浏览器其内核亦不尽相同，相同内核的版本不同，相同版本的内核浏览器品牌不一样，各种运行平台还存在差异、屏幕分辨率不一样，大小不一样，比例不一样。兼容性主要可以分类为：1)、CSS兼容2)、JavaScript兼容3)、HTML兼容这三类也是前端的主要组成部分，都存在一定的兼容性问题，知己知彼，百战百胜，我们先了解...
我现在已经好奇了一会儿. css3属性尚未标准化,但可以通过浏览器使用特定浏览器的前缀来实现.例如,可以使用border-radius,它可以在现代浏览器上正常工作.但是,对于以前版本的浏览器供应商,我们可以使用特定于供应商的属性,如-moz,-webkit等前缀来工作. 现在,对于我的页面,我使用了渐变和border-radius,制作了几个使用它们的类并将这些类应用于. 以下哪项更好？ >使用javascript查找支持是否存在,如果支持属性,则使用属性,如果上面为...
为什么会卡顿？ 有一个前提必须要提，前端开发者们都知道，浏览器是单线程运行的。但是我们要明确以下几个概念：单线程，主线程和合成线程。 虽然说浏览器执行js是单线程执行（注意，是执行，并不是说浏览器只有1个线程，而是运行时，runing），但实际上浏览器的2个重要的执行线程，这 2 个线程协同工作来渲染一个网页：主线程和合成线程。 一般情况下，主线程负责：运行 JavaScript；计算 HTML 元素的 CSS 样式；页面的布局；将元...
未来使用H5的场景会越来越多，这是令web开发者欢欣鼓舞的事情。然而有一个现实我们不得不看清，那就是IE系列浏览器还占有一大部分市场份额，以IE8、9为主，windows8.1的用户已经用上了IE10/11，而考虑我国的国情，IE6、7依然存留不少。在我们放手用HTML5开发的时候，新特性支持度检测就是必不可少的了。一种方式是用navigator.userAgent或navigator.appName来检测浏览器类型和版本，不过这种方式不是很可靠，浏览器对于一些新特性也...
之前一直以为css3的才是最厉害的，但是最近做HTML5页面发现在微信上的效果不是太好。最近发现的github上比较火的velocity.js，作者宣称要做DOM动画方面的领导者，完全颠覆了我的认识啊。相关链接：CSS vs. JS Animation: Which is Faster?回复内容： 稍微做过一点点 Web App，目前深陷在 Android Webview 里不能自拔，来谈一点看法。1. 在现代PC 浏览器上，CSS3 Animation 和 Transition 好写好用，流畅丝滑，而且动画过程0 GC。当...
关于特效性能，canvas、css3、jquery那个更适合手机端？最近用dom+jquery做了一个移动端的应用，有6个页，其中有一些诸如齿轮转动，繁星乱跑之类的效果，做好后发现性能真的很差，随后改为css3+canvas的结构，还是不怎么样，最后没办法了，全部推翻重做，使用lufylegend引擎全部采取canvas写完了整个应用，虽然勉强可以用了，但是在一些方面还是不尽如意，比如不好绑定鼠标事件，性能还是有些卡顿。那么，到底该采用什么方法来做这...
简要教程Repaintless.css是一款轻量级高性能的CSS3动画库。Repaintless.css通过特殊的方法来制作元素动画，不会引起页面的重绘，使它比其它CSS动画库具有更高的性能。安装你可以通过bower或npm来安装Repaintless.css。$ bower install repaintless $ npm install repaintless 使用方法 使用该CSS3动画库需要在页面中引入repaintless.css文件。 HTML结构 要使一个元素可以动画，你需要做的就是为该元素添加ele...
写在前面 高性能移动Web相较PC的场景需要考虑的因素也相对更多更复杂，我们总结为以下几点： 流量、功耗与流畅度。 在PC时代我们更多的是考虑体验上的流畅度，而在Mobile端本身丰富的场景下，需要额外关注对用户基站网络流量使用的情况，设备耗电量的情况。 关于流畅度，主要体现在前端动画中，在现有的前端动画体系中，通常有两种模式：JS动画与CSS3动画。 JS动画是通过JS动态改写样式实现动画能力的一种方案，在PC端兼容低...
css3出来已经很久了，现在来谈判断浏览器是否支持某个css3的属性虽说有点过时了，但是还是可以谈谈的，然后，此篇主要谈的不是判断是否支持，而是怎么封装更好，为什么这么封装，欢迎吐槽。 入题，判断浏览器是否支持css3 transition，方法很简单，只需要下面这句代码就行了： transition in document.body.style chrome和ie支持document.body，但是Firefox不支持，Firefox支持document.documentElement，对于没有doctype...
一、先来看一个例子 下面这个例子来自某外文，我这里简单转述下。 视差滚动现在不是挺流行的嘛，然后Chris Ruppel当其使用background-attachment: fixed实现背景图片不随滚动条滚动而滚动效果的时候，发现，页面的绘制性能掉到了每秒30帧，这种帧频人眼已经可以感觉到一定的顿挫感了。 后来，参考一些其他同事还是同行的建议，做了一番优化，然后，页面的渲染性能—— 这优化之前完全就是便秘，屎拉不出来的感...
注：本文出自腾讯AlloyTeam的元彦，文章也可以 在github上浏览 。请尊重版权，转载请注明来源，多谢～～ 高性能移动Web相较PC的场景需要考虑的因素也相对更多更复杂，我们总结为以下几点： 流量、功耗与流畅度。 在PC时代我们更多的是考虑体验上的流畅度，而在Mobile端本身丰富的场景下，需要额外关注对用户基站网络流量使用的情况，设备耗电量的情况。 关于流畅度，主要体现在前端动画中，在现有的前端动画体系中，通常有两...
注：本文出自腾讯AlloyTeam的元彦，文章也可以在github上浏览。请尊重版权，转载请注明来源，多谢～～高性能移动Web相较PC的场景需要考虑的因素也相对更多更复杂，我们总结为以下几点： 流量、功耗与流畅度。 在PC时代我们更多的是考虑体验上的流畅度，而在Mobile端本身丰富的场景下，需要额外关注对用户基站网络流量使用的情况，设备耗电量的情况。 关于流畅度，主要体现在前端动画中，在现有的前端动画体系中，通常有两种模式：J...
简要教程 Repaintless.css是一款轻量级高性能的CSS3动画库。Repaintless.css通过特殊的方法来制作元素动画，不会引起页面的重绘，使它比其它CSS动画库具有更高的性能。 安装 你可以通过bower或npm来安装Repaintless.css。$ bower install repaintless $ npm install repaintless 使用方法 使用该CSS3动画库需要在页面中引入repaintless.css文件。<link href="path-to-css-directory/repaintless.css" rel="styleshe...
在现有的前端动画体系中，通常有两种模式：JS动画与CSS3动画。 JS动画是通过JS动态改写样式实现动画能力的一种方案，在PC端兼容低端浏览器中不失为一种推荐方案。 而在移动端，我们选择性能更优浏览器原生实现方案：CSS3动画高性能移动Web相较PC的场景需要考虑的因素也相对更多更复杂，我们总结为以下几点： 流量、功耗与流畅度。 在PC时代我们更多的是考虑体验上的流畅度，而在Mobile端本身丰富的场景下，需要额外关注对用户基站网...