css优化

渲染过程 1.解析html文件，先是head，后是body 2.如果头部有外部的css链接，就去下载该css，如果有js链接也去下载 3.解析body部分，并生成DOM树，同时浏览器主进程去下载CSS 4.CSS文件下载完成，解析CSS文件成树形的数据结构（CSSOM树），然后结合DOM树合并成RenderObject树 5.布局（layout）：布局RenderObject树，负责RenderObject树中的元素的尺寸，位置等计算 6.绘制（painting）：绘制RenderObject树，绘制页面的像素信息，绘制到页面上。用户可以看到了 其中，前四步执行的比较快，5.6步执行的比较耗时。这是因为可能会发生回流（也叫重排，reflow。重新执行步骤5）及重绘（repaint，重新执行步骤6）。 重排和重绘到底是啥意思呢？接下来，对以上六个步骤进行详解的同时再解释重排和重绘： 第1.2.3步可以统称为构建DOM树： 当浏览器接收到服务器响应来的HTML文档后，会遍历文档节点，生成DOM树。需要注意的是，DOM树的生成过程中可能会被CSS和JS的加载执行而阻塞。 在这一步完成的时候，可能会发生 渲染阻塞 渲染阻塞 ：当浏览器遇到一个 script 标记时，DOM 构建将暂停，直至脚本完成执行，然后继续构建DOM。每次去执行JavaScript脚本都会严重地阻塞DOM树的构建

Yahoo! 的 Exceptional Performance 团队为改善 Web 性能带来最佳实践。他们为此进行了一系列的实验、开发了各种工具、写了大量的文章和博客并在各种会议上参与探讨。最佳实践的核心就是旨在提高网站性能。 原文地址： http://developer.yahoo.com/performance/rules.html Excetional Performance 团队总结出了一系列可以提高网站速度的方法。可以分为 7 大类 34 条。 包括 内容 、 服务器 、 CSS 、 JavaScript 、 Cookie 、 图片 、 移动应用 ，七部分。 其中内容部分一共十条建议： 一、内容部分 尽量减少 HTTP 请求 减少 DNS 查找 避免跳转 缓存 Ajxa 推迟加载 提前加载 减少 DOM 元素数量 用域名划分页面内容 使 frame 数量最少 避免 404 错误 1 、尽量减少 HTTP 请求次数 终端用户响应的时间中，有 80% 用于下载各项内容。这部分时间包括下载页面中的图像、样式表、脚本、 Flash 等。通过减少页面中的元素可以减少 HTTP 请求的次数。这是提高网页速度的关键步骤。 减少页面组件的方法其实就是简化页面设计。那么有没有一种方法既能保持页面内容的丰富性又能达到加快响应时间的目的呢？这里有几条减少 HTTP

PC 浏览器前端优化策略 PC 端优化的策略很多，如 YSlow（YSlow 是 Yahoo 发布的一款 Firefox 插件，现 Chrome 也可安装，可以对网站的页面性能进行分析，提出对该页面性能优化的建议）原则，或者 Chrome 自带的 Audits 等，总结起来主要包括网络加载类、页面渲染类、CSS 优化类、JavaScript 执行类、缓存类、图片类、架构协议类等几类，下面逐一介绍。 网络加载类 1．减少 HTTP 资源请求次数 在前端页面中，通常建议尽可能合并静态资源图片、JavaScript 或 CSS 代码，减少页面请求数和资源请求消耗，这样可以缩短页面首次访问的用户等待时间。通过构建工具合并雪碧图、CSS、JavaScript 文件等都是为了减少 HTTP 资源请求次数。另外也要尽量避免重复的资源，防止增加多余请求。 2．减小 HTTP 请求大小 除了减少 HTTP 资源请求次数，也要尽量减小每个 HTTP 请求的大小。如减少没必要的图片、JavaScript、CSS 及 HTML 代码，对文件进行压缩优化，或者使用 gzip 压缩传输内容等都可以用来减小文件大小，缩短网络传输等待时延。前面我们使用构建工具来压缩静态图片资源以及移除代码中的注释并压缩，目的都是为了减小 HTTP 请求的大小。 3．将 CSS 或 JavaScript 放到外部文件中，避免使用

