css优化

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)：包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口显示的您请求的页面外

front-end-Doc 前端文档汇总（含代码规范、开发流程、知识分享,持续更新） 原Github地址 进去后可直接点链接查看文章 综合类 地址 前端文档基本例子 https://github.com/mgbq/front... 前端知识体系 http://www.cnblogs.com/sb1987... 前端知识结构 https://github.com/JacksonTia... Web前端开发大系概览 https://github.com/unruledboy... Web前端开发大系概览-中文版 http://www.cnblogs.com/unrule... Web Front-end Stack v2.2 https://raw.githubusercontent... 免费的编程中文书籍索引 https://github.com/justjavac/... 前端书籍 https://github.com/dypsilon/f... 前端免费书籍大全 https://github.com/vhf/free-p... 前端知识体系 http://www.cnblogs.com/sb1987... 免费的编程中文书籍索引 https://github.com/justjavac/... 智能社 - 精通JavaScript开发 http://study.163.com

在上一篇文章中我们介绍了导航相关的流程，那导航被提交后又会怎么样呢？就进入了渲染阶段。这个阶段很重要，了解其相关流程能让你“看透”页面是如何工作的，有了这些知识，你可以解决一系列相关的问题，比如能熟练使用开发者工具，因为能够理解开发者工具里面大部分项目的含义，能优化页面卡顿问题，使用 JavaScript 优化动画流程，通过优化样式表来防止强制同步布局，等等。 既然它的功能这么强大，那么今天，我们就来好好聊聊 渲染流程 。 为了能更好地理解下文，你可以先结合下图快速抓住 HTML、CSS 和 JavaScript 的含义： 从上图可以看出， HTML 的内容是由标记和文本组成。标记也称为标签，每个标签都有它自己的语意，浏览器会根据标签的语意来正确展示 HTML 内容。比如上面的标签是告诉浏览器在这里的内容需要创建一个新段落，中间的文本就是段落中需要显示的内容。 如果需要改变 HTML 的字体颜色、大小等信息，就需要用到 CSS 。CSS 又称为层叠样式表，是由选择器和属性组成，比如图中的 p 选择器，它会把 HTML 里面标签的内容选择出来，然后再把选择器的属性值应用到标签内容上。选择器里面有个 color 属性，它的值是 red，这是告诉渲染引擎把标签的内容显示为红色。 至于 JavaScript （简称为 JS），使用它可以使网页的内容“动”起来，比如上图中，可以通过

简单理解 ：repaint主要是针对某一个DOM元素进行的重绘，reflow则是回流，针对整个页面的重排。字面意思来说：repaint就是重绘，reflow就是回流。repaint和reflow的目的是：展示一个新的页面样貌。 性能消耗： 在性能优先的前提下，性能消耗 reflow大于repaint。 体现： repaint是某个DOM元素进行重绘；reflow是整个页面进行重排，也就是页面所有DOM元素渲染。 触发时机: style变动造成repaint和reflow。 不涉及任何DOM元素的排版问题的变动为repaint，例如元素的color/text-align/text-decoration等等属性的变动。 除上面所提到的DOM元素style的修改基本为reflow。例如元素的任何涉及长、宽、行高、边框、display等style的修改。 常见触发场景： 触发repaint： color的修改，如color=#ddd； text-align的修改，如text-align=center； a:hover也会造成重绘。 :hover引起的颜色等不导致页面回流的style变动。 等等太多，一时间写出来也太难想了。 触发reflow： width/height/border/margin/padding的修改，如width=778px； 动画，:hover等伪类引起的元素表现改动

现代 WEB 前端的性能优化 ——IT唐伯虎 前言：这只是一份学习笔记。 什么是WEB前端 潜在的优化点： DNS是否可以通过缓存减少DNS查询时间？ 网络请求的过程走最近的网络环境？ 相同的静态资源是否可以缓存？ 能否减少http请求的大小？ 减少http请求数 服务端渲染 涉及层面 网络层面 构建层面 服务端层面 浏览器渲染层面 基础优化：图片的编码原理、选择图片的格式、资源的合并与压缩。 进阶优化：浏览器渲染层面的优化、重绘与回流层面的优化、浏览器存储的选择与使用、浏览器端结合服务端的缓存机制。 结合服务端的优化：基于nodejs的Vue-SSR解决首屏渲染的问题。 知识点 资源的合并与压缩 目的：减少http请求数量、减少请求资源大小、减少带宽消费。 原理：通过一个入口文件（依赖的顶层），分析所有依赖，得到依赖树，最后按照依赖树，对文件进行压缩、混淆、合并、语法转换。 a) html压缩 在前端的源代码里，有些东西，只在代码里有意义，但是对于浏览器却毫无意义的。 例如：代码对齐的回车、空格、tab，代码注释。 这些东西在发布的时候可以去掉。 b) css压缩 删除回车、空格、tab，删除代码注释，css语义合并。 c) js压缩与混淆（必须） 删除回车、空格、tab，删除代码注释，代码命名和语义的缩减与优化， 达到代码保护。 d) 文件合并 · 公共库合并

