前端性能优化最佳实践

最佳实践1：使用DocumentFragments或innerHTML取代复杂的元素注入

DOM操作在浏览器上是要付税的。尽管性能提升是在浏览器，DOM很慢，如果你没有注意到，你可能会察觉浏览器运行非常的慢。这就是为什么减少创建集中的DOM节点以及快速注入是那么的重要了。

现在假设我们页面中有一个<ul>元素，调用AJAX获取JSON列表，然后使用JavaScript更新元素内容。通常，程序员会这么写：

Javascript代码

  1. var list = document.querySelector(‘ul‘);
  2. ajaxResult.items.forEach(function(item) {
  3. // 创建<li>元素
  4. var li = document.createElement(‘li‘);
  5. li.innerHTML = item.text;
  6. // <li>元素常规操作，例如添加class，更改属性attribute，添加事件监听等
  7. // 迅速将<li>元素注入父级<ul>中
  8. list.apppendChild(li);
  9. });

上面的代码其实是一个错误的写法，将<ul>元素带着对每一个列表的DOM操作一起移植是非常慢的。如果你真的想要 使用document.createElement，并且将对象当做节点来处理，那么考虑到性能问题，你应该使用DocumentFragement。 精心开发5年的UI前端框架！

DocumentFragement 是一组子节点的“虚拟存储”，并且它没有父标签。在我们的例子中，将DocumentFragement想象成看不见的<ul>元素，在 DOM外，一直保管着你的子节点，直到他们被注入DOM中。那么，原来的代码就可以用DocumentFragment优化一下：

Javascript代码

  1. var frag = document.createDocumentFragment();
  2. ajaxResult.items.forEach(function(item) {
  3. // 创建<li>元素
  4. var li = document.createElement(‘li‘);
  5. li.innerHTML = item.text;
  6. // <li>元素常规操作
  7. // 例如添加class，更改属性attribute，添加事件监听，添加子节点等
  8. // 将<li>元素添加到碎片中
  9. frag.appendChild(li);
  10. });
  11. // 最后将所有的列表对象通过DocumentFragment集中注入DOM
  12. document.querySelector(‘ul‘).appendChild(frag);

为DocumentFragment追加子元素，然后再将这个DocumentFragment加到父列表中，这一系列操作仅仅是一个DOM操作，因此它比起集中注入要快很多。

如果你不需要将列表对象当做节点来操作，更好的方法是用字符串构建HTML内容：

Javascript代码

  1. var htmlStr = ‘‘;
  2. ajaxResult.items.forEach(function(item) {
  3. // 构建包含HTML页面内容的字符串
  4. htmlStr += ‘<li>‘ + item.text + ‘</li>‘;
  5. });
  6. // 通过innerHTML设定ul内容
  7. document.querySelector(‘ul‘).innerHTML = htmlStr;

这当中也只有一个DOM操作，并且比起DocumentFragment代码量更少。在任何情况下，这两种方法都比在每一次迭代中将元素注入DOM更高效。

最佳实践2：高频执行事件/方法的防抖

通常，开发人员会在有用户交互参与的地方添加事件，而往往这种事件会被频繁触发。想象一下窗口的resize事件或者是一个元素的onmouseover事件 - 他们触发时，执行的非常迅速，并且触发很多次。如果你的回调过重，你可能使浏览器死掉。 精心开发5年的UI前端框架！

这就是为什么我们要引入防抖。

防抖可以限制一个方法在一定时间内执行的次数。以下代码是个防抖示例：

Javascript代码

  1. // 取自 UnderscoreJS 实用框架
  2. function debounce(func, wait, immediate) {
  3. var timeout;
  4. return function() {
  5. var context = this, args = arguments;
  6. var later = function() {
  7. timeout = null;
  8. if (!immediate) func.apply(context, args);
  9. };
  10. var callNow = immediate && !timeout;
  11. clearTimeout(timeout);
  12. timeout = setTimeout(later, wait);
  13. if (callNow) func.apply(context, args);
  14. };
  15. }
  16. // 添加resize的回调函数，但是只允许它每300毫秒执行一次
  17. window.addEventListener(‘resize‘, debounce(function(event) {
  18. // 这里写resize过程
  19. }, 300));

debounce方法返回一个方法，用来包住你的回调函数，限制他的执行频率。使用这个防抖方法，就可以让你写的频繁回调的方法不会妨碍用户的浏览器！

最佳实践3：网络存储的静态缓存和非必要内容优化

