css优化

本文旨在用最通俗的语言讲述最枯燥的基本知识 面试过前端的老铁都知道，对于前端，面试官喜欢一开始先问些HTML5新增元素啊特性啊，或者是js闭包啊原型啊，或者是css垂直水平居中怎么实现啊之类的基础问题，当你能倒背如流的回答这些之后，面试官脸上会划过一丝诡异的笑容，然后晴转多云，故作深沉的清一下嗓子问： 从用户输入URL到浏览器呈现页面经过了哪些过程？ 如果你懂，巴拉巴拉回答了一堆，他又接着问： 那网页具体是如何渲染出来的呢？ 如果你还懂，又巴拉巴拉的回答了一堆，他还会继续问： 那你有哪些网页性能优化的经验呢？ 当你还能巴拉巴拉的回答了一堆之后，面试官这下心里就有逼数了，转而去问你一些和技术无关的七大姑八大姨之类的事情，这时候，你就可以欢呼你的offer基本已经到手了。 那么各位问题来了，真正轮到你去面试的时候 你能否很好的回到这些问题呢？ 用户输入URL回车之后，浏览器到底做了啥？ 页面渲染的完整流程是怎样的？ 前端性能优化有哪些经验？ 如果不能，那我们往下走： （有人会疑惑说不是讲前端吗？为毛要讲TCP、DNS这些与前端无关的知识?别慌咯，跟着文章走吧，多学无害！） 文章提纲： TCP UDP 套接字socket HTTP协议 DNS解析 HTTP请求发起和响应 页面渲染的过程 页面的性能优化 TCP连接 TCP ：Transmission Control Protocol，

Exceptional Performance团队已经确定了许多快速制作网页的最佳实践。 按类别筛选： Content Server Cookie CSS JavaScript Images Mobile All 最小化HTTP请求 tag: content 最终用户响应时间的80％用于前端。大部分时间都在下载页面中的所有组件：图像，样式表，脚本，Flash等。减少组件数量反过来减少了呈现页面所需的HTTP请求数量。这是更快页面的关键。 减少页面中组件数量的一种方法是简化页面设计。但有没有办法构建内容更丰富的页面，同时还能实现快速响应时间？以下是一些减少HTTP请求数量的技术，同时仍支持丰富的页面设计。 组合文件是一种通过将所有脚本组合到单个脚本中来减少HTTP请求数量的方法，并且类似地将所有CSS组合到单个样式表中。当脚本和样式表在不同页面之间变化时，组合文件更具挑战性，但使这部分发布过程可以缩短响应时间。 CSS Sprites是减少图像请求数量的首选方法。将背景图像合并为单个图像，并使用CSSbackground-image和background-position属性显示所需的图像片段。 图像地图将多个图像组合成单个图像。整体大小大致相同，但减少HTTP请求的数量会加快页面的速度。图像映射仅在图像在页面中是连续的时才起作用，例如导航栏。定义图像映射的坐标可能是乏味且容易出错的

1.尽量使用缩写 使用缩写语句，如下面所示的 margin 声明，可以从根本上减小 CSS 文件的大小。在 google 上搜索 CSS Shorthand 可以找到许多其他的速记形式。 p { margin-top: 1px; margin-right: 2px; margin-bottom: 3px; margin-left: 4px; } p { margin: 1px 2px 3px 4px; } 2.查找并删除未使用的 CSS 删除不必要的部分 CSS，j显然会加快网页的加载速度。谷歌的Chrome浏览器有这种开箱即用的功能。只需F12然后打开Sources选项卡，然后打开命令菜单（Ctrl+shift+P）。然后，选择Show Coverage，在Coverage analysis窗口中高亮显示当前页面上未使用的代码。 打开谷歌浏览器开发都工具，在 Conlse 旁边更多选择 Coverage，就可以看到未使用的 CSS, 点击对应的项，高亮显示当前页面上未使用的代码。 3.分析工具 谷歌浏览器的 Audits 就可以快速帮我们分析，使用方式，打开开发者工具，点击 Audits 栏位，点击 Run audits 后就开始分析结果。 http://yui.github.io/yuicompressor 对 CSS 的自动分析总是会导致错误。用压缩后的 CSS 文件替换