一 . 总体要求 1. 网页整体采用 div+css 代码显示，最好不要用表格 , 切图切的越小越好。 2. 尽量不让 CSS 分散在 HTML 标记里，尽量封装到外部调用文件。 3. 尽量缩减页面大小，一般建议 100KB 以下，越小越好，但不能小于 5KB, 最好不超过 150K 。 4. 尽量少用无用的图片和 flash, 非用不可的话图片大小控制在 30K 以下。 GIF 只限于 256 种颜色 , 适合显示质量要求不高或单一色块的图片 ,jpeg 适合显示照片 , 从 seo 和 UE 来说 , 适合对图片按钮或网页结构上的图片使用 GIF, 因为 jpeg 加载时是逐行显示 ,GIF 是先显示图片轮廓再逐渐清晰内容 . 5. 尽量少用 JS ， JS 代码全部用外部调用文件封装。 6. 超链接的 title 属性包含关键字 , 图片的 alt 包含关键字 . 7. 404 错误页面重新制作一个 , 引导用户继续浏览我们的网站 . 8. 单个网页内超链接数目尽量不多于 100 个超链接 . 9. 适当用加粗和 heading 标签 , 文字大小 , 来使页面层次清晰 . 10. 版块的标题要包含关键字带链接 . 二 . 代码精简优化 为了要减少服务器负荷 , 优化传输，加快网页打开速度 , 要求：减少空白区域，精简 Css 和 Javascript. Markup 优化

Web网站可用性的关键指标是速度，更确切地说，是页面能以多快的速度出现在访问者的浏览器窗口里。影响速度的因素有很多种，包括Web服务器的速度、访问者的Internet连接情况，以及浏览器必须下载的文件大小。尽管你无法控制服务器和连接的速度，但是你可以控制构成网站Web页面的文件大小。 为了让网站能够更快，Web的建设者都会按常规地压缩和优化网站上的每一个图像文件，这常常使得为了将文件的大小减少几个百分点而牺牲了图像的质量。由于CSS样式表是纯文本文件，和图像相比相对较小，所以Web建设者很少考虑采取措施减少其CSS样式表文件的大小。但是，通过使用CSS缩写以及其他的一些简单技巧，你可以在很大程度上减少样式表的大小。在我对自己样式表的一次非正式的特别测试中，我把文件的大小降低了大约25－50％。 新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。 使用CSS的缩写性质 CSS的缩写性质（shorthand property）是一些专用的性质名，用来代替多个相关性质的集合。例如，间隙性质（padding property）是顶部间隙（padding-top）、右侧间隙（padding-right）、底部间隙（padding-bottom）和左侧间隙（padding-left）的缩写。

前端框架一般指用于简化网页设计的框架，比如，jquery，extjs，bootstrap等等，这些框架封装了一些功能，比如html文档操作，漂亮的各种控件(按钮，表单等等)。 Web前端开发需要学什么语言？Web前端开发主要学习html、css、js、jquery等等，除了学习开发语言，还要为网站上提供的产品和服务实现一流的Web界面，优化代码并保持良好兼容性; Web前端表现层及与前后端交互的架构设计和开发; 配合后台开发人员实现产品界面和功能; 利用各种Web技术模拟开发产品原型; Web新技术调研和资讯整理; 精通HTML/XHTML、CSS，熟悉页面架构和布局，对Web标准和标签语义化有深入理解; 熟悉Ajax、JavaScript(或者ActionScript)、DOM等前端技术，掌握面向对象编程思想。 Web前端开发需要学什么语言 想成为一个出色的Web前端工程师，那么应该Web前端开发需要学什么语言呢? 1、学习html。这个是简单的,也是基础的。要熟练掌握div、form table、ul li 、p、span、font这些标签,这些都是常用的,特别是div和table,div用于布局、table也可以用于布局,但是不灵活,基本 table是用来和数据打交道。 2、学习css。这里说的css不包括css3,一般我们看到web前端开发工程师的要求里面

