css优化 | 易学教程

CSS Sprites（精灵/雪碧）技术原理和使用

阅读更多关于 CSS Sprites（精灵/雪碧）技术原理和使用

摘自：http://blog.lehu.shu.edu.cn/hikui/A359743.html 雪碧图，其实就是背景采用一张大图，通过背景的定位来修改使用的背景，这样做可以提高网站的速度（加载一张图对比加载一批图）。下面是转的博文：在分析各个网站的CSS时，我们经常可以看到一些网站有很多的元素共享了一张背景图片，而这张背景图片包含了所有这些元素需要的背景，这种技术就叫做CSS Sprites。淘宝的css sprites 这样做有什么好处呢？我们做一个简单的实验：假设我需要有一个列表，每一行列表都需要一个自己的修饰符。如果使用普通的img来放置这些图片： <li><img src="img/01.gif" alt="img" /><a href="#">aaaaa</a></li> <li><img src="img/02.gif" alt="img" /><a href="#">bbbbb</a></li> <li><img src="img/03.gif" alt="img" /><a href="#">ccccc</a></li> <li><img src="img/04.gif" alt="img" /><a href="#">ddddd</a></li> <li><img src="img/07.gif" alt="img" /><a href="#"

性能优化的 ULBOX(收集-)

阅读更多关于性能优化的 ULBOX(收集-)

1. Yahoo性能优化 http://developer.yahoo.com/performance/rules.html 1、尽量减少HTTP请求个数——须权衡合并图片（如css sprites，内置图片使用数据）、合并CSS、JS，这一点很重要，但是要考虑合并后的文件体积。 2、使用CDN（内容分发网络）这里可以关注CDN的三类实现：镜像、高速缓存、专线，以及智能路由器和负载均衡； 3、为文件头指定Expires或Cache-Control，使内容具有缓存性。区分静态内容和动态内容，避免以后页面访问中不必要的HTTP请求。 4、避免空的src和href 留意具有这两个属性的标签如link，script，img，iframe等； 5、使用gzip压缩内容 Gzip压缩所有可能的文件类型以来减少文件体积 6、把CSS放到顶部实现页面有秩序地加载，这对于拥有较多内容的页面和网速较慢的用户来说更为重要，同时，HTML规范清楚指出样式表要放包含在页面的<head />区域内； 7、把JS放到底部 HTTP/1.1 规范建议，浏览器每个主机名的并行下载内容不超过两个，而问题在于脚本阻止了页面的平行下载，即便是主机名不相同 8、避免使用CSS表达式页面显示和缩放，滚动、乃至移动鼠标时，CSS表达式的计算频率是我们要关注的。可以考虑一次性的表达式或者使用事件句柄来代替CSS表达式。

浅谈前端工程化

阅读更多关于浅谈前端工程化

这段时间对项目做了一次整体的优化，全站有了20%左右的提升（本来载入速度已经1.2S左右了，优化度很低），算一算已经做了四轮的全站性能优化了，回顾几次的优化手段，基本上几个字就能说清楚：传输层面：减少请求数，降低请求量执行层面：减少重绘&回流传输层面的从来都是优化的核心点，而这个层面的优化要对浏览器有一个基本的认识，比如： ① 网页自上而下的解析渲染，边解析边渲染，页面内CSS文件会阻塞渲染，异步CSS文件会导致回流 ② 浏览器在document下载结束会检测静态资源，新开线程下载（有并发上限），在带宽限制的条件下，无序并发会导致主资源速度下降，从而影响首屏渲染 ③ 浏览器缓存可用时会使用缓存资源，这个时候可以避免请求体的传输，对性能有极大提高衡量性能的重要指标为首屏载入速度（指页面可以看见，不一定可交互），影响首屏的最大因素为请求，所以请求是页面真正的杀手，一般来说我们会做这些优化：减少请求数 ① 合并样式、脚本文件 ② 合并背景图片 ③ CSS3图标、Icon Font 降低请求量 ① 开启GZip ② 优化静态资源，jQuery->Zepto、阉割IScroll、去除冗余代码 ③ 图片无损压缩 ④ 图片延迟加载 ⑤ 减少Cookie携带很多时候，我们也会采用类似“时间换空间、空间换时间”的做法，比如： ① 缓存为王，对更新较缓慢的资源&接口做缓存（浏览器缓存

