2023年6月21日发(作者:)
前端性能优化:雅虎14条优化规则1.减少HTTP请求数 常⽤的⽅法,合并css,js(将⼀个页⾯中的css和js⽂件分别合并)以及 Image maps和css sprites等。2.使⽤CDN(内容分发⽹络) 通过在现有的Internet中增加⼀层新的⽹络架构,将⽹站的内容发布到最接近⽤户的 cache服务器内,通过DNS负载均衡的技术,判断⽤户来源就近访问cache服务器取得所需的内容。3.添加Expire/Cache-Control 头 Expire其实就是通过header报⽂来指定特定类型的⽂件在浏览器中的缓存时间。 ⼤多数的图⽚,flash在发布后都是不需要经常修改的,做了缓存以后这样浏览器以后就不需要再从服务器下载这些⽂件⽽是直接从缓存中读取,这样再次访问页⾯的速度会⼤⼤加快。4.启⽤Gzip压缩 Gzip的思想就是把⽂件先在服务器端进⾏压缩,然后再传输,这样可以显著减少⽂件传输的⼤⼩。传输完毕后浏览器会重新对压缩过的内容进⾏解压缩,并执⾏。5.将css放在页⾯最上⾯
因为 IE,Firefox等浏览器在css全部传输完全之前不会去渲染任何的东西。 IE把样式表放在页⾯的底部的问题在于它禁⽌了⽹页内容的顺序显⽰。浏览器阻⽌显⽰以免重画页⾯元素,那⽤户只能看到空⽩页了。 Firefox不会阻⽌显⽰,但这意味着当样式表下载后,有些页⾯元素可能需要重画,这导致闪烁问题。 所以我们应该尽快让css加载完毕。6.将script放在页⾯最下⾯ 因为script脚本的执⾏会阻塞页⾯的下载并且会阻塞并⾏下载数量,放在页⾯最下⾯可以有效减少页⾯可视元素的加载时间。7.避免在CSS中使⽤Expressions
避免在CSS中使⽤表达式。8.把javascript和css都放到外部⽂件中
不仅从性能优化上会这么做,⽤代码易于维护的⾓度看也应该这么做。9.减少DNS查询 在域名和ip地址之间的转换⼯作称为域名解析,也称DNS查询。 ⼀次DNS的解析过程会消耗20-120毫秒的时间,在DNS查询结束之前,浏览器不会下载该域名下的任何东西。所以减少DNS查询的时间可以加快页⾯的加载速度。10.压缩 JavaScript 和 CSS 减少页⾯字节数,容量⼩页⾯加载速度⾃然也就快,⽽且压缩除了减少体积以外还可以起到⼀定的保护作⽤。11.避免重定向 每增加⼀次重定向就会增加⼀次web请求,所以应该尽量减少。12.移除重复的脚本13.配置实体标签ETags
ETags 是⽤于确定浏览器缓存中元素是否与 Web server 中的元素相匹配的机制, 它是⽐ last-modified date 更灵活的元素验证机制。 缓存 即使AJAX是动态产⽣的⽽且只对⼀个⽤户起作⽤,他们依然可以被缓存。
2023年6月21日发(作者:)
前端性能优化:雅虎14条优化规则1.减少HTTP请求数 常⽤的⽅法,合并css,js(将⼀个页⾯中的css和js⽂件分别合并)以及 Image maps和css sprites等。2.使⽤CDN(内容分发⽹络) 通过在现有的Internet中增加⼀层新的⽹络架构,将⽹站的内容发布到最接近⽤户的 cache服务器内,通过DNS负载均衡的技术,判断⽤户来源就近访问cache服务器取得所需的内容。3.添加Expire/Cache-Control 头 Expire其实就是通过header报⽂来指定特定类型的⽂件在浏览器中的缓存时间。 ⼤多数的图⽚,flash在发布后都是不需要经常修改的,做了缓存以后这样浏览器以后就不需要再从服务器下载这些⽂件⽽是直接从缓存中读取,这样再次访问页⾯的速度会⼤⼤加快。4.启⽤Gzip压缩 Gzip的思想就是把⽂件先在服务器端进⾏压缩,然后再传输,这样可以显著减少⽂件传输的⼤⼩。传输完毕后浏览器会重新对压缩过的内容进⾏解压缩,并执⾏。5.将css放在页⾯最上⾯
因为 IE,Firefox等浏览器在css全部传输完全之前不会去渲染任何的东西。 IE把样式表放在页⾯的底部的问题在于它禁⽌了⽹页内容的顺序显⽰。浏览器阻⽌显⽰以免重画页⾯元素,那⽤户只能看到空⽩页了。 Firefox不会阻⽌显⽰,但这意味着当样式表下载后,有些页⾯元素可能需要重画,这导致闪烁问题。 所以我们应该尽快让css加载完毕。6.将script放在页⾯最下⾯ 因为script脚本的执⾏会阻塞页⾯的下载并且会阻塞并⾏下载数量,放在页⾯最下⾯可以有效减少页⾯可视元素的加载时间。7.避免在CSS中使⽤Expressions
避免在CSS中使⽤表达式。8.把javascript和css都放到外部⽂件中
不仅从性能优化上会这么做,⽤代码易于维护的⾓度看也应该这么做。9.减少DNS查询 在域名和ip地址之间的转换⼯作称为域名解析,也称DNS查询。 ⼀次DNS的解析过程会消耗20-120毫秒的时间,在DNS查询结束之前,浏览器不会下载该域名下的任何东西。所以减少DNS查询的时间可以加快页⾯的加载速度。10.压缩 JavaScript 和 CSS 减少页⾯字节数,容量⼩页⾯加载速度⾃然也就快,⽽且压缩除了减少体积以外还可以起到⼀定的保护作⽤。11.避免重定向 每增加⼀次重定向就会增加⼀次web请求,所以应该尽量减少。12.移除重复的脚本13.配置实体标签ETags
ETags 是⽤于确定浏览器缓存中元素是否与 Web server 中的元素相匹配的机制, 它是⽐ last-modified date 更灵活的元素验证机制。 缓存 即使AJAX是动态产⽣的⽽且只对⼀个⽤户起作⽤,他们依然可以被缓存。
发布评论