css优化

前端是庞大的，包括 HTML、 CSS、 Javascript、Image 、Flash等等各种各样的资源。前端优化是复杂的，针对方方面面的资源都有不同的方式。那么，前端优化的目的是什么 ? 　　1. 从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好的体验。 　　2. 从服务商角度而言，优化能够减少页面请求数、或者减小请求所占带宽，能够节省可观的资源。 　　总之，恰当的优化不仅能够改善站点的用户体验并且能够节省相当的资源利用。 　　前端优化的途径有很多，按粒度大致可以分为两类，第一类是页面级别的优化，例如 HTTP请求数、脚本的无阻塞加载、内联脚本的位置优化等 ;第二类则是代码级别的优化，例如 Javascript中的DOM 操作优化、CSS选择符优化、图片优化以及 HTML结构优化等等。另外，本着提高投入产出比的目的，后文提到的各种优化策略大致按照投入产出比从大到小的顺序排列。 　　 一、页面级优化 　 　 1. 减少 HTTP请求数 　　这条策略基本上所有前端人都知道，而且也是最重要最有效的。都说要减少 HTTP请求，那请求多了到底会怎么样呢 ?首先，每个请求都是有成本的，既包含时间成本也包含资源成本。一个完整的请求都需要经过 DNS寻址、与服务器建立连接、发送数据、等待服务器响应、接收数据这样一个 “漫长” 而复杂的过程