记一次小程序样式优化重构

阅读更多关于记一次小程序样式优化重构

3 月，跳不动了？>>> 上周花了 3 天的时间和老大一起重构了一下小程序的样式开发，虽然说在开发的过程中遇到了一些问题，但是最终减少了不少样式代码，同时功能上也更加强大。进一步来说，如果在后面我们的小程序用户想要自己定制化主题，也可以很快的实现。全局样式开发之前的小程序开发中，我们全方面使用了 Component 构造小程序组件以及页面(页面也可以使用 Component 构造器来编写)。当然一方面是因为小程序 Component 的开发体验非常好，拥有类似于 Vue mixin, watch 的 behaviors 和 observers ，比 Page 构造器强大了很多。另一方面，对于业务较重的小程序来说, Component 也有性能优势。可以参照滴滴开源小程序框架Mpx 中的 Page与Component setData性能对照。在开发过程中，有很多样式是可以复用的。如果在之前开发中经常使用 Bootstrap 之类的 ui 库，那么你就会习惯使用这种库的 utilities 类。但是默认情况下，自定义组件的样式只受到自定义组件 wxss 的影响。不会受到全局样式 app.wxss 的影响。所以我们只能通过增加 @import 语法来辅助各个组件进行开发。 @import "xxx.css"; 如果你使用 CSS 预处理器来辅助小程序开发的话，可能就需要通过

css整理

阅读更多关于 css整理

1.介绍一下标准的css的盒子模型？与ie盒子有什么区别？（1）有两种盒子，一个是W3C盒子模型，另一个是IE盒子模型（2）盒模型：内容（content），内边界（padding），边框（border），外边界（margin）（3）区别：ie的content部分把padding和border算进去了 2.css选择符有哪些，哪些属性可以继承？ ①id选择器（ # myid） ②类选择器（.myclassname） ③标签选择器（div, h1, p） ④伪类选择器（a:hover, li:nth-child） ⑤子选择器（ul > li） ⑥后代选择器（li a） ⑦相邻选择器（h1 + p） ⑧通配符选择器（ * ）可继承的样式： font-size font-family color, UL LI DL DD DT; 不可继承的样式：border padding margin width height ; 3.css优先级优先级就近原则，同权重情况下样式定义最近者为准; 载入样式以最后载入的定位为准; 优先级为: !important > id > class > tag important 比内联优先级高 4.CSS3新增伪类有哪些？ :after 在元素之前添加内容,也可以用来做清除浮动。 :before 在元素之后添加内容 :disabled

浏览器面试题总结

阅读更多关于浏览器面试题总结

1. 你对浏览器的理解？浏览器的主要功能是将用户选择的 web 资源呈现出来，它需要从服务器请求资源，并将其显示在浏览器窗口中，资源的格式通常是 HTML，也包括 PDF、image 及其他格式。用户用 URI（Uniform Resource Identifier 统一资源标识符）来指定所请求资源的位置。 HTML 和 CSS 规范中规定了浏览器解释 html 文档的方式，由 W3C 组织对这些规范进行维护，W3C 是负责制定 web 标准的组织。但是浏览器厂商纷纷开发自己的扩展，对规范的遵循并不完善，这为 web 开发者带来了严重的兼容性问题。简单来说浏览器可以分为两部分，shell 和内核。其中 shell 的种类相对比较多，内核则比较少。shell 是指浏览器的外壳：例如菜单，工具栏等。主要是提供给用户界面操作，参数设置等等。它是调用内核来实现各种功能的。内核才是浏览器的核心。内核是基于标记语言显示内容的程序或模块。也有一些浏览器并不区分外壳和内核。从 Mozilla 将 Gecko 独立出来后，才有了外壳和内核的明确划分。 2. 你对浏览器内核的理解？主要分成两部分：渲染引擎和 JS 引擎。渲染引擎的职责就是渲染，即在浏览器窗口中显示所请求的内容。默认情况下，渲染引擎可以显示 html、xml 文档及图片，它也可以借助插件（一种浏览器扩展

