css样式表

在讲前端性能优化前，先了解下一个网站在浏览器端是如何渲染的 1、首先输入url地址 2、浏览器根据url向服务器发送http请求 3、服务器端接收请求并返回html代码返回浏览器 4、浏览器接收html代码并解析生成页面 5、解析页面过程 　　a、HTML文档生成DOM和CSS生成CSSOM 　　b、DOM和CSSOM生成RenderTree 　　c、有了RenderTree知道了浏览器中有那些节点，各个节点的CSS定义绘制成layout render tree 　　d、有了layout render tree 浏览器使用浏览器UI绘制每个节点生成 paint render tree 资源的合并和压缩 　　减少http请求，减少请求资源的大小 　　 html压缩 　　　　html压缩是压缩文本中空格，制表符，换行符，注释等 　　 css压缩 　　　　无效代码删除 　　　　代码合并 　　js的压缩和混乱 　　　　无效字符删除，注释 　　　　代码语义的缩减和优化 　　　　代码保护 　　 文件合并 　　　　减少http请求 　　　　问题 　　　　　　首屏加载慢 　　　　　　缓存失效问题 　　　　方案 　　　　　　公共库合并 　　　　　　不同页面的合并 　　 开启gzip 图片先关优化 　　 png8/png24/png32之间的区别 　　　　png8 支持透明，文件大小小 　　　

一.概述 层叠样式表;可以对HTML的元素,进行控制,使HTML的元素展现的效果和位置更好; 二.基本语法 css规则由两个部分构成:选择器和语句 语句规则: 1.css选择器的名称区分大小写;属性名和属性值区分大小写; 2.每条语句的结尾都要使用;,最后一行可以省略; 3.注释格式:/**/ 4.css在html中写的代码需要使用style标签包裹起来; 5.如果单独写一个css文件,则不需要使用style标签,所有的语句需要使用大括号包裹起来; 6.如果属性值中包含空格,必须使用双引号包裹起来; 7.如果一个属性名对应多个属性值,多个属性值用空格隔开; 8.css文件的后缀名.css; 三.格式: 选择器{ 属性名: 属性值; 属性名: 属性值; 属性名: 属性值; ........... } 四.选择器 1.ID选择器 #id的属性值{ 属性名: 属性值; 属性名: 属性值; ..... } 2.类选择器 .class属性的属性值{ 属性名: 属性值; 属性名: 属性值; ..... } 3.元素选择器(标签选择器) 标签名{ 属性名: 属性值; 属性名: 属性值; ..... } 4.属性选择器 标签名[属性名=属性值]{ 属性名: 属性值; .... } 5.包含选择器 基本选择器 标签名{ 属性名: 属性值; .... } 四.与html整合的方式 1

　　先让我们看看一张网页是怎么来的，也就是从用户输入完一个网址点下“ENTER”键到整个页面加载出来中间发生了什么。首先我们了解下HTTP过程： 一、寻找IP（每一步都是在上一步没找到的情况下进行的） 本地阶段： 1、浏览器搜索自身缓存； 2、搜索操作系统自身的DNS缓存； 3、地区本地HOST文件； 4、浏览器发送DNS系统调用； 路由阶段： 1、宽带运营商服务器查看本地缓存； 2、运营商服务器发起一个迭代DNS解析请求； com -> baidu.com -> www.baidu.com 3、运营商服务器把结果返回给操作系统内核同时缓存起来； 4、操作系统内核把结果返回个浏览器 浏览器得到IP了。 二、建立连接并获取内容 1、发起HTTP三次握手，建立TCP/IP连接； 2、发起HTTP请求； 3、服务器端读取数据库并处理数据后返回页面内容； 这样获得了一个页面，但是页面的js文件、css文件、图片都要经过这样的过程！ 4、渲染页面； 我们写baidu.com和www.baidu.com同样都会跳转到百度首页，但是baidu.com是经过了一次301页面跳转到www.baidu.com的，多了一次DNS查询； 常见状态码： 1xx 请求已接受 2xx 处理完毕 3xx 重定向 4xx 客户端错误 5xx 服务器端错误 200 OK成功 400 客户端语法错误 401

