前端性能-减少Http请求

Posted 2023-04-15

参考技术A 依据性能黄金法则，80%的时间花费在了Images,scripts,stylesheets,Flash等Http请求上，我们需要花费在这块的时间，这些技术包括使用image maps,css sprites,inline images,和合并javascript与stylesheets

如果你页面上有很多带链接的图片，image maps(图片地图)是一种减少Http请求数量的方式。一个image maps允许你在单张图片上放置相关的多个链接地址，用户点击图片上不同的区域，跳转到不同的链接页面；
有两种类型的image maps，一种是server-side image maps, 这种maps，所有的点击都请求同一个URL,并且参数附带用户点击点的x，y坐标；另一种是Client-side image maps，这种更加常用，因为用户点击不同的区域，请求不同的URL；如下

-- image map详细资料可查看
https://en.wikipedia.org/wiki/Image_map
-- client-side image maps的实例
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_areamap

俗称雪碧图，具体怎么做应该都知道；说说它的益处吧，它不仅减少了Http请求数，而且相对image maps更加灵活，因为image map要求使用的图片要求图形有顺序，单sprites不需要；
另外一般人都认为合并图片会比分开的图片总量的大小要来的大，因为合并后的图片有格外增加的空白区域，事实上合并的图片反而趋于更小，因为合并的图片相对分开的图片减少了存储的信息开销，比如颜色表，格式形式等；

使用data:URL 协议使你的页面直接包含图像而不需要任何Http请求是可能的，但浏览器直到ie8才支持；格式如下

data:不单单能使用于内联图片，任务一个指定URL的地方都能使用它，包括script和a 标签；
因为data:URLs内嵌于页面中，所以在不同页面访问中并不会缓存他们，从而增大页面的大小，一种聪明的做法是通过外联css和内容图片作为背景图设置来使内嵌图片随着css一块被缓存，在多个页面都使用到这个内嵌图片的情况下，是值得这么做的，比如网站logo；

-- 如何生成图片的base64编码
使用一些在线工具，比如这个 http://www.pjhome.net/web/html5/encodeDataUrl.htm ；
或者使用google chrome开发者工具，在 chrome 下新建一个窗口，然后把要转化的图片直接拖入浏览器，打开控制台，点 Source，点击图片，右侧就会显示该图片的 base64 编码

理想状态下，把一个网页上引用的多个script脚本合并成一个，把引用的多个样式文件合并成一个，以此来减少http请求数，一般合并后还会有另一个步骤来减少文件大小，叫做压缩；

-- 如何合并
一般使用grunt或者gulp打包工具的童鞋都知道，都能轻松做到；

前端性能优化-减少http请求，dns预解析，减少repaint和reflow

前端性能优化方法：

一 . 减少http请求

（1）通过合并图片，减少请求，俗称css sprites(css精灵)css sprites 

（2）lazyload懒加载，在需要的时候再加载

　　1.定义：懒加载也称为延迟加载，图片需要用到的时候再去价值
　　2.用法：就是重写对象的get方法，当系统调用get方法再去加载对象
　　3.优点：(1)对象的实例化在getter方法中，各司其职，降低耦合性；(2)真正需要资源时，再去加载，系统的内存占用率会减小

（3）压缩/合并css和js

二 .减少repaint重绘和reflow重排

（1）repaint重绘: 元素的外观被改变，但没有改变布局（宽高）的情况下发生，如改变visibility,outline,背景色等

（2）Reflow(重排): dom的变化影响到元素的几何属性（宽高），浏览器会重新计算元素的几何属性，会使渲染树中受到影响的部分失效，每次重排都会产生计算消耗，改变窗口大小/改变文字大小/style属性的变化，如果reflow过于频繁，cpu的占用就会上涨

如何减少：

　　1. 尽量少用style属性，用class重绘比重排的效率高
　　2. 有动画效果的元素设置绝对定位和固定定位
　　3. 权衡速度的平滑。比如实现一个动画，以1个像素为单位移动这样最平滑，但reflow就会过于频繁，CPU很快就会被完全占用。如果以3个像素为单位移动就会好很多。
　　4. 减少不必要的dom层级，不要频繁操作dom

三 . dns预解析

让具有此属性的域名不需要用户点击链接就在后台解析，而域名解析和内容载入使串行的网络操作，这个操作能减少用户的等待时间，提升用户体验
用法：放在meta标签后面<link rel="dns-prefetch" href="//www.zhix.net">