一、浏览器简介 浏览器是使用最广泛的软件之一，主要功能是向服务器发出请求，在浏览器窗口中展示用户需要的网络资源。资源的位置由用户的的URI（Uniform Resource Identifier统一资源标识符）来指定，通过DNS查询，将网址转换为IP地址。资源的格式通常是HTML，也包括PDF、image及其他格式。整个浏览器工作的流程，主要如下： 用户输入网址——浏览器查找IP地址——发送HTTP请求——服务器处理请求并响应——服务器发回HTML响应——浏览器开始解析HTML——浏览器发送请求获取HTML中内嵌的对象，如CSS/JS/图片等资源——浏览器展示完整页面 本次介绍的主要就是浏览器从接收到服务器响应的HTML到展示完整页面的整个过程，下面开始—— 二、 浏览器渲染流程 先来一张浏览器渲染流程图 从这张经典的图中可以看出以下几点： 1，浏览器可以解析的资源，HTML，SVG，XHTML等，解析完会生成DOM Tree。 2，CSS资源会解析成CSS Rule Tree。 3，JS通过DOM API和CSSOM API来操作DOM树和CSS树。 4，解析完成后综合DOM树和CSS树会生成Rendering Tree，计算每个元素（Frame）的位置，这个过程就是layout或者叫reflow过程。 5，调用操作系统Native GUI的API绘制。 注意

google有对apache优化的mod_pagespeed，nginx的优化工具ngx_pagespeed ngx_pagespeed speeds up your site and reduces page load time by automatically applying web performance best practices to pages, and associated assets (CSS, JavaScript, images) without requiring that you modify your existing content or workflow. Features (will) include: Image optimization: stripping meta-data, dynamic resizing, recompression CSS & JavaScript minification, concatenation, inlining, and outlining Small resource inlining Deferring image and JavaScript loading HTML rewriting Cache lifetime extension and more 来源： oschina 链接：

前言 基本HTML加载，需要 20ms 左右 Nginx配置，关闭 keepalive、etag、gzip、if_modified_since 协议：HTTP/1.1 浏览器：Chrome 减少HTTP请求 加载未合并外部css，需要 35ms 左右 加载合并外部css，需要 25ms 左右 两个合并后的css，加载减少了10ms，如果将页面所有的css、js、图片（CSS sprites ）合并，减少的时间将很可观。 DOM以及CSS 上图是浏览器解析HTML和渲染树之间的流程。浏览器在获取到HTML页面后开始解析页面，解析到head标签后，发现外部CSS，会异步发出请求，CSS获取后，解析CSS。 HTML解析后生成DOM Tree，CSS解析后生成CSSOM Tree， 两者结合开始渲染树。 1、首屏的页面要快速的渲染出来，CSS最好放在页面头部。同时有多个css文件的时候，也要将基本样式放在其他样式之前加载（边获取边渲染）。 2、HTML以及CSS的元素层级要尽量少,加快页面渲染。 3、对于首页，可以将基本样式内联放在头部。（快速渲染，灵活应用） JS 上图是浏览器解析流程，蓝色是样式解析，黄色是JS脚本执行，顺序执行。JS脚本执行会阻塞样式或DOM解析 1、JS脚本放在页面下面，防止阻塞页面渲染。 2、不要在JS里执行长时间的程序。 3、减少JS对DOM的操作

1、减少页面HTTP请求数量 　　2、使用CDN(Content Delivery Network)网络加速 　　3、添加文件过期或缓存头 　　4、服务器开启gzip压缩 　　5、css格式定义放置在文件头部 　　6、Javascript脚本放在文件末尾 　　7、避免使用CSS脚本(CSS Expressions) 　　8、css、javascript改由外部调用 　　9、压缩Javascript、CSS代码 　　10、避免采用301、302转向 　　11、养成良好的开发维护习惯，尽量避免脚本重复调用 　　12、配置ETags 　　13、Ajax采用缓存调用 　　14、合理使用Flush 　　15、Ajax调用尽量采用GET方法调用 　　16、尽可能减少DCOM元素 　　17、使用多域名负载网页内的多个文件、图片 　　18、缩减iframe的使用，如无必要，尽量不要使用 　　19、优化图片文件 　　20、当页面内容庞大到一定程度，可以采用分页的方式展现，或者taobao的那种翻页后载入方式。 来源：博客园 作者： 赖忠标 链接：https://www.cnblogs.com/lazb/p/11732160.html