1. 减少http请求数 合并文件，通过把所有脚本置于一个脚本文件里或者把所有样式表放于一个样式表文件中，从而减少Http请求的数量。 CSS Sprites是减少图片请求的首选方案。把所有的背景图片合并到一张图中，使用CSS的background-image 和background-position 属性去控制展现恰当的图片区域。 内联图片使用data: URL scheme 把图片数据嵌入页面，但这会增加Html文档的大小。 2. 使用内容分布式网络 内容分布式网络（CDN）是一系列分布在不同地域的服务器的集合，能够更有效的给用户发送信息。它会根据一种衡量网域距离的方法，选取为某个用户发送数据的服务器。比如，到达用户最少跳或者最快相应速度的服务器会被选中。 3. 给头部添加一个失效期或者Cache-Control 对于静态组件：把头部的缓存期设为某个遥远的未来，使其能够“永不过期”。 对于动态组件：使用适当的Cache-Control头部帮助浏览器执行特定的请求。 4. Gzip压缩组件 在HTTP请求的头部中Accept-Encoding指定的压缩格式： ν Accept-Encoding: gzip, deflate ν Content-Encoding: gzip 5. 把样式表放在前面 把样式表挪到文档的头部可以让页面的加载显得更快

1、外 部文件引用 方式 ；(推荐使用) 2、使用@import引用外部 CSS 文件; 3、内部文档头 方式 也叫内嵌法调用； 4、直接插入式也叫行 内样式。 它们主要的差别在于它们规定的风格使用的范围不同： 　　 一、外部文件引用 方式 　　外部文件引用 方式 即将CSS写成一个文件，在HTML文档头通过文件引用来进行风格控制。 　　也就是把写好的CSS 属性 的文件保存为文件扩展名为.CSS文件。 　　CSS文件的引用是在HTML的标记之间写下列语句： <link rel="stylesheet" href="CSS/test.CSS"> 如当前文件目录下有一CSS 文件名为myStyle.css，内容如下： P{ font-family:'宋体'; 　　font-size:9pt; 　　color:blue; } 　　H2{ font-family:'宋体'; 　　font-size:13pt; 　　color:red; 　　} 　　则在引用是，用下列语句: <link rel="stylesheet" href="CSS/test.CSS"> 　当然，你可以复制这句，然后改下引用文件的路径及文件名就可以了。 　　应用CSS文件的一个最大好处就是，你可以在每个HTML文件中引用这个文件，从而可使整个站点的HMTL文件在风格上保持一致，避免重复的CSS属性设置； 　　另外

样式表: CSS 一般称是 层叠式样式表 平常看到的 <div class=""></div> 或者<div style=""></div> 那是 样式表的位置位置不一样 我们一看到style 就知道是一个样式表。 样式表的位置： 内联 写在标签里面，例如< div style="元素属性"></div> 内嵌 写在head里面 外部 另外单独新建一个css文件，后缀名.css 作用：决定了页面有哪些样式，例如内容字体的大小 颜色 位置 等等一些样式，决定了页面什么样子，排列的什么样。 所以html决定的内容，css决定样子，javascript决定细节。 内联：{ 写在标签里面 style="样式属性" 控制精确，但是重用性差 优先级最高 } 内嵌：{ 嵌在页面head里面 <style type="text/css"> .div{样式属性} </style> 控制没有内联精确，代码重用性好 优先级第二高 } 外部：{ 单独创建新文件css文件，后缀名.css 引入HTML文件代码是：<link href="文件名.css" rel="stylesheet"/> （或者把文件拖进HTML文件代码head里面） 控制没有内嵌精确，代码重用性最好 优先级最低 } .css文件 注释是 /* 内容*/ 来源： https://www.cnblogs.com/zhangwei99com

