前端妹子跟我抱怨她们的页面加载很慢的时候,如何在她面前优雅的装13

目的是装逼,优雅地装逼,要让妹子觉得你很牛逼对不对?要让妹子听你分析完之后就投怀送抱对不对?
 首先,想装逼就要显得随性、自然,看一眼就知道问题在哪。如果你需要吭吭哧哧的查半天log、分析core文件,那逼格自然就降低了许多。那如何才能随性自然呢?答案是看网页瀑布图。啥是瀑布图?这都不知道还追前端妹子?用chrome打开网页,按住option+command+i(windows是F12,但是如果你按的是这个,那么你怎么敢说你要装逼,前端团队都是清一水的mac啊亲,先换个mac再装逼),打开开发者工具看network。

有了瀑布图,下面才是装逼的重点,要故作轻松、轻描淡写的扫一眼瀑布图,然后沉思几秒,语调略带深沉的跟妹子说:“我知道了”。当然,你要真的知道才行,不给妹子说出个所以然来,最后死的还是你。
造成加载很慢的原因很多,但是你只需要知道一些就可以了,下面我就给你说一些常见的问题以及识别方法,如果这些情况都不是,那就只能祝你好运了哥们。
1、后端的问题
 看到没,第一个请求特别长、特别长,明显比其他请求放到一起不和谐。一般网页第一个请求是动态请求的概率比较大,如果这个请求特别耗时,那肯定不是前端的责任,不是妹子的问题,伦家的html都没加载完呢,你怎么就能说是前端的问题呢。优化php、优化数据库、优化一切可以优化的东西,要让妹子觉得很爽才行。
2、请求数太多

数一下瀑布图总共有多少行,onload之前如果有几百行,那么请求就太多了。问一下妹子,一下子加载那么多资源真的好么?跟妹子说,css,js该合并的合并,图标该精灵的精灵,告诉妹子使用字体图标也能提升你高大上的形象。还有,有些不重要的东西不用放到onload之前加载,放到后面也一样嘛。网页发请求数就跟妹子的前男友数一样,越少越好。
3、老鼠屎
看到图中的这个请求没?再看看其他请求,这个请求比其他请求的时间大出一个数量级。这种情况一般是因为某一个资源太慢了,它就是一颗老鼠屎,坏掉了整锅汤,导致网页整体变慢。资源慢的原因,你可以跟妹子去星巴克,两个人采取结对编程的方式慢慢把玩这颗老鼠屎,概率比较大的几个可能是:a)资源在第三方站点上,他们很慢;b)这个资源太大了;c)这个资源使用的域名有问题。
4、网络问题

仔细看一下一个单独的http请求,他们会分为好几段,分别是域名解析、建立连接、发送请求、等待响应和接收数据几个阶段。理论上域名解析和建立连接应该占用的时间很小才对,主要的时间应该用在后面几个阶段上。上图中,浅灰色和灰色分别代表域名解析和建立连接,可以看出这两个请求中花费在网络层上的时间太长了,超过总时间的一半还要多。网络层时间过长除了可能和底层网络有关之外,还可能和站点的服务端性能有关(后端RD的事情哦)。当然,如果这种情况发生在向第三方站点发送的请求上(实际上也经常发生),你就可以建议妹子取消或者更换某些站点功能从而避免这样的请求了。
5、接收数据时间过长
上面说了,http请求的大部分时间应该花在后面几个阶段,比如等待响应和接收数据。但是,如果接收数据的时间太长了,长到数百毫秒甚至以秒计算的时候,那也是有问题的。这种情况一般是因为下载的内容太重了,例如大图片、大脚本等。这类问题可以使用GZIP压缩、图片压缩或者JS/CSS的minify等手段来解决。

6、js阻塞请求

图中两个连续的请求之间出现了一个很大的空隙,为啥会出现这个空隙呢?可能是因为妹子写的js性能有问题,解析执行js花了很长时间,导致这段时间的资源加载都被阻塞住了。如果发生了这个情况,你就应该耐心安慰妹子,问一下妹子是不是在写代码的时候身体不舒服啊、心情不好啊之类的关心一下,切记不能直接说妹子代码写的不行,不然肯定没有然后。
7、如果以上都没有

可以和妹子一一翻看每个http请求,仔细研究每个请求头响应头,看看是不是没有设置缓存啦,图片优化的不够好啦之类的。如果担心自己分析不好,可以先找个工具分析一下,比如:http://speed.mmtrix.com/ ,把上面这张图拿给妹子看看,问题一目了然。

写到这里我忽然想到了一点,妹子抱怨慢的时候你当时没有装逼,现在才学如何装逼,还来得及么?来得及么?得及么?及么?么?   

