stb页面显示性能优化

问题描述：页面上显示图片显示不出来，图片宽高大了后数据显示不出来。天威N8908和N9101机顶盒图片不能拉伸显示，显示实际的图片尺寸。

 

   原因分析：机顶盒浏览器内存有限，图片所占内存是以图片的宽高*4来计算的，不是按照图片的实际大小计算内存。一张(1280*720)的背景图所占内存大概3.5兆。

 

前端规避方法：

1)、如果是纯色的图片建议用1像素的图片进行平铺显示。

 

2)、背景图不操作时，建议将多张背景合并为一张显示。

 

3)、页面所显示的大图片(1280*720)不超过2张。

 

4)、如过是要显示动态的图片，前端系统(后台)在上传海报图片时要限制海报的宽高。 

 

 

针对上面报的问题，定位是内存不足。

 

具体说明如下：

 

（1） 浏览器内存配制

浏览器配制内存是从配制文件browserparam.properties中读出来的。

主要的几个参数是： 

   Browser.bufferSize=35651584             //表示分配给浏览器的总内存

   Browser.cacheBufferSize=16777216        //缓存大小

   Browser.useMixMemory=true               //是否使用混合内存，浏览器默认是不使用

   Browser.mixMemoryPoolSize=25165824      //混合内存池大小，如果是用混合内存，这部分内存不管有没有使用浏览器检查剩下内存时都直接减掉，默认是3*1024*1024 K

   Browser.mixMemoryMaxMallocSize=1048576  //分配超过多大的内存时使用系统内存，浏览器默认是 2*1024 K

 

注解：

    混合内存是指只给浏览器分配较少的内存，如果需要分配大于指定大小（Browser.mixMemoryMaxMallocSize）的内存时就使用系统内存。

 

  上面的参数是天威目前的三个盒子中的设置情况

意义是：

   使用混合内存，混合内存的内存池大小是24M，浏览器总内存是34M，超过10M的大内存使用系统内存

   在如上的配制下，浏览器可使用的内存大小是： 34M-24M= 10M

 

 

（2）问题详细说明

   在出问题的页面中初步算了一下有1280*720图片一张，1200*565图片一张，1200*534图片一张，1200*30图片一张，还有几百*几百的图片几张。

   注解：

      浏览器分配解析图片的内存大小计算方式：  长*宽*4   不是指这张图片用属性看到的大小。

 

    这样可以初步估计目前用于解析图片的内存：一张1280*720的图片需要近4M的内存来解析，在当前页面中的内存用于解析图片近10M，剩下

不到1M的内存，无法再进行css解析等其它操作了,表现为页面内容无法显示，图片无法拉伸等各种问题。

 

    因此请开发业务的同事在写页面时尽量避免大图片的使用，一个网页中图片所消耗的内存不能超过8M，否则很可能引起内存不足。

 

(3)三个盒子的表现不一说明

 

三个盒子中的配制文件是一样的，在测试是发现8606的盒子用的实际上并不是混合内存，原因是8606的工程中从配制文件中读下面三项时

 

Browser.useMixMemory=true                //是否使用混合内存，浏览器默认是不使用

Browser.mixMemoryPoolSize=25165824       //混合内存池大小

Browser.mixMemoryMaxMallocSize=1048576   //分配超过多大的内存时使用系统内存，

 

关键字mixMemoryPoolSize， mixMemoryMaxMallocSize写错了，第一个字母写成了大写，没有读成功，最后关于混合内存的相关配制没有设置到浏览器中

浏览器使用的不是混合内存，测试将这个地方修改回来，8606的盒子也出同样的问题，在另外的两个盒子中如果设置为不使用混合内存，问题将不出现。

 

 

（4）解决方案

     目前在不修改配制文件的情况下，需要应用减少页面中大图片的使用，并尽量避免使用多张大图片，可以将不操作的图片合并成一张图片，减少浏览器

消耗内存，保证浏览器有足够的内存解析css及页面其它的逻辑。