css优化 | 易学教程

前端之CSS

阅读更多关于前端之CSS

一 CSS介绍　　CSS（ C ascading S tyle S heet，层叠样式表)定义如何显示 HTML元素，给HTML设置样式，让它更加美观。　　当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。二 CSS语法 2.1CSS实例　每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。　　　　　　 2.2CSS注释 1 /*这是注释*/ 三 CSS的几种引入方式 3.1行内样式　　行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。 1 <p style="color: red">Hello world.</p> 3.2内部样式　　嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下： 1 <head> 2 <meta charset="UTF-8"> 3 <title>Title</title> 4 <style> 5 p{ 6 background-color: #2b99ff; 7 } 8 </style> 9 </head> 3.3外部样式　　外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可。推荐使用此方式。 1 <link href="mystyle.css" rel="stylesheet"

DOMContentLoaded与load的区别

阅读更多关于 DOMContentLoaded与load的区别

转自 https://www.cnblogs.com/caizhenbo/p/6679478.html DOMContentLoaded与load的区别 (1) 在chrome 浏览器的开发过程中，我们会看到 network 面板中有这两个数值，分别对应网络请求上的标志线，这两个时间数值分别代表什么？ (2) 我们一再强调将css 放在头部，将 js 文件放在尾部，这样有利于优化页面的性能，为什么这种方式能够优化性能？ (3) 在用jquery 的时候，我们一般都会将函数调用写在ready 方法内，这是什么原理？首先看一下 DOMContentLoaded 顾名思义，就是 dom 内容加载完毕。那什么是 dom 内容加载完毕呢？我们从打开一个网页说起。当输入一个 URL ，页面的展示首先是空白的，然后过一会，页面会展示出内容，但是页面的有些资源比如说图片资源还无法看到，此时页面是可以正常的交互，过一段时间后，图片才完成显示在页面。从页面空白到展示出页面内容，会触发 DOMContentLoaded 事件。而这段时间就是 HTML 文档被加载和解析完成。这时候问题又来了，什么是HTML 文档被加载和解析完成。要解决这个问题，我们就必须了解浏览器渲染原理。当我们在浏览器地址输入URL 时，浏览器会发送请求到服务器，服务器将请求的 HTML 文档发送回浏览器

HTML+CSS项目——模拟京东网页

阅读更多关于 HTML+CSS项目——模拟京东网页

项目准备项目名称：京东商城项目描述：京东首页公共部分的头部和尾部制作，京东首页中间部分。设计目标保证浏览器 ie7及以上, 火狐, 360, safari，chrome等。谁让我再测ie6，就跟谁急。。熟悉CSS+DIV布局，页面的搭建工作了解常用电商类网站的布局模式为后期京东移动端做铺垫几点思考 (1)开发工具 sublime 、fireworks（ps）、各种浏览器(ie6.7 要测看心情) (2)CSS Rest 类库,为跨浏览器兼容做准备(也可以直接运用jd网站的初始化) normalize.css 只是一个很小的CSS文件，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset，Normalize.css是一种现代的、为HTML5准备的优质替代方案。Normalize.css现在已经被用于Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、Rdio、CSS Tricks 以及许许多多其他框架、工具和网站上。你值得拥有。。 - 保护有用的浏览器默认样式而不是完全去掉它们 - 一般化的样式：为大部分HTML元素提供 - 修复浏览器自身的bug并保证各浏览器的一致性 - 优化CSS可用性：用一些小技巧 - 解释代码：用注释和详细的文档来 (3)技术栈 HTML5 结构 + CSS3 布局

Web前端优化最佳实践及工具集锦

阅读更多关于 Web前端优化最佳实践及工具集锦

摘要：前端的性能对于Web应用的用户体验来说非常重要。不要以为你的Web应用的性能已经足够好了，其实还会有很多可以提升的地方。本文将介绍Google和雅虎关于前端优化的最佳实践以及工具，你可以逐一检验你的Web应用。前端的性能对于一个Web应用来说非常重要，如果一个Web应用的页面加载速度非常快、对于用户的操作可以及时响应，那么产品的用户体验将会极大地提升。下图显示了页面加载速度对于用户体验的影响。你的Web页面的速度是否已经足够快了？其实可能还有很多可以提升的地方。Google和雅虎也提出了一些Web应用的前端优化建议，并发布了一些工具，你可以逐一检验你的Web应用，以便达到更高的性能。这些优化不仅仅可以给用户提供更好的体验，从开发者角度来说，进行优化还可以减少页面的请求数、降低请求所占的带宽、减少资源的浪费。下面来看看Google和雅虎提供的Web页面优化最佳实践。一、Google的Web优化最佳实践 1. 避免坏请求有时页面中的HTML或CSS会向服务器请求一个不存在的资源，比如图片或HTML文件，这会造成浏览器与服务器之间过多的往返请求，类似于：浏览器：“我需要这个图像。” 服务器：“我没有这个图像。” 浏览器：“你确定吗？这个文档说你有。” 服务器：“真的没有。” 如此一来，会降低页面的加载速度。因此，检查页面中的坏链接非常有必要，你可以通过

使用flexbox的自适应照片布局

阅读更多关于使用flexbox的自适应照片布局

作者：Tim Vam Damme 让我们来看看一种超轻量级的方法，它可以为一组任意大小的照片创建水平砖砌效果。将任何照片丢到上面，它们将边对边无缝对齐。该解决方案不仅轻巧，而且非常简单。我们将使用无序的图片列表和仅仅17行CSS代码，其中重点要领是flexbox和object-fit。 #为什么? 我有两个业余爱好：用照片记录生活，以及找出新旧CSS属性有趣的组合方式。几周前，我参加了XOXO(注：XOXO是一个针对在线生活和工作的独立艺术家的实验性节日)并且拍摄了大量照片，然后我缩减为39张照片。为了拥有我自己的内容，我花了两年的时间来组建一个简单的照片博客，但始终无法实现我想要的布局：一个简单的砖砌布局，其中的照片填充行的同时要尊重其宽高比例(在iOS、Google Photos、Flickr上可以考虑使用Photos.app)。我进行了一些研究来查看是否有任何轻量级、非JavaScript的选项，但是不能找到适合我需要的任何内容。面对一些延误的航班，我开始鼓捣一些代码，限制自己尽可能简化事情(因为这是我对乐趣的定义)。 #基本标记由于我基本上是在创建图片列表，因此我选择了无序列表： <ul> <li> <img> </li>  <li> <img> </li> </ul> 　　 #所有像下冰雹一样的弹性盒子然后是一连串电灯泡时刻：

前端开发性能优化方案

阅读更多关于前端开发性能优化方案

减少HTTP请求次数和请求大小尽量合并CSS和JS文件（把需要引入的CSS合并为一个，JS也是合并为一个），原理是在减少HTTP请求次数，尽可能的把合并后的代码进行压缩，减小HTTP请求资源的大小 A:webpack这种自动化构建工具，可以帮我们实现代码的合并和压缩（工程化开发） B:在移动开发(或者追求高性能的PC端开发[例如百度首页])，如果CSS或者JS不是需要很多，我们可以选择把css和js编程内嵌式（也就是代码直接写在HTML中）采用图片的“懒加载”（延迟加载）目的是为了减少页面“第一次加载”过程中HTTP的请求次数，让页面打开速度变快步骤：开始加载页面的时候，所有的真实图片都不去发送HTTP请求加载，而是给一张占位的背景图，当页面加载完，并且图片在可视区域内我们再去做图片加载利用浏览器和服务器端的缓存技术(304缓存)，把一些不经常更新的静态资源文件做缓存处理（例如：JS、CSS、静态图片等都可以做缓存）原理是为了减少HTTP请求大小，让获取速度更快 CSS雪碧图技术(css sprite / css 图片精灵) 把所有相对较小资源图片汇总到一张大图上，后期我们只需要把大图加载下来，用背景定位的方式展示对应的小图即可 .bg{ background:url('xxx.png'); } .box1{ background-position:xx xx; }

【前端工程师】性能和效率优化的问题

阅读更多关于【前端工程师】性能和效率优化的问题

性能和效率一、你平时如何评测你写的前端代码的性能和效率。 ChromeDevTools 的 Timeline : 是用来排查应用性能瓶颈的最佳工具。 ChromeDevTools 的 Audits: 对页面性能进行检测，根据测试的结果进行优化。第三方工具 Yslow 。详细参见： http :// www . cnblogs . com / — simon / p /5883336 .html http :// blog . csdn . net / ivan 0609/ artide / details /45508365 http :// www . wtoutiao . com / p /1305 TZW.html 二、如何优化页面，加快页面的加载速度 ( 至少 5 条 ) (1) 优化图片资源的格式和大小 (2) 开启网络压缩 (3) 使用浏览器缓存 (4) 减少重定向请求 (5) 使用 CDN 存储静态资源 (6) 减少 DNS 查询次数 (7) 压缩 css 和 js 内容详细参见： http :// www . mahaixiang . cn / wyzz /1589 .html 三、怎么保证多人开发进行内存泄漏的检查（内存分析工具） 1) 使用 xcode 里面的 Analyze 进行静态分析 build setting ---- 》 automa

前端深入之css篇|link和@import到底有什么区别？

阅读更多关于前端深入之css篇|link和@import到底有什么区别？

写在前面在真正的前端开发中，我们很少去写行内样式和内嵌样式，通常都是去引用外部样式。而在我们学习之初的外部样式表都是用 link 引入的，但是当后来我们学习的逐渐深入，发现 @import 也可以引入样式。那么同样是引入外部样式，这两者有什么区别呢，下面请跟随我来详细了解一下 link 和 @import 的区别吧！区别 <!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" rev="stylesheet" href="myCss.css" type="text/css" > <style type="text/css" > @import url("./myCss.css"); </style> </head> </html> 这就是两种引用方式的常见用法，可以很清晰的看出 1、从属关系：link是html的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等；而@import是css的语法，只有导入样式表的作用。 2、加载顺序：页面被加载时，link会和html同时被加载而；@import引入的 CSS 将在页面加载完毕后被加载。 3、兼容性：@import是 CSS2.1 才有的语法，所以只能在 IE5以上才能识别；而link是 HTML 标签，所以不存在兼容性问题。 4

2015年50+ CSS 工具、框架、库合集

阅读更多关于 2015年50+ CSS 工具、框架、库合集

CSS动画工具 & 库 1. Animate Plus 一个可以帮你创建CSS属性和SVG属性的JavaScript动画库。 2. Rocket 一个创建WEB动画的简单的工具。 3. Tuesday 新奇CSS动画库。 4. Shift.css 创建定时CSS动画的简单框架。 5. MOTION UI 用于创建灵活的CSS过渡和动画的SASS库。 6. Transformicons 使用SVG和CSS的动画图标、符号、按钮。 CSS实用程序和工具 7. sanitize.css 让浏览器渲染元素一致，并允许您以当前最佳实践的方式，即装即用。 8. CSS Stats CSS状态统计可视化工具。 9. cssfmt 自动格式化CSS源代码的工具。 10. PurifyCSS 很方便的检测你的应用使用了那些CSS选择器的工具，并创建一个未被使用的CSS的文件。 Flexbox工具 11. Flexbox in 5 Minutes CSS 的 flexbox属性主要特性的互动之旅。 12. Flexbugs Flexbox常见问题及狂浏览器解决方案 13. cssPlus 基于 Flexbox 的稳健、快速、跨浏览器的布局脚手架。 14. Sketch Flex Layout 允许CSS Flexbox布局的Sketch 插件 CSS工具包 15. CSSGram

web前端入门到实战：web前端性能优化指南

阅读更多关于 web前端入门到实战：web前端性能优化指南

前端需要性能优化么？性能优化一直以来都是前端工程领域中的一个重要部分。很多资料表明，网站应用的性能优化对于提高用户留存、转化率等都有积极影响。可以理解为，提升你的网站性能，就是提升你的业务数据（甚至是业务收入）。性能优化广义上包含前端优化和后端优化。后端优化的关注点更多的时候是在增加资源利用率、降低资源成本以及提高稳定性上。相较于后端，前端的性能优化会更直接与用户的体验挂钩。从用户体验侧来说，前端服务 5s 的加载时间优化缩减 80%(1s) 与后端服务 50ms 的响应优化缩减 80%(10ms) 相比，用户的体验提升会更大。因此很多时候，与体验相关的性能的瓶颈会出现在前端。我和一些同学接触的过程中，发现作为前端工程师，大家其实都具备一定的性能优化意识，同时也有自己的优化“武器库”，例如懒加载、资源合并、避免 reflow 等等。虽然大家对性能优化都有自己的思路，不过大多是分散在某几个点，较难形成一个完整的体系。一、html文档结构标签语义化 1、首先什么是语义化呢？语义化是指用合理HTML标记以及其特有的属性去格式化文档内容。机器在需要更少的人类干预的情况下能够研究和收集信息,让网页能够被机器理解,最终让人类受益。即用正确的标签做正确的事。 2、语义化的好处或者说存在的意义 ① 有利于搜索引擎抓取 ② 结构清晰的HTML在团队合作中的作用：代码可读、便于维护

订阅 css优化