时间: 2024-11-11 17:13:05

前端妹子跟我抱怨她们的页面加载很慢的时候,如何在她面前优雅的装13的相关文章

利用Navigation Timing测量页面加载时间

最近在看一本名为<web性能实践日志>的书籍,其中第十三章"网络计时"中介绍了一种比较新的计算页面各部分加载时间方法,这也是W3C Web性能工作小组正在做的事情,接下来我就给大家大概介绍一下: 首先先撇开这篇文章所要介绍的,如果要你来写一段代码来计算整个页面加载的时间的话,我们一般都会这样做:获得页面开始加载的时间和结束加载的时间,两个一减便是页面加载的时间了,没错,代码如下: 1 <html> 2 <head> 3 <script type

网页前端页面加载性能测试各工具可行性方案分析

网页前端页面加载性能测试各工具可行性方案分析 征对各个浏览器和工具做了测试,之所以选择的是百度首页测试,因为其比较单一,没有多层嵌套和持续加载,尽量减少其他影响,测试中发现目前有些方案是不可行的,后面征对各个测试结果给出了可行方案和不可行的建议. 1 .webbrowser(内核IE10)和IE10浏览器的比较: Webbrowser的测试方法为,先执行清除浏览器缓存,从开始导航开始计时,DocumentCompleted时间将2次触发,取最后一次的时间,按照DocumentCompleted解

Web前端性能优化——如何提高页面加载速度

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

【转】Web前端性能优化——如何提高页面加载速度

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

FaceBook页面加载技术

1. 技术背景 FaceBook页面加载技术 试想这样一个场景,一个经常访问的网站,每次打开它的页面都要要花费6 秒:同时另外一个网站提供了相似的服务,但响应时间只需3 秒,那么你会如何选择呢?数据表明,如果用户打开一个网站,等待3~4 秒还没有任何反应,他们会变得急躁,焦虑,抱怨,甚至关闭网页并且不再访问,这是非常糟糕的情况.所以,网页加载的速度十分重要,尤其对于拥有遍布全球的5亿用户的Facebook(全球最大的社交服务网站)这样的大型网站,有着大量并发请求.海量数据等客观情况,速度就成了必

极客编程挑战#018:设计独一无二的页面 ”加载中“ 效果

本期挑战 请使用以下开练 LOGO 素材 为基础(三选一即可): 图片(base64):http://www.gbtags.com/gb/rtreplayerpreview/808.htm SVG图形:http://www.gbtags.com/gb/rtreplayerpreview/809.htm 或者基于以上图形的的自定义LOGO设计 挑战要求: 使用你所熟悉的任意前端技术(JS,CSS3,画布,SVG动画等等),生成一个漂亮动态的 ”页面加载中“ 效果,持续5秒后,页面即导向地址:htt

从输入URL到页面加载发生了什么

从输入URL到页面加载发生了什么 转自: https://segmentfault.com/a/1190000006879700 作者写得很不错,作者忽略了的,我加了上去,完善了一些,如get与post的区别等 总体来说分为以下几个过程: DNS解析 TCP连接 发送HTTP请求 服务器处理请求并返回HTTP报文 浏览器解析渲染页面 连接结束 1.DNS解析 DNS解析的过程就是寻找哪台机器上有你需要资源的过程.当你在浏览器中输入一个地址时,例如www.baidu.com,其实不是百度网站真正意

41 关于请求被挂起页面加载缓慢问题的追查

缘起 有用户反馈内部MIS系统慢,页面加载耗时长.前端同学们开组会提及此事,如何解决慢的问题. 最致命的是:偶发!你不能准确知道它抽风的时间点,无法在想要追查问题的时候必现它.这只是一方面,另外,慢的可能实在太多了,那么问题来了,是前端导致的还是后端的问题? 对慢的定义也有待商榷,多久算慢?如果这个页面加载大量数据耗时增加那我认为这是正常的.但这个时限超过了一个合理的自然值,就变得不那么正常了,比如四五十秒,一分多钟. 最奇葩的是,如此久的耗时居然不会报超时错误,而是拿到正确返回后将页面呈现了出

页面加载优化的14条原则

1. 尽可能的减少 HTTP 的请求数 [content] 2. 使用 CDN(Content Delivery Network) [server] 3. 添加 Expires 头(或者 Cache-control ) [server] 4. Gzip 组件 [server] 5. 将 CSS 样式放在页面的上方 [css] 6. 将脚本移动到底部(包括内联的) [javascript] 7. 避免使用 CSS 中的 Expressions [css] 8. 将 JavaScript 和 CSS