处理效果 2.optimize-css-assets-webpack-plugin插件 （1）安装（下载） npm install --save-dev optimize-css-assets-webpack-plugin （2）配置config文件 引入插件： Plugins设置 assetNameRegExp: 正则表达式，用于匹配需要优化或者压缩的资源名。默认值是 /\.css$/g cssProcessor: 用于压缩和优化CSS 的处理器，默认是 cssnano. cssProcessorPluginOptions:传递给cssProcessor的插件选项，默认为{} canPrint:表示插件能够在console中打印信息，默认值是true discardComments:去除注释 来源： https://www.cnblogs.com/lanlanJser/p/11894063.html

如何才能做一个合格的前端开发者呢？ 第一，必须掌握基本的Web前端开发技术，其中包括：CSS、HTML、SEO、DOM、BOM、Ajax、Java等，在掌握这些技术的同时，还要清楚地了解它们在不同浏览器上的兼容情况、渲染原理和存在的Bug。 第二，在一名合格的前端工程师的知识结构中，网站性能优化、SEO和服务器端的基础知识也是必须掌握的。 第三，必须学会运用各种工具进行辅助开发。 第四，除了要掌握技术层面的知识，还要掌握理论层面的知识，包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持，等等。 来源： CSDN 作者： 前端碎碎念 链接： https://blog.csdn.net/zhongqw_00/article/details/88929162

据调查（?），当网页打开需要超过6秒时，绝大多数的访客都会退出，一般最好的体验是在1~2秒左右，当网页打开速度越慢时，访客对该网页就会越不信任。 Web的性能优化，其实就是想尽一切办法，将网页的加载速度提升到最快 。 从哪些方面可以做到Web性能优化？ 由于需要将网页的加载速度提升到最快，可以模拟以下场景：从访客在地址栏中输入想要访问的地址，敲下回车，到网页加载完毕。在这其中发生在浏览器背后的流程，将其列出来，应该是这样的： 查找缓存 DNS查询 建立TCP连接 发送HTTP请求 后台处理请求 接收后台响应 接收响应完成 -> HTML 查看Doctype html/html5/xml 逐行解析（阅读代码） 看到标签 在页面中渲染该标签（Firefox浏览器会这么做） 所有的CSS下载完成后，再渲染该标签（Chrome浏览器会这么做） 看到CSS -> 下载CSS -> 同时下载下一个CSS -> 可以同时下载4个（或8个，取决于浏览器）CSS，即下载并行，解析串行 看到JS -> 下载JS -> 同时下载下一个JS -> 可以同时下载4个（或8个，取决于浏览器）JS，即下载并行，解析串行，并且JS会阻塞HTML的加载 以上就是从敲下回车，到网页加载完毕的全过程。 Web性能优化的方法 减少DNS查询 假设网页里的5个CSS文件，来自5个不同的网站

1.html5的新特性 文件类型声明（<!DOCTYPE>）仅有一型：<!DOCTYPE HTML>。 新的解析顺序：不再基于SGML。 绘画 canvas; 用于媒介回放的 video 和 audio 元素; 语意化更好的内容元素:article、footer、header、nav、section; 表单控件:calendar、date、time、email、url、search; input元素的新类型：date, email, url等。 新的技术: webworker, websocket, Geolocation; 新的属性：ping（用于a与area）, charset（用于meta）, async（用于script）。 全域属性：id, tabindex, repeat。 新的全域属性：contenteditable, contextmenu, draggable, dropzone, hidden, spellcheck。 新应用程序接口: HTML Geolocation HTML Drag and Drop HTML Local Storage HTML Application Cache HTML Web Workers HTML SSE HTML Canvas/WebGL HTML Audio/Video 移除的元素： 纯表现的元素：basefont，big

一、 提升网站性能： 前端性能优化就是让网站打开速度更开，提升用户体验。 1、页面级别的优化 　　①减少HTTP的请求 　　　　　原因：用于HTTP请求是无状态的，所以每次请求都需要重新建立连接，这是一个复杂的过程，既消耗时间成本又消耗资源。时间成本是用户需要等待所需要的；资源成本就是由于每一个请求都需要携带数据，所以需要占用带宽；同一时间请求数超过浏览器的上限后，浏览器就会分批进行，用户的等待时间就会增加。 　　　　　方法：那么如何减少HTTP请求呢？ 　　　　　　　　* 设置HTTP缓存：将一些常用的资源在第一次加载时缓存到本地，再次加载就会减少HTTP的请求 　　　　　　　　* 资源合并压缩：CSS、JS代码等都可以用响应的工具进行压缩 　　　　　　　　* 雪碧图：合并CSS图片可以减少HTTP的请求 　　　　　　　　* 懒加载：在某些条件下或者页面刚加载时会减少HTTP的请求 　　②资源加载的位置优化 　　　　** 将CSS代码放到head中：让浏览器尽快加载CSS，由于页面渲染是在CSS代码全部下载之后进行的，例如将CSS放到body中时可能在CSS还没有完全下载时页面就进行渲染，这样会使页面从无CSS到有CSS的过程，用户体验较差。 　　　　** 将JS代码放到页面的最底部，body之前。因为JS代码是立即执行的，有可能会阻塞页面造成页面加载缓慢