css优化

一、什么是重绘Repaint和重排 （回流 reflow） 重绘:当元素的一部分属性发生改变，如外观、背景、颜色等不会引起布局变化，只需要浏览器根据元素的新属性重新绘制 ，使元素呈现新的外观叫做重绘。 重排（回流）:当render树中的一部分或者全部因为大小边距等问题发生改变而需要DOM树重新计算的过程重绘不一定需要重排（比如颜色的改变），重排必然导致重绘（比如改变网页位置） 二、引起重绘Repaint和重排（回流reflow ）的属性 2.1 引起重绘Repaint的属性 常见的重绘元素 color border-style visibility background text-decoration background-image background-position background-repeat outline-color outline outline-style border-radius outline-width box-shadow background-size 2.2 引起重排（回流reflow）的场景和属性 1.添加、删除可见的dom 2.元素的位置改变 3.元素的尺寸改变(外边距、内边距、边框厚度、宽高、等几何属性) 4.页面渲染初始化 5.浏览器窗口大小改变 6.设置style属性 7.改变文字大小 8.添加/删除样式表 9.激活伪类，如

webpack打包的体积越小，对于部署应用的网站来说，性能越好，加载速度越快。 1. 分析打包文件 1. 生成统计信息文件 首先需要通过webpack命令生成统计信息的文件。在package.json的脚本中添加命令 "scripts": { "stats": "webpack --config webpack.prod.js --profile --json > stats.json", //... } 上面的命令会在根目录下生成一个stats.json的打包统计信息文件。 2. 可视化分析 使用插件可视化分析插件：webpack-bundle-analyzer npm install --save-dev webpack-bundle-analyzer 配置插件的使用信息； const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; module.export = { //... plugins: [ new BundleAnalyzerPlugin({ analyzerMode: 'disabled', // 关闭默认启动的展示信息的http服务器 generateStatsFile: true // 打包的时候生成stats.json文件； }), }

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 1.浏览器加载和渲染html的顺序 浏览器加载和渲染html的顺序 IE下载的顺序是从上到下，渲染的顺序也是从上到下，下载和渲染是同时进行的。 在渲染到页面的某一部分时，其上面的所有部分都已经下载完成（并不是说所有相关联的元素都已经下载完） 如果遇到语义解释性的标签嵌入文件（JS脚本，CSS样式），那么此时IE的下载过程会启用单独连接进行下载。 并且在下载后进行解析，解析过程中，停止页面所有往下元素的下载。阻塞加载 样式表在下载完成后，将和以前下载的所有样式表一起进行解析，解析完成后，将对此前所有元素（含以前已经渲染的）重新进行渲染。 JS、CSS中如有重定义，后定义函数将覆盖前定义函数 2. JS的加载 不能并行下载和解析（阻塞下载） 当引用了JS的时候，浏览器发送1个js request就会一直等待该request的返回。因为浏览器需要1个稳定的DOM树结构，而JS中很有可能有代码直接改变了DOM树结构，比如使用 document.write 或 appendChild,甚至是直接使用的location.href进行跳转，浏览器为了防止出现JS修改DOM树，需要重新构建DOM树的情况，所以 就会阻塞其他的下载和呈现. 3.如何加快HTML页面加载速度 页面减肥

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 前阵子，在组内给大家做了一次关于“浏览器加载和渲染HTML的顺序”的分享，这里再总结一下吧。 浏览器加载和渲染html的顺序 1. IE下载的顺序是从上到下，渲染的顺序也是从上到下，下载和渲染是同时进行的。 2. 在渲染到页面的某一部分时，其上面的所有部分都已经下载完成（并不是说所有相关联的元素都已经下载完）。 3. 如果遇到语义解释性的标签嵌入文件（JS脚本，CSS样式），那么此时IE的下载过程会启用单独连接进行下载。 4. 样式表在下载完成后，将和以前下载的所有样式表一起进行解析，解析完成后，将对此前所有元素（含以前已经渲染的）重新进行渲染。 5. JS、CSS中如有重定义，后定义函数将覆盖前定义函数。 JS的加载 1. 不能并行下载和解析（阻塞下载）。 2. 当引用了JS的时候，浏览器发送1个js request就会一直等待该request的返回。因为浏览器需要1个稳定的DOM树结构，而JS中很有可能有 代码直接改变了DOM树结构，比如使用 document.write 或 appendChild,甚至是直接使用的location.href进行跳转，浏览器为了防止出现JS修 改DOM树，需要重新构建DOM树的情况，所以 就会阻塞其他的下载和呈现. 如何加快HTML页面加载速度 1. 页面减肥： a.

1. 性能设计 在我们的项目中，我们每天都会和设计师和产品负责人讨论关于平衡美观和性能的问题。对于我们自己的网站，这样做是很简单的。简言之，我们认为好的用户体验从快速的内容传输开始，也就意味着 性能 > 美观。 好的内容、布局、图片和交互是吸引用户的重要因素。这每个因素都会影响页面的加载时间和终端用户体验。每一步我们都在探讨如何在获得好的用户体验和保证设计美感的同时，最小化对性能的影响。 内容优先 我们想要把核心内容尽快地呈现给用户，意味着我们要处理好基本的 HTML 和 CSS。每个页面都应该达到基本的目的：传递信息。JS、CSS、网页字体、图片、网站分析等优化都是位居于核心内容之下的。 可控性 给理想网站定义了标准后，我们总结出：要想达到预期效果，就要能对网站各方面的控制都游刃有余。我们选择构建自己的静态站点生成器，包括资源传输，并且由我们自己操控。 静态站点生成器 我们用 Node.js 实现了静态站点生成器。它是采用带有简短 JSON 页面描述标签的 Markdown 文件来生成整个网站结构和它所有的资源。为了包括特殊的页面脚本，也可以附带一个 HTML 文件。以下是一个简单化的描述标签和 markdown 文件，用于博客的发布，用它来生成真正的 HTML。 JSON 描述标签: markdown 文件: 图片传输 平均一个 2406kb 的网页中 1535kb 是图片

经常有站长、开发者、运维疑惑：为什么我们的后台服务器很快，但是用户要看网页里面的内容却需要很长时间？我们在上一篇文章 《怪兽大作战: 解析网站打开慢的原因》 中简单介绍了影响网站打开速度的几个指标，感兴趣的同学可以再读一下。今天我们主要讲一下，是哪些因素拖慢了我们的首屏加载时间，也就是用户看到网页中内容时所等待的时间。 用过 OneAPM 的读者对这幅图肯定不陌生，一般来讲，如果服务器很快，机房所在线路很快，那么影响用户看到网页内容的主要时间，就是最后两个时间阶段：DOM处理以及网页渲染，在这两个阶段中，浏览器需要解析网页中的各种资源并进行渲染，最终形成用户页面。这个过程是否流畅，直接影响到用户需要等待的时间，从更深层次而言，直接会影响最终的用户体验，现在大家也普遍接受一个观点“延迟就是故障”，所以你需要重视网站的加载速度。 ##打造轻量级的资源路径--关键渲染路 网页加载速度中最重要的概念是关键渲染路径。如果能理解好这个概念，的确可以让用户更快看到网页中的内容。 轻量级资源和路径，可以缩短复杂网页的构建和渲染时间，甚至比简单网页还要快！ 由于大多数网页都包含许多不同的组成部分，仅仅移除部分资源并不能保证更快的加载速度。 如果你曾经想过：“为了提高网页的加载速度，我还能做什么？”或者“新浪、QQ、网易是如何做到在一秒钟内加载那么多网页内容的？

本篇则主要介绍 CSS 的语法与 CSS 是如何工作的。 CSS语法 1. 基本规则 CSS 规则主要由两部分组成： 选择器(selector) 与 声明(declarations) 。 选择器(selector) 是开发者希望改变样式的 HTML 元素。 声明(declarations) 则是开发者制定的希望 HTML 改变的元素规则，可以是一条或多条。 每条 声明(declarations) 由一个 属性(property) 和一个 值(value) 组成。 属性(property) 是开发者希望设置的 样式属性（style attribute） 。 值(value) 为属性的具体内容。 属性与值之间由 冒号 隔开，声明与声明直接由 分号 隔开。 CSS中的注释以 /* 开始并以 */ 结束。 /* selector {property: value} */ h1 {color:red; font-size:14px;} 上面这行代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。 2. 样式表书写规则 每个HTML元素都有初始的样式，但是也可以经过开发者书写而改变样式规则。 HTML 的元素样式修改有以下的书写规则。 内部样式表（写在 <head> 标签内部） <!DOCTYPE html> <html> <head> <style> h1

近期在一家公司负责H5游戏加载速度优化，这里把近期做的项目优化项做一个整理分享： html渲染流程 HTML解析过程：构建DOM树、构建CSSOM树、根据DOM树和CSSOM树构建render树、有了render树就开始布局Layout、最后绘制paint。 1、 构建DOM树 ：　　 将HTML构建成一个DOM树，也就是构建节点，把所有的节点都构建出来。 2、 构建CSSOM ：　　 解析css去构建CSSOM树。 3、 构建render树 ：　DOM已经构建好了，css也有了，浏览器就会根据这两个来构造render树。 4、 布局 ：　　　　　 当render树有了，通过render树，浏览器开始计算各个节点的位置和样式。 5、 绘制 ：　　　　　 遍历render树，在页面上绘制每个节点。 6、 重排reflow ：　　当render树绘制完成之后，比如JavaScript改变样式或添加节点，这时候render树就需要重新计算。 7、 重绘repaint ：　 重新绘制页面。 HTML整个解析过程看起来很简单，但是我们要知道解析过程中css、js和dom的加载顺序。我们都知道 HTML是自上往下解析 的，在解析过程中： 1、如果遇到link和style，那就就会去下载这些外部的css资源，但是 css跟DOM的构建是并行的 ，就是说不会阻塞DOM树的构建。 2、如果遇到

链接：https://www.zhihu.com/question/41466747/answer/91084888 1.对WEB标准以及W3C的理解与认识 标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维 护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性； 2.xhtml和html有什么区别 HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言 最主要的不同： XHTML 元素必须被正确地嵌套。 XHTML 元素必须被关闭。 标签名必须用小写字母。 XHTML 文档必须拥有根元素。 3.Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义? 用于声明文档使用那种规范（html/Xhtml）一般为 严格 过度 基于框架的html文档 加入XMl声明可触发，解析方式更改为IE5.5 拥有IE5.5的bug 4.行内元素有哪些?块级元素有哪些?CSS的盒模型? 块级元素：div p h1 h2 h3 h4 form ul 行内元素: a b br i span input select Css盒模型:内容，border ,margin，padding 5

1.表单（form） <form name="form_name" action="url" method="get|post"></form> a.input控件 ---属性:type/name/value/size/readonly/disabled/checked/maxlength （1）单行文本框--- text <input name="文本框名称" type="text" value="初始值" size="显示的字符数" maxlength="最多容纳字符数" readonly="readonly" （设置为只读）disabled="disabled"(设置为不可操作)> （2）密码框---password <input name="文本框名称" type=“password” value=“初始值” size=“显示没字符数”> （3）单选框---radio <input name="单选框名称" type="radio" value="提交值" checked="checked"（是否被选中）> （4）复选框---checkbox <input name="复选框名称" type="checkbox" value="提交值" checked="checked"（是否被选中）> *******<input type="radio/checkbox" name=