请问有哪些前端技术可以提高页面加载速度？

十一、设置图像大小
与表格单元格、行和列一样&＃xff0c;当您未明确设置图像大小时&＃xff0c;浏览器需要执行计算来显示图像&＃xff0c;这会降低处理速度。

十二、将 CSS 图像映射用于装饰功能
使用图像映射代替多个图像&＃xff0c;这是另一种缩短加载时间的方式&＃xff0c;因为同时下载图像的各个独立部分能够加快整个页面的下载进度。或者&＃xff0c;您可以使用某种名为 CSS sprites 的工具。CSS sprites 可帮助减少 HTTP 请求的数量。一个图像可以包含装饰或布置页面所需的所有图像元素。您使用 CSS 来选择&＃xff08;通过调用某些位置和维度&＃xff09;用于特定元素的映射。

十三、尽可能延迟脚本加载
一种提升页面下载速度的潜在方式是将脚本放在页面的底部&＃xff0c;使页面加载更迅速。通常&＃xff0c;浏览器只能&＃xff08;从同一个域&＃xff09;下载不超过两个并行对象&＃xff0c;如果一个对象是一段 Javascript 代码&＃xff0c;那么在该脚本下载完之前&＃xff0c;其他页面组件的下载将会暂停。如果将 Javascript 代码放在页面底部&＃xff0c;&＃xff08;在大多数情况下&＃xff09;它将在最后下载&＃xff0c;这时所有其他组件都已下载完。

十四、按需加载 Javascript 文件
要按需加载 Javascript&＃xff0c;使用 import() 函数。
import() 函数&＃xff1a;
function $import(src){
var scriptElem &＃61; document.createElement(&＃39;script&＃39;);
scriptElem.setAttribute(&＃39;src&＃39;,src);
scriptElem.setAttribute(&＃39;type&＃39;,&＃39;text/Javascript&＃39;);
document.getElementsByTagName(&＃39;head&＃39;)[0].appendChild(scriptElem);
}

// import with a random query parameter to avoid caching
function $importNoCache(src){
var ms &＃61; new Date().getTime().toString();
var seed &＃61; "?" &＃43; ms;
$import(src &＃43; seed);
}