Web Storage的API曾经是Cookie API一个显著的进步，并且为开发者使用了很多年了。这个API是合理的，更大存储量的，而且是更为健全理智的。一种策略是去使用Session存储来存 储非必要的，更为静态的内容，例如侧边栏的HTML内容，从Ajax加载进来的文章内容，或者一些其他的各种各样的片断，是我们只想请求一次的。 精心开发5年的UI前端框架！

我们可以使用JavaScript编写一段代码，利用Web Storage使这些内容加载更加简单:

Javascript代码

  1. define(function() {
  2. var cacheObj = window.sessionStorage || {
  3. getItem: function(key) {
  4. return this[key];
  5. },
  6. setItem: function(key, value) {
  7. this[key] = value;
  8. }
  9. };
  10. return {
  11. get: function(key) {
  12. return this.isFresh(key);
  13. },
  14. set: function(key, value, minutes) {
  15. var expDate = new Date();
  16. expDate.setMinutes(expDate.getMinutes() + (minutes || 0));
  17. try {
  18. cacheObj.setItem(key, JSON.stringify({
  19. value: value,
  20. expires: expDate.getTime()
  21. }));
  22. }
  23. catch(e) { }
  24. },
  25. isFresh: function(key) {
  26. // 返回值或者返回false
  27. var item;
  28. try {
  29. item = JSON.parse(cacheObj.getItem(key));
  30. }
  31. catch(e) {}
  32. if(!item) return false;
  33. // 日期算法
  34. return new Date().getTime() > item.expires ? false : item.value;
  35. }
  36. }
  37. });

这个工具提供了一个基础的get和set方法，同isFresh方法一样，保证了存储的数据不会过期。调用方法也非常简单:

Javascript代码

  1. require([‘storage‘], function(storage) {
  2. var content = storage.get(‘sidebarContent‘);
  3. if(!content) {
  4. // Do an AJAX request to get the sidebar content
  5. // ... and then store returned content for an hour
  6. storage.set(‘sidebarContent‘, content, 60);
  7. }
  8. });

现在同样的内容不会被重复请求，你的应用运行的更加有效。花一点儿时间，看看你的网站设计，将那些不会变化，但是会被不断请求的内容挑出来，你可以使用Web Storage工具来提升你网站的性能。

最佳实践4：使用异步加载，延迟加载依赖

RequireJS已经迎来了异步加载和AMD格式的巨大浪潮。XMLHttpRequest(该对象可以调用AJAX)使得资源的异步加载变得流行起来，它允许无阻塞资源加载，并且使 onload 启动更快，允许页面内容加载，而不需要刷新页面。 精心开发5年的UI前端框架！

我所用的异步加载器是John Hann的curl。curl加载器是基本的异步加载器，可以被配置，拥有很好的插件。以下是一小段curl的代码：

