记一次失败的HTML解析

2019-03-01 本文已影响2人关灯侠

背景：我想做一个淘宝商品的详情页，阿里百川SDK接入需要用到UIWebView，实际效果首次加载特别满，于是我陷入了怎么去优化加载UIWebView的怪圈。

经历的路径：
1 、搜索如何优化UIWebView第一次加载速度
2、有人提出预加载，缓存js,css,img到本地，但是对于商品详情来说，这些东西我不知道如何下手去缓存。
3、还有自定义NSURLProtocol去实现的，以及企鹅的开源的库VasSonic（吐槽下，iOS demo还要去清理遗留的证书）
4、但还是不能达到，我参考的几个App打开详情的速度。我甚至想到，是不是定制了H5，事实证明我想太多了。
5、最终我可以确定一个事，我参考的几个App都是原生页面😢

最终我也决定搞原生页面，但是数据从哪里来，于是我想到了解析html，选择的是hpple, 还看到有Matt大佬写的Ono

于是我开始了

Chrome打开要解析的网页，开发者模式，拷贝根结点出来分析。

屏幕快照 2019-03-01 下午3.10.55.png
我按照顺序解析，先解析banner图。

<div class="scroller preview-scroller" style="transition-property: transform; transition-timing-function: cubic-bezier(0, 0, 0.25, 1); transition-duration: 350ms; transform: translate3d(0px, 0px, 0px);">
    
        
            <a class="item app-video" data-video="https://cloud.video.taobao.com/play/u/2326583143/p/2/e/6/t/1/50193648194.mp4?appKey=38829" style="background-image:url('https://img.alicdn.com/imgextra/i4/2326583143/TB2ifvYIhWYBuNjy1zkXXXGGpXa_!!2326583143.jpg_150x150Q60s150.jpg')" data-spm-click="gostr=/jhs;locaid=videoplay"><i class="app-video"></i><img src="//img.alicdn.com/imgextra/i4/2326583143/TB2ifvYIhWYBuNjy1zkXXXGGpXa_!!2326583143.jpg_2200x2200Q50s50.jpg_.webp" data-src="//img.alicdn.com/imgextra/i4/2326583143/TB2ifvYIhWYBuNjy1zkXXXGGpXa_!!2326583143.jpg_2200x2200Q50s50.jpg_.webp" aria-label="商品主图"></a>
        
    
        
            <a class="item"><img src="//img.alicdn.com/imgextra/i4/2326583143/O1CN01k1EQFr1Z5XKSzpAbO_!!2326583143.jpg_2200x2200Q50s50.jpg_.webp" aria-label="商品主图"></a>
        
    
        
            <a class="item"><img src="//img.alicdn.com/imgextra/i3/2326583143/TB2pIoBxNuTBuNkHFNRXXc9qpXa_!!2326583143.jpg_2200x2200Q50s50.jpg_.webp" aria-label="商品主图"></a>
        
    
        
            <a class="item"><img src="//img.alicdn.com/imgextra/i1/2326583143/TB2b.M.gRfH8KJjy1XbXXbLdXXa_!!2326583143.jpg_2200x2200Q50s50.jpg_.webp" aria-label="商品主图"></a>
        
    
        
            <a class="item"><img src="//img.alicdn.com/imgextra/i4/2326583143/TB2SIBLGf5TBuNjSspcXXbnGFXa_!!2326583143.jpg_2200x2200Q50s50.jpg_.webp" aria-label="商品主图"></a>
        
    
        
            <a class="item"><img src="//img.alicdn.com/imgextra/i2/2326583143/O1CN01fdhdpu1Z5XK68KrIE_!!2326583143.jpg_2200x2200Q50s50.jpg_.webp" aria-label="商品主图"></a>
        
    
</div>

因为标签a class="item"的有很多，所以我先从根结点利用XPath搜索，搜索路径这样的//div[@class='scroller preview-scroller']//a[@class='item']

NSData *data = [NSData dataWithContentsOfURL:itemURL];
    TFHpple *hpple = [[TFHpple alloc] initWithHTMLData:data encoding:@"NSASCIIStringEncoding"];
    NSArray *arr = [hpple searchWithXPathQuery:@"//div[@class='scroller preview-scroller']//a[@class='item']"];
    // 获取banner图
    NSMutableArray *imgs = [NSMutableArray array];
    for (TFHppleElement *element in arr) {
        NSString *style = [element objectForKey:@"style"];
        if (style) { // 第一张video不要
            continue;
        }
        TFHppleElement *childElement = element.firstChild;
        NSString *img = [childElement objectForKey:@"data-src"];
        img = [NSString stringWithFormat:@"https:%@",img];
        [imgs addObject:img];
    }

最终我拿到了bannner图，至此🤔️以为很顺利。

直到我想拿商品标题时
vivox9\U00b8\U00d6\U00bb\U00af\U00c4\U00a4x21x20a\U00c8\U00ab\U00c6\U00c1x7x9i\U00b8\U00d5x20vivox9s\U00ca\U00d6\U00bb\U00favivonex/nex\U00bb\U00c3\U00b2\U00cai\U00b0\U00e6vivox23vovix21a/vivix\U00c0\U00b6\U00b9\U00e2plus23l/splus
转码后得到vivox9¸Ö»¯Ä¤x21x20aÈ«ÆÁx7x9i¸Õx20vivox9sÊÖ»úvivonex/nex»Ã²Êi°ævivox23vovix21a/vivixÀ¶¹âplus23l/splus
我得到一堆乱码的数据。我开始以为我转码有问题，于是我尝试了utf8、unicode，甚至还有ISO什么东东。

我得出结论，这些文本怕是加密了😢，但是可喜的是图片ulr是可以拿到的。

最后数据我让后台帮我弄了

这里唯一有用的大概是，利用XPath解析数据了，XPath只需要知道是一个搜索路径就可以了，然后就是用Chrome拷贝即可

记一次失败的HTML解析

猜你喜欢

热点阅读