1，首推的是合并css文件，如果页面加载10个css文件，每个文件1k，那么也要比只加载一个100k的css文件慢。2，减少css嵌套，最好不要套三层以上。3，不要在ID选择器前面进行嵌套，ID本来就是唯一的而且人家权值那么大，嵌套完全是浪费性能。4，建立公共样式类，把相同样式提取出来作为公共类使用，比如我们常用的清除浮动等。5，减少通配符*或者类似[hidden="true"]这类选择器的使用，挨个查找所有...这性能能好吗？当然重置样式这些...
【本博客为原创：http://www.cnblogs.com/HeavenBin/】 前言： 在工作中编写CSS样式表时随着选择器层数的增加总会看到选择器又丑又长的情况，利用工作之余研究从其命名再到如何提高其性能。本博客将以“通俗易懂”、“简洁””的方式来探究CSS选择器的性能，以及叙述总结如何提升CSS选择器的性能。(2017-8-20) 一. CSS选择器性能是如何消耗的？工作原理：浏览器利用CSS选择器来匹配文档元素。工作流程：例如 #hd .nav > a { pad...
一、浏览器兼容1.1、概要世界上没有任何一个浏览器是一样的，同样的代码在不一样的浏览器上运行就存在兼容性问题。不同浏览器其内核亦不尽相同，相同内核的版本不同，相同版本的内核浏览器品牌不一样，各种运行平台还存在差异、屏幕分辨率不一样，大小不一样，比例不一样。兼容性主要可以分类为：1)、CSS兼容2)、JavaScript兼容3)、HTML兼容这三类也是前端的主要组成部分，都存在一定的兼容性问题，知己知彼，百战百胜，我们先了解...
在第一部分和第二部分中我们分别介绍了改善网站性能中页面内容和服务器的几条守则，除此之外，JavaScript和CSS也是我们页面中经常用到的内容，对它们的优化也提高网站性能的重要方面：CSS：把样式表置于顶部 避免使用CSS表达式（Expression） 使用外部JavaScript和CSS 削减JavaScript和CSS 用<link>代替@import 避免使用滤镜 JavaScript把脚本置于页面底部 使用外部JavaScript和CSS 削减JavaScript和CSS 剔除重复脚本 减少DOM访问 ...
一、无图片技术定义在不使用CSS Image（通过CSS的引入的背景图片,不包括img标签内的图片）情况下生成类似图片效果的技术；换句话的意思就是在使用纯CSS生成类似图片效果的技术。二、为什么要“无图片”？首先我们通过yslow的statistics查看新浪微博最新版首页的文件，得到Stylesheet File(CSS文件)大小为206.8K, CSS Image大小为623.8K。明显发现CSS文件比CSS Image小很多。当然单纯拿这两个来比，还不能说明什么。下面我们通过计算...
之前看过Yahoo团队写的一篇关于网站性能优化的文章，文章是2010年左右写的，虽然有点老，但是很多方面还是很有借鉴意义的。关于css的性能优化，他提到了如下几点：CSS性能优化1、把样式表置于顶部现把样式表放到文档的< head />内部似乎会加快页面的下载速度。这是因为把样式表放到< head />内会使页面有步骤的加载显示。注重性能的前端服务器往往希望页面有秩序地加载。同时，我们也希望浏览器把已经接收到内容尽可能显示出来。这...
在开发中编写的js、css发布的时候，往往需要进行压缩，以减少文件大小，减轻服务器的负担。这就得每次发版本的时候，对js、js进行压缩，然后再发布。有没有什么办法，让代码到了服务器上边，它自己进行压缩呢？ 有两种办法：第一种，在css、js请求到来的时候读取一下相对应的文件，进行压缩后返回。此方法可以通过在Global.asax的Application_BeginRequest的事件中，进行处理，也可以在web.config中注册一个httpHandler进行处理。第...
CSS 的性能优化： Style 标签的相关调优 特殊的 CSS 样式使用方式 CSS 缩写(color,上下左右合并等) CSS 的声明（页面上的 class 在全局范围内来讲应该是唯一的，用唯一的 Class 名称来定位一个节点往往比组合定位更加快捷。样式与元素的分离，两者独立维护） CSS 选择器（id选择器效率最高，其他子选择器，匹配都会减慢速度）（child,不用太泛的选择器） css的style样式单词简写优化（不要用太长的名称） 标点符号优化（删除空格，...
存在的问题： 合并、压缩文件主要有2方面的问题： 1. 每次发布的时候需要运行一下自己写的bat文件或者其他程序把文件按照自己的配置合并和压缩。 2. 因生产环境和开发环境需要加载的文件不一样，生产环境为了需要加载合并、压缩后的文件，而开发环境为了修改、调试方便，需要加载非合并、压缩的文件，所以我们常常需要在JSP中类似与下面的判断代码：<c:if test="${env==prod}"> <script type="text/javascript" src="/js/all.js">...
我现在已经好奇了一会儿. css3属性尚未标准化,但可以通过浏览器使用特定浏览器的前缀来实现.例如,可以使用border-radius,它可以在现代浏览器上正常工作.但是,对于以前版本的浏览器供应商,我们可以使用特定于供应商的属性,如-moz,-webkit等前缀来工作. 现在,对于我的页面,我使用了渐变和border-radius,制作了几个使用它们的类并将这些类应用于. 以下哪项更好？ >使用javascript查找支持是否存在,如果支持属性,则使用属性,如果上面为...
代码如下: 事实证明cssText在多数浏览器中性能较高 || var container = document.getElementById('container'); function appendElement(){ var ary = []; container.innerHTML = ''; for(var i=0;ivar div = document.createElement('div'); ary.push(div); container.appendChild(div); } return ary; } function test1(){ var ary = appendElement(); var d1 = new Date; for(var j=0;jary[j].style.width = '50px'; ...
为什么会卡顿？ 有一个前提必须要提，前端开发者们都知道，浏览器是单线程运行的。但是我们要明确以下几个概念：单线程，主线程和合成线程。 虽然说浏览器执行js是单线程执行（注意，是执行，并不是说浏览器只有1个线程，而是运行时，runing），但实际上浏览器的2个重要的执行线程，这 2 个线程协同工作来渲染一个网页：主线程和合成线程。 一般情况下，主线程负责：运行 JavaScript；计算 HTML 元素的 CSS 样式；页面的布局；将元...
代码如下:<!DOCTYPE HTML> <html> <head> <meta charset="gbk"> <title>事实证明cssText在多数浏览器中性能较高</title> </head> <body> <input type="button" value="测试1" onclick="test1()"/> || <input type="button" value="测试2" onclick="test2()"/> <div id="container"></div> <script> var container = document.getElementById(container); function appendElement(){ var ary = []; container.innerHTML = ; for(var...
未来使用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。当...