/
path---2013-load-c237d418379ff9590dea.js.map
1 lines (1 loc) · 29.8 KB
/
path---2013-load-c237d418379ff9590dea.js.map
1
{"version":3,"sources":["webpack:///path---2013-load-c237d418379ff9590dea.js","webpack:///./.cache/json/2013-load.json"],"names":["webpackJsonp","554","module","exports","data","site","siteMetadata","title","subtitle","copyright","author","name","rss","email","github","markdownRemark","id","html","excerpt","fields","tagSlugs","frontmatter","tags","date","description","pathContext","slug"],"mappings":"AAAAA,cAAc,iBAERC,IACA,SAAUC,EAAQC,GCHxBD,EAAAC,SAAkBC,MAAQC,MAAQC,cAAgBC,MAAA,YAAAC,SAAA,YAAAC,UAAA,yBAAAC,QAA0FC,KAAA,KAAAC,IAAA,IAAAC,MAAA,oBAAAC,OAAA,gBAA0EC,gBAAmBC,GAAA,mGAAAC,KAAA,snSAA25QC,QAAA,IAAAC,QAA4+BC,UAAA,wFAAmGC,aAAgBd,MAAA,iBAAAe,MAAA,6CAAAC,KAAA,2BAAAC,YAAA,QAAqIC,aAAgBC,KAAA","file":"path---2013-load-c237d418379ff9590dea.js","sourcesContent":["webpackJsonp([280419118791960],{\n\n/***/ 554:\n/***/ (function(module, exports) {\n\n\tmodule.exports = {\"data\":{\"site\":{\"siteMetadata\":{\"title\":\"Step Over\",\"subtitle\":\"有趣的灵魂终会相遇\",\"copyright\":\"© All rights reserved.\",\"author\":{\"name\":\"周骅\",\"rss\":\"#\",\"email\":\"zhou--hua@163.com\",\"github\":\"zhouhua-js\"}}},\"markdownRemark\":{\"id\":\"/work/playground/zhouhua.site/src/pages/articles/2013/load.md absPath of file >>> MarkdownRemark\",\"html\":\"<p>无论是一位前端开发人员，还是一位产品设计人员，永远需要把用户体验放在第一位。只有良好的用户体验才会带来用户的持续关注和产品使用。那么，对于网站的设计来说，良好的用户体验又是如何建立的呢？因素很多，例如快速响应、良好交互、配色和谐、高易用性、风格统一等等，不过我认为有以下几个方面是在进行CSS开发时尤其需要关注的：</p>\\n<ul>\\n<li>\\n<p>响应速度。毫无疑问，这是用户体验的第一道关卡。网站没有理由要求用户每次花费10秒的时间用在网页载入上，太多的等待或许让网站的精彩内容来不及呈现在用户面前。</p>\\n</li>\\n<li>\\n<p>高可用性。网站很难限制用户使用何种设备、使用何种浏览器进行访问。如果用户不能够以他最熟悉的方式访问一个网站，也就意味着网站将要失去这个用户。</p>\\n</li>\\n</ul>\\n<p>《CSS性能优化》系列文章针对提升响应速度，对CSS的性能优化做一些研究，并给出一些优化建议。俗话说，磨刀不误砍柴工。今天我们先要聊的不是具体的优化建议，而是CSS的加载过程。</p>\\n<p>回想一下前后端的交互过程，可以总结出网页上一个文件的传输过程，从URL请求开始，大致经历了以下步骤：</p>\\n<p> \\n <a\\n class=\\\"gatsby-resp-image-link\\\"\\n href=\\\"/static/steps-4c7b8765be03b674e370c45a33b46b21-6f419.png\\\"\\n style=\\\"display: block\\\"\\n target=\\\"_blank\\\"\\n rel=\\\"noopener\\\"\\n >\\n \\n <span\\n class=\\\"gatsby-resp-image-wrapper\\\"\\n style=\\\"position: relative; display: block; ; max-width: 900px; margin-left: auto; margin-right: auto;\\\"\\n >\\n <span\\n class=\\\"gatsby-resp-image-background-image\\\"\\n style=\\\"padding-bottom: 19.11111111111111%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAECAYAAACOXx+WAAAACXBIWXMAAAsSAAALEgHS3X78AAABF0lEQVQY0z2Py0rDQBSGU3eCYF14ARfewMszCT6H4MIn8AF8AtdqkzbJpKbTSeqlmqSZJDOTKWmsIlLEjQsL1TiTFs/m+8/l/+EoxyeniizKs01Jng2XehGtSv0++tySZP3BhmTXwwtivyJ1wvrb012+xgcv81LHlJdZCnJvD+u6Wfg9bDd0c2iAZt598ltXNW1CGdfsVnv86AUdiByq1vURjollQ/QbRola0+pfummBoiiU/3I6d0emdVMEYYRA034Vx88i0Lm8VieEcVP0Yy8I79vITRsG+IgJgxC5P1FCgQGsb+GFIrBShr3luGQYs70p01Ufk+XyrTTblwww2T07v5iD7kMVE74uZ16YHMx8O0Ivzu4qf1BjsHeKLeF5AAAAAElFTkSuQmCC'); background-size: cover; display: block;\\\"\\n >\\n <img\\n class=\\\"gatsby-resp-image-image\\\"\\n style=\\\"width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;\\\"\\n alt=\\\"steps\\\"\\n title=\\\"\\\"\\n src=\\\"/static/steps-4c7b8765be03b674e370c45a33b46b21-6f419.png\\\"\\n srcset=\\\"/static/steps-4c7b8765be03b674e370c45a33b46b21-e02c0.png 240w,\\n/static/steps-4c7b8765be03b674e370c45a33b46b21-3120d.png 480w,\\n/static/steps-4c7b8765be03b674e370c45a33b46b21-6f419.png 900w\\\"\\n sizes=\\\"(max-width: 900px) 100vw, 900px\\\"\\n />\\n </span>\\n </span>\\n \\n </a>\\n \\n图1：网页HTTP请求过程</p>\\n<p>下面就一起来详细了解一下这几个步骤。</p>\\n<h2>1. 缓存读取（Cache Read）</h2>\\n<p>缓存是技术人员经常会听到的一个词，这里的缓存指的是浏览器缓存。图片、CSS文件、JS文件，甚至是每一次的AJAX请求数据，浏览器获得这些数据后通常都会临时保存在缓存里。一段时间内，当需要再次使用这些数据时，不必重新向服务器请求，直接从本地缓存中获得这些数据，从而加快网页的加载速度。</p>\\n<p>具体到CSS文件，当浏览器要请求一个CSS文件之前，它会先根据这个CSS文件的URL在缓存中查找，如果缓存查找成功，则直接进入渲染环节；否则，需要从服务器上获取此文件后，再进入渲染环节。不过，缓存可不是一直存在于用户浏览器中的，任何缓存数据都可能会失效。一旦缓存失效了，浏览器请求这个CSS的时候，就必须向服务器获取了。下图是对微软首页一个CSS文件的请求信息分析，可以看到，在响应消息头字段中，有一个<code>Expires</code>策略（HTTP 1.0规范，标记该文件在缓存中失效的时间）和<code>Cache-Control</code>策略的<code>max-age</code>属性（HTTP 1.1规范，标记该文件在缓存中的生存期，现代浏览器均优先采用此策略）。</p>\\n<p> \\n <a\\n class=\\\"gatsby-resp-image-link\\\"\\n href=\\\"/static/cache-69b56593ab37e070e6e21b9bb40571fd-f1b79.jpg\\\"\\n style=\\\"display: block\\\"\\n target=\\\"_blank\\\"\\n rel=\\\"noopener\\\"\\n >\\n \\n <span\\n class=\\\"gatsby-resp-image-wrapper\\\"\\n style=\\\"position: relative; display: block; ; max-width: 702px; margin-left: auto; margin-right: auto;\\\"\\n >\\n <span\\n class=\\\"gatsby-resp-image-background-image\\\"\\n style=\\\"padding-bottom: 61.53846153846154%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAMABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAgAF/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEAMQAAAB2iWUo//EABkQAAIDAQAAAAAAAAAAAAAAAAABAhESIf/aAAgBAQABBQLPKZQpuQhn/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAFxABAAMAAAAAAAAAAAAAAAAAEAARIf/aAAgBAQAGPwI2U//EABsQAAMAAgMAAAAAAAAAAAAAAAABESExQVGR/9oACAEBAAE/IZXYXAj0MgSkFjtNz//aAAwDAQACAAMAAAAQJM//xAAWEQEBAQAAAAAAAAAAAAAAAAABEBH/2gAIAQMBAT8QDZ//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/ED//xAAZEAEBAQEBAQAAAAAAAAAAAAABEQAxIXH/2gAIAQEAAT8QsLIPBMjNvGWBUuGmhePIY0/N/9k='); background-size: cover; display: block;\\\"\\n >\\n <img\\n class=\\\"gatsby-resp-image-image\\\"\\n style=\\\"width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;\\\"\\n alt=\\\"cache\\\"\\n title=\\\"\\\"\\n src=\\\"/static/cache-69b56593ab37e070e6e21b9bb40571fd-f1b79.jpg\\\"\\n srcset=\\\"/static/cache-69b56593ab37e070e6e21b9bb40571fd-8449b.jpg 240w,\\n/static/cache-69b56593ab37e070e6e21b9bb40571fd-c35c1.jpg 480w,\\n/static/cache-69b56593ab37e070e6e21b9bb40571fd-f1b79.jpg 702w\\\"\\n sizes=\\\"(max-width: 702px) 100vw, 702px\\\"\\n />\\n </span>\\n </span>\\n \\n </a>\\n </p>\\n<p>图2：缓存有效期分析</p>\\n<h2>2. 连接等待（Blocked）</h2>\\n<p>当浏览器需要请求一个URL时，有时候并不能立即执行。那是因为浏览器对同一个主机名下的连接数量有限制。例如打开微软首页的时候，会有很多的文件需要下载，像CSS、图片之类的文件是可以并行下载的。然而，对于并发连接数不同的浏览器有不同的限制，一旦一个请求超出了当前并发数目的限制，则不能立刻开始，而是进入等待队列，这段时间就是“Blocked”。列举几个浏览器默认的并发连接数如下表。（注意：浏览器的并发连接数往往是可以修改的，所以此数据仅供参考，不可作为开发依据。）</p>\\n<p>表1：浏览器默认并发连接数</p>\\n<table>\\n<thead>\\n<tr>\\n<th align=\\\"center\\\">浏览器</th>\\n<th align=\\\"center\\\">HTTP 1.1 并发连接数</th>\\n</tr>\\n</thead>\\n<tbody>\\n<tr>\\n<td align=\\\"center\\\">IE 6，IE 7</td>\\n<td align=\\\"center\\\">2</td>\\n</tr>\\n<tr>\\n<td align=\\\"center\\\">IE 8，IE 9</td>\\n<td align=\\\"center\\\">6</td>\\n</tr>\\n<tr>\\n<td align=\\\"center\\\">Firefox 2</td>\\n<td align=\\\"center\\\">2</td>\\n</tr>\\n<tr>\\n<td align=\\\"center\\\">Firefox 3</td>\\n<td align=\\\"center\\\">6</td>\\n</tr>\\n<tr>\\n<td align=\\\"center\\\">Safari 3，Safari 4</td>\\n<td align=\\\"center\\\">4</td>\\n</tr>\\n<tr>\\n<td align=\\\"center\\\">Chrome 1，Chrome 2</td>\\n<td align=\\\"center\\\">6</td>\\n</tr>\\n<tr>\\n<td align=\\\"center\\\">Chrome 3</td>\\n<td align=\\\"center\\\">4</td>\\n</tr>\\n<tr>\\n<td align=\\\"center\\\">Chrome 4及以上版本</td>\\n<td align=\\\"center\\\">6</td>\\n</tr>\\n<tr>\\n<td align=\\\"center\\\">Opera 9.63，Opera 10.00 alpha</td>\\n<td align=\\\"center\\\">4</td>\\n</tr>\\n<tr>\\n<td align=\\\"center\\\">Opera 10.51及以上版本</td>\\n<td align=\\\"center\\\">8</td>\\n</tr>\\n<tr>\\n<td align=\\\"center\\\">Android 2-4（默认）</td>\\n<td align=\\\"center\\\">4</td>\\n</tr>\\n</tbody>\\n</table>\\n<h2>3. DNS查找（DNS Lookup）</h2>\\n<p>浏览器与服务器的交互是基于<code>TCP/IP协议</code>的，即必须知道服务器的IP地址才能对其进行访问。但是人们打开一个网站，通常在浏览器中输入URL是主机名+域名的形式，如“www.baidu.com”中，“www”是主机名，“baidu.com”是域名。浏览器要访问这个网址之前，必须要先解析出域名所对应的IP地址， 这个过程就是DNS查找的过程。以windows系统为例，浏览器先从浏览器DNS缓存中查找；如果找不到，则到系统DNS缓存中查找；如果找不到则查询hosts文件中的匹配规则；如果依然找不到，则开始发起DNS查询请求，从路由器DNS缓存开始，经过运营商DNS服务器等，直到根DNS服务器，层层往上递归查找，如果找到则停止查找，获得IP地址，如果到最后也找不到，则意味着这个网址无法访问。这部分的时间开销就是“DNS Lookup”。</p>\\n<h2>4. 连接（Connect）</h2>\\n<p>查询到了服务器的IP就可以与服务器进行通信的。由于HTTP协议是架构于TCP/IP协议上的，因而需要与服务器建议TCP连接。建立TCP连接时，双方需要经过三次握手通信，才能完成连接步骤。这部分的时间开销就是“Connect”。</p>\\n<h2>5. 发送请求（Send）</h2>\\n<p>建立连接之后，浏览器就会向服务器发送请求报文。如图8-3所示就是浏览器向服务器请求CSS文件的报头字段。</p>\\n<p> \\n <a\\n class=\\\"gatsby-resp-image-link\\\"\\n href=\\\"/static/require-2fd6ed10f9da12ce1ae34fa42991216d-ccbb6.jpg\\\"\\n style=\\\"display: block\\\"\\n target=\\\"_blank\\\"\\n rel=\\\"noopener\\\"\\n >\\n \\n <span\\n class=\\\"gatsby-resp-image-wrapper\\\"\\n style=\\\"position: relative; display: block; ; max-width: 703px; margin-left: auto; margin-right: auto;\\\"\\n >\\n <span\\n class=\\\"gatsby-resp-image-background-image\\\"\\n style=\\\"padding-bottom: 71.40825035561878%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAOABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAECBf/EABQBAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhADEAAAAexVI0P/xAAXEAEBAQEAAAAAAAAAAAAAAAABABES/9oACAEBAAEFAgjJy6GCy//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABUQAQEAAAAAAAAAAAAAAAAAABAR/9oACAEBAAY/AmP/xAAcEAACAgIDAAAAAAAAAAAAAAAAAREhMVFxsfH/2gAIAQEAAT8hTHBs7ElVirk8CH4ND//aAAwDAQACAAMAAAAQ0w//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/ED//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/ED//xAAaEAEAAwEBAQAAAAAAAAAAAAABABEhMUFR/9oACAEBAAE/ELddpxIG1ioqMY7cNRl9AQ5wz7aGQAM8Kn//2Q=='); background-size: cover; display: block;\\\"\\n >\\n <img\\n class=\\\"gatsby-resp-image-image\\\"\\n style=\\\"width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;\\\"\\n alt=\\\"require\\\"\\n title=\\\"\\\"\\n src=\\\"/static/require-2fd6ed10f9da12ce1ae34fa42991216d-ccbb6.jpg\\\"\\n srcset=\\\"/static/require-2fd6ed10f9da12ce1ae34fa42991216d-6ac60.jpg 240w,\\n/static/require-2fd6ed10f9da12ce1ae34fa42991216d-fc386.jpg 480w,\\n/static/require-2fd6ed10f9da12ce1ae34fa42991216d-ccbb6.jpg 703w\\\"\\n sizes=\\\"(max-width: 703px) 100vw, 703px\\\"\\n />\\n </span>\\n </span>\\n \\n </a>\\n \\n图3：CSS文件请求报头示例</p>\\n<p>通常网页在加载的过程中，诸如CSS文件、JS文件、图片等资源都是以<code>GET</code>方法获取的，请求报文中只包含报头信息。尽管如此，请求报文中包含的内容还是比较丰富的。从上图中可以看到，有接受数据类型、当前网站的Cookie、请求发起页面、服务器域名、用户浏览器信息等等。这一步骤中，传送完成这些数据的时间开销就是“Send”。</p>\\n<h2>6. 等待（Wait）</h2>\\n<p>服务器接收到浏览器请求后需要对请求进行处理。这段时间取决于服务器的处理速度。</p>\\n<h2>7. 接收请求（Receive）</h2>\\n<p>当服务器把数据准备好了，就可以把数据传输回客户端，这部分的时间取决于网络条件和数据大小。这一个步骤往往是初学者误认为是下载数据的全部开销，其实这一个步骤只是其中的一步而已。</p>\\n<p>CSS文件传输方面的优化就是要让文件传输时间尽可能地小，上面讲解的七个步骤，其实每个步骤都有可能是性能的瓶颈，每个步骤也可能可以被优化。下一篇文章将会给出一些优化建议，这些优化建议可能不是最全面的，但希望读者朋友深入理解这些优化手段背后的原理，这样才能举一反三，触类旁通。</p>\",\"excerpt\":\"…\",\"fields\":{\"tagSlugs\":[\"/tags/cache/\",\"/tags/css/\",\"/tags/css加载/\",\"/tags/css性能优化/\",\"/tags/http/\",\"/tags/并发/\"]},\"frontmatter\":{\"title\":\"CSS性能优化系列之加载原理\",\"tags\":[\"Cache\",\"CSS\",\"CSS加载\",\"CSS性能优化\",\"HTTP\",\"并发\"],\"date\":\"2013-07-27T22:20:13.000Z\",\"description\":null}}},\"pathContext\":{\"slug\":\"/2013/load/\"}}\n\n/***/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// path---2013-load-c237d418379ff9590dea.js","module.exports = {\"data\":{\"site\":{\"siteMetadata\":{\"title\":\"Step Over\",\"subtitle\":\"有趣的灵魂终会相遇\",\"copyright\":\"© All rights reserved.\",\"author\":{\"name\":\"周骅\",\"rss\":\"#\",\"email\":\"zhou--hua@163.com\",\"github\":\"zhouhua-js\"}}},\"markdownRemark\":{\"id\":\"/work/playground/zhouhua.site/src/pages/articles/2013/load.md absPath of file >>> MarkdownRemark\",\"html\":\"<p>无论是一位前端开发人员，还是一位产品设计人员，永远需要把用户体验放在第一位。只有良好的用户体验才会带来用户的持续关注和产品使用。那么，对于网站的设计来说，良好的用户体验又是如何建立的呢？因素很多，例如快速响应、良好交互、配色和谐、高易用性、风格统一等等，不过我认为有以下几个方面是在进行CSS开发时尤其需要关注的：</p>\\n<ul>\\n<li>\\n<p>响应速度。毫无疑问，这是用户体验的第一道关卡。网站没有理由要求用户每次花费10秒的时间用在网页载入上，太多的等待或许让网站的精彩内容来不及呈现在用户面前。</p>\\n</li>\\n<li>\\n<p>高可用性。网站很难限制用户使用何种设备、使用何种浏览器进行访问。如果用户不能够以他最熟悉的方式访问一个网站，也就意味着网站将要失去这个用户。</p>\\n</li>\\n</ul>\\n<p>《CSS性能优化》系列文章针对提升响应速度，对CSS的性能优化做一些研究，并给出一些优化建议。俗话说，磨刀不误砍柴工。今天我们先要聊的不是具体的优化建议，而是CSS的加载过程。</p>\\n<p>回想一下前后端的交互过程，可以总结出网页上一个文件的传输过程，从URL请求开始，大致经历了以下步骤：</p>\\n<p> \\n <a\\n class=\\\"gatsby-resp-image-link\\\"\\n href=\\\"/static/steps-4c7b8765be03b674e370c45a33b46b21-6f419.png\\\"\\n style=\\\"display: block\\\"\\n target=\\\"_blank\\\"\\n rel=\\\"noopener\\\"\\n >\\n \\n <span\\n class=\\\"gatsby-resp-image-wrapper\\\"\\n style=\\\"position: relative; display: block; ; max-width: 900px; margin-left: auto; margin-right: auto;\\\"\\n >\\n <span\\n class=\\\"gatsby-resp-image-background-image\\\"\\n style=\\\"padding-bottom: 19.11111111111111%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAECAYAAACOXx+WAAAACXBIWXMAAAsSAAALEgHS3X78AAABF0lEQVQY0z2Py0rDQBSGU3eCYF14ARfewMszCT6H4MIn8AF8AtdqkzbJpKbTSeqlmqSZJDOTKWmsIlLEjQsL1TiTFs/m+8/l/+EoxyeniizKs01Jng2XehGtSv0++tySZP3BhmTXwwtivyJ1wvrb012+xgcv81LHlJdZCnJvD+u6Wfg9bDd0c2iAZt598ltXNW1CGdfsVnv86AUdiByq1vURjollQ/QbRola0+pfummBoiiU/3I6d0emdVMEYYRA034Vx88i0Lm8VieEcVP0Yy8I79vITRsG+IgJgxC5P1FCgQGsb+GFIrBShr3luGQYs70p01Ufk+XyrTTblwww2T07v5iD7kMVE74uZ16YHMx8O0Ivzu4qf1BjsHeKLeF5AAAAAElFTkSuQmCC'); background-size: cover; display: block;\\\"\\n >\\n <img\\n class=\\\"gatsby-resp-image-image\\\"\\n style=\\\"width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;\\\"\\n alt=\\\"steps\\\"\\n title=\\\"\\\"\\n src=\\\"/static/steps-4c7b8765be03b674e370c45a33b46b21-6f419.png\\\"\\n srcset=\\\"/static/steps-4c7b8765be03b674e370c45a33b46b21-e02c0.png 240w,\\n/static/steps-4c7b8765be03b674e370c45a33b46b21-3120d.png 480w,\\n/static/steps-4c7b8765be03b674e370c45a33b46b21-6f419.png 900w\\\"\\n sizes=\\\"(max-width: 900px) 100vw, 900px\\\"\\n />\\n </span>\\n </span>\\n \\n </a>\\n \\n图1：网页HTTP请求过程</p>\\n<p>下面就一起来详细了解一下这几个步骤。</p>\\n<h2>1. 缓存读取（Cache Read）</h2>\\n<p>缓存是技术人员经常会听到的一个词，这里的缓存指的是浏览器缓存。图片、CSS文件、JS文件，甚至是每一次的AJAX请求数据，浏览器获得这些数据后通常都会临时保存在缓存里。一段时间内，当需要再次使用这些数据时，不必重新向服务器请求，直接从本地缓存中获得这些数据，从而加快网页的加载速度。</p>\\n<p>具体到CSS文件，当浏览器要请求一个CSS文件之前，它会先根据这个CSS文件的URL在缓存中查找，如果缓存查找成功，则直接进入渲染环节；否则，需要从服务器上获取此文件后，再进入渲染环节。不过，缓存可不是一直存在于用户浏览器中的，任何缓存数据都可能会失效。一旦缓存失效了，浏览器请求这个CSS的时候，就必须向服务器获取了。下图是对微软首页一个CSS文件的请求信息分析，可以看到，在响应消息头字段中，有一个<code>Expires</code>策略（HTTP 1.0规范，标记该文件在缓存中失效的时间）和<code>Cache-Control</code>策略的<code>max-age</code>属性（HTTP 1.1规范，标记该文件在缓存中的生存期，现代浏览器均优先采用此策略）。</p>\\n<p> \\n <a\\n class=\\\"gatsby-resp-image-link\\\"\\n href=\\\"/static/cache-69b56593ab37e070e6e21b9bb40571fd-f1b79.jpg\\\"\\n style=\\\"display: block\\\"\\n target=\\\"_blank\\\"\\n rel=\\\"noopener\\\"\\n >\\n \\n <span\\n class=\\\"gatsby-resp-image-wrapper\\\"\\n style=\\\"position: relative; display: block; ; max-width: 702px; margin-left: auto; margin-right: auto;\\\"\\n >\\n <span\\n class=\\\"gatsby-resp-image-background-image\\\"\\n style=\\\"padding-bottom: 61.53846153846154%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAMABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAgAF/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEAMQAAAB2iWUo//EABkQAAIDAQAAAAAAAAAAAAAAAAABAhESIf/aAAgBAQABBQLPKZQpuQhn/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAFxABAAMAAAAAAAAAAAAAAAAAEAARIf/aAAgBAQAGPwI2U//EABsQAAMAAgMAAAAAAAAAAAAAAAABESExQVGR/9oACAEBAAE/IZXYXAj0MgSkFjtNz//aAAwDAQACAAMAAAAQJM//xAAWEQEBAQAAAAAAAAAAAAAAAAABEBH/2gAIAQMBAT8QDZ//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/ED//xAAZEAEBAQEBAQAAAAAAAAAAAAABEQAxIXH/2gAIAQEAAT8QsLIPBMjNvGWBUuGmhePIY0/N/9k='); background-size: cover; display: block;\\\"\\n >\\n <img\\n class=\\\"gatsby-resp-image-image\\\"\\n style=\\\"width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;\\\"\\n alt=\\\"cache\\\"\\n title=\\\"\\\"\\n src=\\\"/static/cache-69b56593ab37e070e6e21b9bb40571fd-f1b79.jpg\\\"\\n srcset=\\\"/static/cache-69b56593ab37e070e6e21b9bb40571fd-8449b.jpg 240w,\\n/static/cache-69b56593ab37e070e6e21b9bb40571fd-c35c1.jpg 480w,\\n/static/cache-69b56593ab37e070e6e21b9bb40571fd-f1b79.jpg 702w\\\"\\n sizes=\\\"(max-width: 702px) 100vw, 702px\\\"\\n />\\n </span>\\n </span>\\n \\n </a>\\n </p>\\n<p>图2：缓存有效期分析</p>\\n<h2>2. 连接等待（Blocked）</h2>\\n<p>当浏览器需要请求一个URL时，有时候并不能立即执行。那是因为浏览器对同一个主机名下的连接数量有限制。例如打开微软首页的时候，会有很多的文件需要下载，像CSS、图片之类的文件是可以并行下载的。然而，对于并发连接数不同的浏览器有不同的限制，一旦一个请求超出了当前并发数目的限制，则不能立刻开始，而是进入等待队列，这段时间就是“Blocked”。列举几个浏览器默认的并发连接数如下表。（注意：浏览器的并发连接数往往是可以修改的，所以此数据仅供参考，不可作为开发依据。）</p>\\n<p>表1：浏览器默认并发连接数</p>\\n<table>\\n<thead>\\n<tr>\\n<th align=\\\"center\\\">浏览器</th>\\n<th align=\\\"center\\\">HTTP 1.1 并发连接数</th>\\n</tr>\\n</thead>\\n<tbody>\\n<tr>\\n<td align=\\\"center\\\">IE 6，IE 7</td>\\n<td align=\\\"center\\\">2</td>\\n</tr>\\n<tr>\\n<td align=\\\"center\\\">IE 8，IE 9</td>\\n<td align=\\\"center\\\">6</td>\\n</tr>\\n<tr>\\n<td align=\\\"center\\\">Firefox 2</td>\\n<td align=\\\"center\\\">2</td>\\n</tr>\\n<tr>\\n<td align=\\\"center\\\">Firefox 3</td>\\n<td align=\\\"center\\\">6</td>\\n</tr>\\n<tr>\\n<td align=\\\"center\\\">Safari 3，Safari 4</td>\\n<td align=\\\"center\\\">4</td>\\n</tr>\\n<tr>\\n<td align=\\\"center\\\">Chrome 1，Chrome 2</td>\\n<td align=\\\"center\\\">6</td>\\n</tr>\\n<tr>\\n<td align=\\\"center\\\">Chrome 3</td>\\n<td align=\\\"center\\\">4</td>\\n</tr>\\n<tr>\\n<td align=\\\"center\\\">Chrome 4及以上版本</td>\\n<td align=\\\"center\\\">6</td>\\n</tr>\\n<tr>\\n<td align=\\\"center\\\">Opera 9.63，Opera 10.00 alpha</td>\\n<td align=\\\"center\\\">4</td>\\n</tr>\\n<tr>\\n<td align=\\\"center\\\">Opera 10.51及以上版本</td>\\n<td align=\\\"center\\\">8</td>\\n</tr>\\n<tr>\\n<td align=\\\"center\\\">Android 2-4（默认）</td>\\n<td align=\\\"center\\\">4</td>\\n</tr>\\n</tbody>\\n</table>\\n<h2>3. DNS查找（DNS Lookup）</h2>\\n<p>浏览器与服务器的交互是基于<code>TCP/IP协议</code>的，即必须知道服务器的IP地址才能对其进行访问。但是人们打开一个网站，通常在浏览器中输入URL是主机名+域名的形式，如“www.baidu.com”中，“www”是主机名，“baidu.com”是域名。浏览器要访问这个网址之前，必须要先解析出域名所对应的IP地址， 这个过程就是DNS查找的过程。以windows系统为例，浏览器先从浏览器DNS缓存中查找；如果找不到，则到系统DNS缓存中查找；如果找不到则查询hosts文件中的匹配规则；如果依然找不到，则开始发起DNS查询请求，从路由器DNS缓存开始，经过运营商DNS服务器等，直到根DNS服务器，层层往上递归查找，如果找到则停止查找，获得IP地址，如果到最后也找不到，则意味着这个网址无法访问。这部分的时间开销就是“DNS Lookup”。</p>\\n<h2>4. 连接（Connect）</h2>\\n<p>查询到了服务器的IP就可以与服务器进行通信的。由于HTTP协议是架构于TCP/IP协议上的，因而需要与服务器建议TCP连接。建立TCP连接时，双方需要经过三次握手通信，才能完成连接步骤。这部分的时间开销就是“Connect”。</p>\\n<h2>5. 发送请求（Send）</h2>\\n<p>建立连接之后，浏览器就会向服务器发送请求报文。如图8-3所示就是浏览器向服务器请求CSS文件的报头字段。</p>\\n<p> \\n <a\\n class=\\\"gatsby-resp-image-link\\\"\\n href=\\\"/static/require-2fd6ed10f9da12ce1ae34fa42991216d-ccbb6.jpg\\\"\\n style=\\\"display: block\\\"\\n target=\\\"_blank\\\"\\n rel=\\\"noopener\\\"\\n >\\n \\n <span\\n class=\\\"gatsby-resp-image-wrapper\\\"\\n style=\\\"position: relative; display: block; ; max-width: 703px; margin-left: auto; margin-right: auto;\\\"\\n >\\n <span\\n class=\\\"gatsby-resp-image-background-image\\\"\\n style=\\\"padding-bottom: 71.40825035561878%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAOABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAECBf/EABQBAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhADEAAAAexVI0P/xAAXEAEBAQEAAAAAAAAAAAAAAAABABES/9oACAEBAAEFAgjJy6GCy//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABUQAQEAAAAAAAAAAAAAAAAAABAR/9oACAEBAAY/AmP/xAAcEAACAgIDAAAAAAAAAAAAAAAAAREhMVFxsfH/2gAIAQEAAT8hTHBs7ElVirk8CH4ND//aAAwDAQACAAMAAAAQ0w//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/ED//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/ED//xAAaEAEAAwEBAQAAAAAAAAAAAAABABEhMUFR/9oACAEBAAE/ELddpxIG1ioqMY7cNRl9AQ5wz7aGQAM8Kn//2Q=='); background-size: cover; display: block;\\\"\\n >\\n <img\\n class=\\\"gatsby-resp-image-image\\\"\\n style=\\\"width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;\\\"\\n alt=\\\"require\\\"\\n title=\\\"\\\"\\n src=\\\"/static/require-2fd6ed10f9da12ce1ae34fa42991216d-ccbb6.jpg\\\"\\n srcset=\\\"/static/require-2fd6ed10f9da12ce1ae34fa42991216d-6ac60.jpg 240w,\\n/static/require-2fd6ed10f9da12ce1ae34fa42991216d-fc386.jpg 480w,\\n/static/require-2fd6ed10f9da12ce1ae34fa42991216d-ccbb6.jpg 703w\\\"\\n sizes=\\\"(max-width: 703px) 100vw, 703px\\\"\\n />\\n </span>\\n </span>\\n \\n </a>\\n \\n图3：CSS文件请求报头示例</p>\\n<p>通常网页在加载的过程中，诸如CSS文件、JS文件、图片等资源都是以<code>GET</code>方法获取的，请求报文中只包含报头信息。尽管如此，请求报文中包含的内容还是比较丰富的。从上图中可以看到，有接受数据类型、当前网站的Cookie、请求发起页面、服务器域名、用户浏览器信息等等。这一步骤中，传送完成这些数据的时间开销就是“Send”。</p>\\n<h2>6. 等待（Wait）</h2>\\n<p>服务器接收到浏览器请求后需要对请求进行处理。这段时间取决于服务器的处理速度。</p>\\n<h2>7. 接收请求（Receive）</h2>\\n<p>当服务器把数据准备好了，就可以把数据传输回客户端，这部分的时间取决于网络条件和数据大小。这一个步骤往往是初学者误认为是下载数据的全部开销，其实这一个步骤只是其中的一步而已。</p>\\n<p>CSS文件传输方面的优化就是要让文件传输时间尽可能地小，上面讲解的七个步骤，其实每个步骤都有可能是性能的瓶颈，每个步骤也可能可以被优化。下一篇文章将会给出一些优化建议，这些优化建议可能不是最全面的，但希望读者朋友深入理解这些优化手段背后的原理，这样才能举一反三，触类旁通。</p>\",\"excerpt\":\"…\",\"fields\":{\"tagSlugs\":[\"/tags/cache/\",\"/tags/css/\",\"/tags/css加载/\",\"/tags/css性能优化/\",\"/tags/http/\",\"/tags/并发/\"]},\"frontmatter\":{\"title\":\"CSS性能优化系列之加载原理\",\"tags\":[\"Cache\",\"CSS\",\"CSS加载\",\"CSS性能优化\",\"HTTP\",\"并发\"],\"date\":\"2013-07-27T22:20:13.000Z\",\"description\":null}}},\"pathContext\":{\"slug\":\"/2013/load/\"}}\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./~/json-loader!./.cache/json/2013-load.json\n// module id = 554\n// module chunks = 280419118791960"],"sourceRoot":""}