css优化 | 易学教程

css sprite-网页优化技术

阅读更多关于 css sprite-网页优化技术

引自百度百科一、CSS Sprites简介　　 CSS Sprites在国内很多人叫css 精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差不多的，所以无需顾忌这个问题。　　加速的关键，不是降低重量，而是减少个数。传统切图讲究精细，图片规格越小越好，重量越小越好，其实规格大小无所谓，计算机统一都按byte计算。客户端每显示一张图片都会向服务器发送请求。所以，图片越多请求次数越多，造成延迟的可能性也就越大。二、CSS Sprites原理　　CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。三、CSS Sprites优缺点　　利用CSS Sprites能很好地减少了网页的http请求，从而大大的提高了页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；　　CSS

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

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

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

css加载会造成阻塞吗

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

本文由云+社区发表作者：嘿嘿嘿可能大家都知道，js执行会阻塞DOM树的解析和渲染，那么css加载会阻塞DOM树的解析和渲染吗？接下来，我就来对css加载对DOM树的解析和渲染的影响做一个测试。为了完成本次测试，先来科普一下，如何利用chrome来设置下载速度 \1. 打开chrome控制台(按下F12),可以看到下图，重点在我画红圈的地方点击我画红圈的地方(No throttling),会看到下图,我们选择GPRS这个选项 \2. 点击我画红圈的地方(No throttling),会看到下图,我们选择GPRS这个选项这样，我们对资源的下载速度上限就会被限制成20kb/s，好，那接下来就进入我们的正题 \3. 这样，我们对资源的下载速度上限就会被限制成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

前端工程师常见的面试题

阅读更多关于前端工程师常见的面试题

1、对WEB标准以及W3C的理解和认识？标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率使用外链css和js脚本，结构行为表现的分离文件下载与页面速度更快，内容能被更多的用户所访问，内容能被更广泛的设备所访问更少的代码和组价，容易维护，改版方便，不需要变动页面内容提供打印版本而不需要复制内容、提高网站易用性。 2、xml和html有什么区别 HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言最主要的不同是： XHTML元素必须被正确地嵌套 XHTML元素必须被关闭标签名必须用小写 XHTML文档必须拥有根元素 3、doctype（文档类型）的作用是什么？你知道多少种文档类型？　　作用是：此标签可以告知浏览器文档使用哪种HTML或XHTML规范　　此标签可声明三种DTD类型，分别表示严格版本、过渡版本以及基于框架的HTML文档 HTML4.01规定了三种文档类型：Strict、Transition以及Frameset XHTML1.0 规定了三种XML文档类型：Strict、Transitional以及Frameset Standards（标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，而Quirks（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页 4、行内元素有哪些？块级元素有哪些

前端面试题四

阅读更多关于前端面试题四

面试有几点需注意：面试题目：根据你的等级和职位的变化，入门级到专家级，广度和深度都会有所增加。题目类型：理论知识、算法、项目细节、技术视野、开放性题、工作案例。细节追问：可以确保问到你开始不懂或面试官开始不懂为止，这样可以大大延展题目的区分度和深度，知道你的实际能力。因为这种知识关联是长时期的学习，临时抱佛脚绝对是记不住的。回答问题再棒，面试官（可能是你面试职位的直接领导），会考虑我要不要这个人做我的同事？所以态度很重要、除了能做事，还要会做人。（感觉更像是相亲( •̣̣̣̣̣̥́௰•̣̣̣̣̣̥̀ )）资深的前端开发能把absolute和relative弄混，这样的人不要也罢，因为团队需要的是：你这个人具有可以依靠的才能（靠谱）。前端开发知识点： HTML&CSS：对Web标准的理解、浏览器内核差异、兼容性、hack CSS基本功：布局、盒子模型、选择器优先级 HTML5、CSS3、Flexbox JavaScript：数据类型、运算、对象、Function、继承、闭包、作用域、原型链、事件、RegExp、JSON、Ajax、 DOM、BOM、内存泄漏、跨域、异步装载、模板引擎、前端MVC、路由、模块化、Canvas、ECMAScript 6、Nodejs 其他：移动端、响应式、自动化构建、HTTP、离线存储、 WEB安全、优化、重构团队协作、可维护

关于前端学习路线的一些建议

阅读更多关于关于前端学习路线的一些建议

前言对于刚开始学习前端的伙伴俩说，问得最多的问题就是 ——前端技术现在如此繁杂，我到底应该如何学习。这个话题太大了，几句话回答不好；也由于这个问题确实困扰了很多前端开发人员，所以我也就着手系统的输出这篇文章。虽然这篇文章花了很长时间，肯定也有其局限性；希望各位不吝指出。入题我们俨然能感受到前端岗位现在已经发展成了最重要的研发岗位之一，所以对我们提出的要求也就越来越高。所以我们需要学的也就不仅仅只是CSS&HTML&JavaScript了。但这三大件一直都是前端的根本，这一点从未改变。而这三大件中JavaScript又是重中之重。接下来我会结合我的一点经验，给出前端学习路线的一些具体建议。目录三大件学习库工具前端框架（ MVVM ）的学习浏览器 & 计算机基础前端工程化性能优化 Nodejs 数据结构和算法依葫芦画瓢三大件学习现在每年依旧有很多初级入门的前端开发。所以对初入门的朋友也给出一点意见。刚入门的朋友，我觉得不应该一开始就学习像Vue、TypeScript、Webpack等知识。应该把重点放在CSS&HTML&JavaScript基础知识的学习上。 CSS & HTML 对于刚入门的朋友我依旧建议先将CSS(3)&HTML(5)的知识点认真学习一遍。学习的途中最好是学习完一部分就自己在敲一遍代码，加深自己的记忆。当然如果你愿意