十五、验证函数加载
也可以验证一个函数是否被加载&＃xff0c;如果没有&＃xff0c;加载 Javascript 文件。
验证函数是否被加载&＃xff1a;
if (myfunction){
// The function has been loaded
}
else{ // Function has not been loaded yet, so load the Javascript.
$import(&＃39;http://www.yourfastsite.com/myfile.js&＃39;);
}

注意&＃xff1a;可以使用 defer 属性&＃xff0c;但不是所有浏览器&＃xff08;包括 Firefox&＃xff09;都支持它。

十六、优化 CSS 文件
如果经过适当优化和维护&＃xff0c;CSS 文件不一定很大。例如&＃xff0c;具有很多独立类的 CSS 文件会影响下载速度。与 Javascript 文件一样&＃xff0c;您需要优化 CSS 文件&＃xff0c;使其包含所需的所有内容&＃xff0c;同时保持合理的大小。另外&＃xff0c;使用外部文件代替内联定义来适应浏览器的缓存机制。

十七、使用内容分布网络
内容分布网络&＃xff08;Content-distribution network&＃xff0c;CDN&＃xff09;是另一种缩短下载时间的好方法。当您将静态图像放在 Internet 上的许多服务器上时&＃xff0c;用户能够从离他们最近的服务器下载这些图像。此外&＃xff0c;大多数 CDN 都在快速服务器上运行&＃xff0c;因此无论服务器的加载速度如何&＃xff0c;其响应速度都比小型的超载服务器快。

十八、对资产使用多个域来增加连接
CDN 的另一个优势是它们是独立的域。因为您的浏览器将并发连接的数量限制到一个单一的域&＃xff0c;因此无论何时加载一个页面&＃xff0c;都很容易占满所有线程。因此&＃xff0c;到其他资产的连接被延迟了。然而&＃xff0c;您的浏览器能够打开新线程或到其他域的连接&＃xff0c;这样&＃xff0c;从另一个域加载的任何资产都可以与其他所有资产同时加载。

十九、在合适的时候使用 Google Gears
使用 Google Gears&＃xff08;参见 参考资料&＃xff09;是避免用户反复下载同一内容的另一种好方法。Gears 允许用户离线访问 Web 应用程序&＃xff0c;但是也允许将页面元素持久化到用户的计算机上。因此&＃xff0c;频繁加载但未进行更新的内容可以存储在 Gears 数据库中&＃xff0c;该数据库是一个 SQLite3 关系数据库管理系统。对同一内容的所有 next 请求都可以从数据库&＃xff08;而不是服务器&＃xff09;直接加载。

二十、使用 PNG 格式的图像

Graphic Interchange Format (GIF) 和 Joint Photographic Experts Group (JPEG) 图像格式都已过时了&＃xff1a;Portable Network Graphic (PNG) 是未来流行的格式。当然&＃xff0c;您可以说 GIF 和 JPEG 已经消亡&＃xff0c;或者 PNG 没有任何缺陷&＃xff0c;但是所有事物都有各自的优缺点&＃xff0c;PNG 以最佳的文件大小提供了出色的质量。因此&＃xff0c;如果进行选择的话&＃xff0c;应该尽可能使用 PNG 图像。

二十一、保持 Ajax 调用简短、准确
当统称为 Asynchronous Javascript &＃43; XML (Ajax) 的技术在两年前出现时&＃xff0c;这些技术为处理页面请求和响应提供了一种革命性方法。然而&＃xff0c;拨号用户可能从来没机会体验其真正的优势&＃xff0c;因为在许多情形下&＃xff0c;Ajax 需要在浏览器与服务器之间大量通信。因此&＃xff0c;如果您能够保持 Ajax 调用简短和准确&＃xff0c;可以避免用户花费无止尽的时间来等待元素刷新或响应。

二十二、进行一次较大的 Ajax 调用并在本地处理客户机数据

如果不能进行简短的 Ajax 调用&＃xff0c;或者如果这些调用不能提供期望的结果&＃xff0c;可以考虑一种替代方法&＃xff1a;进行一次大的 Ajax 调用来获取所需的一切内容&＃xff0c;然后让客户机在本地处理数据。通过这种方式&＃xff0c;客户机只需等待一次&＃xff08;获取传入的数据&＃xff09;&＃xff0c;但是在此之后&＃xff08;当浏览器与服务器之间没有必要通信时&＃xff09;&＃xff0c;处理速度将更快。当然&＃xff0c;还有大量 Ajax 优化技术&＃xff0c;本教程无法一一列出。

二十三、在沙箱中测试代码

还有一个经常被遗忘的常用技巧。尽管清醒的 Web 开发人员通常会在启动应用程序之前对其进行测试&＃xff0c;但是有时候测试会使他们不那么重视维护任务&＃xff0c;或者新功能添加得太快&＃xff0c;并且未经过充分考虑或测试。结果&＃xff0c;余下的脚本减缓了应用程序的速度。如果您添加一项新功能&＃xff0c;可以首先在沙箱里&＃xff08;完全脱离了应用程序的其余部分&＃xff09;进行测试&＃xff0c;查看它作为单个函数的行为。通过这种方式&＃xff0c;您可以反复检查&＃xff0c;并分析性能和响应时间&＃xff0c;无需考虑 Web 应用程序的其余部分。然后&＃xff0c;当新功能的行为符合预期时&＃xff0c;可以将其引入到应用程序的其余部分中&＃xff0c;运行其他测试&＃xff0c;保证功能本身的行为符合预期。

二十四、分析站点代码
在许多场景中&＃xff0c;自我反省是一个不错的建议。幸运的是&＃xff0c;在开发过程中&＃xff0c;我们可以使用工具来帮助反省&＃xff0c;并尽可能客观地进行实践。像 JSLint&＃xff08;参见 参考资源&＃xff09;这样的工具的价值是无法衡量的&＃xff0c;尽管其站点宣称它 “可能令您备受挫折”&＃xff0c;因为它向您提供了所有的潜在代码缺陷&＃xff0c;这些缺陷不但使调试更加困难&＃xff0c;而且可能导致更长的响应时间。

二十五、检查孤立的文件和丢失的图像
检查孤立的文件和丢失的图像是一种明智之举。大部分 Web 开发人员都会检查错误的文件引用&＃xff0c;但是这里仍然需要说明一下。丢失的文件容易引起各种问题&＃xff0c;因为它们会导致 “The image/page cannot be displayed” 之类的错误消息。但是在网页速度优化方面&＃xff0c;它们具有更大的缺陷&＃xff1a;当浏览器寻找丢失的或孤立的文件时&＃xff0c;它会消耗资源&＃xff0c;这不可避免地会导致页面处理速度变慢。因此&＃xff0c;请检查孤立或丢失的文件&＃xff0c;包括拼写错误的文件名。

浏览器构造页面的原理&＃xff0c;当浏览器从服务器接收到了HTML文档&＃xff0c;并把HTML在内存中转换成DOM树&＃xff0c;在转换的过程中如果发现某个节点(node)上引用了CSS或者 IMAGE&＃xff0c;就会再发1个request去请求CSS或image,然后继续执行下面的转换&＃xff0c;而不需要等待request的返回&＃xff0c;当request返回 后&＃xff0c;只需要把返回的内容放入到DOM树中对应的位置就OK。但当引用了JS的时候&＃xff0c;浏览器发送1个js request就会一直等待该request的返回。因为浏览器需要1个稳定的DOM树结构&＃xff0c;而JS中很有可能有代码直接改变了DOM树结构&＃xff0c;比如使用 document.write 或 appendChild,甚至是直接使用的location.href进行跳转&＃xff0c;浏览器为了防止出现JS修改DOM树&＃xff0c;需要重新构建DOM树的情况&＃xff0c;所以 就会阻塞其他的下载和呈现.

并行、分段加载外部 script
Parallel script loading &＃xff08;并行加载&＃xff09;是加速网站页面加载最有效的方法之一。因为古代的浏览器&＃xff08;aka IE&＃xff09;很多都不支援 parallel scripting loading&＃xff0c;它们加载外部 script 时是一个完成后才开始下载另一个&＃xff0c;而不是像图片一样同时下载多个文件&＃xff0c;即出现上图情况&＃xff1a;所有在该 script 之后的文件下载都被挡在后面了 (blocking)。因此出现了 n 多个小技巧解决这个问题。

&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;

1.图片文字分块加载&＃xff08;谷歌地图、IPhone手机浏览器&＃xff09;拖动的时候&＃xff0c;使用一个小比例的缩略图显示&＃xff0c;异步加载新的原始图片
2.分页加载&＃xff0c;社交网站新鲜事比较多&＃xff0c;可能几百条&＃xff0c;预先会加载一页或两页&＃xff0c;当ScrollBar滑到一定位置会自动&＃xff08;手动&＃xff09;显示下一页&＃xff08;下两页&＃xff09;的信息
3.使用PNG8代替GIF
4.图片分离法&＃xff1a;例如png24的位图&＃xff0c;将png中的非透明区域取出&＃xff0c;转成png8&＃xff0c;然后再放入刚抠出的透明区域&＃xff0c;合成新的png24&8混合位图模式&＃xff0c;图片可以减少三分之一

&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;

来分享一下Yslow 对网页的优化建议:

1. 减少HTTP请求次数,合并图片、CSS、JS&＃xff0c;改进首次访问用户等待时间。
2. 使用CDN,就近缓存&＃61;&＃61;>智能路由&＃61;&＃61;>负载均衡&＃61;&＃61;>WSA全站动态加速
3. 避免空的src和href.当link标签的href属性为空、script标签的src属性为空的时候&＃xff0c;浏览器渲染的时候会把当前页面的URL作为它们的属性值&＃xff0c;从而把页面的内容加载进来作为它们的值
4. 为文件头指定Expires.使内容具有缓存性。避免了接下来的页面访问中不必要的HTTP请求。
5. 使用gzip压缩内容.压缩任何一个文本类型的响应&＃xff0c;包括XML和JSON&＃xff0c;都是值得的
6. 把CSS放到顶部
7. 把JS放到底部.防止js加载对之后资源造成阻塞。
8. 避免使用CSS表达式,如&＃xff1a;backgourd-color: expression((new Date()).getHours()%2?”#B8D4FF”:”#F08A00”)
9. 将CSS和JS放到外部文件中&＃xff0c;目的是缓存&＃xff0c;但有时候为了减少请求&＃xff0c;也会直接写到页面里&＃xff0c;需根据PV和IP的比例权衡。
10. 权衡DNS查找次数。减少主机名可以节省响应时间。但同时&＃xff0c;需要注意&＃xff0c;减少主机会减少页面中并行下载的数量。IE浏览器在同一时刻只能从同一域名下载两个文件。当在一个页面显示多张图片时&＃xff0c;IE 用户的图片下载速度就会受到影响。所以新浪会搞N个二级域名来放图片。
11. 精简CSS和JS。最小化Javascript代码指在JS代码中删除不必要的字符&＃xff0c;从而降低下载时间。两个流行的工具是JSMin 和YUI Compressor。同样CSS也有相关的压缩工具
12. 避免跳转。同域&＃xff1a;注意避免反斜杠 “/” 的跳转&＃xff1b;跨域&＃xff1a;使用Alias或者mod_rewirte建立CNAME&＃xff08;保存域名与域名之间关系的DNS记录&＃xff09;
13. 删除重复的JS和CSS。重复调用脚本&＃xff0c;除了增加额外的HTTP请求外&＃xff0c;多次运算也会浪费时间。在IE和Firefox中不管脚本是否可缓存&＃xff0c;它们都存在重复运算Javascript的问题。
14. 配置ETags。它用来判断浏览器缓存里的元素是否和原来服务器上的一致。比last-modified date更具有弹性&＃xff0c;例如某个文件在1秒内修改了10次&＃xff0c;Etag可以综合Inode(文件的索引节点(inode)数)&＃xff0c;MTime(修改时间)和Size来精准的进行判断&＃xff0c;避开UNIX记录MTime只能精确到秒的问题。 服务器集群使用&＃xff0c;可取后两个参数。
15. 可缓存的AJAX。“异步”并不意味着“即时”&＃xff1a;Ajax并不能保证用户不会在等待异步的Javascript和XML响应上花费时间。
16. 使用GET来完成AJAX请求。当使用XMLHttpRequest时&＃xff0c;浏览器中的POST方法是一个“两步走”的过程&＃xff1a;首先发送文件头&＃xff0c;然后才发送数据。因此使用GET获取数据时更加有意义。
17. 减少DOM元素数量。是否存在一个是更贴切的标签可以使用&＃xff1f;人生不仅仅是DIV&＃43;CSS
18. 避免404。有些站点把404错误响应页面改为“你是不是要找***”&＃xff0c;这虽然改进了用户体验但是同样也会浪费服务器资源&＃xff08;如数据库等&＃xff09;。最糟糕的情况是指向外部 Javascript的链接出现问题并返回404代码。首先&＃xff0c;这种加载会破坏并行加载&＃xff1b;其次浏览器会把试图在返回的404响应内容中找到可能有用的部分当作Javascript代码来执行。
19. 减少COOKIE的大小
20. 使用无COOKIE的域。比如图片 CSS 等&＃xff0c;Yahoo! 的静态文件都在 yimg.com 上&＃xff0c;客户端请求静态文件的时候&＃xff0c;减少了 COOKIE 的反复传输对主域名 (yahoo.com) 的影响。
21. 不要使用滤镜。png24的在IE6半透明那种东西&＃xff0c;别乱使&＃xff0c;淡定的切成PNG8&＃43;jpg。
22. 不要在HTML中缩放图片
23. 缩小favicon.ico并缓存