回答这个问题之前,偶专门去实际测试了一下一些知名网站的加载时间,得出的结果其实还是蛮震惊的,大家且跟着往下看。
苹果官网为什么快?Google主推的图片格式你仔细去看的话就会发现,苹果官网图片加载快大概有几个原因。
第一:苹果官网的图片大多数比较单纯的色系,苹果的审美一直都是一样比较纯粹的纯色系,苹果官网的图片排列也是很有哲学的,基本上一屏只会放一张或者很少的图片。
第二:苹果官网的图片基本上都没有特别大,图片压缩都做得很好的,即使是苹果Newsroom媒体专用素材,图片也不会特别大,不过大多数网站也都会严格控制图片的大小,同样很明显苹果在刻意注意这点。
第三:苹果采用了CDN节点加速,苹果现在贵州也有服务器,基本上都会把一些国内的服务往国内放,CDN加速你访问的都是离你比较近的节点,这样访问起来自然也就快了。
Google早在2010年的时候就已经推出了一个WebP的文件新格式,之前PNG、JPEG、GIF等常见图片格式其实已经到了优化极限,不过Google当时对这些格式都不太满意,相对于JPEG图片格式可以减小40%,而整个网络流量中有接近70%的流量都是图片。
这可以为网站节省大量的带宽,同时还能够大幅度提高网页加载速度,YouTube实际测试中,使用WebP视频缩略图网页加载速度提升了10%,Google+采用WebP图片格式,每天节省了超过50TB空间。目前包括Netflix、Facebook、Tinder、Ebay、腾讯、美团、淘宝等都在尝试这种格式,并且在某些网站上提升是比较明显的。
一些网站的实际比较整体来说,一家网站背后的服务器、网络带宽会是决定网站加载速度的重要因素,代码质量当然也非常重要,不过大多数网站到了一定规模之后,代码质量都不会太差,这种级别的企业都会有顶尖工程师,所以最终技术水平是体量上的差距。举个例子百度、阿里、腾讯这种企业顶尖工程师的数量,肯定要比美团、字节跳动、快手这种企业的数量要多一些。大企业的服务器、网络带宽肯定总体要优于小企业,小企业就可能因为这些原因体验变差很多。
闲话少说言归正传,偶主要试了一下国内外一些主流站点的加载速度,按照不同类型进行划分,大概进行了一些比较,浏览速度快慢结果如下。测试国外网站大多是在用梯子的前提下,因此偶实际情况可能国外网站还会更快一点。
电商网站:亚马逊>Ebay>淘宝>京东=当当=严选。亚马逊和Ebay明显要好于国内的电商网站,亚马逊和Ebay首页结构比较简单,功能比较清晰,首页一个轮播图,下面不会有太多内容出来,需要滑到下一页才能看到更多内容,基本上很快就能加载出来。国内电商网站淘宝和京东风格类似,功能虽然也明确,但是真的是非常复杂,恨不得首页就要把淘宝所有的功能包括了,图片也是花里胡哨、乱七八糟,加载很明显的感觉到层次感。网易严选、网易考拉有点欧美网页设计哲学,不过加载速度确实是慢,当然可能图片本身比较大。
图片网站、素材网站:Pinterest=花瓣网>Behance>>Dribbble。这个也非常明显的差距,其中Pinterest和Behance的表现是超过了偶的预期的。花瓣和Pinterest是典型的瀑布流设计,照片流其实容量还是很大的,不过访问速度真的是超级快,尤其是Pinterest在偶挂梯子的前提下还是非常快,Behance作为一个高清资源站点,访问速度也超过了偶的预期,毕竟是Adobe旗下的网站,Dribbble确实慢,并且是相当的慢。
社交网站:Facebook>微博>twitter>Tumblr。做完这个测试,偶是真的理解到了扎克伯格的产品哲学,扎克伯格有句话非常出名,完成比完美更重要,毫无疑问Facebook就是这样的网站,大家也都知道Twitter更多的是设计导向的网站,而Facebook更多是工程导向的网站,Facebook访问速度确实极快。Tumblr访问比较慢,偶认为是小公司和梯子的综合因素,可能国外会更快一点。
不管是苹果的处理方式还是Google的处理方式,偶认为都比较合理,不过总体来说,苹果不太会采用Google的方式,Google的方式则会成为几乎互联网行业的通用解决方案。
css retina,css 3 按钮,css图片梯形显示,css 拼接字符串,h5开发css,div怎么用怎么引用css,css怎么设置图片铺满全屏