css优化

性能优化： 广义上包含前端优化和后端优化。后端优化的关注点更多的时候是在增加资源利用率、降低资源成本以及提高稳定性上。相较于后端，前端的性能优化会更直接与用户的体验挂钩。从用户体验侧来说，前端服务 5s 的加载时间优化缩减 80%(1s) 与后端服务 50ms 的响应优化缩减 80%(10ms) 相比，用户的体验提升会更大。因此很多时候，与体验相关的性能的瓶颈会出现在前端。 一、html文档结构标签语义化 语义化是指用合理HTML标记以及其特有的属性去格式化文档内容。机器在需要更少的人类干预的情况下能够研究和收集信息,让网页能够被机器理解,最终让人类受益。即用正确的标签做正确的事。 语义化的好处或者说存在的意义 ① 有利于搜索引擎抓取 ② 结构清晰的HTML在团队合作中的作用：代码可读、便于维护、提高开发效率、快速达成共识、利于二次开发。 ③ 有利于盲人屏幕阅读器 二、css、js文件数量及大小 优化一般对于css、js是建议使用外联式来进行导入。我们可以对css、js做相应的规划也可以减少css、js的个数以减少http请求。同时也要注重减少重复代码，注重代码重复利用，以达到用最少的代码干最多的事。同时当项目要投入上线使用的时候，可以对css、js文件进行压缩，文件的减小可以加速文件的链接导入，以便加速网页的加载渲染。 可通过使用webpack，gulp等工具对Js文件进行合并。

1. 前言 关于 webpack ，相信现在的前端开发人员一定不会陌生，因为它已经成为前端开发人员必不可少的一项技能，它的官方介绍如下： webpack 是一个模块打包器。webpack的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用，但它也能够胜任转换(transform)、打包(bundle)或包裹(package)任何资源(resource or asset)。 在日常开发工作中，我们除了会使用 webpack 以及会编写它的配置文件之外，我们还需要了解一些关于 webpack 性能优化的方法，这样在实际工作就能够如虎添翼，增强自身的竞争力。 关于 webpack 优化的方法我将其分为两大类，如下： 可以提高 webpack 打包速度，减少打包时间的优化方法 可以让 Webpack 打出来的包体积更小的优化方法 OK，废话不多说，接下来我们就来分别了解一下优化方法。 2. 提高 Webpack 打包速度 2.1 优化Loader搜索范围 对于 Loader 来说，影响打包效率首当其冲必属 Babel 了。因为 Babel 会将代码转为字符串生成 AST ，然后对 AST 继续进行转变最后再生成新的代码，项目越大， 转换代码越多，效率就越低 。当然了，我们是有办法优化的。 首先我们可以 优化 Loader 的文件搜索范围 ，在使用

减少请求数量 https://segmentfault.com/a/1190000015990848 合并 合并js文件 合并css文件 合并法则 公共库合并 不同页面单独合并 图片处理 雪碧图 Base64 将图片的内容以Base64格式内嵌到HTML中，可以减少HTTP请求数量。但是，由于Base64编码用8位字符表示信息中的6个位，所以编码后大小大约比原始值扩大了 33% 使用字体图标代替图片 减少重定向 尽量避免使用重定向，当页面发生了 重定向，就会延迟整个HTML文档的传输 。在HTML文档到达之前，页面中不会呈现任何东西，也没有任何组件会被下载，降低了用户体验。 如果一定要使用重定向，如http重定向到https，要使用301永久重定向，而不是302临时重定向 。因为，如果使用302，则每一次访问http，都会被重定向到https的页面。而永久重定向，在第一次从http重定向到https之后 ，每次访问http，会直接返回https的页面 使用缓存 使用cach-control或expires这类强缓存时，缓存不过期的情况下，不向服务器发送请求。强缓存过期时，会使用last-modified或etag这类协商缓存，向服务器发送请求，如果资源没有变化，则服务器返回304响应，浏览器继续从本地缓存加载资源；如果资源更新了，则服务器将更新后的资源发送到浏览器，并返回200响应

css书写规范 在书写css样式的时候总是无意中就写乱了，无论是命名或者是样式的书写顺序，这里做一个总结，提醒自己在书写css的时候时刻注意，大家可以参考哈。 样式属性顺序 单个样式规则下的属性在书写时，应按功能进行分组，组之间需要有一个空行。 同时要以Positioning Model > Box Model > Typographic > Visual 的顺序书写，提高代码的可读性。 Positioning Model 布局方式、位置，相关属性包括：position, top, z-index, display, float等 Box Model 盒模型，相关属性包括：width, height, padding, margin，border,overflow Typographic 文本排版，相关属性包括：font, line-height, text-align Visual 视觉外观，相关属性包括：color, background, list-style, transform, animation 2. CSS选择器命名规则 分类式命名法(在前端组件化下尤为重要) 布局（grid）（.g-）：将页面分割为几个大块，通常有头部、主体、主栏、侧栏、尾部等！ 模块（module）（.m-）：通常是一个语义化的可以重复使用的较大的整体！比如导航、登录、注册等 元件（unit）（

刚开始学习前端的时候，每次写css样式都是用到什么就在样式表后添加什么，完全没有考虑到样式属性的书写顺序对网页加载代码的影响。后来逐渐才知道正确的样式顺序不仅易于查看，并且也属于css样式优化的一种方式。那么是怎么个顺序呢？ （1）定位属性：position display float left top right bottom overflow clear z-index （2）自身属性：width height padding border margin （3）文字属性：font-family font-size font-style font-weight font-varient color text-align vertical-align word-spacing white-space text-overflow （4）背景：background border （5）css3中新增属性：content box-shadow border-radius transform…… 按照上述1 2 3 4 5的顺序进行书写。 目的 ：减少浏览器reflow（回流），提升浏览器渲染dom的性能 原理 ：浏览器的渲染流程为—— ①解析html构建dom树，解析css构建css树：将html解析成树形的数据结构，将css解析成树形的数据结构 ②构建render树

