2023年6月21日发(作者：)

前端更新需要清空浏览器缓存_分析Web前端测试要点，从架构原理上进⾏分析，希望⼤家能够掌握...基于Web前端分析过程，⼤概有⼗⼏个测试要点，我们今天主要来讲解结合前五个要点进⾏详细解说。前端测试点主要针对前端展开，什么叫前端分析呢？就是我们所有的分析和测试要点所站的视⾓都是针对客户端或者浏览器来对系统进⾏分析和测试的，我们不需要考虑服务器端的架构是什么样的，也不需要考虑从服务器⾓度来说要去关注数据库、服务器、系统集成、Web服务器的配置等，这⼗⼏个测试要点可以测试任何的类型⽹站的质量，我们不需要关注后台的相关内容，例如：我们可以使⽤些这些测试要点去测试任何的⽹站质量怎么样，我们是从前端的视⾓来检验系统的质量，除了这些要点之外，所有WEB⽹站的⼯作原理都需要理解，因为所有的内容都是基于⽹络协议展开的，⾸先，我们得了解HTTP协议的⼯作原理过程，才能够对这些测试要点进⾏全⾯的分析和理解，才能够真正的结合实践应⽤。其次，要对浏览器⼯作原理进⾏深⼊了解，我们⼀定要对浏览器和服务器是如何⼯作的原理有⼀个深⼊的了解，前⾯我们也通过⽹络架构原理课程了解了相关的过程，包括软件兼容性内容中与⼤家详细讲解了浏览器的⼯作原理及页⾯的渲染引擎做了很详细的讲解，让⼤家全⾯的理解基于前端的测试要点。尽可能减少HTTP请求的数量。我们可以通过合并的⽅式，例如：可以将JS、CSS或者图⽚合并到⼀个页⾯中，可以采⽤多个图⽚合并到⼀个图⽚中，这样就能达到减少HTTP请求的数量，减少HTTP请求的⽬的是为了减少HTTP释放链接的资源，提升系统访问速度，从⽽提升性能。前端浏览器缓存应⽤⼤家都知道浏览器都会把我们访问过⽹站的这些静态资源保存在硬盘的⽬录中，下次去访问同样的资源，服务器会检测硬盘中是否存在缓存记录，如果已经保存了资源就直接读取，达到减少请求数据的⽬的，可以提升系统的性能，所以请⼤家好好利⽤浏览器的缓存机制，当然缓存机制也存在它的⼀些弊端，如果浏览器缓存设置时间过长，如果我们更新了内容之后，浏览器客户端也不知道，因为浏览还是会使⽤之前缓存起来的内容，例如：⼤家平时在⼯作中经常遇到这种问题，就是系统重新部署发布之后，我们再次访问系统为什么发现功能并没有更新，这其实就是利⽤了浏览器的缓存机制，再把缓存清空重新刷新⼀下就能看到最近修改的相关功能。利⽤Gzip压缩机制：只针对⽂本类资源有效。什么是⽂本类资源？例如：基于前端页⾯的⼀些JS脚本、CSS、HTML这些都属于⽂本内容。⽂本类资源压缩⽐例可以达到70%以上，基本上100K的资源可以被压缩成20K，这是⼀个⾮常⾼的压缩⽐例。为什么只针对⽂本类资源压缩有效？因为像我们在⽹站上看到的图⽚都是已经被压缩过了，例如:PNG、GIF、JPEG他们都是已经被压缩过了，即使再有Gzip压缩也没有任何作⽤，⼤家可以拿⼀张PNG的图⽚，然后使⽤winrar软件对这张图⽚进⾏压缩，你会看到压缩图⽚的⼤⼩不会有变化，因为已经进⾏了压缩不能再压缩了，压缩前和压缩后的图⽚⼤⼩基本是⼀致的。因为压缩资料后，在⽹络传输的时候过程可以节省很多的带宽资源，⽽我们的⽹站除了图⽚以外，⽂本也占去绝⼤部分篇幅，从⽽达到提升页⾯访问的速度，提升系统性能。把CSS⽂件放在HTML的开头我们知道CSS⽂件主要⽤来渲染、排版的，我们前⾯了解了浏览器的渲染过程，系统如果发现⽹站存在静态资源后，然后下载保存到硬盘中，便于我们访问⽹站渲染的过程中能够使⽤，我们尽可能的将CSS放在最开始的地⽅，让浏览⼀开始就能把这个资源下载完成，这样后⾯渲染的过程才会进展得更加顺利，不会因为中途出现静态资源再保存⾮常浪费时间，请务必将所以的CSS压缩到⼀个⽂件中，将JavaScript⽂件放在HTML的结尾.JS其实不是⽤来做渲染的，⽽是当我们的页⾯渲染完成以后，⽤户在操作页⾯功能的过程中能够达到⼀种动态的效果，JS既然没有这种渲染的效果，我们将JS放在最后让浏览器渲染完成页⾯最后等浏览器渲染页⾯完成后，⽤户才可以调⽤到JS来进⾏动态的操作与⽂件处理，放在最开始的地⽅浏览器会优先下载JS,会延迟下载图⽚等⽂本相关内容，会影响页⾯的性能，页⾯渲染显⽰的内容更缓慢。总结：以上五点前端分析测试要求都是基于前端原理过程梳理出来的核⼼内容，很多同学在企业中做测试⼀般都是基于UI界⾯的功能测试，很少从原理上去深⼊理解系统，于是会感觉基于前端页⾯的测试很简单，但是要想达到⾼级测试⼯程师的要求，必须要学会从原理的内部过程中来理解事物，从事物的起源中理解内容，才会让我们的知识⾯更具内涵，肤浅的内容没有竞争⼒，希望⼤家能够掌握。

