网页中包含的资源（图片、js、css、iframe等）引起的http请求基本上都来源于同一个域名，有的网站对静态资源文件使用了独立的无cookie域名。YSlow提倡的高性能网站准则中有一条“reduce DNS lookups”，减少域名数量以便减少域名解析所需要的时间，但是，有的情况下，适当的增加网页中使用的域名数却可以提升网页的速度。
首先，我们来看一个例子：
图片下载被阻塞：
http://blog.tugai.net/performance/sharding_dominant_domain/block_download.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>block image download</title> </head> <body> <p>只有前10张图片（IE，Firefox前6张）并行下载。</p> <img src="http://blog.tugai.net/performance/mime.php?type=img&v=1" /> <img src="http://blog.tugai.net/performance/mime.php?type=img&v=2" /> <img src="http://blog.tugai.net/performance/mime.php?type=img&v=3" /> <img src="http://blog.tugai.net/performance/mime.php?type=img&v=4" /> <img src="http://blog.tugai.net/performance/mime.php?type=img&v=5" /> <img src="http://blog.tugai.net/performance/mime.php?type=img&v=6" /> <img src="http://blog.tugai.net/performance/mime.php?type=img&v=7" /> <img src="http://blog.tugai.net/performance/mime.php?type=img&v=8" /> <img src="http://blog.tugai.net/performance/mime.php?type=img&v=9" /> <img src="http://blog.tugai.net/performance/mime.php?type=img&v=10" /> <img src="http://blog.tugai.net/performance/mime.php?type=img&v=11" /> <img src="http://blog.tugai.net/performance/mime.php?type=img&v=12" /> </body> </html>
在这个例子中，网页包含12张图片，每张图片加载需要4秒钟。
以下是网页加载时的瀑布图：
IE6加载时的瀑布图
Firefox3加载瀑布图
从上图中可以看到，IE6下，前10张图片是并行下载，后2张要在前10张图片下载完成后才开始下载，Firefox下情况比较类似，只不过图片是每6张一组下载。这是因为浏览器限制了同一个域名下最大并行下载数量（或者说最大连接数），当并行下载数到达上限时，其后的http请求就必须排队等待，除了图片外，css、html等网页资源也存在同样的问题。同一域名的最大并行下载数量与浏览器类型、浏览器版本、HTTP版本有关，以下是网上收集的数据，并未核实。
并行下载是加快网页显示非常关键的一项技术，如何多图片的并行下载呢？我们再来看另外一个例子。
多图片并行下载：
http://blog.tugai.net/performance/sharding_dominant_domain/parallel_download.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>parallel image download</title> </head> <body> <p>所有图片并行下载。</p> <img src="http://blog.tugai.net/performance/mime.php?type=img&v=1" /> <img src="http://blog.tugai.net/performance/mime.php?type=img&v=2" /> <img src="http://blog.tugai.net/performance/mime.php?type=img&v=3" /> <img src="http://blog.tugai.net/performance/mime.php?type=img&v=4" /> <img src="http://blog.tugai.net/performance/mime.php?type=img&v=5" /> <img src="http://blog.tugai.net/performance/mime.php?type=img&v=6" /> <img src="http://blog1.tugai.net/performance/mime.php?type=img&v=7" /> <img src="http://blog1.tugai.net/performance/mime.php?type=img&v=8" /> <img src="http://blog1.tugai.net/performance/mime.php?type=img&v=9" /> <img src="http://blog1.tugai.net/performance/mime.php?type=img&v=10" /> <img src="http://blog1.tugai.net/performance/mime.php?type=img&v=11" /> <img src="http://blog1.tugai.net/performance/mime.php?type=img&v=12" /> </body> </html>
再来看看该网页的瀑布图：
IE6加载瀑布图
Firefox3加载瀑布图
上例中已经实现了多图片的并行下载，网页加载时间从7.9s减少到4s，速度提升了一倍。从源代码中可以看到，图片使用了不同的域名，每个域名连接的图片不超过6张。本例的关键技术就是使用了多域名来区分资源（包括图片、css等）。
IP和域名
“每台服务器的最大连接数”，这里说的服务器是指的URL地址中的域名，而不是服务器的IP地址，所以，同一IP、不同域名会被看成不同的服务器。利用Apache的ServerAlias可以很方便的在同一域名下增加多个别名域名，相应的，在域名解析时只需要添加一个别名的CNAME记录即可。
多少个域名合适
在前面的内容中你已经看到了，两个域名比一个域名好，三个域名是否会比两个域名好呢？10个域名呢？YSlow的开发者、Yahoo网页性能专家Steve Souders在他的性能研究报告中指出，从一个域名增加到两个域名，网站性能能够得到提升，当域名大于两个时，会对网页加载时间产生负面影响。这个问题的最终答案是域名的数量与网页资源的数量、体积有关，但是，按着经验来说，两个足以。
如何划分资源
如何给指定的资源分配多域名中的一个域名呢？非常关键的一条原则是保证一个资源在分配时总是分配到固定的一个域名，这样，如果资源已经在浏览器缓存了的话，下次访问时就可以在缓存中读取，避免从其他域名再次下载资源。其中一种方法是，使用哈希函数转换资源的文件名为整数，再根据约定的算法选择域名。
当然，手动指定是最原始但有效的方法。
from http://wzfjesun.blog.163.com/blog/static/14245693920124148239436/
相关推荐
本文将详细介绍如何使用JavaScript技术实现页面载入时随机显示图片的效果。 首先，要实现随机显示图片的功能，我们首先需要准备一些图片资源，并将它们放在服务器上的某个目录中，比如名为“img”的目录下。这些...
本文详细介绍了如何使用AJAX在ASP应用中实现动态加载JavaScript文件、CSS文件以及执行JavaScript函数等功能。通过这种方式，可以有效提高Web应用的用户体验和性能。在实际应用中，需要注意安全性问题，比如使用`eval...
6. **优化资源加载**：减少页面等待时间的另一种方法是优化资源加载，如合并CSS和JS文件，压缩代码，利用CDN服务，以及采用异步加载非关键资源。 总结来说，通过JavaScript，我们可以控制页面载入过程，提供视觉...
### JS 页面载入等待特效知识点解析 在网页开发过程中，加载动画或提示信息常常被用来提升用户体验，尤其是在页面加载时间较长的情况下。通过合理的加载提示，可以让用户感到网站的专业性和友好性，减少用户的焦虑...
4. **图片懒加载**：为了提高页面性能，可以使用CSS和JavaScript结合实现图片的懒加载。只有当图片进入视口时，才会开始加载，这可以减少初始加载时间。 5. **交互反馈**：如果需要，可以使用JavaScript或jQuery...
pdf.js 是基于开放的 HTML5 及 JavaScript 技术实现的开源产品。简单说就是一个 PDF 解析器。直接在标准的HTML页面上载入和渲染PDF文件, 还可以提高安全性（不需要安装第三方插件，安全性由浏览器保证），浏览器所做...
JSLoader是一种利用JavaScript实现的文件加载工具，它主要用于动态地加载外部资源，如JavaScript文件、CSS样式表、图片等，并且在加载过程中提供进度反馈，以提升用户体验。在Web开发中，尤其在处理大量异步加载时，...
在"codefans.net"这个文件中，可能包含了项目的源代码、CSS样式文件和JavaScript脚本，你需要解压文件，查看和学习这些代码，以便于理解和应用到自己的项目中。记得在使用他人的代码时，尊重开源协议，并确保兼容性...
在JavaScript（JS）中实现图片切换效果是网页动态交互中常见的功能之一，它极大地提升了用户体验。这个主题涉及多个JS基础知识，包括DOM操作、事件处理、时间间隔和CSS样式控制等。接下来，我们将深入探讨这些关键...
1. **页面载入**：页面载入是指浏览器接收服务器发送的HTML、CSS、JavaScript等资源，并将其解析成可视化的网页。这个过程包括DNS解析、TCP连接建立、HTTP请求、服务器响应、数据传输以及浏览器解析渲染等步骤。如果...
- **网页资源大小**：网页中包含的图片、视频、脚本等资源的大小直接影响下载时间。 - **缓存机制**：浏览器缓存机制可以有效减少重复加载相同资源的时间。 - **前端优化**：如代码压缩、图片优化、异步加载等技术...
在提供的压缩包文件"texiao2852_1560680793"中，可能包含了一个实现页面载入进度条的示例代码或资源，你可以解压后查看具体实现。通过学习和实践，你可以创建出符合自己需求的页面载入进度条，提升用户在你的网站上...
通过巧妙地使用JavaScript和CSS，我们可以创建出各种吸引人的文字动画，使用户在等待页面完全加载时不会感到厌烦。实际操作中，可以根据项目需求选择合适的效果，并确保它们在不同设备和浏览器上都能良好运行。"说明...
在本文中，我们将探讨如何使用JavaScript读取本地文件夹，并实现图片的异步加载，即图片的LazyLoad技术。 一、JavaScript读取本地文件夹 在浏览器环境中，出于安全考虑，JavaScript无法直接访问用户的本地文件系统...
"常用的页面载入提示效果"这个压缩包文件包含了关于如何使用JavaScript（JS）来实现各种动态加载提示的实例。JavaScript作为一种强大的客户端脚本语言，常常用于增强网页的交互性和动态性，而页面加载提示则是这种...
js 特效 html 特效 倒计时载入页面 js 特效 html 特效 倒计时载入页面
**标题：“标签(Tabs)实现多页面切换”** 在网页设计中，标签（Tabs）是一种常见的用户界面元素，用于组织和展示多个相关的但内容独立的部分。这种设计模式允许用户通过点击不同的标签来切换查看不同页面，提高用户...
这个问题的出现可能涉及到多个因素，包括编码格式不匹配、文件路径错误、加载顺序不当或者CSS语法错误等。下面将详细分析这些原因，并提供相应的解决方案。 首先，编码格式是导致CSS文件无法正常载入的一个常见原因...
【标题】"网页模板——纯javascript仿做土豆网豆单列表载入图片特效.zip" 描述了一款基于JavaScript实现的网页模板，它模仿了土豆网的豆单列表中图片加载的动态效果。这个模板可能包含了一系列JavaScript代码、HTML...