记得刚开始学习前端的时候，每次写css样式都是用到什么就在样式表后添加什么，完全没有考虑到样式属性的书写顺序对网页加载代码的影响。后来逐渐才知道正确的样式顺序不仅易于查看，并且也属于css样式优化的一种方式。那么是怎么个顺序呢？ （1）定位属性：position display float left top right bottom overflow clear z-index （2）自身属性：width height padding border margin background （3）文字样式：font-family font-size font-style font-weight font-varient color （4）文本属性：text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow （5）css3中新增属性：content box-shadow border-radius transform…… 按照上述1 2 3 4 5的顺序进行书写。 目的：减少浏览器reflow（回流），提升浏览器渲染dom的性能 原理：浏览器的渲染流程为—— ①解析html构建dom树

记得刚开始学习前端的时候，每次写css样式都是用到什么就在样式表后添加什么，完全没有考虑到样式属性的书写顺序对网页加载代码的影响。后来逐渐才知道正确的样式顺序不仅易于查看，并且也属于css样式优化的一种方式。那么是怎么个顺序呢？ （1）定位属性：position display float left top right bottom overflow clear z-index （2）自身属性：width height padding border margin background （3）文字样式：font-family font-size font-style font-weight font-varient color （4）文本属性：text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow （5）css3中新增属性：content box-shadow border-radius transform 等 目的：减少浏览器reflow（回流），提升浏览器渲染dom的性能 原理：浏览器的渲染流程为—— ①解析html构建dom树，解析css构建css树

在这篇 博文 中指出： 1、整个页面文档家在结束才开始加载css和js以及其他的数据 2、当顶部的所有js都家在结束之后才可以加载页面中的图片 3、顶部的common.css和common.js几乎是同时开始加载 4、底部的loader-min.js和离他最近的footer.jpg也是同时开始加载 从这里面可以得出的结论是 1、尽量减少整个document的大小和顶部css的大小，加快他们的加载，甚至在整个页面比较小的情况下可以将css放在底部。 2、javascript放在底部，这样就可以和图片几乎同时下载，让图片尽快的下载下来 回复感觉也很有道理： 22 楼 fighter_Jon 2010-11-01 优化应该是个权衡的过程 js放在底部是防止js对之后资源造成阻塞 但是如果是web app应用部分js也需要放在head部分 保证页面功能完整 而不是页面先行 13 楼 smildlzj 2010-10-30 PS... LZ知识没学好.. 每一个读取js,css,图片什么都是一个http连接,关长连接啥事... CSS尽量放头部, js尽量放最后(不过一般还是会放头部) css,图片会并行下载 10 楼 Saito 2010-10-29 嗯.hoooooooooopo说的没错. http1.1规范里面 建议 每个domain两个连接并行下载.所以可以把图片什么的分域名.

原文地址: Critical CSS and Webpack: Automatically Minimize Render-Blocking CSS 原文作者: Anthony Gore 译者: 蜗牛(GivenCui) 校对者: veizz "消除阻塞渲染的CSS和JavaScript"。 这一条Google Page Speed Insights的建议总让我困惑。 当一个网页被访问时，Google希望它仅加载对初始视图有用的内容，并使用空闲时间来加载其他内容。这种方式可以使用户尽可能早地看到页面。 我们可以做很多事情来减少阻塞渲染的JavaScript，例如code splitting、tree shaking，缓存等。 但是如何减少阻塞渲染的CSS？为此，可以拆分并优先加载首次渲染所需要的CSS（关键CSS)，然后再加载其它CSS。 可以通过编程的方式筛选出关键CSS，在本文中，我将向你展示如何通过Webpack的自动化流程来实现该方案。 什么是阻塞渲染 如果资源是“阻塞渲染”的，则表示浏览器在资源下载或处理完成之前不会显示该页面。 通常，我们在html的 head 标签中添加CSS样式表，这种方式会阻塞渲染，如下所示： <head> <link rel="stylesheet" href="/style.css"> ... </head> <body> <p>在style

web性能优化，主要分为前端和后台两个部分性能优化，后台性能优化决定了web能不能用，前端优化决定了其好不好用，也就是牵涉到前端用户体验和web易用性等情况，所以前端性能与用户体验是有着极大的关联的。 首先，前端优化之前，我们需要知道其整体性能情况，然后对整体情况进行细分与分析，了解其每一步所损耗的时间和消耗的原由，然后进行细节优化，才能达成一个整体性能质的飞越，并不是其中一部分或者一个步骤的优化就能够解决问题的，只有优化的量才能达到性能质的飞越。 对web的性能检测一般使用浏览器或者性能检测工具 下面是我们通常进行优化的方向点： 一、HTTP请求 1.减少HTTP请求数量 80%的响应的时间是消耗在网页内容的下载上，例如：图片，样式、脚本、Flash等。所以减少请求次数以是缩短响应时间的关键之处。 I. 合并文件：将相关代码文件进行合并 II. Css Sprites：将多张图片合并成单张图片，通过css来控制什么地方显示图片的那个位置。 III. 图片映射：也是将多图拼在一起，然后通过坐标来控制。通常在页面中连续的时候才有用，比如导航条。 IV. 行内图片(Base64编码): 通过编码的字符串将图片内嵌到网页文本中。 2.避免重定向 重定向是一个比较常使用的技术手段，比如服务器地址进行迁移，修改了请求的url地址，这时通常会使用重定向，把访问原网址的用户重定向到新的url。