前端性能 - 请求拦截篇

@force2008 2017-11-01 07:13:28发表于 kaola-fed/blog 待归档


title: 前端性能 - 请求拦截篇
date: 2017-11-01

性能是老生常谈的话题
css在前,js在后,放到cdn,设e-tag, 设gzip等在实际网页基础设置中需要做的原则。
在业务层面上,如何优化网页。
常碰到的问题是:

  1. h5页面在app上崩溃了。
  2. h5页面出来很慢
  3. h5在不同的机子上样式乱了
  4. h5出了线上bug了

怎么都是在h5上出了问题呢,而且很多是在app的环境里出了问题。拿到这样的问题需要怎么处理呢,目前我们没有很好的h5在app上的调试工具,我用到的是charles进行定位和调试。

请求拦截

1.获取页面的工具页面的url,因为在app里,所以第一步是获取页面url

1.1 通过charles的代理观察页面的请求url
1.2 通地分享到pc的微信或易信,再把页面用浏览器打开获取url

为什么要获取url, 主要是因为页面上的脚本和页面都是混淆过,如果直接在混淆过的代码上修改和调试很难定位到问题代码。所以把页面找出来,用浏览器dev-tool里source里,把要调试的脚本format一下。

image

格式化后

image

把格式化后的代码拷贝出来,存成一份本地的js文件

image

转到charles上,查看拦截的js或css文件,在例子中要拦截的是js文件,所以找到对应的js文件,在文件点击右键,启用map local ,启用no caching

image

上面的这些步骤基本可以确保通过这个charles的代理能把https://w.kl.126.net/r/core_85785a8caffdcb8141ddcac0e3bb5fec.js 文件代理到本地的core.js上,发现疑问点的时候可以通过修改core.js,验证alert怀疑点。

js能混淆变量,但不能混淆字符串,所以在排查问题的时候需要从源码里把代码片断附近的字符串找一段,然后用devtools 里ctrl+shift+f(页页面查找内容),然后可以定位到对应的代码附近了。

请求调试

有时需要观察请求中的参数,请求的返回数据,请求cookie,返回的cookie,数据等,可以用charles 的breakpoints进行处理,有的get请求有随机参数,需要在菜单proxy->breakpoint setting...里把参数部分去掉
请求上右键breakpoints
image
image

然后正常的刷新页面,当匹配到这个请求时,charles会debug住该请求,然后在debug版面里修改请求内容和返回内容,用于快速排查线上请求错误,求证表现是否和反馈一致。
可以用abort取消该请求,也可以点excute执行一次,等response返回还可以再断点住,修改response的内容再excute,形成一个完成的请求断点
image

如何处理app请求拦截的问题

我们的app里的活动页里的css和js的请求是被app拦截的,所以这些请求不能进行charles的拦截 如何处理这类不能进入charles拦截的请求呢?

需要改上页面上的css和js的文件名,map local一个html文件到一个本地文件,然后修改本地的html文件里的css或js文件名,避开app上的请求拦截。
如这个页面上的两个脚本是//w.kl.126.net/r/core_85785a8caffdcb8141ddcac0e3bb5fec.js和//w.kl.126.net/r/pt_pages_activity_tplnew_tpl_7f0e08822b18aed439622d1352c9bf50.js,这两个请求被app里拦截,从web cache的包里把文件内容取出,放到到请求返回里,所以charles不能看到这两请求的发出。

<script src="//w.kl.126.net/r/core_85785a8caffdcb8141ddcac0e3bb5fec.js"></script>
<script src="//w.kl.126.net/r/pt_pages_activity_tplnew_tpl_7f0e08822b18aed439622d1352c9bf50.js"></script>

所以需要把文件名稍做修改,换个文件名字符,躲避app的请求拦截,如改成以下文件名:

<script src="//w.kl.126.net/r/core_85785a8caffdcb8141ddcac0e3bb5fed.js"></script>
<script src="//w.kl.126.net/r/pt_pages_activity_tplnew_tpl_7f0e08822b18aed439622d1352c9bf51.js"></script>

image

上面的文件名修改是在map local 的本地的html里修改的。

上面还有一个问题是如何调试https的请求,度娘 “charles https” 证书安装,一堆的文章。
上面的准备动作完后成,才算开始真的调试之路。

特定api排查

像分享文案不符预期,jsbridge里api有问题等都可以通过在修改core.js的脚本进行数据alert排查。