前端优化带来的思考，浅谈前端工程化

阅读更多关于前端优化带来的思考，浅谈前端工程化

css加载会造成阻塞吗？

阅读更多关于 css加载会造成阻塞吗？

终于考试完了，今天突然想起来前阵子找实习的时候，今日头条面试官问我，js执行会阻塞DOM树的解析和渲染，那么css加载会阻塞DOM树的解析和渲染吗？所以，接下来我就来对css加载对DOM树的解析和渲染做一个测试。为了完成本次测试，先来科普一下，如何利用chrome来设置下载速度打开chrome控制台(按下F12),可以看到下图，重点在我画红圈的地方点击我画红圈的地方(No throttling),会看到下图,我们选择GPRS这个选项这样，我们对资源的下载速度上限就会被限制成20kb/s，好，那接下来就进入我们的正题 css加载会阻塞DOM树的解析渲染吗？用代码说话： <!DOCTYPE html> <html lang="en"> <head> <title>css阻塞</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> h1 { color: red !important } </style> <script> function h () { console.log(document.querySelectorAll('h1')) } setTimeout(h, 0) </script> <link href

移动端性能优化（CSS性能优化）

阅读更多关于移动端性能优化（CSS性能优化）

CSS性能优化 CSS选择器优化如果可以直接选中元素，不需要加一些多余的修饰 /*不要使用类选择器和ID选择器修饰元素标签，这样多此一举，还会降低效率。*/ div#slider.slider { } 一般来说，class用于样式，id用于js，因为id定义的样式不利于复用保证不会误选的情况下，尽量保持简单避免冲突可以在命名时区分好 /*保持简单，不要使用嵌套过多过于复杂的选择器*/ /*浏览器从右向左解析CSS*/ /*.slider .slider-item-container .slider-item .slider-link .slider-img { width: 100%; }*/ .alex-slider-img { /*嵌套少*/ /*权重低便于使用的时候覆盖*/ width: 100%; } 尽量少用通配符选择器，可以单独写出来，罗列出来 /*避免通配选择器*/ * { } ul, li, dl, dt, dd, p { padding: 0; margin: 0; } 不必要的样式和没有用到的样式直接删除即可 /*移除无匹配的样式*/ .slider { /*width: 100%;*/ } 高级选择器少用（类似正则的），还有属性选择器，性能并不高但是必须的情况下可少量使用 /*避免类正则的属性选择器*/ [class*="slider

css权重

阅读更多关于 css权重

除了浮动之外，css权重问题是你要了解的，最复杂的一个概念之一。css每条规则权重的不同，是你所期望的效果，没有通过css规则在元素上生效的主要原因。为了减少调试bug的时间，你需要了解浏览器是怎样解析你的代码的。为了完成这个目标，你需要对权重是如何工作的，有一个清楚的认识。很多Css出现问题的场景，都是某处定义了一个更高权重的规则，导致此处规则不生效。 Css权重问题并不简单，而且有很多或具体或抽象的理论来解释这个问题。本文也将探讨这个问题，我相信如果你喜欢星球大战的话你肯定会理解这些概念的~ 我们将会讨论关于css权重的主要问题，包括例子，规则，原理，通用解决方案以及一些资源。 CSS权重：概述权重决定了哪一条规则会被浏览器应用在元素上。权重的不同，是你所期望的效果，没有通过css规则在元素上生效的主要原因。权重的级别划分时包含了所有的css选择器如果两个选择器作用在同一元素上，则权重高者生效。权重的级别根据选择器被划分为四个分类：行内样式，id，类与属性，以及元素。你可以通过 CSS权重之争进一步了解CSS权重。你也可以通过 CSS Specificity for Poker Players 进一步了解CSS权重。如果两个选择器权重值相同，则最后定义的规则被计算到权重中(后面定度的CSS规则权重要更大，会取代前面的CSS规则) 如果两个选择器权重值不同

订阅 css优化