fny5jt9 发表于 2024-7-27 08:43:34

网站拜访速度优化历程


    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">带着问题继续：</span></span></p><span style="color: black;"><span style="color: black;"><span style="color: black;">那些</span>方面容易<span style="color: black;">引起</span>网站打开慢</span></span><span style="color: black;"><span style="color: black;">页面打开时间多长属于正常</span></span><span style="color: black;"><span style="color: black;"><span style="color: black;">此刻</span>有打开速度为1.44秒还有<span style="color: black;">无</span>优化的空间</span></span><span style="color: black;"><span style="color: black;">全站https<span style="color: black;">怎样</span>实现</span></span><span style="color: black;"><span style="color: black;">优化网站的专业技巧有<span style="color: black;">那些</span></span></span>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;"><span style="color: black;"><span style="color: black;">一般</span><span style="color: black;">处理</span>前面80%的问题需要花20%的精力，<span style="color: black;">处理</span>剩余的20%的问题需要共80%的精力</span></span><span style="color: black;">。网站的优化其实我从60S优化到10S的时候，<span style="color: black;">已然</span>进行不下去了。但10S的打开速度对一个站点来讲依然是致命的，速度太慢了，正常网站打开速度最久<span style="color: black;">不可</span>超过3S，每<span style="color: black;">增多</span>1s，用户的耐心都指数级被考验，10s的<span style="color: black;">拜访</span>速度几乎不会有用户驻留，12306这种霸王站点除外。从10s到1.44s是在前端<span style="color: black;">朋友</span>的帮忙下，才得以继续。<span style="color: black;">咱们</span><span style="color: black;">循序渐进</span>来看。</span></span></p>
    <h1 style="color: black; text-align: left; margin-bottom: 10px;">从60秒到10秒</h1>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">网站<span style="color: black;">拜访</span>速度慢有<span style="color: black;">非常多</span>种<span style="color: black;">状况</span>：</span></span></p><span style="color: black;"><span style="color: black;">a&gt; <span style="color: black;">拜访</span>者自己硬件设备（硬盘、CPU、网口、运营商带宽）资源不足</span></span><span style="color: black;"><span style="color: black;">b&gt; 服务器硬件设备（硬盘、CPU、网口、运营商带宽）资源不足</span></span><span style="color: black;"><span style="color: black;">c&gt; <span style="color: black;">照片</span>未做优化太大、太多<span style="color: black;">引起</span>资源加载太多而慢</span></span><span style="color: black;"><span style="color: black;">d&gt; 应用程序代码质量差<span style="color: black;">引起</span>性能消耗大、响应速度慢</span></span><span style="color: black;"><span style="color: black;">e&gt; 页面设计不<span style="color: black;">恰当</span>，<span style="color: black;">引起</span>资源整合<span style="color: black;">太多</span>（<span style="color: black;">照片</span>、css、js、前后端请求等）</span></span><span style="color: black;"><span style="color: black;">f&gt; 其它DNS、安全入侵等问题</span></span>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;"><span style="color: black;">一般</span><span style="color: black;">处理</span>掉a b c<span style="color: black;">能够</span>帮<span style="color: black;">咱们</span><span style="color: black;">处理</span>80%的问题只需要花费20%的精力，d e f<span style="color: black;">能够</span>帮<span style="color: black;">咱们</span><span style="color: black;">处理</span>掉剩下的20%问题但需要花费80%的精力。</span></span></p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/3fdcf870e29f46fe8833219750fb3d6b~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1722603470&amp;x-signature=PXNJVzWeJIiHF0o3vaG4TnzCMtY%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">阿里云上查看了服务器性能消耗，虽然硬件1Core2GB内存配置不高，但常年负载0.01。</span></span></p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/f1a0d224e9df4e738d7fb500eeddaeb5~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1722603470&amp;x-signature=ZJA9%2FB%2Bm1SrXgodV87%2FteQ%2FRUSs%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">接下来的思路<span style="color: black;">亦</span>很简单，打开浏览器<span style="color: black;">研发</span>者工具（建设chrome）排查页面元素</span></span></p>
    <h1 style="color: black; text-align: left; margin-bottom: 10px;">imagemagick convert</h1>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">a和b 的硬件设备问题不做<span style="color: black;">咱们</span>这次探讨内容。</span></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">c <span style="color: black;">照片</span>未做优化，太多<span style="color: black;">引起</span>资源加载太而慢，<span style="color: black;">咱们</span>打开chrome的<span style="color: black;">研发</span>者工具排查。</span></span></p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/c25791dd8ad74ca8baa76e5afbe05440~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1722603470&amp;x-signature=EZglDUHQBNiEFA3E768SEIHmhdc%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">有<span style="color: black;">无</span><span style="color: black;">发掘</span>：</span></span></p><span style="color: black;"><span style="color: black;">页面只展示了不到1/4的内容，但打开耗时<span style="color: black;">已然</span>9.99s。</span></span><span style="color: black;"><span style="color: black;">首页达592KB</span></span><span style="color: black;"><span style="color: black;">有<span style="color: black;">非常多</span>大于50KB的<span style="color: black;">照片</span></span></span><span style="color: black;"><span style="color: black;">处理过程忘了<span style="color: black;">保存</span>现场，其实还有<span style="color: black;">非常多</span>大于150KB<span style="color: black;">照片</span></span></span>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">对号入座，<span style="color: black;">照片</span>资源没做优化</span></span></p><span style="color: black;"><span style="color: black;"><span style="color: black;">无</span>UI</span></span><span style="color: black;"><span style="color: black;"><span style="color: black;">照片</span><span style="color: black;">非常多</span>，不可能一张张优化</span></span><span style="color: black;"><span style="color: black;">页面设计用的开源主题，<span style="color: black;">无</span>可设计空间</span></span>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">看起来能优化的<span style="color: black;">仅有</span><span style="color: black;">照片</span><span style="color: black;">体积</span>了。<span style="color: black;">举荐</span>linux下<span style="color: black;">照片</span>优化工具</span> </span><span style="color: black;"><span style="color: black;"><span style="color: black;">imagemagick convert</span></span></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">功能测试<span style="color: black;">经过</span>后，简单粗暴处理了下网站<span style="color: black;">照片</span>问题。</span></span></p><span style="color: black;"># cat convert.sh </span>
    <span style="color: black;">#!/bin/bash
    </span>
    <span style="color: black;">## &gt;50k</span>
    find /png/upload/path/ -regex <span style="color: black;">.*\(jpg\|JPG\|png\|PNG\|jpeg\)</span> -size +50k -<span style="color: black;">exec</span>convert -resize 350x350 -quality 65 {} {} \;<span style="color: black;">## &gt;100k</span>
    find /png/upload/path/ -regex <span style="color: black;">.*\(jpg\|JPG\|png\|PNG\|jpeg\)</span> -size +100k -<span style="color: black;">exec</span>convert -resize 300x300 -quality 60 {} {} \;
    find /png/upload/path/ -regex<span style="color: black;">.*\(jpg\|JPG\|png\|PNG\|jpeg\)</span> -size +100k -<span style="color: black;">exec</span> convert -resize 80%x80% -quality 60 {} {} \;

    <span style="color: black;">## &gt;200k</span>
    find /png/upload/path/ -regex <span style="color: black;">.*\(jpg\|JPG\|png\|PNG\|jpeg\)</span> -size +200k -<span style="color: black;">exec</span> convert -resize 250x250 -quality 60 {} {} \;
    find /png/upload/path/ -regex <span style="color: black;">.*\(jpg\|JPG\|png\|PNG\|jpeg\)</span>-size +200k -<span style="color: black;">exec</span> convert -resize 70%x70% -quality 60 {} {} \;<span style="color: black;"><span style="color: black;">加入<span style="color: black;">按时</span>任务</span></span><span style="color: black;">crontab</span> <span style="color: black;">-l</span>
    <span style="color: black;">10</span> <span style="color: black;">2 * * * bash /root/convert.sh</span>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">这番简单粗暴的处理后，整体页面<span style="color: black;">照片</span>虽然变的模糊，但加载速度好在从60s优化在10S了。但对普通用户来讲，依然难以接受，3s以上的<span style="color: black;">拜访</span>速度<span style="color: black;">咱们</span>都<span style="color: black;">没法</span>接受。</span></span></p>
    <h1 style="color: black; text-align: left; margin-bottom: 10px;">从10秒到1.44秒</h1>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">这个时候<span style="color: black;">起始</span>求助网络了。</span></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">谷歌关键字搜索 “wordpress 速度”，看到知乎上有个技术帖（哈哈，知乎竟然有技术帖了，文艺少年都老了吗？）给出了以下几个<span style="color: black;">意见</span>：</span></span></p><span style="color: black;"><span style="color: black;">a&gt; 关闭Avatar</span></span><span style="color: black;"><span style="color: black;">b&gt; 去掉google字体</span></span><span style="color: black;"><span style="color: black;">c&gt; 关闭Emoji</span></span><span style="color: black;"><span style="color: black;">d&gt; <span style="color: black;">运用</span>360云解析，自动加速</span></span><span style="color: black;"><span style="color: black;">e&gt; <span style="color: black;">运用</span>七牛免费加速</span></span><span style="color: black;"><span style="color: black;">f&gt; 开启 WP Super Cache插件</span></span><span style="color: black;"><span style="color: black;">g&gt; 开启lazyer loader瀑布流加载</span></span>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;"><span style="color: black;">咱们</span>一项一项来尝试</span></span></p><span style="color: black;"><span style="color: black;">a b c项早在建站就<span style="color: black;">已然</span><span style="color: black;">处理</span>了</span></span><span style="color: black;"><span style="color: black;">d 经测试无效（<span style="color: black;">这儿</span>的无效指的是药不对症）</span></span><span style="color: black;"><span style="color: black;">e 好东西，但手持身份证的<span style="color: black;">周期</span>我放弃了，太麻烦了，<span style="color: black;">况且</span>还在<span style="color: black;">机构</span>不方便</span></span><span style="color: black;"><span style="color: black;">f 开启 测试无效。<span style="color: black;">由于</span>1&gt; nginx 开启gzip 2&gt; php开启opcache 3&gt; <span style="color: black;">运用</span>的主题有瀑布流布局异步加载的功能 <span style="color: black;">因此</span>再开启这个功能<span style="color: black;">无</span>效果</span></span><span style="color: black;"><span style="color: black;">g开启无效 同4<span style="color: black;">过程</span>的<span style="color: black;">原由</span><span style="color: black;">同样</span></span></span>
    <h1 style="color: black; text-align: left; margin-bottom: 10px;">细究服务器性能！！</h1>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">转了一圈无果后，思路再回过来，</span><span style="color: black;"><span style="color: black;">到<span style="color: black;">日前</span>为止还<span style="color: black;">无</span><span style="color: black;">详细</span>定位到<span style="color: black;">原由</span>所在，就在瞎摸索，这是不对的！！不对的！！不对的！！重要的事情说三遍！！！</span></span></span></p><span style="color: black;"><span style="color: black;">开启php-fpm的慢日志</span></span><span style="color: black;"><span style="color: black;">开启myql的慢日志</span></span>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/682eba4c60f547aab65117eae8d8e59d~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1722603470&amp;x-signature=vZxoNlehDie5is3i1LZ0oBeWujI%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">经排查php，nginx，mysql 均<span style="color: black;">无</span><span style="color: black;">反常</span>请求。php-fpm有慢请求，但不<span style="color: black;">形成</span>威胁，这次<span style="color: black;">无</span>思路了。</span></span></p>
    <h1 style="color: black; text-align: left; margin-bottom: 10px;">求助前端<span style="color: black;">朋友</span></h1>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;"><span style="color: black;">这儿</span>其实最大的疑问还是<span style="color: black;">为何</span>首页会这么大，而我看下来什么<span style="color: black;">亦</span><span style="color: black;">无</span>，就一个框架结构而已。最后不得已求助前端<span style="color: black;">朋友</span>，经过排查后<span style="color: black;">发掘</span>。</span></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">我的首页达714KB,加上出口只能1Mb，简单换算下：</span></span></p>首页的加载时间=714KB/1MB ~=714KB/100KB~=7.14S<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">首页这么大，出口又这么小，加载时间当然长了，时间当然长了。。。<span style="color: black;">那样</span>首页多大合适呢？</span></span></p><span style="color: black;"><span style="color: black;">我的首页</span></span>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/6c0c623357de4d0e9c92b5691c3ebfc4~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1722603470&amp;x-signature=YRCpRBguHsUUzkrS8qe6qC8cspg%3D" style="width: 50%; margin-bottom: 20px;"></div><span style="color: black;"><span style="color: black;">淘宝的首页</span></span>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/111d98550ed946be8e2ea898606d7580~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1722603470&amp;x-signature=lIeUncAmdbe9w58SarQm2HmAwOE%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;"><span style="color: black;">体积</span>差了</span><strong style="color: blue;"><span style="color: black;"><span style="color: black;">20倍</span></span></strong><span style="color: black;">有余，<span style="color: black;">最终</span>找到问题所在了！~</span></span></p><span style="color: black;"><strong style="color: blue;"><span style="color: black;"><span style="color: black;"><span style="color: black;">那样</span>首页到底<span style="color: black;">地区</span>大哪里了？</span></span></strong></span>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/c052be9191f14167b3b85bf77c6a2c20~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1722603470&amp;x-signature=E28gac9wWrAVvQxDmJ5fWsIR2sI%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">经过前端<span style="color: black;">朋友</span>的<span style="color: black;">帮助</span>排查<span style="color: black;">发掘</span>，页面大概有5个<span style="color: black;">地区</span>有<span style="color: black;">照片</span>被转换为base64格式，<span style="color: black;">引起</span>页面变大。</span></span></p><span style="color: black;"><strong style="color: blue;"><span style="color: black;"><span style="color: black;">那<span style="color: black;">为何</span>我当时看不出来问题呢？</span></span></strong></span>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;"><span style="color: black;">由于</span>我对base64不<span style="color: black;">认识</span>，看到source view里有一大堆字符串，<span style="color: black;">无</span>安全问题，<span style="color: black;">因此</span>就自认为这是页面应该有的信息。<span style="color: black;">况且</span>又想当然认为字符串不会占据太多空间。<span style="color: black;">咱们</span>来做个简单的数学题：</span></span></p><span style="color: black;"><span style="color: black;"><span style="color: black;"><span style="color: black;">首要</span>：</span></span><span style="color: black;">1个英文字母占 1个字节=1Byte</span></span><span style="color: black;"><span style="color: black;"><span style="color: black;">其次：</span></span><span style="color: black;">1024个英文字母=1Byte * 1024 = 1KB</span></span><span style="color: black;"><span style="color: black;"><span style="color: black;"><span style="color: black;">而后</span></span></span><span style="color: black;">1024 * 1000 个英文字母 = 1KB * 1000 = 1MB</span></span><span style="color: black;"><span style="color: black;"><span style="color: black;">接着：</span></span><span style="color: black;">这么一大坨英文字母有多少个呢？约 5290 个字母，占多大空间呢？ 约为 5.92KB。而<span style="color: black;">这般</span>的一大陀字母一屏<span style="color: black;">表示</span>不完。。。。。一个页面5个。 共占用空间约</span><span style="color: black;"><span style="color: black;">700KB</span></span><span style="color: black;">。</span></span><span style="color: black;"><span style="color: black;"><span style="color: black;">最后：</span></span><span style="color: black;">前面有介绍过，<span style="color: black;">咱们</span>很穷，<span style="color: black;">因此</span>宽带口<span style="color: black;">仅有</span>1Mb 约等于 100KB</span></span><span style="color: black;"><span style="color: black;"><span style="color: black;"><span style="color: black;">因此</span>：</span></span><span style="color: black;">懂了吧。 <span style="color: black;">咱们</span>单下载700KB的东西就需要 700KB/100KB = 7S。。。</span></span>
    <h1 style="color: black; text-align: left; margin-bottom: 10px;">base64<span style="color: black;">为何</span>会让首页变大呢？</h1>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">说起来有点<span style="color: black;">繁杂</span>，简单讲：Base64是一种基于64个可打印字符来<span style="color: black;">暗示</span>二进制数据的<span style="color: black;">暗示</span><span style="color: black;">办法</span>。<span style="color: black;">因为</span> {\displaystyle 2^{6}=64} {\displaystyle 2^{6}=64}，<span style="color: black;">因此</span>每6个比特为一个单元，对应某个可打印字符。3个字节有24个比特，对应于4个Base64单元，不足3个字节补足4个可打印字符来<span style="color: black;">暗示</span>。<span style="color: black;">因此呢</span><span style="color: black;">能够</span>估算编码后数据长度大约为原长的</span><span style="color: black;"><span style="color: black;">135.1%</span></span><span style="color: black;">。</span></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">而优化后的页面是什么样子呢？</span></span></p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/01235fe2fc434615b3bf5b2617ebf488~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1722603470&amp;x-signature=hpVnUPEejqCPVEWrlWgw4uEtyUA%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">几乎</span><span style="color: black;"><span style="color: black;">0KB</span></span><span style="color: black;">，<span style="color: black;">为何</span>会差别这么大呢？ 这是<span style="color: black;">由于</span><span style="color: black;">照片</span>不采用base64加密，页面将<span style="color: black;">再也不</span>镶嵌<span style="color: black;">照片</span><span style="color: black;">详细</span>信息，而只会<span style="color: black;">保存</span>链接<span style="color: black;">位置</span>，即页面从 原始<span style="color: black;">照片</span><span style="color: black;">体积</span> x 135.1% 变为 一个链接<span style="color: black;">位置</span>的<span style="color: black;">体积</span> 。</span></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">base64<span style="color: black;">照片</span>加密除此问题外，还会有浏览器兼容性、构建工具支持度<span style="color: black;">需求</span>等问题。</span></span></p>
    <h1 style="color: black; text-align: left; margin-bottom: 10px;">base64既然让<span style="color: black;">照片</span>变大，<span style="color: black;">为何</span>前端<span style="color: black;">研发</span>还要<span style="color: black;">运用</span>base64呢？</h1>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;"><span style="color: black;">照片</span>的 base64 编码<span style="color: black;">便是</span><span style="color: black;">能够</span>将一副<span style="color: black;">照片</span>数据编码成一串字符串，<span style="color: black;">运用</span>该字符串代替图像<span style="color: black;">位置</span>。<span style="color: black;">这般</span>做有什么<span style="color: black;">道理</span>呢？<span style="color: black;">咱们</span><span style="color: black;">晓得</span>，<span style="color: black;">咱们</span>所看到的网页上的每一个<span style="color: black;">照片</span>，都是需要消耗一个 http 请求下载而来的，没错，不管<span style="color: black;">怎样</span>，<span style="color: black;">照片</span>的下载始终都要向服务器发出请求，要是<span style="color: black;">照片</span>的下载<span style="color: black;">不消</span>向服务器发出请求，而<span style="color: black;">能够</span>随着 HTML 的下载<span style="color: black;">同期</span>下载到本地那就太好了，而 base64 正好能<span style="color: black;">处理</span>这个问题。效益虽小，但却缺能积少成多。</span></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">其它<span style="color: black;">更加多</span>base64内容参考：</span><span style="color: black;">http://www.cnblogs.com/coco1s/p/4375774.html</span></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">经过这次的细节优化后，再打开时候快感还是不错。</span></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;"><span style="color: black;">重点</span>的瓶颈依然在<span style="color: black;">照片</span>，<span style="color: black;">不外</span>从我这个维度<span style="color: black;">照片</span><span style="color: black;">已然</span><span style="color: black;">不可</span>再做优化，这个时候UI的价值就凸显了。</span></span></p>




4lqedz 发表于 2024-10-16 01:25:30

我们有着相似的经历，你的感受我深有体会。

qzmjef 发表于 5 天前

一看到楼主的气势，我就觉得楼主同在社区里灌水。

1fy07h 发表于 7 小时前

外贸网站建设方法 http://www.fok120.com/
页: [1]
查看完整版本: 网站拜访速度优化历程