雅虎23条

最新推荐文章于 2021-08-11 00:43:06 发布

qq_24381917

最新推荐文章于 2021-08-11 00:43:06 发布

阅读量148

点赞数

分类专栏：性能测试相关笔记

本文链接：https://blog.csdn.net/qq_24381917/article/details/106254928

版权

性能测试相关笔记专栏收录该内容

18 篇文章 0 订阅

订阅专栏

雅虎23条

参考https://developer.yahoo.com/performance/rules.html#num_http

Minimize HTTP Requests 减少HTTP请求

最终用户响应时间的80％用于前端。大部分时间都在下载页面中的所有组件：图像，样式表，脚本，Flash等。减少组件数量反过来减少了呈现页面所需的HTTP请求数量

减少HTTP请求的方法

组合文件：将所有脚本组合到单个脚本中来减少HTTP请求数量的方法，并且类似地将所有CSS组合到单个样式表中
CSS Sprites ：减少图像请求数量,将背景图像合并为单个图像，并使用CSSbackground-image和background-position属性显示所需的图像片段

使用内容分发网络

最终用户响应时间的80-90％用于下载页面中的所有组件：图像，样式表，脚本，Flash等，所以最好先分散静态内容。另一方面，用户与Web服务器的距离会对响应时间产生影响。在多个地理位置分散的服务器上部署内容将使页面从用户的角度加载更快,内容传送网络（CDN）是分布在多个位置的Web服务器的集合，以更有效地向用户传送内容
避免空图像src

空的src也会向服务器发送异步请求，如果服务器访问量很多，则会增加很多流量，而且如果图像请求未返回图像，浏览器也会读取冰洁所有标题，包括cookie.若果通过cookie或其他方式跟踪请求中的状态，可能会破坏数据。解决方法时代码中不写空的src。如有不能这样做，则可以尝试在服务器中间层并中止进步与的执行
添加Expires或Cache-Control标头：

对于静态组件：通过设置远期未来Expires标头实现“永不过期”策略;对于动态组件：使用适当的Cache-Control标头来帮助浏览器处理条件请求.通过使用Expires标头，您可以使这些图片，样式表等组件可缓存，这可以避免后续页面查看中不必要的HTTP请求。
Gzip组件

Gzip是目前最流行，最有效的压缩方法,Gzipping通常将响应大小减少约70％.一般gitpHTML文档,脚本，和样式表，但是不应该对图片和PDF文档进行gzip.因为他们已经经过了压缩
将样式表放在顶部：

将样式表移动到文档HEAD会使页面看起来加载速度更快。这是因为将样式表放在HEAD中允许页面逐步呈现
把脚本放在底部：

脚本引起的问题是它们阻止了并行下载，将其移动到页面底部。可以使网页加载速度更快
避免使用CSS表达式：

表达式的问题在于它们的评估频率很高,鼠标再页面上移动端可能都会生成数量很多的评估。减少CSS表达式求值次数的一种方法是使用一次性表达式
将JavaScript和CSS放在外部：

JavaScript和CSS位于浏览器缓存的外部文件中，则HTML文档的大小会减少，但不会增加HTTP请求的数量。
减少DNS查找：

缓存DNS，避免DNS查找会缩短响应时间
缩小JavaScript和CSS：

缩小是从代码中删除不必要的字符以减小其大小从而改善加载时间的做法。缩小代码时，将删除所有注释，以及不需要的空格字符（空格，换行符和制表符）
避免重定向：

在用户和HTML文档之间插入重定向会延迟页面中的所有内容，因为页面中的任何内容都无法呈现，并且在HTML文档到达之前不会开始下载任何组件
删除重复的脚本：

重复的脚本会通过创建不必要的HTTP请求和浪费的JavaScript执行来损害性能。
配置ETag：

实体标记（ETag）是Web服务器和浏览器用于确定浏览器缓存中的组件是否与源服务器上的组件匹配的机制
尽早清理缓存：

缓存清理允许将部分准备好的HTML响应发送到浏览器，浏览器可以在后端忙于HTML页面的其余部分时开始获取组件
使用GET进行AJAX请求：

GET请求只需要一个TCP数据包发送
减少DOM元素的数量：

复杂页面意味着要下载更多字节，也意味着JavaScript中的DOM访问速度更慢，可以通过页面标记来改进
没有404:

发出没有响应的请求会降低用户的体验
减少Cookie大小：

cookie会增加http请求的大小，因此需要去除不必要的cookie,保持cookie尽可能的少，在适当的域名级设置cookie避免其他域名级别受到影响，适当设置过期时间
对组件使用无Cookie域：

当浏览器发出静态图像请求并将cookie与请求一起发送时，服务器对这些cookie没有任何用处，应该确保使用无cookie请求请求静态组件。可以创建一个子域并在那里托管所有静态组件。
避免过滤器:

IE专有的AlphaImageLoader过滤器旨在解决IE版本<7中的半透明真彩色PNG的问题。该过滤器的问题在于它在下载图像时阻止渲染并冻结浏览器。它还会增加内存消耗，并且每个元素应用，而不是每个图像，因此问题成倍增加。最好的方法完全避免AlphaImageLoader，使用优雅降级PNG8（优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容）
不要在HTML中缩放图像:

不要使用比您需要的更大的图像，因为您可以在HTML中设置宽度和高度，比如：<img width="100" height="100" src="mycat.jpg" alt="My Cat" />,指定图片大小为100*100
让favicon.ico足够小并且可缓存

favicon.ico是一个保留在服务器根目录中的映像，它是一个必要的存在，即使没有使用，浏览器仍然请求它。它需要保持足够小，最好不要到1K，可以针对它设置Expires标头来使它可缓存
其他：

a. 后载组件：

页面必须确保即使没有JavaScript也能正常工作。因此，在确保页面正常工作之后，可以使用一些后期加载的脚本来增强它

b. 预加载组件：

通过预加载组件，可以利用浏览器空闲的时间请求将来需要的组件（如图像，样式和脚本）。这样，当用户访问下一页时，可以将大部分组件放在缓存中，页面加载会更快

c. 跨域拆分组件：

拆分组件允许最大化并行下载。由于DNS查询惩罚，需要确保使用的域名不超过2-4个

d. 最小化iframe数量：

iframe即使空白也会加载，且会阻止页面onload

e. 最小化DOM访问
使用JavaScript访问DOM元素的速度很慢，因此为了获得响应更快的页面,可以：
- 缓存对访问元素的引用
- 更新节点“离线”，然后将它们添加到树中
- 避免使用JavaScript修复布局