Javascript代码

  1. // 基本使用:  加载一部分AMD格式的模块
  2. curl([‘social‘, ‘dom‘], function(social, dom) {
  3. dom.setElementContent(‘.social-container‘, social.loadWidgets());
  4. });
  5. // 定义一个使用Google Analytics的模块，该模块是非AMD格式的
  6. define(["js!//google-analytics.com/ga.js"], function() {
  7. // Return a simple custom Google Analytics controller
  8. return {
  9. trackPageView: function(href) {
  10. _gaq.push(["_trackPageview", url]);
  11. },
  12. trackEvent: function(eventName, href) {
  13. _gaq.push(["_trackEvent", "Interactions", eventName, "", href || window.location, true]);
  14. }
  15. };
  16. });
  17. // 加载一个不带回调方法的非AMD的js文件
  18. curl([‘js!//somesite.com/widgets.js‘]);
  19. // 将JavaScript和CSS文件作为模块加载
  20. curl([‘js!libs/prism/prism.js‘, ‘css!libs/prism/prism.css‘], function() {
  21. Prism.highlightAll();
  22. });
  23. // 加载一个AJAX请求的URL
  24. curl([‘text!sidebar.php‘, ‘storage‘, ‘dom‘], function(content, storage, dom) {
  25. storage.set(‘sidebar‘, content, 60);
  26. dom.setElementContent(‘.sidebar‘, content);
  27. });

你可能早就了解，异步加载可以大大提高万展速度，但是我想在此说明的是，你要使用异步加载！使用了之后你可以看到区别，更重要的是，你的用户可以看到区别。

当你可以根据页面内容延迟加载依赖的时候，你就可以体会到异步加载的好处了。例如，你可以只加载Twitter，Facebook和Google Plus到应用了名为social的CSS样式的div元素中。“在加载前检查是否需要”策略可以为我的用户节省好几KB的莫须有的加载。

最佳实践5：使用Array.prototype.join代替字符串连接

有一种非常简单的客户端优化方式，就是用Array.prototype.join代替原有的基本的字符连接的写法。在上面的“最佳实践1”中，我在代码中使用了基本字符连接：

Javascript代码

  1. htmlStr += ‘<li>‘ + item.text + ‘</li>‘;

但是下面这段代码中，我用了优化：

Javascript代码

  1. var items = [];
  2. ajaxResult.items.forEach(function(item) {
  3. // 构建字符串
  4. items.push(‘<li>‘, item.text, ‘</li>‘);
  5. });
  6. // 通过innerHTML设置列表内容
  7. document.querySelector(‘ul‘).innerHTML = items.join(‘‘);

也许你需要花上一点儿时间来看看这个数组是做什么用的，但是所有的用户都从这个优化中受益匪浅。

最佳实践6：尽可能使用CSS动画

网站设计对美观特性和可配置元素动画的大量需求，使得一些JavaScript类库，如jQuery，MooTools大量的被使用。尽管现在浏览器支持CSS的transformation和keyframe所做的动画，现在仍有很多人使用JavaScript制作动画效果，但是实际上使用CSS动画比起JavaScript驱动的动画效率更高。CSS动画同时需要更少的代码。很多的CSS动画是用GPU处理的，因此动画本身很流畅，当然你可以使用下面这个简单的CSS强制使你的硬件加速： 精心开发5年的UI前端框架！

Javascript代码

  1. .myAnimation {
  2. animation: someAnimation 1s;
  3. transform: translate3d(0, 0, 0); /* 强制硬件加速 */
  4. }

tansform:transform(0,0,0)在不会影响其他动画的同时将通话送入硬件加速。在不支持CSS动画的情况下（IE8及以下版本的浏览器），你可以引入JavaScript动画逻辑：

Javascript代码

  1. <!--[if 低于IE8版本]>
  2. <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  3. <script src="/js/ie-animations.js"></script>
  4. <![endif]-->

在上例中，ie-animations.js文件必须包含你自定义的jQuery代码，用于当CSS动画在早期IE中不被支持的情况下，来替代CSS动画完成动画效果。完美的通过CSS动画来优化动画，通过JavaScript来支持全局动画效果。

最佳实践7：使用事件委托

想象一下，如果你有一个无序列表，里面有一堆<li>元素，每一个<li>元素都会在点击的时候触发一个行为。这个时候，你通常会在每一个元素上添加一个事件监听，但是如果当这个元素或者你添加了监听的这个对象会被频繁的移除添加呢？这个时候，你在移除添加元素的同时需要处理事件监听的移除和添加。这个时候，我们就需要引入事件委托了。

事件委托是在父级元素上添加一个事件监听，来替代在每一个子元素上添加事件监听。当事件被触发时，event.target会评估相应的措施是否需要被执行。下面我们给出了一个简单的例子：

Javascript代码

  1. // 获取元素，添加事件监听
  2. document.querySelector(‘#parent-list‘).addEventListener(‘click‘, function(e) {
  3. // e.target 是一个被点击的元素!
  4. // 如果它是一个列表元素
  5. if(e.target && e.target.tagName == ‘LI‘) {
  6. // 我们找到了这个元素，对他的操作可以写在这里。
  7. }
  8. });

上面的例子是不可思议的简单，当事件发生的时候，它没有轮询父节点去寻找匹配的元素或选择器，且它不支持基于选择器的查询（例如用class name，或者id来查询）。所有的JavaScript框架提供了委托选择器匹配。重点是，你避免了为每一个元素加载事件监听，而是在父元素上加一个事件监听。这样大大的增加了效率，并且减少了很多维护！

最佳实践8：使用Data URI代替图片SRC

提升页面大小的效率，不仅仅是取决于使用精灵或是压缩代码，给定页面的请求数量在前端性能中也占有了很不小的重量。减少请求可以让你的网站加载更快，而其中一种减少页面请求的方法就是用Data URI代替图片的src属性： 精心开发5年的UI前端框架！

Javascript代码

  1. <!-- 以前的写法 -->
  2. <img src="/images/logo.png" />
  3. <!-- 使用data URI的写法 -->
  4. <img src="data: image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/7AARRHVja3kAAQAEAAAAPAAA/+4ADkFkb2JlAGTAAAAAAf/bAIQABgQEBAUEBgUFBgkGBQYJCwgGBggLDAoKCwoKDBAMDAwMDAwQDA4PEA8ODBMTFBQTExwbGxscHx8fHx8fHx8fHwEHBwcNDA0YEBAYGhURFRofHx8fHx8fHx8fHx8fHx8fH ...." />
  5. <-- 范例:  http://davidwalsh.name/demo/data-uri-php.php -->

当然页面大小会增加（如果你的服务器使用适当的gzip内容，这个增加会很小），但是你减少了潜在的请求，同时也在过程中减少了服务器请求的数量。现在大多数浏览器都支持Data URI，在CSS中的背景骨片也可以使用Data URI，因此这个策略现在已经可以在应用层级，广泛应用。

最佳实践9：使用媒体查询加载指定大小的背景图片

直到CSS @supports被广泛支持，CSS媒体查询的使用接近于CSS中写逻辑控制。我们经常用CSS媒体查询来根据设备调整CSS属性（通常根据屏幕宽度调整CSS属性），例如根据不同的屏幕宽度来设置不同的元素宽度或者是悬浮位置。那么我们为什么不用这种方式来改变背景图片呢？

Javascript代码

  1. /* 默认是为桌面应用加载图片 */
  2. .someElement { background-image: url(sunset.jpg); }
  3. @media only screen and (max-width : 1024px) {
  4. .someElement { background-image: url(sunset-small.jpg); }
  5. }

上面的代码片段是为手机设备或是类似的移动设备加载一个较小尺寸的图片，特别是需要一个特别小的图片时（例如图片的大小几乎不可视）。

最佳实践10：使用索引对象

这一篇，我们将讲讲使用索引对象检索代替遍历数组，提高遍历速度。

AJAX和JSON一个最常见的使用案例是接收包含一组对象的数组，然后从这组数组中根据给定的值搜索对象。让我们看一个简单的例子，下面这个例子中，你从用户接收一个数组，然后你可以根据username的值来搜索用户对象：

Javascript代码

  1. function getUser(desiredUsername) {
  2. var searchResult = ajaxResult.users.filter(function(user) {
  3. return user.username == desiredUsername;
  4. });
  5. return searchResult.length ? searchResult[0] : false;
  6. }
  7. // 根据用户名获取用户
  8. var davidwalsh = getUser("davidwalsh");
  9. // 根据用户名获取另一个用户.
  10. var techpro = getuser("tech-pro");

上面这段代码可以运行，但是并不是很有效，当我们想要获取一个用户时，我们就要遍历一次数组。那么更好的方法是创建一个新的对象，对每一个唯一的值建立一个索引，在上面这个例子中，用username作为索引，这个数组对象可以写成：

Javascript代码

  1. var userStore = {};
  2. ajaxResult.users.forEach(function(user) {
  3. userStore[user.username] = user;
  4. });

现在当你想要找一个用户对象时，我们可以直接通过索引找到这个对象：

Javascript代码

  1. var davidwalsh = userStore.davidwalsh;
  2. var techpro = userStore["tech-pro"];

这样的代码写起来更好一些，也很简便，通过索引搜索比起遍历整个数组更加快捷。精心开发5年的UI前端框架！

最佳实践11：控制DOM大小

这一篇中，我们要说如何控制DOM的大小，来优化前端性能。

DOM很慢是众所周知的，使得网站变慢的罪魁祸首是大量的DOM。想象一下，假如你有一个有着上千节点的DOM，在想象一下，使用querySelectorAll或者getElementByTagName，或者是其他以DOM为中心的搜索方式来搜索一个节点，即使是使用内置方法，这也将是一个非常费力的过程。你要知道，多余的DOM节点会使其他的实用程序也变慢的。

我见过的一种情况，DOM的大小悄然增加，是在一个AJAX网站，它将所有的页面都存在了DOM中，当一个新的页面通过AJAX被加载时，旧的页面就会被存入隐藏的DOM节点。对于DOM的速度，将有灾难性的降低，特别是当一个页面是动态加载的。所以你需要一种更好的方法。

在这种情况下，当页面是通过AJAX加载的，并且以前的页面是存储在客户端的，最好的方法就是将内容通过String HTML存储（将内容从DOM中移除），然后使用事件委托来避免特定元素事件。这么做的同时，当在客户端缓存内容的时候，可以避免大量的DOM生成。

通常控制DOM大小的技巧包括：

  • 使用:before和:after伪元素
  • 延迟加载和呈现内容
  • 使用事件委托，更简便的将节点转换成字符串存储

简单一句话：尽量使你的DOM越小越好。

最佳实践12：在繁重的执行上使用Web Workers

这一篇我们将介绍Web Workder，一种可以将繁重操作移到独立进程的方法。

Web Workders在前段时间被引入流行的浏览器中，但是好像并没有被广泛应用。Web Workers的主要功能是在一般浏览器执行范围外执行繁重的方法。它不会访问DOM，所以你必须传入方法涉及的节点。

以下是一段Web Workder的示例代码：

Javascript代码

  1. /* 使用Web Worker */
  2. //  启动worker
  3. var worker = new Worker("/path/to/web/worker/resource.js");
  4. worker.addEventListener("message", function(event) {
  5. // 我们从web worker获取信息!
  6. });
  7. // 指导Web Worker工作！
  8. worker.postMessage({ cmd: "processImageData", data: convertImageToDataUri(myImage) });
  9. /*  resource.js就是一个Web workder */
  10. self.addEventListener("message", function(event) {
  11. var data = event.data;
  12. switch (data.cmd) {
  13. case ‘process‘:
  14. return processImageData(data.imageData);
  15. });
  16. function processImageData(imageData) {
  17. // 对图像进行操作
  18. // 例如将它改成灰度
  19. return newImageData;
  20. }

以上这段代码是一个教你如何使用Web Worker在其他进程中做一些繁重工作的简单示例。它要执行的是将一个图片从普通颜色转个灰度，因为这是一个比较繁重的过程，所以你可以将这个进程提交给Web Worker，使你的浏览器负载不是很大。Data通过message事件传回。

你可以仔细阅读以下MDN上关于Web Workder的使用，也许在你的网站上有一些功能可以移到其他的独立进程中去执行。

最佳实践13：链接CSS，避免使用@import

有时候，@import太好用以至于很难抗拒它的诱惑，但是为了减少令人抓狂的请求，你必须要拒绝它！最常见的用法是在一个"main"CSS文件中，没有任何的内容，只有@import规则。有时，多个@import规则往往会造成事件嵌套：

Javascript代码

  1. // 主CSS文件(main.css)
  2. @import "reset.css";
  3. @import "structure.css";
  4. @import "tutorials.css";
  5. @import "contact.css";
  6. // 然后在tutorials.css文件中，会继续有@import
  7. @import "document.css";
  8. @import "syntax-highlighter.css";

我们这样写CSS文件，在文件中多了两个多余链接，因此会使页面加载变慢。SASS可以读取@import语句，链接CSS内容到一个文件中，减少了多余的请求，控制了CSS文件的大小。精心开发5年的UI前端框架！

最佳实践14：在CSS文件中包含多种介质类型

在上面第13个最佳实践中我们说过，多个CSS文件可以通过@import规则合并到一起。但是很多程序员不知道的是，多种CSS介质类型也可以合并到一个文件中。

Javascript代码

  1. /* 以下全部写在一个CSS文件中 */
  2. @media screen {
  3. /* 所有默认的结构设计和元素样式写在这里 */
  4. }
  5. @media print {
  6. /* 调整打印时的样式 */
  7. }
  8. @media only screen and (max-width : 1024px) {
  9. /* 使用ipad或者移动电话时的样式设定 */
  10. }

对于文件的大小，什么时候必须合并介质，或是什么时候必须分开设定，CSS并没有硬性规定，但是我会比较建议将所有的介质合并，除非其中一个介质所占的比例比起其他大了许多。少一个请求对于客户端和服务器都将轻松不少，而且在大多数情况下，附赠的介质类型相比主屏介质类型要相对小很多。

时间： 2024-08-05 03:52:18

前端性能优化最佳实践的相关文章

何俊谈阿里巴巴前端性能优化最佳实践-笔记

网站页面前端优化对网站核心页面基于Wise load的原则做定点性能优化,减少HTTP请求,减少DNS请求时间,减少页面DOM的数量,做一些图片.JS压缩等.减少HTTP请求方案:阿里开发了自动合并CSS和JS静态文件的框架,对于减少页面DNS数方面采用前端延迟加载框架,主要负责页面加载时只加载首屏,用户滚动页面时才加载二屏或三屏,这样对网站的性能包括流量都是很大的提升和节约. Web I/O(高并发)方面的优化,使用高性能Web服务器,另外在冬天页面处理上,尽可能地减少冬天页面所占比例,采用一

【读书笔记】《Android应用性能优化最佳实践》

<第一行代码>读书笔记 一.引言 二.读书内容 书名:<Android应用性能优化最佳实践> 作者:罗彧成 (腾讯音乐Android开发总监) 出版社:机械工业出版社 封面: 三.书籍评价 四.个人心得 五.参考文档

高性能网站建设进阶指南：Web开发者性能优化最佳实践 pdf扫描版

高性能网站建设进阶指南:Web开发者性能优化最佳实践是<高性能网站建设指南>姊妹篇.作者Steve Souders是Google Web性能布道者和Yahoo!前首席性能工程师.在本书中,Souders与8位专家分享了提升网站性能的最佳实践和实用建议,主要包括:理解Ajax性能,编写高效的JavaScript,创建快速响应的应用程序.无阻塞加载脚本, 跨域共享资源,无损压缩图片大小,使用块编码加快网页渲染:避免或取代iframe的方法,简化CSS选择符,以及其他技术.性能是任何一个网站成功的关

C# 性能优化最佳实践

1.显式注册的EvenHandler要显式注销以避免内存泄漏 将一个成员方法注册到某个对象的事件会造成后者持有前者的引用.在事件注销之前,前者不会被垃圾回收. private void Form1_Load() { -- //注册事件 CommandRemotingContext.CmdChanged += new ReciverCmdStateChangedEventHandler(this.CommandRemotingContext_CmdChanged); -- } private vo

前端性能优化 —— 起步篇（一）

简要:用户的体验是非常重要的环节.快速的显示网页,流畅的用户操作,丰富实时的页面功能,顺畅的动画展示,这些都是决定用户舒适体验的关键因素.把用户伺候舒服了,才会产生长久的依赖.我认为前端性能优化的实践应当是自动化的,智能化的,从代码编写到生产打包一整套流程都应该有一系列关于优化的应对方案. 我个人认为nodejs相对于我们前端来说作为代码管理工具的意义要大于作为后台服务器的意义,接下来我会根据我对于nodejs,gulp的实践情况和对<高性能网站建设指南>这本书的理解来总结我个人对前端性能优化

Web前端优化最佳实践及工具集锦

前端的性能对于一个Web应用来说非常重要,如果一个Web应用的页面加载速度非常快.对于用户的操作可以及时响应,那么产品的用户体验将会极大地提升.下图显示了页面加载速度对于用户体验的影响. 你的Web页面的速度是否已经足够快了?其实可能还有很多可以提升的地方.Google和雅虎也提出了一些Web应用的前端优化建议,并发布了一些工具,你可以逐一检验你的Web应用,以便达到更高的性能. 这些优化不仅仅可以给用户提供更好的体验,从开发者角度来说,进行优化还可以减少页面的请求数.降低请求所占的带宽.减少资

Web 前端优化最佳实践

面向内容的优化规则目前有 10 条. 1. 尽量减少HTTP请求 (Make FewerHTTPRequests) 作为第一条,可能也是最重要的一条.根据 Yahoo! 研究团队的数据分析,有很大一部分用户访问会因为这一条而取得最大受益.有几种常见的方法能切实减少HTTP请求: 1) 合并文件,比如把多个CSS文件合成一个: 2) CSSSprites 利用CSSbackground 相关元素进行背景图绝对定位:参见:CSS Sprites: Image Slicing’s Kiss of De

paip.前端加载时间分析之道优化最佳实践

1.另存为 ,查看文件尺寸..和图片. 2.view the 另存为的htm静态的文件单个的加载,看时间...可以排除编程语言的问题and 数据库.. ##页面加载速度对于用户体验的影响. 1秒内,最好的.. 5秒, >>5秒 ,坏的.. ##index 一.Google的Web优化最佳实践 二.雅虎的Web优化最佳实践 2. 服务器优化 4. CSS优化 5. JavaScript优化 作者 老哇的爪子 Attilax 艾龙,  EMAIL:[email protected] 转载请注明来源

web前端性能优化

前言:  在同样的网络环境下,两个同样能满足你的需求的网站,一个“Duang”的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒,如果等待超过10秒,99%的用户会关闭这个网页.也许这样讲,各位还不会有太多感触,接下来我列举一组数据:Google网站访问速度每慢400ms就导致用户搜索请 求下降0.59%;Amazon每增加100ms网站延迟将导致收入下降1%;雅虎如果有400ms延迟会导致流量下降5-9%.网站的加载速度严重影响了用户体验,也决