原文地址http://www.2cto.com/kf/201604/498725.html 网站的划分一般为二：前端和后台。我们可以理解成后台是用来实现网站的功能的，比如：实现用户注册，用户能够为文章发表评论等等。而前端呢？其实应该是属于功能的表现。并且影响用户访问体验的绝大部分来自前端页面。 而我们建设网站的目的是什么呢？不就是为了让目标人群来访问吗？所以我们可以理解成前端才是真正和用户接触的。除了后台需要在性能上做优化外，其实前端的页面更需要在性能优化上下功夫，只有这样才能给我们的用户带来更好的用户体验。就好像，好多人问，男人在找女朋友的时候是不是只看外表，一些智慧的男人给出了这样的回答：脸蛋和身材决定了我是否想去了解她的思想，思想决定了我是否会一票否决她的脸蛋和身材。同理，网站也是这样，网站前端的用户体验决定了用户是否想要去使用网站的功能，而网站的功能决定了用户是否会一票否决前端体验。 不仅仅如此，如果前端优化得好，他不仅可以为企业节约成本，他还能给用户带来更多的用户，因为增强的用户体验。说了这么多，那么我们应该如何对我们前端的页面进行性能优化呢？ 一般说来，web前端指网站业务逻辑之前的部分，包括浏览器加载、网站视图模型、图片服务、CDN服务等，主要优化手段有浏览器访问、使用反向代理才、CDN等。 浏览器访问优化 浏览器请求处理流程如下图： 1、减少http请求，合理设置

像大多数Web开发人员一样，我偶尔会查看网站的来源，看看他们的标记是如何构建的。 像Firebug和Chrome开发者工具这样的工具可以很容易地检查代码，但如果我想复制一个孤立的部分并在本地使用它，那么复制所有单个元素及其相关的css将是一件痛苦的事。 并且可能同样需要保存整个源并删除不相关的代码。 如果我可以右键单击Firebug中的节点并且“为此节点保存HTML + CSS”选项，那就太棒了。 这样的工具存在吗？ 是否可以扩展Firebug或Chrome开发者工具来添加此功能？ #1楼 http://clipboard.com 做得很好。 虽然您对复制版本的期望与原版完全一致，因此您可以使用它进行游戏和学习，但这可能并不现实。 #2楼 我最初问这个问题我正在寻找Chrome（或FireFox）解决方案，但我在Internet Explorer开发人员工具中偶然发现了这个功能。 几乎我在找什么（除了javascript） 结果： #3楼 多年前我为了同样的目的创建了这个工具： http://www.betterprogramming.com/htmlclipper.html 欢迎您使用和改进它。 #4楼 只需从网页上复制您想要的部分，然后将其粘贴到wysiwyg编辑器中即可。 单击编辑器工具栏上的“源”按钮检查html源代码。 当我在Drupal网站上工作时

为什么Web页面的加载速度如此重要？在这个信息化的时代，如果一个网站的加载时间过长，大部分用户会极其不耐烦地选择“关掉”！这让辛辛苦苦熬夜敲代码的程序员们情何以堪，不管网站功能如何强大，用户根本都没来得及看一眼，结果网站访问量越来越少，粉丝转化率越来越低，最后，程序员可能就要下岗了。 了解前端开发的程序员都知道，影响网站性能的因素有很多，例如，HTTP请求数量，臃肿的代码，繁重的媒体文件等。如何编写CSS以及如何在浏览器中加载样式表都会对加载时间造成重大影响，接下来推荐五款针对CSS的性能提升工具，以帮助广大前端开发程序员创建一流的网站。 TestMyCSS TestMyCSS是一款免费的在线优化工具，具有很多功能。它可用来检查代码冗余，验证错误，未使用的CSS和寻求最佳做法。程序员只需将网址输入网站的CSS文件，就可以立即开始使用，TestMyCSS可以发现需要改进的所有项目。不仅如此，程序员还可以看到一些有用的提示： 如何简化复杂的选择器 需要去掉的重复的CSS属性和选择器 代码中存在的重要声明的数量 不必要的类特异性 不必要的IE修复 不需要供应商前缀的CSS属性 具有标签名的类或ID规则，例如a.primary-link 通用选择器使用不当 Stylelint 新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答

把之前存的一堆自己觉得记录的知识点全部记录一下，有兴趣可以看看，共勉。 $ ( function ( ) { todo ( '71899703 200 6 91 425 4 67407 7 96488 6 4 2 7 31064 9 7920 1 34608557 27 72 18 81' ) . then ( f2 ) } ) ; function todo ( e ) { // var dfd = $.Deferred(); // setTimeout(function () { // // f1的任务代码 // dfd.resolve(); // }, 500); // return dfd.promise; // console.log(e.length) // var e = input; var x = e . length ; var y ; // 输出集合 var list = [ ] ; // 排序用集合 var templist = [ ] ; for ( var i = 0 ; i < x ; i ++ ) { y = e . split ( " " ) [ i ] ; if ( ! y ) { break ; } list [ i ] = y ; var sum = 0 ; for ( var n = 0 ; n < y . length ; n ++ )