2023年6月21日发(作者：)

前端更新需要清空浏览器缓存_分析Web前端测试要点，从架构原理上进⾏分析，希望⼤家能够掌握...基于Web前端分析过程，⼤概有⼗⼏个测试要点，我们今天主要来讲解结合前五个要点进⾏详细解说。前端测试点主要针对前端展开，什么叫前端分析呢？就是我们所有的分析和测试要点所站的视⾓都是针对客户端或者浏览器来对系统进⾏分析和测试的，我们不需要考虑服务器端的架构是什么样的，也不需要考虑从服务器⾓度来说要去关注数据库、服务器、系统集成、Web服务器的配置等，这⼗⼏个测试要点可以测试任何的类型⽹站的质量，我们不需要关注后台的相关内容，例如：我们可以使⽤些这些测试要点去测试任何的⽹站质量怎么样，我们是从前端的视⾓来检验系统的质量，除了这些要点之外，所有WEB⽹站的⼯作原理都需要理解，因为所有的内容都是基于⽹络协议展开的，⾸先，我们得了解HTTP协议的⼯作原理过程，才能够对这些测试要点进⾏全⾯的分析和理解，才能够真正的结合实践应⽤。其次，要对浏览器⼯作原理进⾏深⼊了解，我们⼀定要对浏览器和服务器是如何⼯作的原理有⼀个深⼊的了解，前⾯我们也通过⽹络架构原理课程了解了相关的过程，包括软件兼容性内容中与⼤家详细讲解了浏览器的⼯作原理及页⾯的渲染引擎做了很详细的讲解，让⼤家全⾯的理解基于前端的测试要点。尽可能减少HTTP请求的数量。我们可以通过合并的⽅式，例如：可以将JS、CSS或者图⽚合并到⼀个页⾯中，可以采⽤多个图⽚合并到⼀个图⽚中，这样就能达到减少HTTP请求的数量，减少HTTP请求的⽬的是为了减少HTTP释放链接的资源，提升系统访问速度，从⽽提升性能。前端浏览器缓存应⽤⼤家都知道浏览器都会把我们访问过⽹站的这些静态资源保存在硬盘的⽬录中，下次去访问同样的资源，服务器会检测硬盘中是否存在缓存记录，如果已经保存了资源就直接读取，达到减少请求数据的⽬的，可以提升系统的性能，所以请⼤家好好利⽤浏览器的缓存机制，当然缓存机制也存在它的⼀些弊端，如果浏览器缓存设置时间过长，如果我们更新了内容之后，浏览器客户端也不知道，因为浏览还是会使⽤之前缓存起来的内容，例如：⼤家平时在⼯作中经常遇到这种问题，就是系统重新部署发布之后，我们再次访问系统为什么发现功能并没有更新，这其实就是利⽤了浏览器的缓存机制，再把缓存清空重新刷新⼀下就能看到最近修改的相关功能。利⽤Gzip压缩机制：只针对⽂本类资源有效。什么是⽂本类资源？例如：基于前端页⾯的⼀些JS脚本、CSS、HTML这些都属于⽂本内容。⽂本类资源压缩⽐例可以达到70%以上，基本上100K的资源可以被压缩成20K，这是⼀个⾮常⾼的压缩⽐例。为什么只针对⽂本类资源压缩有效？因为像我们在⽹站上看到的图⽚都是已经被压缩过了，例如:PNG、GIF、JPEG他们都是已经被压缩过了，即使再有Gzip压缩也没有任何作⽤，⼤家可以拿⼀张PNG的图⽚，然后使⽤winrar软件对这张图⽚进⾏压缩，你会看到压缩图⽚的⼤⼩不会有变化，因为已经进⾏了压缩不能再压缩了，压缩前和压缩后的图⽚⼤⼩基本是⼀致的。因为压缩资料后，在⽹络传输的时候过程可以节省很多的带宽资源，⽽我们的⽹站除了图⽚以外，⽂本也占去绝⼤部分篇幅，从⽽达到提升页⾯访问的速度，提升系统性能。把CSS⽂件放在HTML的开头我们知道CSS⽂件主要⽤来渲染、排版的，我们前⾯了解了浏览器的渲染过程，系统如果发现⽹站存在静态资源后，然后下载保存到硬盘中，便于我们访问⽹站渲染的过程中能够使⽤，我们尽可能的将CSS放在最开始的地⽅，让浏览⼀开始就能把这个资源下载完成，这样后⾯渲染的过程才会进展得更加顺利，不会因为中途出现静态资源再保存⾮常浪费时间，请务必将所以的CSS压缩到⼀个⽂件中，将JavaScript⽂件放在HTML的结尾.JS其实不是⽤来做渲染的，⽽是当我们的页⾯渲染完成以后，⽤户在操作页⾯功能的过程中能够达到⼀种动态的效果，JS既然没有这种渲染的效果，我们将JS放在最后让浏览器渲染完成页⾯最后等浏览器渲染页⾯完成后，⽤户才可以调⽤到JS来进⾏动态的操作与⽂件处理，放在最开始的地⽅浏览器会优先下载JS,会延迟下载图⽚等⽂本相关内容，会影响页⾯的性能，页⾯渲染显⽰的内容更缓慢。总结：以上五点前端分析测试要求都是基于前端原理过程梳理出来的核⼼内容，很多同学在企业中做测试⼀般都是基于UI界⾯的功能测试，很少从原理上去深⼊理解系统，于是会感觉基于前端页⾯的测试很简单，但是要想达到⾼级测试⼯程师的要求，必须要学会从原理的内部过程中来理解事物，从事物的起源中理解内容，才会让我们的知识⾯更具内涵，肤浅的内容没有竞争⼒，希望⼤家能够掌握。