css优化

一、前端编程 1. 你能描述一下渐进增强和优雅降级之间的不同吗? 答: 定义: 优雅降级（graceful degradation): 一开始就构建站点的完整功能，然后针对浏览器测试和修复 渐进增强（progressive enhancement): 一开始只构建站点的最少特性，然后不断针对各浏览器追加功能。 都关注于同一网站在不同设备里不同浏览器下的表现程度 区别: “优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站. 而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。 “渐进增强”观点则认为应关注于内容本身。请注意其中的差别： 我甚至连“浏览器”三个字都没提 。 理解: "优雅降级"就是首先完整地实现整个网站,包括其中的功能和效果. 然后再为那些无法支持所有功能的浏览器增加候选方案, 使之在旧式浏览器上以某种形式降级体验却不至于完全失效. "渐进增强"则是从浏览器支持的基本功能开始, 首先为所有设备准备好清晰且语义化的html及完整内容, 然后再以无侵入的方法向页面增加无害于基础浏览器的额外样式和功能. 当浏览器升级时, 它们会自动呈现并发挥作用. 　　参考自: 渐进增强、优雅降级 渐进增强和优雅降级 2. 浏览器兼容问题: 问题1

简介 Firebug 是 Mozilla Firefox 浏览器的开源扩展，提供了很多工具，可以监视、编辑和调试任何 Web 站点的级联样式表（CSS）、HTML、文档对象模型（DOM）和 JavaScript。Firebug 包括一个 JavaScript 控制台、一个日志记录 API 以及一种有用的网络监视器。借助 Firebug，可以很轻松地调试和优化 Web 和 Ajax 应用程序。 本文将帮助您熟悉所如下的 Firebug 特性： 编辑活动 Web 页面的 HTML、CSS 和 JavaScript 调试和剖析报告 进行日志记录以测试执行时间 使用 Network Monitor 分析 Web 页面的加载时间 错误报告 立即开始 使用 Firefox， 下载 Firebug 。通过单击页面右侧的橙色按钮 Install Firebug 安装此扩展。 Firefox 安装了此扩展后，重启浏览器。要使用 Firebug： 转到任何一个 Web 页面并按 F12 在浏览器窗口打开 Firebug。 按 CTRL-F12 在另一个窗口打开 Firebug（如果有两个监视器，这是一个很好的特性）。 本文使用了第一种方法在相同的浏览器窗口中打开 Firebug，如图 1 所示： 图 1. 安装后的 Firebug 安装后，Firebug 是禁用的。单击 Enable Firebug

1. 优化方面： 网络 构建 服务端 浏览器渲染 2. 设计功能： 资源合并与压缩 关键点：减少http请求数 和 请求资源大小 cs 和 bs： cs架构gui软件的开发和部署 andriod：把代码打成apk包（发布一个apk包），用户下载并运行 bs架构（web前端） 代码发布到webserver/cdn 用户输入网址，浏览器发送http请求 具体方法： （1）dns信息进行缓存 （2）缓存dns减少dns查询时间 使用cdn解决静态资源、网络选择和缓存问题，但是去掉cookie（httpRequestHeader） 为什么携带上cookike： cdn域名和网站域名相同 所以，cdn域名不要和主站一样，防止访问cdn时携带主站cookie （3）接口 在浏览器上做缓存策略 （4）将多次http请求合并成一次，减少相同的网络消耗 （5）服务端做相应渲染 （6）相同的静态资源缓存 （7）走最近的网络环境 html压缩：压缩空格、制表符、换行符、html注释 手段： 在线网站、html-minifier、后端模板引擎渲染压缩 css压缩： 在线网站、html-minifier、clean-css js压缩： 在线网站、html-minifier、uglifyjs2 文件合并： 首屏渲染： 合并后的js大，加载慢 缓存失效： MD5戳，一个改动，整个文件都变 手段： 公共库合并

singsong: 文本是自己看了一些不错资料整理出来的，对该知识点感兴趣的同学可以查看 参考文章 小节。 ✏️最新内容请以github上的为准❗️ 为什么要写这篇文章？ 主要为 CSS 优化工作打一下基础。要编写高性能的网站和应用，除了确保编写的代码尽可能高效地运行外，还需要确保页面性能，刷新频率尽量到达 60FPS。这就需要了解浏览器是如何进行渲染的。而浏览器渲染与 CSS 密切相关，因此只有了解其中工作原理才能让 CSS 更好地工作。 另外，接下来会出一篇优化实战文章，会涉及 JavaScript 和 CSS 一些优化。其中关于 JavaScript 的优化之前已进行过介绍： 常见的 JavaScript 内存泄露 。本文是对 CSS 优化进行一个补充。 Contents 浏览器 DOM tree CSSOM tree RenderObject tree(也称为 Render tree) Layout(布局) RenderLayer tree Rendering(渲染方式) GrphicsLayer tree Tiled Rendering(瓦片渲染) High Performance Animations(流畅动画) 总结 参考文章 浏览器 用户界面(User Interface)：包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口显示的您请求的页面外

::-webkit-scrollbar-track-piece { -webkit-border-radius: 0 } ::-webkit-scrollbar { width: 5px; height: 10px } ::-webkit-scrollbar-thumb { height: 50px; background-color: #b8b8b8; -webkit-border-radius: 6px; outline-offset: -2px; filter: alpha(opacity = 50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5 } ::-webkit-scrollbar-thumb:hover { height: 50px; background-color: #878987; -webkit-border-radius: 6px } 来源： https://blog.csdn.net/qq_40735186/article/details/98748774