本文转载于: 猿2048 网站➱ https://www.mk2048.com/blog/blog.php?id=ha00i0j20j 网站性能监测与优化策略 0.引言 作为互联网项目，最重要的便是用户体验。在举国“互联网+”的热潮中，用户至上也已经被大多数企业所接收，特别是在如今移动端快速发展的时代，我们的网页不仅只是呈现在用户的PC浏览器里，更多的时候，用户是通过移动产品浏览我们的网页。加之有越来越多的开发者投入到Web APP和Hybrid APP的开发队伍中，性能，又再一次成为了被程序员们重点关注的话题。我曾经看到过这样一句话：一个网站的体验，决定了用户是否愿意去了解网站的功能；而网站的功能，决定了用户是否会一票否决网站的体验。这是改版自网络上的一句流行语，但却把网站性能这件事说的十分透彻，特别是在网站这样的项目中，如果一个用户需要超过5s才能看见页面，他会毫不犹豫地关闭它。 性能优化，作为工程师界的“上乘武功”，是我们在开发中老生常谈的话题，也是一名开发者从入门向资深进阶的必经阶段，虽然我们看到过很多的标准、军规，但在真正实践中，却常常力不从心，不知道落下了什么，不知道性能是否还有进一步优化的空间。 对于网站的性能，在行业内有很多既定的指标，但就以我们Front-Enders而言，应该更加关注以下指标：白屏时间、首屏时间、整页时间、DNS时间、CPU占用率

1、减少 HTTP 资源请求次数 　　合并静态资源图片、JavaScript 或 CSS 代码，减少页面请求数和资源请求消耗 　　避免重复的资源，防止增加多余请求 　　减少没必要的图片、JavaScript、CSS 及 HTML 代码 　　对文件进行压缩优化 　　使用 gzip 等方式压缩传输文件 3、将 CSS 或 JavaScript 放到外部文件中，避免使用 <style> 或 <script> 标签直接引入 　　在 HTML 文件中引用外部资源可以有效利用浏览器的静态资源缓存 4、避免页面中空的 href 和 src 　　当 <link> 标签的 href 属性为空，或 <script> 、 <img> 、 <iframe> 标签的 src 属性为空时，浏览器在渲染的过程中仍会将 href 属性或 src 属性中的空内容进行加载，直至加载失败，这样就阻塞了页面中其他资源的下载进程 ， 而且最终加载到的内容是无效的，因此要尽量避免 　　为 HTMl 内容设置 CaChe-Control 或 Expires 可以将 HTML 内容缓存起来，避免频繁向服务器端发送请求。 <meta http-equiv= " Cache-Control " content= " max-age=7200 " /> <meta http-equiv= " Expires " content= "

1.讲讲输入完网址按下回车，到看到网页这个过程中发生了什么 a. 域名解析 b. 发起TCP的3次握手 c. 建立TCP连接后发起http请求 d. 服务器端响应http请求，浏览器得到html代码 e. 浏览器解析html代码，并请求html代码中的资源 f. 浏览器对页面进行渲染呈现给用户 2.谈谈你对前端性能优化的理解 a. 请求数量：合并脚本和样式表，CSS Sprites，拆分初始化负载，划分主域 b. 请求带宽：开启GZip，精简JavaScript，移除重复脚本，图像优化，将icon做成字体 c. 缓存利用：使用CDN，使用外部JavaScript和CSS，添加Expires头，减少DNS查找，配置ETag，使AjaX可缓存 d. 页面结构：将样式表放在顶部，将脚本放在底部，尽早刷新文档的输出 e. 代码校验：避免CSS表达式，避免重定向 3.前端 MV*框架的意义 早期前端都是比较简单，基本以页面为工作单元，内容以浏览型为主，也偶尔有简单的表单操作，基本不太需要框架。 随着 AJAX 的出现，Web2.0的兴起，人们可以在页面上可以做比较复杂的事情了，然后前端框架才真正出现了。 如果是页面型产品，多数确实不太需要它，因为页面中的 JavaScript代码，处理交互的绝对远远超过处理模型的，但是如果是应用软件类产品，这就太需要了。 长期做某个行业软件的公司