请求数量 ——合并脚本和样式表，CSS Sprites，拆分初始化负载，划分主域 请求带宽 ——开启Gzip，精简JavaScript，移除重复脚本，图像优化 缓存利用 ——使用CDN，使用外部JavaScript和CSS，添加Expires头，减少DNS查找，配置ETag，使Ajax可缓存 页面结构 ——将样式表放在顶部，将脚本放在底部，尽早刷新文档的输出 代码校验 ——避免CSS表达式，避免重定向 1. JavaScript 压缩和模块打包 2. 按需加载资源 3. 在使用 DOM 操作库时使用 array-ids 4. 缓存 5. 启用 HTTP/2 6. 应用性能分析 7. 使用负载均衡方案 8. 为了更快的启动时间考虑一下同构 9. 使用索引加速数据库查询 10. 使用更快的转译方案 11. 避免或最小化 JavaScript 和 CSS 的使用阻塞渲染 12. 用于未来的一个建议：使用 service workers + 流 13. 图片编码优化 14.对组件库引用的优化，缩小引用范围 更多请看 https://www.zhihu.com/question/40505685 来源： https://www.cnblogs.com/lh-1991/p/8854370.html

1.请求数量：合并脚本和样式表，css Sprites，拆分初始化负载，划分主域。 2.请求带宽：开启GZip，精简JavaScript，移除重复脚本看，图像优化，将icon做成字体。 3.缓存利用： 使用CDN，使用外部的JavaScript和CSS，添加Expires头，减少DNS查找，配置ETag，使用ajax可缓存。 4.页面结构：将样式表放在顶部，将脚本放在底部，尽早刷新文档的输出。 5.代码校验：避免CSS表达式，避免重定向。 请使用手机"扫一扫"x 来源： https://www.cnblogs.com/sunsie/p/7058685.html

小概述： 1.只有10%-20%的最终用户响应时间花在了下载HTML文档上，其余的80%-90%的时间花在了下载页面中的所有组件上【js,css,image，flash...】。 2.如果浏览器和服务器都支持的话，可以使用压缩来减小响应的大小。浏览器可以使用Accept-Encoding头来声明它支持的压缩，服务器使用Content-Encoding头来确认响应已被压缩。 3.条件GET请求 如果浏览器在其缓存中保留了组件一个副本，但并不确定它是否仍然有效，就会生成一个条件GET请求，即在请求头中使用If-Modified-Since头将最后修改时间发送给服务器，请求服务器验证该副本从最后修改时间以来有没有被更新过，如果 没有更新过，服务器会返回一个"304 Not Modified"状态码并不再发送响应体，浏览器直接使用缓存中的这个副本，从而得到一个更小且更快的响应。 请求： GET /us.js.yimg.com/lib/common/utils/2/yahoo_2.0.0-b2.js HTTP/1.1 Host: us.js2.yimg.com User-Agent: Mozilla/5.0 (...) Gecko/20061206 Firefox/1.5.0.9 Accept-Encoding: gzip,deflate If-Modified-Since: Wed, 22

Blog链接： https://blog.51cto.com/13969817 之前的blog分享的都是针对现有的CSS元素进行更改，一直都是在重新定义它们，使他们满足我们的需求，也许有些人会问为什么我们不直接创建新CSS元素，然后按照我们想要的方式定义它们，再使用它们呢？ 你可以这样操作，但并不是你想象的那么简单，在SharePoint站点上的HTML中代码是相当复杂的，有多个被调用的CSS表和多个元素类，它们可能都在一些地方被包装成一个单独的ID，这是一个复杂的网，如果修改现有的CSS，你只是在改变它的行为方式，则不会更改任何底层结构。 如果Microsoft对代码进行了更改，它们通常会重用元素名称，这意味着你自定义的CSS很有可能被保留，如果你创建自定义母版页时对站点的底层HTML进行了更改，有可能再下一次升级时它会失败或者阻止升级部署。 你只是在改变它的行为方式。如果Microsoft对代码进行了更改，它们通常会重用元素名称，这意味着您的自定义CSS定义很有可能被保留。如果你在创建自定义母版页时那样对站点的底层HTML进行更改，我几乎可以保证下一次升级时它将失败，或者阻止升级部署，这意味着要么停留在现在发行的SharePoint版本，而错过新版本的New Feature，要么需要更多的开发和维护时间。 但如果你想通过CSS更改网站一些外观也是可以的