优化提高CSS性能的方法有哪些？

阅读更多关于优化提高CSS性能的方法有哪些？

避免过度约束避免后代选择符避免链式选择符使用紧凑的语法避免不必要的命名空间避免不必要的重复最好使用表示语义的名字。一个好的类名应该是描述他是什么而不是像什么避免！important，可以选择其他选择器尽可能的精简规则，你可以合并不同类里的重复规则修复解析错误避免使用多类选择符移除空的css规则正确使用display的属性：由于display的作用，某些样式组合会无效，徒增样式体积的同时也影响解析性能。 display:inline后不应该再使用width、height、margin、padding以及float。 display:inline-block后不应该再使用float。 display:block后不应该再使用vertical-align。 display:table-*后不应该再使用margin或者float。不滥用浮动：虽然浮动不可避免，但不可否认很多css bug是由于浮动而引起。不滥用web字体对于中文网站来说Web Fonts可能很陌生，国外却很流行。web fonts通常体积庞大，而且一些浏览器在下载web fonts时会阻塞页面渲染损伤性能。不声明过多的font-size：这是设计层面的问题，设计精良的页面不会有过多的font-size声明。不在选择符中使用ID标识符，主要考虑到样式重用性以及与页面的耦合性。不给h1

如何写出优雅的css代码？

阅读更多关于如何写出优雅的css代码？

如何写出优雅的css代码？　　对于同样的项目或者是一个网页，尽管最终每个前端开发工程师都可以实现相同的效果，但是他们所写的代码一定是不同的。有的优雅，看起来清晰易懂，代码具有可拓展性，这样的代码有利于团队合作和后期的维护；而有的混乱，虽然表达出了最终的效果，然而却晦涩难懂，显然团队成员在读这样的代码时就显得无从下手，更不利于后期的维护了。那么如何写出优雅的代码呢？下面我将以一个很小的项目就以下几个方面简单的表达一下自己的看法，如有不妥，望批评指正。如何整理一个项目。如何写出清晰易懂的HTML代码。如何写出优雅的css代码（重点）。第一部分：如何整理一个项目。　　当我们接手一个表白墙的小项目时，怎么去分类整理呢？是把所有的html文件、css文件、js文件和图片等等混乱的放在一起？好吧，那就看看这样是什么效果吧？　　可能你会觉得这没有什么啊？文件都可以找到啊，但是你试图在sublime编辑器中打开看看是什么效果：　　（补充说明：博友@Tabweng 建议文件名不要使用中文而尽量使用英文，在此表示感谢，希望大家也可以注意这个问题。）　　有没有觉得很混乱呢?！此外，如果项目更大了呢？你需要的html文件、css文件、js文件、以及图片的需求量更大了呢？你还能保证可以顺利的找出每一个你想要的文件并编辑吗？显然显然是否定的。所以对于这种项目

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="https:/

CSS常用选择器（通配符选择器，标签选择器，类选择器，id选择器.....），你知道多少？

阅读更多关于 CSS常用选择器（通配符选择器，标签选择器，类选择器，id选择器.....），你知道多少？

CSS常用选择器 CSS选择器的作用是从HTML页面中找出特定的某类元素，而常用的CSS选择器有如下几类，一起来看看吧！一、通配符选择器通配符选择器常用 ‘*’ 号表示，它是所有选择器里作用范围最广的，能匹配页面中所有的元素。基本语法格式：*{ 属性1：属性值1；属性2：属性值2；} 例子使用该选择器定义样式，清除所有HTML标记的默认边距。 *{ margin：0； /*定义外边距*/ padding：0； /*定义内边距*/ } 但实际开发中不建议使用通配符选择器，因为它设置的样式对所有的HTML标记都生效，不管标记是否需要该样式，反而降低了代码的执行速度。二、标签选择器标签选择器是指用HTML标记名称作为选择器，按标记名称分类，为页面中某一类标签指定统一的CSS样式。基本语法格式：标签名{ 属性1：属性值1；属性2：属性值2；} 所有的HTML标记名都可以作为标签选择器，例如a、body、p、h1等等。用标签选择器定义的样式对页面中该类型的所有标签都有效。例子使用p选择器定义HTML页面中所有段落的样式。 p{ font-size: 12px; color: #666; font-family:"微软雅黑"; } 标签选择器最大的优势是能快速为页面中同类型的标签统一样式，同时这也是它的缺点，不能设计差异化样式。三、类选择器类选择器使用**‘.’**

订阅 css优化