来源于:trigkit4 css学习归纳总结（一） 选择器的分组 CSS选择器分为 1.群组选择器 如：p, body, img, div{} 2.兄弟选择器 如：p + p { color:#f00; } 3.属性选择器 如： p[title] { color:#f00; } 4.包含（后代）选择器 如：body ul li{} 5.子元素选择器 如：div > p{} 6.ID选择器 如：#myDiv{} 7.类选择器 如：.class1{} 8.伪元素选择器 如：E:first-line，E:before 9.伪类选择器 如：E:first-child ，E:visited，E:focus，E:enabled 10.标签选择器 如：p { font-size:1em; } 子选择器和后代选择器的区别： 后代选择器的写法就是把外层的标记写在前面，内层的标记写在后面，之间用空格分隔。 子选择器只对直接后代有影响的选择器，而对“孙子后代”以及多层后代不产生作用。 注意：在IE6中，只支持后代选择器，不支持子选择器 盒子模型 css框模型介绍： 给 ul 下的 li 设置宽度，那么他们将平均掉它们所占容器的宽度。 div >ul> li> a 标签所占宽度和高度： 当你为 body 元素指定 div 时，每个 div 默认的宽为浏览器的100%，高度在每个浏览器的解析都是不一样的

下面我们开始介绍 实践型的4个优化技巧 ，先从首屏关键CSS开始。 1. 内联首屏关键CSS（Critical CSS） 性能优化中有一个重要的指标——首次有效绘制（First Meaningful Paint，简称FMP）即指页面的首要内容（primary content）出现在屏幕上的时间。这一指标影响用户看到页面前所需等待的时间，而**内联首屏关键CSS（即Critical CSS，可以称之为首屏关键CSS）**能减少这一时间。 大家应该都习惯于通过link标签引用外部CSS文件。但需要知道的是，将CSS直接内联到HTML文档中能使CSS更快速地下载。而使用外部CSS文件时，需要在HTML文档下载完成后才知道所要引用的CSS文件，然后才下载它们。所以说，内联CSS能够使浏览器开始页面渲染的时间提前，因为在HTML下载完成之后就能渲染了。 既然内联CSS能够使页面渲染的开始时间提前，那么是否可以内联所有的CSS呢？答案显然是否定的，这种方式并不适用于内联较大的CSS文件。因为 初始拥塞窗口 3存在限制（TCP相关概念，通常是 14.6kB，压缩后大小），如果内联CSS后的文件超出了这一限制，系统就需要在服务器和浏览器之间进行更多次的往返，这样并不能提前页面渲染时间。因此，我们应当只将渲染首屏内容所需的关键CSS内联到HTML中。 既然已经知道内联首屏关键CSS能够优化性能了

前面的话 　　CSS是前端工程师的基本功，但好多执迷于学习javascript的人的基本功并不扎实。可能一些人从w3school网站匆匆过了一遍，只是对CSS常用概念有一些表面上的理解，就一头扎进javascript的深坑里跳不出来。实际上，javascript中比较复杂的逻辑很有可能使用CSS几行样式就能解决问题，而且性能还好。 　　CSS之所以能成为一门优雅的语言，以及有其对应的重构工程师的岗位，是因为这本语言本身就有很强的存在价值，且真正要理解它并不容易。从 CSS禅意花园 开始，写CSS成为一种艺术。从CSS2.1到3再到4，CSS所涵盖的内容及可实现的功能得到了极大的丰富，使得CSS的学习成本也越来越高。再多的知识，一个知识点一个知识点去学，总能学明白。 　　小火柴将CSS的知识体系进行了梳理和归纳，总结成以下目录 基础 基础语法 　　 引入CSS 　　 选择器 　　 选择器新用法 　　 层叠 　　 单位 　　 样式关键字 　　 calc() 　　 默认可继承样式 　　 CSS Why 　　 变量Variable 　　 属性速查表 兼容 　　 CSS Hack 　　 CSS兼容性详解 　　 haslayout 伪类伪元素 　　 伪元素 　　 计数器 　　 伪类 规范 　　 CSS reset 　　 CSS命名实践 　　 CSS规范 　　 命名规范 　　 CSS编码技巧 　

网页打开速度慢慢的所造成的影响很重大的，因此站长对于网页打开速度的在意程度也是不断的在加重。但是站长不知道除了外部环境（带宽速度）会影响网页的打开速度之外，网站内部也是存在有影响因素的，不过站长可以通过优化从而提高网页的打开速度。所以香港葵芳IDC小编今天就为大家科普下，优化网页打开速度的内容有哪些。 　　 　　1、缩小Javascript和CSS文件 　　 　　如果你的网站大约有50-60%!的(MISSING)用户是第一次访客，那么这些人会下载Javascript和CSS，如果这些文件很大浏览器会下载很长时间。使用压缩工具可以减少Javascript和CSS尽一半的文件大小。同时，使用香港服务器时，我们要开启缓存机制，使用户首次访问时，将图片、CSS和Javascript在其浏览器缓存，这样他们下一次访问就特别快。Apache Web服务器，可以使用mod_cache模块开启缓存。 　　 　　2、减少HTTP请求 　　 　　小编告诉你浏览器会花费80%!的(MISSING)时间获取外部元件，包括脚本、样式表、图像等，只有20%!的(MISSING)时间用来加载内容，每个网站都会有许多HTTP请求，由于只有2个HTTP请求可以在同一时间传送，所以请求一旦过多就会造成延迟。通过Yslow等网站性能评分工具可以查看你的网站HTTP请求数，可以看到JS、CSS和CSS引用的图片文件过多

网页打开速度慢慢的所造成的影响很重大的，因此站长对于网页打开速度的在意程度也是不断的在加重。但是站长不知道除了外部环境（带宽速度）会影响网页的打开速度之外，网站内部也是存在有影响因素的，不过站长可以通过优化从而提高网页的打开速度。所以香港葵芳IDC小编今天就为大家科普下，优化网页打开速度的内容有哪些。 　　 　　1、缩小Javascript和CSS文件 　　 　　如果你的网站大约有50-60%!的(MISSING)用户是第一次访客，那么这些人会下载Javascript和CSS，如果这些文件很大浏览器会下载很长时间。使用压缩工具可以减少Javascript和CSS尽一半的文件大小。同时，使用香港服务器时，我们要开启缓存机制，使用户首次访问时，将图片、CSS和Javascript在其浏览器缓存，这样他们下一次访问就特别快。Apache Web服务器，可以使用mod_cache模块开启缓存。 　　 　　2、减少HTTP请求 　　 　　小编告诉你浏览器会花费80%!的(MISSING)时间获取外部元件，包括脚本、样式表、图像等，只有20%!的(MISSING)时间用来加载内容，每个网站都会有许多HTTP请求，由于只有2个HTTP请求可以在同一时间传送，所以请求一旦过多就会造成延迟。通过Yslow等网站性能评分工具可以查看你的网站HTTP请求数，可以看到JS、CSS和CSS引用的图片文件过多

css样式初始化 normalize在vue中使用 1、Normalize.css只是一个很小的css文件，但它在磨人的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset,Normalize.css是一种现代的、为HTML5准备的优质替代方案。总之，Normalize.css是一种CSS reset的替代方案。 2、作用： 保护有用的浏览器样式而不是去掉他们。 为大部分HTML元素提供一般化的样式 修复浏览器自身的bug并保证各浏览器的一致性。 优化css可用性 用注释和详细的文档来解释代码 Normalize支持包括手机浏览器在内的超多浏览器，同时对HTML5元素、排版、列表、嵌入的内容、表单和表哥都进行了一般化。尽管这个项目基于一般化的原则，但我们还是在合适的地方使用了更实用的默认值。 3、使用方式 安装 npm install --save normalize.css main.js引入 import 'normalize.css/normalize.css' 如果引入报错，可能没有安装css-loader 和style-loader npm install css-loader style-loader 来源： https://www.cnblogs.com/wangchangli/p/11414092.html

第一章 打开网站慢现状分析 在公司访问部署在 IDC 机房的 VIP 网站时会感觉很慢。是什么原因造成的？为了缩短页面的响应时间，改进我们的用户体验，我们需要知道用户的时间花在等待什么东西上。 可以跟踪一下我们的登录页面，如下图所示 从上图我们可以分析知道， HTML 文档只占了总响应时间的 20% ，其它 80% 响应时间用来下载 JS 、 CSS 、图片等组件。所以 WEB 前端有很大的优化空间，我们将从 WEB 的前端优化、后端优化两方面综合考虑给出 WEB 的性能优化方案。 第二章 WEB 前台的优化规则 一、 尽量减少 HTTP 请求 有几种常见的方法能切实减少 HTTP 请求： 1 、 合并脚本跟样式文件，如可以把多个 CSS 文件合成一个，把多个 JS 文件合成一个。 2 、 CSS Sprites 利用 CSS background 相关元素进行背景图绝对定位 , 把多个图片合成一个图片。 二、 使用浏览器缓存 在用户浏览网站的不同页面时，很多内容是重复的，比如相同的 JS 、 CSS 、图片等。如果我们能够建议甚至强制浏览器在本地缓存这些文件，将大大降低页面产生的流量，从而降低页面载入时间。 根据服务器端的响应 header ，一个文件对浏览器而言，有几级不同的缓存状态。 1 、服务器端告诉浏览器不要缓存此文件，每次都到服务器上更新文件。 2

1.XHTML和HTML有什么区别 HTML是一种基本的WEB网页设计语言，XHTML是一个基于XMl的置标语言 最主要的不同 XHTML元素必须被正确地嵌套。 XHTML元素必须被关闭 标签名必须用小写字母 XHTMl文档必须拥有根元素 2.什么是语义化的HTML？ 直观的认识标签对于搜索引擎的抓取有好处，用正确的标签做正确的事情！ HTML语义化就是让页面的内容结构化，便于对浏览器，搜索引擎解析； 在没有样式css情况下也以一种文档格式显示，并且是容易阅读。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于SEO。 在阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。 2（1）、简述一下你对HTML语义化的理解？ 1、用正确的标签做正确的事情。 2、html语义化让页面的内容结构化，结构更清晰，便于对浏览器，搜索引擎解析； 3、即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的； 4、搜索引擎的爬虫也依赖于HTML标记确定上下文和各个关键字的权重，利用SEO; 5、使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。 3.常见的浏览器内核有哪些？ Trident内核：IE,MaxThon,TT,The Word,360,搜狗浏览器等。[又称为MSHTML] Gecko内核：Netscape6及以上版本，FF,MozillaSuite

一，前言 学校这边的项目刚组建好开发团队，前一段时间都在考虑如何前后端分离，如何多人协作开发的问题，恰好上一周陪女朋友去承德写生，能暂时放下工作和学校的事物，有了更多的思考时间。假期期间学习了webpack，并将前端代码进行了迁移，实现了前后端分离。 而 最近上线的时候发现打包压缩后的js包达到了477k,首屏渲染时间高达4s ，首屏渲染时间超过1.5s都是不能忍的，于是开始尝试研究一下webpack，毕竟只看了几个小时就拿来用了。 剧透，剧透，后面优化到284k，首屏渲染1.5s-2s。 这个时候想起以前boss和我聊职业规划的时候说过， “会用一项技术的人有很多，而出了问题懂得最大程度优化处理的人却没几个” ，虽然他举的例子是搜索引擎优化，要高大上得多，但深入学习，积极对待的心态是一样的。谢谢他的引导。 二，思路 前面啰嗦有点多，下面简单说说这次优化的思路。要想解决问题，必先了解问题，我去看了打包后的js，发现了一些问题及优化点。 js确实混淆压缩了，可是里面含有大量的开源库的copyright信息，可以去掉。 （开源大牛们要相信我是尊重以及无敌崇拜你们的，为了性能暂时去掉这些信息，后期会在产品上单开一个页面说明自己用了哪些库以及给出链接 （Facebook和Instagram都这样） ） 引入的React没有切换到产品版本，React给出了下面的提示，良心！ Warning: