前端Yslow的23个优化原则
前端Yslow的23个优化原则
最常遇见的前端优化问题。 Yslow是雅虎开发的基于网页性能分析浏览器插件,可以检测出网页的具体性能值,并且有著名的Yslow 23条优化规则,这23条,就够我们玩的了。 1. 减少HTTP请求次数 尽量合并图片、CSS、JS。比如加载一个页面,如果有5个css文件的话,那么会发出5次http请求,这样会让用户第一次访问你的页面的时候会长时间等待。而如果把这个5个文件合成一个的话,就只需要发出一次http请求,节省网络请求时间,加快页面的加载。 2. 使用CDN 网站上静态资源即css、js全都使用cdn分发,图片亦然。 3. 避免空的src和href 当link标签的href属性为空、script标签的src属性为空的时候,浏览器渲染的时候会把当前页面的URL作为它们的属性值,从而把页面的内容加载进来作为它们的值。所以要避免犯这样的疏忽。 4. 为文件头指定Expires Exipres是用来设置文件的过期时间的,一般对css、js、图片资源有效。 他可以使内容具有缓存性,这样下回再访问同样的资源时就通过浏览器缓存区读取,不需要再发出http请求。如下例子: 新浪微博的这个css文件的Expires时间是2016-5-04 09:14:14. 5. 使用gzip压缩内容 gzip能够压缩任何一个文本类型的响应,包括html,xml,json。大大缩小请求返回的数据量。 6. 把CSS放到顶部 网页上的资源加载时从上网下顺序加载的,所以css放在页面的顶部能够优先渲染页面,让用户感觉页面加载很快。 7. 把JS放到底部 加载js时会对后续的资源造成阻塞,必须得等js加载完才去加载后续的文件 ,所以就把js放在页面底部最后加载。 8. 避免使用CSS表达式 举个css表达式的例子 font-color: expression( (new Date()).getHours()%3 ? “#FFFFFF" : “#AAAAAA" ); 这个表达式会持续的在页面上计算样式,影响页面的性能。并且css表达式只被IE支持。 9. 将CSS和JS放到外部文件中 目的是缓存文件,可以参考原则4。 但有时候为了减少请求,也会直接写到页面里,需根据PV和IP的比例权衡。 10. 权衡DNS查找次数 减少主机名可以节省响应时间。但同时,需要注意,减少主机会减少页面中并行下载的数量。 IE浏览器在同一时刻只能从同一域名下载两个文件。当在一个页面显示多张图片时,IE 用户的图片下载速度就会受到影响。所以新浪会搞N个二级域名来放图片。 下面是新浪微博的图片域名,我们可以看到他有多个域名,这样可以保证这些不同域名能够同时去下载图片,而不用排队。不过如果当使用的域名过多时,响应时间就会慢,因为不用响应域名时间不一致。 11. 精简CSS和JS 这里就涉及到css和js的压缩了。比如下面的新浪的一个css文件,把空格回车全部去掉,减少文件的大小。现在的压缩工具有很多,基本主流的前端构建工具都能进行css和js文件的压缩,如grunt,glup等。 12. 避免跳转 有种现象会比较坑爹,看起来没什么差别,其实多次了一次页面跳转。比如当URL本该有斜杠(/)却被忽略掉时。例如,当我们要访问 http:// baidu.com时,实际上返回的是一个包含301代码的跳转,它指向的是 http:// baidu.com/(注意末尾的斜杠)。在nginx服务器可以使用rewrite;Apache服务器中可以使用Alias 或者 mod_rewrite或者the DirectorySlash来避免。 另一种是不用域名之间的跳转, 比如访问 http:// baidu.com/bbs跳转到 http:// bbs.baidu.com/。那么可以通过使用Alias或者mod_rewirte建立CNAME(保存一个域名和另外一个域名之间关系的DNS记录)来替代。 13. 删除重复的JS和CSS 重复调用脚本,除了增加额外的HTTP请求外,多次运算也会浪费时间。在IE和Firefox中不管脚本是否可缓存,它们都存在重复运算JavaScript的问题。 14. 配置ETags 它用来判断浏览器缓存里的元素是否和原来服务器上的一致。比last-modified date更具有弹性,例如某个文件在1秒内修改了10次,Etag可以综合Inode(文件的索引节点(inode)数),MTime(修改时间)和Size来精准的进行判断,避开UNIX记录MTime只能精确到秒的问题。 服务器集群使用,可取后两个参数。使用ETags减少Web应用带宽和负载 15. 可缓存的AJAX 异步请求同样的造成用户等待,所以使用ajax请求时,要主动告诉浏览器如果该请求有缓存就去请求缓存内容。如下代码片段, cache:true就是显式的要求如果当前请求有缓存的话,直接使用缓存 $.ajax({ url : 'url', dataType : "json", cache: true, success : function(son, status){ } 16. 使用GET来完成AJAX请求 当使用XMLHttpRequest时,浏览器中的POST方法是一个“两步走”的过程:首先发送文件头,然后才发送数据。因此使用GET获取数据时更加有意义。 17. 减少DOM元素数量 这是一门大学问,这里可以引申出一堆优化的细节。想要具体研究的可以看后面推荐书籍。总之大原则减少DOM数量,就会减少浏览器的解析负担。 18. 避免404 比如外链的css、js文件出现问题返回404时,会破坏浏览器的并行加载。 19. 减少Cookie的大小 Cookie里面别塞那么多东西,因为每个请求都得带着他跑。 20. 使用无cookie的域 比如CSS、js、图片等,客户端请求静态文件的时候,减少了 Cookie 的反复传输对主域名的影响。 21. 不要使用滤镜 IE独有属性AlphaImageLoader用于修正7.0以下版本中显示PNG图片的半透明效果。这个滤镜的问题在于浏览器加载图片时它会终止内容的呈现并且冻结浏览器。在每一个元素(不仅仅是图片)它都会运算一次,增加了内存开支,因此它的问题是多方面的。 完全避免使用AlphaImageLoader的最好方法就是使用PNG8格式来代替,这种格式能在IE中很好地工作。如果你确实需要使用AlphaImageLoader,请使用下划线_filter又使之对IE7以上版本的用户无效。 22. 不要在HTML中缩放图片 比如你需要的图片尺寸是50* 50 那就不用用一张500*500的大尺寸图片,影响加载 23. 缩小favicon.ico并缓存 以上是Yslow的23个优化原则
|
前端Yslow的23个优化原则的更多相关文章
- oracle优化原则(二)
SQL优化原则 二.SQL语句编写注意问题 www.2cto.com 下面就某些SQL语句的where子句编写中需要注意的问题作详细介绍.在这些where子句中,即使某些列存在索引,但是由于编写了劣质 ...
- Oracle SQL 优化原则(实用篇)
由于SQL优化优化起来比较复杂,并且还受环境限制,在开发过程中,写SQL必须遵循以下几点原则: 1.Oracle 采用自下而上的顺序解析WHERE子句,根据这个原理,表之间的连接必须写在其他Where ...
- 我的mysql数据库sql优化原则
原文 我的mysql数据库sql优化原则 一.前提 这里的原则 只是针对mysql数据库,其他的数据库 某些是殊途同归,某些还是存在差异.我总结的也是mysql普遍的规则,对于某些特殊情况得特殊对待. ...
- js优化原则
首先,与其他语言不同,JS的效率很大程度是取决于JS engine的效率.除了引擎实现的优劣外,引擎自己也会为一些特殊的代码模式采取一些优化的策略.例如FF.Opera和Safari的JS引擎,都对字 ...
- 从字符串拼接看JS优化原则
来自知乎的问题:JavaScript 怎样高效拼接字符串? 请把以下用于连接字符串的JavaScript代码修改为更高效的方式: var htmlString ='< div class=”co ...
- Flex内存泄露解决方法和内存释放优化原则
Flex内存泄露解决方法和内存释放优化原则 你对Flex内存泄露的概念是否了解,这里和大家分享一下Flex内存释放优化原则和Flex内存泄露解决方法,希望本文的介绍能让你有所收获. Flex内存释放优 ...
- ORACLE 数据库优化原则
ORACLE 数据库优化原则 一.SQL语句用大写的: 因为Oracle总是先解析SQL语句,把小写的字母转换成大写的再厉行. 二.避免在索引列上利用NOT等闲 我们要避免在索引列上利用NOT, NO ...
- MySQL 索引优化原则
一.索引优化原则 1.最左前缀匹配原则,联合索引,mysql会从做向右匹配直到遇到范围查询(>.<.between.like)就停止匹配,比如a = 1 and b = 2 and c & ...
- 网站性能工具-YSlow的23个规则-网站性能优化
1. 减少HTTP请求次数 合并图片.CSS.JS,改进首次访问用户等待时间. 2. 使用CDN 就近缓存==>智能路由==>负载均衡==>WSA全站动态加速 3. 避免空的src和 ...
随机推荐
- ASP.NET Core Razor 视图预编译、动态编译
0x01 前言 ASP.NET Core在默认发布情况下,会启动预编译将试图编译成xx.Views.dll,也许在视图中打算修改一处很细小的地方我们需要再重新编译视图进行发布.下面我将从 ASP.NE ...
- 手把手教你快速使用数据可视化BI软件创建互联网用户数据分析大屏
灯果数据可视化BI软件是新一代人工智能数据可视化大屏软件,内置丰富的大屏模板,可视化编辑操作,无需任何经验就可以创建属于你自己的大屏.大家可以在他们的官网下载软件. 本文以互联网用户数据分析大屏为 ...
- 进阶之路 | 奇妙的Animation之旅
前言 本文已经收录到我的Github个人博客,欢迎大佬们光临寒舍: 我的GIthub博客 学习清单: 动画的种类 自定义View动画 View动画的特殊使用场景 属性动画 使用动画的注意事项 一.为什 ...
- 简单了解css3样式表写法和优先级
css3和css有什么区别?首先css3是css(层叠样式表)技术的升级版本,而css是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. ...
- 洛谷 P4298: bzoj 1143: [CTSC2008]祭祀
题目传送门:洛谷 P4298. 题意简述: 给定一个 \(n\) 个点,\(m\) 条边的简单有向无环图(DAG),求出它的最长反链,并构造方案. 最长反链:一张有向无环图的最长反链为一个集合 \(S ...
- 安装NodeJs和NPM到Ubuntu(APT)
运行环境 系统版本:Ubuntu 16.04.2 LTS 软件版本:node-v10.16.3.npm-6.9.0 硬件要求:无 安装过程 1.安装NPM和NodeJs root@localhost: ...
- Vue整合d3.v5.js制作--折线图(line)
先上效果图(x轴固定为时间轴): 图中出现的悬浮框是鼠标悬停效果 1.环境说明: vue版本:"vue": "^2.5.2" d3版本:"d3&quo ...
- java 企业 网站源码 模版 屏幕自适应 有前后台 springmvc SSM 生成静态化
前台: 支持四套模版, 可以在后台切换 系统介绍: 1.网站后台采用主流的 SSM 框架 jsp JSTL,网站后台采用freemaker静态化模版引擎生成html 2.因为是生成的html,所以访问 ...
- MySql 部分字段去重
select * from personal_question_answer where answer_id in ( select min(answer_id) from personal_ques ...
- HTML速查
HTML 基本文档 <!DOCTYPE html> <html> <head> <title>文档标题</title> </head& ...