一种网页显示方法及相关装置
技术领域
本申请涉及通信技术领域,尤其涉及一种网页显示方法及相关装置。
背景技术
随着互联网和移动终端的发展,越来越多的用户使用移动终端访问互联网。而目前由于网络流量和网络速度的限制,很多时候移动终端并不加载图片。例如,目前在手机浏览器的无图模式下,浏览器对于图片采取了全部禁用的方式,使得浏览器不显示网页中的图片,仅在图片显示区域显示一个占位图,通过浏览器的无图模式,可以节省网络流量。
目前,当移动终端的浏览器开启无图模式时,浏览器会拦截网页资源中的图片资源请求,并根据页面中的层叠样式表(cascading style sheets,CSS)或者图像的标签信息,显示与图片显示区域相应大小的占位图。当CSS或者图像的标签信息中未指定有图片显示区域的大小尺寸时,则移动终端会在浏览器所打开网页中图片显示区域上显示1个像素点大小的占位图,或者不显示占位图。这样,会导致网页页面的布局错误,进而使得页面效果与在网页上正常显示图片时的页面效果存在偏差,例如,文字错位,占位图过长等,影响用户体验。
发明内容
本申请提供了一种网页显示方法及相关装置,实现了电子设备在浏览器开启无图模式浏览网页时,网页的页面排版布局与浏览器在有图模式时一致,提高了用户体验。
第一方面,本申请提供了一种网页显示方法,包括:首先,电子设备获取第一网页中图片所处图片服务器的地址信息。然后,该电子设备根据该图片服务器的地址信息,从该图片服务器获取第一指示信息。接着,该第一指示信息用于指示该图片的尺寸,该第一指示信息的数据量小于该图片的数据量。接着,该电子设备构建该图片的占位图,该图片的占位图的尺寸与该第一指示信息指示的尺寸相同。最后,该电子设备显示该第一网页,该第一网页中该图片的显示区域中显示该图片的占位图。
通过本申请实施例,在浏览器开启无图模式后,电子设备在通过该浏览器打开网页时,电子设备可以从网页服务器上获取网页布局信息及文字资源的同时,从网页服务器上获取图片的尺寸信息,电子设备可以根据图片的尺寸以及图片显示区域尺寸信息,确定出图片显示区域中占位图的尺寸。这样,可以使电子设备的浏览器在无图模式下,网页页面的排版布局与正常模式一致,提高了用户的体验。
在一种可能的实现方式中,在该电子设备显示该第一网页之前,该方法还包括:首先,该电子设备获取该图片的显示区域的宽度信息。该电子设备按照第一比例,调整该图片的占位图在该图片的显示区域中的显示尺寸。其中,该第一比例为该图片的显示区域的宽度与该图片的占位图的宽度之比,该图片的占位图的显示宽度与该图片的显示区域的宽度相同。这样,电子设备根据原始图片的尺寸在生成相同大小的占位图后,结合页面布局信息的约束将占位图显示网页页面上,可以使无图模式下页面排版效果与浏览器正常模式下显示原始图片的页面排版相同,提高了用户体验。
在一种可能的实现方式中,该第一指示信息为该图片内的第一数据,该第一数据为该图片的第1个数据单元至第L个数据单元之间的数据,L为大于1的正整数;其中,该数据单元包括:比特或字节。这样,电子设备可以从网页服务器上获取网页布局信息及文字资源的同时,从网页服务器上获取图片中的前面部分数据(例如图片的前1K字节数据),其中,该图片中的前面部分数据包括有图片的尺寸。进而,可以使电子设备的浏览器在无图模式下,网页页面的排版布局与正常模式一致,且节省了数据下载流量,提高了用户的体验。
在一种可能的实现方式中,该L根据该图片的文件类型确定。这样,电子设备可以根据图片的文件类型,来确定从服务器上获取的图片的前面部分数据的数据量,在保证能够获取到图片的尺寸信息的同时,节省了电子设备的流量。
在一种可能的实现方式中,该电子设备根据该图片服务器的地址信息,从该图片服务器获取第一指示信息,包括:该电子设备判断第一网页中是否包括有该图片的尺寸信息,若否,则根据该图片服务器的地址信息,从该图片服务器获取第一指示信息。这样,可以在网页中没有该图片的尺寸信息时,从图片服务器上获取图片的尺寸信息,节省了加载网页所消耗的数据流量。
在一种可能的实现方式中,该电子设备根据该图片服务器的地址信息,从该图片服务器获取第一指示信息,包括:该电子设备判断该电子设备浏览网页的模式是否为无图模式,若是,则该电子设备根据该图片服务器的地址信息,从该图片服务器获取第一指示信息。这样,可以根据用户的需求,选择性的开启无图模式,节省加载网页所消耗的数据流量。
在一种可能的实现方式中,在该电子设备获取第一网页中图片所处图片服务器的地址信息之前,该方法还包括:该电子设备接收用户针对第一网页的访问请求,其中,该针对第一网页的访问请求包括该第一网页所处网页服务器的地址信息;该电子设备根据该网页服务器的地址信息,从该网页服务器上获取该第一网页。
第二方面,本申请提供了一种电子设备,包括:一个或多个处理器、显示屏、一个或多个存储器、收发器;该一个或多个存储器与该一个或多个处理器和该收发器耦合,该收发器用于与外部通信设备进行通信,该显示屏与该一个或多个处理器通信,该一个或多个存储器用于存储计算机程序代码,该计算机程序代码包括计算机指令,当该一个或多个处理器执行该计算机指令时,使得该电子设备执行上述任一方面任一项可能的实现方式中的网页显示方法。
第三方面,本申请实施例提供了一种计算机存储介质,其特征在于,包括计算机指令,当计算机指令在电子设备上运行时,使得电子设备执行上述任一方面任一项可能的实现方式中的网页显示方法。
第四方面,本申请提供了一种计算机程序产品,当所述计算机程序产品在计算机上运行时,使得电子设备执行上述任一方面任一项可能的实现方式中的网页显示方法。
附图说明
图1为本申请实施例提供的一种电子设备的结构示意图;
图2为本申请实施例提供的一种软件架构示意图;
图3为本申请实施例提供的一组网络架构示意图;
图4A-4B为本申请实施例提供的一组界面示意图;
图5为本申请实施例提供的一种网页显示方法的流程示意图;
图6A-6E为本申请实施例提供的有一组界面示意图;
图7为本申请实施例提供的一种图片文件类型的结构示意图;
图8为本申请实施例提供的另一种图片文件类型的结构示意图;
图9为本申请实施例提供的另一种图片文件类型的结构示意图;
图10为本申请另一实施例提供的一种网页显示方法的流程示意图;
图11为本申请另一实施例提供的一种图片文件类型的结构示意图;
图12为本申请另一实施例提供的一种网页显示方法的交互架构图。
具体实施方式
下面将结合附图对本申请实施例中的技术方案进行清除、详尽地描述。其中,在本申请实施例的描述中,除非另有说明,“/”表示或的意思,例如,A/B可以表示A或B;文本中的“和/或”仅仅是一种描述关联对象的关联关系,表示可以存在三种关系,例如,A和/或B,可以表示:单独存在A,同时存在A和B,单独存在B这三种情况,另外,在本申请实施例的描述中,“多个”是指两个或多于两个。
以下,术语“第一”、“第二”仅用于描述目的,而不能理解为暗示或暗示相对重要性或者隐含指明所指示的技术特征的数量。由此,限定有“第一”、“第二”的特征可以明示或者隐含地包括一个或者更多个该特征,在本申请实施例的描述中,除非另有说明,“多个”的含义是两个或两个以上。
图1示出了电子设备100的结构示意图。
下面以电子设备100为例对实施例进行具体说明。应该理解的是,图1所示电子设备100仅是一个范例,并且电子设备100可以具有比图1中所示的更多的或者更少的部件,可以组合两个或多个的部件,或者可以具有不同的部件配置。图中所示出的各种部件可以在包括一个或多个信号处理和/或专用集成电路在内的硬件、软件、或硬件和软件的组合中实现。
电子设备100可以包括:处理器110,外部存储器接口120,内部存储器121,通用串行总线(universal serial bus,USB)接口130,充电管理模块140,电源管理模块141,电池142,天线1,天线2,移动通信模块150,无线通信模块160,音频模块170,扬声器170A,受话器170B,麦克风170C,耳机接口170D,传感器模块180,按键190,马达191,指示器192,摄像头193,显示屏194,以及用户标识模块(subscriber identification module,SIM)卡接口195等。其中传感器模块180可以包括压力传感器180A,陀螺仪传感器180B,气压传感器180C,磁传感器180D,加速度传感器180E,距离传感器180F,接近光传感器180G,指纹传感器180H,温度传感器180J,触摸传感器180K,环境光传感器180L,骨传导传感器180M等。
可以理解的是,本发明实施例示意的结构并不构成对电子设备100的具体限定。在本申请另一些实施例中,电子设备100可以包括比图示更多或更少的部件,或者组合某些部件,或者拆分某些部件,或者不同的部件布置。图示的部件可以以硬件,软件或软件和硬件的组合实现。
处理器110可以包括一个或多个处理单元,例如:处理器110可以包括应用处理器(application processor,AP),调制解调处理器,图形处理器(graphics processingunit,GPU),图像信号处理器(image signal processor,ISP),控制器,存储器,视频编解码器,数字信号处理器(digital signal processor,DSP),基带处理器,和/或神经网络处理器(neural-network processing unit,NPU)等。其中,不同的处理单元可以是独立的器件,也可以集成在一个或多个处理器中。
其中,控制器可以是电子设备100的神经中枢和指挥中心。控制器可以根据指令操作码和时序信号,产生操作控制信号,完成取指令和执行指令的控制。
处理器110中还可以设置存储器,用于存储指令和数据。在一些实施例中,处理器110中的存储器为高速缓冲存储器。该存储器可以保存处理器110刚用过或循环使用的指令或数据。如果处理器110需要再次使用该指令或数据,可从所述存储器中直接调用。避免了重复存取,减少了处理器110的等待时间,因而提高了***的效率。
在一些实施例中,处理器110可以包括一个或多个接口。接口可以包括集成电路(inter-integrated circuit,I2C)接口,集成电路内置音频(inter-integrated circuitsound,I2S)接口,脉冲编码调制(pulse code modulation,PCM)接口,通用异步收发传输器(universal asynchronous receiver/transmitter,UART)接口,移动产业处理器接口(mobile industry processor interface,MIPI),通用输入输出(general-purposeinput/output,GPIO)接口,用户标识模块(subscriber identity module,SIM)接口,和/或通用串行总线(universal serial bus,USB)接口等。
I2C接口是一种双向同步串行总线,包括一根串行数据线(serial data line,SDA)和一根串行时钟线(derail clock line,SCL)。在一些实施例中,处理器110可以包含多组I2C总线。处理器110可以通过不同的I2C总线接口分别耦合触摸传感器180K,充电器,闪光灯,摄像头193等。例如:处理器110可以通过I2C接口耦合触摸传感器180K,使处理器110与触摸传感器180K通过I2C总线接口通信,实现电子设备100的触摸功能。
I2S接口可以用于音频通信。在一些实施例中,处理器110可以包含多组I2S总线。处理器110可以通过I2S总线与音频模块170耦合,实现处理器110与音频模块170之间的通信。在一些实施例中,音频模块170可以通过I2S接口向无线通信模块160传递音频信号,实现通过蓝牙耳机接听电话的功能。
PCM接口也可以用于音频通信,将模拟信号抽样,量化和编码。在一些实施例中,音频模块170与无线通信模块160可以通过PCM总线接口耦合。在一些实施例中,音频模块170也可以通过PCM接口向无线通信模块160传递音频信号,实现通过蓝牙耳机接听电话的功能。所述I2S接口和所述PCM接口都可以用于音频通信。
UART接口是一种通用串行数据总线,用于异步通信。该总线可以为双向通信总线。它将要传输的数据在串行通信与并行通信之间转换。在一些实施例中,UART接口通常被用于连接处理器110与无线通信模块160。例如:处理器110通过UART接口与无线通信模块160中的蓝牙模块通信,实现蓝牙功能。在一些实施例中,音频模块170可以通过UART接口向无线通信模块160传递音频信号,实现通过蓝牙耳机播放音乐的功能。
MIPI接口可以被用于连接处理器110与显示屏194,摄像头193等***器件。MIPI接口包括摄像头串行接口(camera serial interface,CSI),显示屏串行接口(displayserial interface,DSI)等。在一些实施例中,处理器110和摄像头193通过CSI接口通信,实现电子设备100的拍摄功能。处理器110和显示屏194通过DSI接口通信,实现电子设备100的显示功能。
GPIO接口可以通过软件配置。GPIO接口可以被配置为控制信号,也可被配置为数据信号。在一些实施例中,GPIO接口可以用于连接处理器110与摄像头193,显示屏194,无线通信模块160,音频模块170,传感器模块180等。GPIO接口还可以被配置为I2C接口,I2S接口,UART接口,MIPI接口等。
USB接口130是符合USB标准规范的接口,具体可以是Mini USB接口,Micro USB接口,USB Type C接口等。USB接口130可以用于连接充电器为电子设备100充电,也可以用于电子设备100与***设备之间传输数据。也可以用于连接耳机,通过耳机播放音频。该接口还可以用于连接其他电子设备,例如AR设备等。
可以理解的是,本发明实施例示意的各模块间的接口连接关系,只是示意性说明,并不构成对电子设备100的结构限定。在本申请另一些实施例中,电子设备100也可以采用上述实施例中不同的接口连接方式,或多种接口连接方式的组合。
充电管理模块140用于从充电器接收充电输入。其中,充电器可以是无线充电器,也可以是有线充电器。在一些有线充电的实施例中,充电管理模块140可以通过USB接口130接收有线充电器的充电输入。在一些无线充电的实施例中,充电管理模块140可以通过电子设备100的无线充电线圈接收无线充电输入。充电管理模块140为电池142充电的同时,还可以通过电源管理模块141为电子设备供电。
电源管理模块141用于连接电池142,充电管理模块140与处理器110。电源管理模块141接收电池142和/或充电管理模块140的输入,为处理器110,内部存储器121,外部存储器,显示屏194,摄像头193,和无线通信模块160等供电。电源管理模块141还可以用于监测电池容量,电池循环次数,电池健康状态(漏电,阻抗)等参数。在其他一些实施例中,电源管理模块141也可以设置于处理器110中。在另一些实施例中,电源管理模块141和充电管理模块140也可以设置于同一个器件中。
电子设备100的无线通信功能可以通过天线1,天线2,移动通信模块150,无线通信模块160,调制解调处理器以及基带处理器等实现。
天线1和天线2用于发射和接收电磁波信号。电子设备100中的每个天线可用于覆盖单个或多个通信频带。不同的天线还可以复用,以提高天线的利用率。例如:可以将天线1复用为无线局域网的分集天线。在另外一些实施例中,天线可以和调谐开关结合使用。
移动通信模块150可以提供应用在电子设备100上的包括2G/3G/4G/5G等无线通信的解决方案。移动通信模块150可以包括至少一个滤波器,开关,功率放大器,低噪声放大器(low noise amplifier,LNA)等。移动通信模块150可以由天线1接收电磁波,并对接收的电磁波进行滤波,放大等处理,传送至调制解调处理器进行解调。移动通信模块150还可以对经调制解调处理器调制后的信号放大,经天线1转为电磁波辐射出去。在一些实施例中,移动通信模块150的至少部分功能模块可以被设置于处理器110中。在一些实施例中,移动通信模块150的至少部分功能模块可以与处理器110的至少部分模块被设置在同一个器件中。
调制解调处理器可以包括调制器和解调器。其中,调制器用于将待发送的低频基带信号调制成中高频信号。解调器用于将接收的电磁波信号解调为低频基带信号。随后解调器将解调得到的低频基带信号传送至基带处理器处理。低频基带信号经基带处理器处理后,被传递给应用处理器。应用处理器通过音频设备(不限于扬声器170A,受话器170B等)输出声音信号,或通过显示屏194显示图像或视频。在一些实施例中,调制解调处理器可以是独立的器件。在另一些实施例中,调制解调处理器可以独立于处理器110,与移动通信模块150或其他功能模块设置在同一个器件中。
无线通信模块160可以提供应用在电子设备100上的包括无线局域网(wirelesslocal area networks,WLAN)(如无线保真(wireless fidelity,Wi-Fi)网络),蓝牙(bluetooth,BT),全球导航卫星***(global navigation satellite system,GNSS),调频(frequency modulation,FM),近距离无线通信技术(near field communication,NFC),红外技术(infrared,IR)等无线通信的解决方案。无线通信模块160可以是集成至少一个通信处理模块的一个或多个器件。无线通信模块160经由天线2接收电磁波,将电磁波信号调频以及滤波处理,将处理后的信号发送到处理器110。无线通信模块160还可以从处理器110接收待发送的信号,对其进行调频,放大,经天线2转为电磁波辐射出去。
在一些实施例中,电子设备100的天线1和移动通信模块150耦合,天线2和无线通信模块160耦合,使得电子设备100可以通过无线通信技术与网络以及其他设备通信。所述无线通信技术可以包括全球移动通讯***(global system for mobile communications,GSM),通用分组无线服务(general packet radio service,GPRS),码分多址接入(codedivision multiple access,CDMA),宽带码分多址(wideband code division multipleaccess,WCDMA),时分码分多址(time-division code division multiple access,TD-SCDMA),长期演进(long term evolution,LTE),BT,GNSS,WLAN,NFC,FM,和/或IR技术等。所述GNSS可以包括全球卫星定位***(global positioning system,GPS),全球导航卫星***(global navigation satellite system,GLONASS),北斗卫星导航***(beidounavigation satellite system,BDS),准天顶卫星***(quasi-zenith satellitesystem,QZSS)和/或星基增强***(satellite based augmentation systems,SBAS)。
电子设备100通过GPU,显示屏194,以及应用处理器等实现显示功能。GPU为图像处理的微处理器,连接显示屏194和应用处理器。GPU用于执行数学和几何计算,用于图形渲染。处理器110可包括一个或多个GPU,其执行程序指令以生成或改变显示信息。
显示屏194用于显示图像,视频等。显示屏194包括显示面板。显示面板可以采用液晶显示屏(liquid crystal display,LCD),有机发光二极管(organic light-emittingdiode,OLED),有源矩阵有机发光二极体或主动矩阵有机发光二极体(active-matrixorganic light emitting diode的,AMOLED),柔性发光二极管(flex light-emittingdiode,FLED),Miniled,MicroLed,Micro-oLed,量子点发光二极管(quantum dot lightemitting diodes,QLED)等。在一些实施例中,电子设备100可以包括1个或N个显示屏194,N为大于1的正整数。
电子设备100可以通过ISP,摄像头193,视频编解码器,GPU,显示屏194以及应用处理器等实现拍摄功能。
ISP用于处理摄像头193反馈的数据。例如,拍照时,打开快门,光线通过镜头被传递到摄像头感光元件上,光信号转换为电信号,摄像头感光元件将所述电信号传递给ISP处理,转化为肉眼可见的图像。ISP还可以对图像的噪点,亮度,肤色进行算法优化。ISP还可以对拍摄场景的曝光,色温等参数优化。在一些实施例中,ISP可以设置在摄像头193中。
摄像头193用于捕获静态图像或视频。物体通过镜头生成光学图像投射到感光元件。感光元件可以是电荷耦合器件(charge coupled device,CCD)或互补金属氧化物半导体(complementary metal-oxide-semiconductor,CMOS)光电晶体管。感光元件把光信号转换成电信号,之后将电信号传递给ISP转换成数字图像信号。ISP将数字图像信号输出到DSP加工处理。DSP将数字图像信号转换成标准的RGB,YUV等格式的图像信号。在一些实施例中,电子设备100可以包括1个或N个摄像头193,N为大于1的正整数。
数字信号处理器用于处理数字信号,除了可以处理数字图像信号,还可以处理其他数字信号。例如,当电子设备100在频点选择时,数字信号处理器用于对频点能量进行傅里叶变换等。
视频编解码器用于对数字视频压缩或解压缩。电子设备100可以支持一种或多种视频编解码器。这样,电子设备100可以播放或录制多种编码格式的视频,例如:动态图像专家组(moving picture experts group,MPEG)1,MPEG2,MPEG3,MPEG4等。
NPU为神经网络(neural-network,NN)计算处理器,通过借鉴生物神经网络结构,例如借鉴人脑神经元之间传递模式,对输入信息快速处理,还可以不断的自学习。通过NPU可以实现电子设备100的智能认知等应用,例如:图像识别,人脸识别,语音识别,文本理解等。
外部存储器接口120可以用于连接外部存储卡,例如Micro SD卡,实现扩展电子设备100的存储能力。外部存储卡通过外部存储器接口120与处理器110通信,实现数据存储功能。例如将音乐,视频等文件保存在外部存储卡中。
内部存储器121可以用于存储计算机可执行程序代码,所述可执行程序代码包括指令。处理器110通过运行存储在内部存储器121的指令,从而执行电子设备100的各种功能应用以及数据处理。内部存储器121可以包括存储程序区和存储数据区。其中,存储程序区可存储操作***,至少一个功能所需的应用程序(比如声音播放功能,图像播放功能等)等。存储数据区可存储电子设备100使用过程中所创建的数据(比如音频数据,电话本等)等。此外,内部存储器121可以包括高速随机存取存储器,还可以包括非易失性存储器,例如至少一个磁盘存储器件,闪存器件,通用闪存存储器(universal flash storage,UFS)等。
电子设备100可以通过音频模块170,扬声器170A,受话器170B,麦克风170C,耳机接口170D,以及应用处理器等实现音频功能。例如音乐播放,录音等。
音频模块170用于将数字音频信息转换成模拟音频信号输出,也用于将模拟音频输入转换为数字音频信号。音频模块170还可以用于对音频信号编码和解码。在一些实施例中,音频模块170可以设置于处理器110中,或将音频模块170的部分功能模块设置于处理器110中。
扬声器170A,也称“喇叭”,用于将音频电信号转换为声音信号。电子设备100可以通过扬声器170A收听音乐,或收听免提通话。
受话器170B,也称“听筒”,用于将音频电信号转换成声音信号。当电子设备100接听电话或语音信息时,可以通过将受话器170B靠近人耳接听语音。
麦克风170C,也称“话筒”,“传声器”,用于将声音信号转换为电信号。当拨打电话或发送语音信息时,用户可以通过人嘴靠近麦克风170C发声,将声音信号输入到麦克风170C。电子设备100可以设置至少一个麦克风170C。在另一些实施例中,电子设备100可以设置两个麦克风170C,除了采集声音信号,还可以实现降噪功能。在另一些实施例中,电子设备100还可以设置三个,四个或更多麦克风170C,实现采集声音信号,降噪,还可以识别声音来源,实现定向录音功能等。
耳机接口170D用于连接有线耳机。耳机接口170D可以是USB接口130,也可以是3.5mm的开放移动电子设备平台(open mobile terminal platform,OMTP)标准接口,美国蜂窝电信工业协会(cellular telecommunications industry association of the USA,CTIA)标准接口。
压力传感器180A用于感受压力信号,可以将压力信号转换成电信号。在一些实施例中,压力传感器180A可以设置于显示屏194。压力传感器180A的种类很多,如电阻式压力传感器,电感式压力传感器,电容式压力传感器等。电容式压力传感器可以是包括至少两个具有导电材料的平行板。当有力作用于压力传感器180A,电极之间的电容改变。电子设备100根据电容的变化确定压力的强度。当有触摸操作作用于显示屏194,电子设备100根据压力传感器180A检测所述触摸操作强度。电子设备100也可以根据压力传感器180A的检测信号计算触摸的位置。在一些实施例中,作用于相同触摸位置,但不同触摸操作强度的触摸操作,可以对应不同的操作指令。例如:当有触摸操作强度小于第一压力阈值的触摸操作作用于短消息应用图标时,执行查看短消息的指令。当有触摸操作强度大于或等于第一压力阈值的触摸操作作用于短消息应用图标时,执行新建短消息的指令。
陀螺仪传感器180B可以用于确定电子设备100的运动姿态。在一些实施例中,可以通过陀螺仪传感器180B确定电子设备100围绕三个轴(即,x,y和z轴)的角速度。陀螺仪传感器180B可以用于拍摄防抖。示例性的,当按下快门,陀螺仪传感器180B检测电子设备100抖动的角度,根据角度计算出镜头模组需要补偿的距离,让镜头通过反向运动抵消电子设备100的抖动,实现防抖。陀螺仪传感器180B还可以用于导航,体感游戏场景。
气压传感器180C用于测量气压。在一些实施例中,电子设备100通过气压传感器180C测得的气压值计算海拔高度,辅助定位和导航。
磁传感器180D包括霍尔传感器。电子设备100可以利用磁传感器180D检测翻盖皮套的开合。在一些实施例中,当电子设备100是翻盖机时,电子设备100可以根据磁传感器180D检测翻盖的开合。进而根据检测到的皮套的开合状态或翻盖的开合状态,设置翻盖自动解锁等特性。
加速度传感器180E可检测电子设备100在各个方向上(一般为三轴)加速度的大小。当电子设备100静止时可检测出重力的大小及方向。还可以用于识别电子设备姿态,应用于横竖屏切换,计步器等应用。
距离传感器180F,用于测量距离。电子设备100可以通过红外或激光测量距离。在一些实施例中,拍摄场景,电子设备100可以利用距离传感器180F测距以实现快速对焦。
接近光传感器180G可以包括例如发光二极管(LED)和光检测器,例如光电二极管。发光二极管可以是红外发光二极管。电子设备100通过发光二极管向外发射红外光。电子设备100使用光电二极管检测来自附近物体的红外反射光。当检测到充分的反射光时,可以确定电子设备100附近有物体。当检测到不充分的反射光时,电子设备100可以确定电子设备100附近没有物体。电子设备100可以利用接近光传感器180G检测用户手持电子设备100贴近耳朵通话,以便自动熄灭屏幕达到省电的目的。接近光传感器180G也可用于皮套模式,口袋模式自动解锁与锁屏。
环境光传感器180L用于感知环境光亮度。电子设备100可以根据感知的环境光亮度自适应调节显示屏194亮度。环境光传感器180L也可用于拍照时自动调节白平衡。环境光传感器180L还可以与接近光传感器180G配合,检测电子设备100是否在口袋里,以防误触。
指纹传感器180H用于采集指纹。电子设备100可以利用采集的指纹特性实现指纹解锁,访问应用锁,指纹拍照,指纹接听来电等。
温度传感器180J用于检测温度。在一些实施例中,电子设备100利用温度传感器180J检测的温度,执行温度处理策略。例如,当温度传感器180J上报的温度超过阈值,电子设备100执行降低位于温度传感器180J附近的处理器的性能,以便降低功耗实施热保护。在另一些实施例中,当温度低于另一阈值时,电子设备100对电池142加热,以避免低温导致电子设备100异常关机。在其他一些实施例中,当温度低于又一阈值时,电子设备100对电池142的输出电压执行升压,以避免低温导致的异常关机。
触摸传感器180K,也称“触控面板”。触摸传感器180K可以设置于显示屏194,由触摸传感器180K与显示屏194组成触摸屏,也称“触控屏”。触摸传感器180K用于检测作用于其上或附近的触摸操作。触摸传感器可以将检测到的触摸操作传递给应用处理器,以确定触摸事件类型。可以通过显示屏194提供与触摸操作相关的视觉输出。在另一些实施例中,触摸传感器180K也可以设置于电子设备100的表面,与显示屏194所处的位置不同。
骨传导传感器180M可以获取振动信号。在一些实施例中,骨传导传感器180M可以获取人体声部振动骨块的振动信号。骨传导传感器180M也可以接触人体脉搏,接收血压跳动信号。在一些实施例中,骨传导传感器180M也可以设置于耳机中,结合成骨传导耳机。音频模块170可以基于所述骨传导传感器180M获取的声部振动骨块的振动信号,解析出语音信号,实现语音功能。应用处理器可以基于所述骨传导传感器180M获取的血压跳动信号解析心率信息,实现心率检测功能。
按键190包括开机键,音量键等。按键190可以是机械按键。也可以是触摸式按键。电子设备100可以接收按键输入,产生与电子设备100的用户设置以及功能控制有关的键信号输入。
马达191可以产生振动提示。马达191可以用于来电振动提示,也可以用于触摸振动反馈。例如,作用于不同应用(例如拍照,音频播放等)的触摸操作,可以对应不同的振动反馈效果。作用于显示屏194不同区域的触摸操作,马达191也可对应不同的振动反馈效果。不同的应用场景(例如:时间提醒,接收信息,闹钟,游戏等)也可以对应不同的振动反馈效果。触摸振动反馈效果还可以支持自定义。
指示器192可以是指示灯,可以用于指示充电状态,电量变化,也可以用于指示消息,未接来电,通知等。
SIM卡接口195用于连接SIM卡。SIM卡可以通过***SIM卡接口195,或从SIM卡接口195拔出,实现和电子设备100的接触和分离。电子设备100可以支持1个或N个SIM卡接口,N为大于1的正整数。SIM卡接口195可以支持Nano SIM卡,Micro SIM卡,SIM卡等。同一个SIM卡接口195可以同时***多张卡。所述多张卡的类型可以相同,也可以不同。SIM卡接口195也可以兼容不同类型的SIM卡。SIM卡接口195也可以兼容外部存储卡。电子设备100通过SIM卡和网络交互,实现通话以及数据通信等功能。在一些实施例中,电子设备100采用eSIM,即:嵌入式SIM卡。eSIM卡可以嵌在电子设备100中,不能和电子设备100分离。
电子设备100的软件***可以采用分层架构,事件驱动架构,微核架构,微服务架构,或云架构。本发明实施例以分层架构的Android***为例,示例性说明电子设备100的软件结构。
图2是本发明实施例的电子设备100的软件结构框图。
分层架构将软件分成若干个层,每一层都有清晰的角色和分工。层与层之间通过软件接口通信。在一些实施例中,将Android***分为四层,从上至下分别为应用程序层,应用程序框架层,安卓运行时(Android runtime)和***库,以及内核层。
应用程序层可以包括一系列应用程序包。
如图2所示,应用程序包可以包括相机,图库,日历,通话,地图,导航,WLAN,蓝牙,音乐,视频,短信息等应用程序。
应用程序框架层为应用程序层的应用程序提供应用编程接口(applicationprogramming interface,API)和编程框架。应用程序框架层包括一些预先定义的函数。
如图2所示,应用程序框架层可以包括窗口管理器,内容提供器,视图***,电话管理器,资源管理器,通知管理器等。
窗口管理器用于管理窗口程序。窗口管理器可以获取显示屏大小,判断是否有状态栏,锁定屏幕,截取屏幕等。
内容提供器用来存放和获取数据,并使这些数据可以被应用程序访问。所述数据可以包括视频,图像,音频,拨打和接听的电话,浏览历史和书签,电话簿等。
视图***包括可视控件,例如显示文字的控件,显示图片的控件等。视图***可用于构建应用程序。显示界面可以由一个或多个视图组成的。例如,包括短信通知图标的显示界面,可以包括显示文字的视图以及显示图片的视图。
电话管理器用于提供电子设备100的通信功能。例如通话状态的管理(包括接通,挂断等)。
资源管理器为应用程序提供各种资源,比如本地化字符串,图标,图片,布局文件,视频文件等等。
通知管理器使应用程序可以在状态栏中显示通知信息,可以用于传达告知类型的消息,可以短暂停留后自动消失,无需用户交互。比如通知管理器被用于告知下载完成,消息提醒等。通知管理器还可以是以图表或者滚动条文本形式出现在***顶部状态栏的通知,例如后台运行的应用程序的通知,还可以是以对话窗口形式出现在屏幕上的通知。例如在状态栏提示文本信息,发出提示音,电子设备振动,指示灯闪烁等。
Android Runtime包括核心库和虚拟机。Android runtime负责安卓***的调度和管理。
核心库包含两部分:一部分是java语言需要调用的功能函数,另一部分是安卓的核心库。
应用程序层和应用程序框架层运行在虚拟机中。虚拟机将应用程序层和应用程序框架层的java文件执行为二进制文件。虚拟机用于执行对象生命周期的管理,堆栈管理,线程管理,安全和异常的管理,以及垃圾回收等功能。
***库可以包括多个功能模块。例如:表面管理器(surface manager),媒体库(Media Libraries),三维图形处理库(例如:OpenGL ES),2D图形引擎(例如:SGL)等。
表面管理器用于对显示子***进行管理,并且为多个应用程序提供了2D和3D图层的融合。
媒体库支持多种常用的音频,视频格式回放和录制,以及静态图像文件等。媒体库可以支持多种音视频编码格式,例如:MPEG4,H.264,MP3,AAC,AMR,JPG,PNG等。
三维图形处理库用于实现三维图形绘图,图像渲染,合成,和图层处理等。
2D图形引擎是2D绘图的绘图引擎。
内核层是硬件和软件之间的层。内核层至少包含显示驱动,摄像头驱动,音频驱动,传感器驱动。
参见图3,图3所示为本申请实施例提供的一种网络架构30的示意图。如图3所示,该网络架构30包括电子设备100、服务器200。其中,电子设备100上可以安装有浏览器应用程序,该浏览器应用程序可以作为服务器的客户端,通过网络与服务器通信,该网络可以为局域网或互联网或者两者的组合。该电子设备100可以是通用个人计算机、手持设备、机顶终端、手机、PDA等。该服务器200可以是一个,也可以是多个,在此不作限定。当网页上的资源数据存储于多个服务器200上时,电子设备100需要访问多个服务器200来获取资源数据。例如,网页数据可以存储于网页服务器上,网页数据中可以包括图片资源的链接,电子设备100可以根据图片资源的链接访问图片资源所在的图片服务器,来获取图片资源。当位于电子设备100的用户要从服务器获取数据时,该用户可以利用浏览器,浏览器可以安装在本地客户端或其远端。浏览器通过网络向服务器发请求,要求从服务器的数据存储装置获取指定内容,服务器响应浏览器的请求,并通过网络向浏览器发送该指定内容。
其中,电子设备100通过浏览器访问服务器时,可以遵循HTTP(hyper texttransfer protocol,超文本传输协议)通信机制。HTTP是互联上应用最为广泛的一种网络协议,HTTP协议定义了客户端(即电子设备100上浏览器应用程序)如何从服务器请求网页页面,以及服务器如何把网页页面传送给客户端,HTTP协议采用了请求/响应模型。
下面介绍本申请实施例中网页浏览的HTTP协议通信机制。
HTTP协议定义了电子设备如何从网页服务器请求网页页面,以及服务器如何把网页页面传送给电子设备,HTTP协议采用了请求/响应模型。在一次完整的网页浏览过程中,网页浏览器,与网页服务器之间将遵循HTTP协议完成下列4个步骤:
(1)建立TCP连接;
在进行网页浏览之前,网页浏览器首先要通过网络与网页服务器建立连接,该连接时通过TCP来完成的,该协议与IP协议共同构建Internet,即TCP/IP协议族。HTTP是比TCP更高层次的应用层协议,根据规则,只有底层协议建立之后才能进行高层协议的连接,因此,首先要建立TCP连接,一般TCP连接的端口号是80。
(2)电子设备向网页服务器发送网页请求;
一旦建立了TCP连接,电子设备可以向网页服务器发送网页请求,网页请求包含:请求的方法、统一资源定位符(URL)、协议版本、请求头部和请求数据。其中,请求方法有GET、POST、HEAD、PUT、DELETE、OPTIONS、TRACE、CONNECT,而网页浏览时,一般只用GET方法。URL也被称为网页地址,是因特网上标准的资源地址。请求头部由关键字/值对组成,每行一对,关键字和值应英文冒号“:”分隔。请求头部通知服务器有关于客户端请求的信息,典型的请求头有:
User-Agent:产生请求的浏览器类型;
Accept:客户端可识别的内容类型列表;
Host:请求的主机名,允许多个域名同处一个IP地址,即虚拟主机。
请求数据不再GET方法中使用,而是在POST方法中使用。
(3)网页服务器接收请求并返回页面数据;
网页服务器解析网页请求消息,定位请求资源,并将页面数据写到TCP套接字,由客户端读取。网页服务器返回的页面数据由状态行、响应头部、空行和响应数据4部分组成。
(4)网页浏览器根据收到的页面数据,加载和显示页面。
目前,电子设备可以通过浏览器浏览互联网上的资源信息,该资源信息包括文本资源和图片资源等。电子设备可以先从网页服务器上获取网页数据,然后根据网页数据中的资源信息的标签(例如统一资源定位符(uniform resource locator,URL)),访问资源信息所在的资源服务器,获取网页中的文字资源和图片资源。如图4A所示,在浏览器开启正常模式时,电子设备显示了浏览器打开网页(例如新闻网)的网页页面410。其中,该网页页面410中包括有文字和图片。其中,上述电子设备获取到的网页数据中包括有页面布局信息以及资源信息的标签。电子设备可以根据该页面布局信息(例如层叠样式表),确定图片显示区域在页面中的位置,从图片资源中获取到图片的尺寸,并根据图片显示区域的位置以及图片的尺寸,对文字和图片进行排版,然后,显示出如图4A所示的网页界面410。
当前,对于页面中的一些图片显示区域,例如,图4A中的图片显示区域411,网页中的页面布局信息只包括该图片显示区域(例如图片显示区域411)在网页页面410中的显示位置,并未指定该图片显示区域中图片的显示尺寸。当电子设备获取到该图片显示资源对应的图片资源时,电子设备可以根据图片资源中图片的尺寸,将该图片显示在该图片显示区域中,其中,该图片的显示效果可以参照如图4A中的图片显示区域411。
对于页面中的一些图片显示区域,例如,图4A中的图片显示区域416,网页中的页面布局信信息包括该图片显示区域(例如图片显示区域416)在网页页面410中的显示位置,并指定了图片显示区域的宽度。当电子设备或区到该图片区域显示资源对应的图片资源时,电子设备可以根据图片资源中图片的尺寸和图片区域的宽度,确定最终该图片的显示尺寸,然后,电子设备将该图片按照显示尺寸,显示在该图片显示区域中。其中,该图片的显示效果可以参照如图4A中的图片显示区域416。例如,网页页面410的页面布局信息中指定了图片显示区域416的宽度为400像素(pixel,px),该图片显示区域416中对应图片的原始尺寸为750*350px,即宽为750px,高为350px。当该图片的显示宽度需要与图片显示区域416一致时,电子设备可以按照该图片显示区域416的宽度将该图片的尺寸缩放到400*187px,然后,电子设备可以将该图片按照400*187px的尺寸显示在该图片显示区域416中。
由于网络流量和网速的限制,电子设备可以根据用户的需求打开浏览器的无图模式。在打开浏览器的无图模式后,电子设备再通过浏览器打开网页时,电子设备可以向网页服务器发送网页请求,网页服务器会返回网页信息给电子设备,电子设备可以解析网页信息中的图片元素。由于浏览器开启了无图模式,浏览器会拦截针对图片元素对应图片资源的请求。由于浏览器拦截了针对图片资源的请求,电子设备无法获取到图片资源,也就无法获取到图片显示区域中原始图片的尺寸。因此,网页页面会出现以下问题:
1、对于网页页面中的一些图片显示区域,网页中的页面布局信息并未指定该图片显示区域中图片的显示尺寸,在浏览器开启无图模式后,电子设备可以在该图片显示区域上显示1个像素大小的占位图或者不显示占位图,例如,图4A中的图片显示区域411、图片显示区域413、图片显示区域414、图片显示区域415,在浏览器开启无图模式重新打开该网页后,会显示一个像素大小的占位图或者不显示占位图。这样,会出现页面文字错位等情况。
示例性的,请参照图4A、图4B,图4A示出了浏览器正常模式下电子设备通过浏览器打开的网页页面,图4B示出了浏览器开启无图模式后,电子设备通过浏览器打开的网页页面。其中,图4A和图4B所示网页的网址相同。如图4A、4B所示,由于页面布局信息中未指定图4A中图片显示区域411、图片显示区域413、图片显示区域414、图片显示区域415各自对应图片的显示尺寸。当浏览器开启无图模式再次加载网页时,如图4B所示,电子设备在图片显示区域411、图片显示区域413、图片显示区域414、图片显示区域415既不显示各自对应图片,也不显示占位图。因此,图片显示区域的大小变为1个像素位大小,而在页面布局信息中,搜索框412的位置是根据图片显示区域411的位置确定的,例如,该搜索框412与图片显示区域相隔10个像素位,当图片显示区域411的大小变为1个像素位时,如图4B所示,该搜索框412在网页页面430中的位置会向左移。因此,图4A中的搜索框中的文字会如图4B所示向左偏移,打乱了页面的布局,影响用户浏览网页时的视觉体验。
2、对于网页页面中的一些图片显示区域,网页中的页面布局信息只指定了图片显示区域的宽度。在浏览器开启无图模式后,电子设备由于无法获取到图片显示区域的高度,因此,在图片显示区域会显示与浏览器正常模式下图片大小不一致的占位图。
示例性的,图4A示出了浏览器正常模式下电子设备通过浏览器打开的网页页面,图4B示出了浏览器开启无图模式后,电子设备通过浏览器打开的网页页面。其中,图4A和图4B所示网页的网址相同。如图4A、4B所示,由于页面布局信息中只指定了图4A中图片显示区域416的宽度(例如400px),在浏览器开启无图模式后,电子设备由于无法获取到图片显示区域的高度,如图4B所示,电子设备可以在图片显示区域416上显示默认高度(例如300px)的占位图,其中,图4A所示图片显示区域416中图片的显示尺寸为400*187px,图4B所示图片显示区域416中占位图的显示尺寸为400*300px,图4B中图片显示区域416中占位图的显示高度与图4A中图片显示区域416中图片的显示高度不一致。打乱了页面的布局,影响了用户浏览网页时的视觉体验。
基于上述问题,本申请提供了一种网页显示方法,在浏览器开启无图模式后,电子设备在通过该浏览器打开网页时,电子设备可以从网页服务器上获取网页布局信息及文字资源的同时,从网页服务器上获取图片资源中的前面部分数据(例如图片资源信息的前1K字节数据),其中,该图片资源中的前面部分数据包括有原始图片的尺寸。电子设备可以根据原始图片的尺寸以及图片显示区域尺寸信息,确定出图片显示区域中占位图的显示尺寸。这样,可以使电子设备的浏览器在无图模式下,网页页面的排版布局与正常模式一致,提高了用户的体验。
下面结合本申请的附图对本申请实施例提供的一种网页显示方法进行说明。
参见图5,图5示出了本申请实施例提供的一种网页显示方法的流程示意图。其中,图5中的网页服务器和图片服务器可以是两个不同服务器,也可以是同一个服务器。如图5所示,该方法包括:
S501、电子设备接收第一输入。S502、电子设备响应于第一输入,开启浏览器的无图模式。
其中,该第一输入为打开浏览器无图模式的输入操作。例如,该第一输入可以是图6C中针对无图模式按钮631的输入操作632(例如点击)。
示例性的,如图6A所示,电子设备在触控屏上显示了主屏幕的界面610,该界面610显示了一个放置有应用图标的页面,该页面包括多个应用图标(例如,天气应用图标、股票应用图标、计算器应用图标、设置应用图标、邮件应用图标、支付宝应用图标、脸书应用图标、浏览器应用图标611、图库应用图标、音乐应用图标、视频应用图标、应用商店图标)。多个应用图标下方还包括页面指示符,以表明当前显示的页面与其他页面的位置关系。页面指示符的下方有多个托盘图标(例如拨号应用图标、信息应用图标、联系人应用图标、相机应用图标),托盘图标可以在页面切换时保持显示,页面可以包括多个应用图标和页面指示符;页面指示符也可以不是页面的一部分,单独存在,上述托盘图标也是可选的,本申请实施例对此不做限制。
电子设备可以接收用户针对浏览器应用图标611的输入操作612(例如单击),响应于该输入操作612,电子设备可以显示如图6B所示的浏览器主页面620。
如图6B所示,该浏览器界面620显示包括有搜索输入框621、搜索按钮622、扫描按钮623、导航栏624。其中,导航栏624包括有切换上一页按钮、切换下一页按钮、返回浏览器主页按钮、更多按钮625。其中,该搜索输入框621用于接收用户输入的网址或搜索字词。
电子设备可以接收用户针对更多按钮625的输入操作626(例如点击),响应于该针对更多按钮625的输入操作626,电子设备可以显示图6C所示的窗口630。
如图6C所示,该窗口630显示包括有夜间模式开关、无图模式开关631、桌面UA开关、无痕浏览开关、添加书签按钮、书签/历史按钮、设置按钮、刷新网页按钮。
电子设备可以接收用户针对该无图模式开关631的输入操作632(例如点击),响应于该输入操作632,电子设备可以打开浏览器的无图模式。其中,在浏览器开启无图模式后,电子设备通过浏览器打开网页时,电子设备不显示网页上的图片,而显示与网页上图片尺寸相同的占位图。上述第一输入可以是该针对无图模式开关631的输入操作632,但不限于此,还可以是其他输入,例如通过语音输入,开启浏览器的无图模式。
S503、电子设备接收第二输入。S504、响应于第二输入,电子设备向网页服务器发送网页请求。
其中,其中,第二输入可以是图6D中在用户在输入网页网址后,针对搜索按钮622的输入操作633(例如单击),不限于此,第二输入还可以是用户在其他网页页面中针对网页链接的输入操作(例如单击),第二输入还可以是用户请求访问网页的其他输入操作,在此不再赘述。其中,在本申请实施例中,用户请求访问的网页可以被称为第一网页,后续实施例中电子设备向网页服务器的请求的网页数据也即是该第一网页的数据。
示例性的,如图6D所示,无图模式开关631,由于接收到用户的输入操作632(例如单击),切换至打开状态,即电子设备已开启浏览器的无图模式。电子设备可以接收用户在搜索输入框输入的网页网址(例如,“www.hwxinwen.com”)。
电子设备可以接收用户针对搜索按钮622的输入操作633(例如单击),响应于该输入操作633,电子设备可以先解析该网页网址对应IP地址,打到该网页网址对应的IP地址之后,电子设备可以借助浏览器应用通过TCP协议以TCP协议中的一个随机端口(例如端口1024至65535中的随机一个)向网页服务器的网页程序的80端口发起TCP连接请求。网页服务器在接收到电子设备发送的TCP连接请求后,会根据TCP协议与电子设备建立TCP连接。
在建立TCP连接之后,电子设备可以向网页服务器发送网页请求(例如基于HTTP协议簇的HTTP请求)。该网页请求用于电子设备向网页服务器请求网页数据(例如超文本标记语言(hyper text markup language,HTML)文件)。
S505、网页服务器响应电子设备的网页请求,向电子设备返回网页数据。
在网页服务器接收到电子设备的网页请求(例如HTTP请求)后,网页服务器解析该HTTP请求,定位请求资源,并将对应的网页数据(例如index.html文件)写到TCP套接字,发送给电子设备,由电子设备上的浏览器读取。其中,该网页数据中包括有文本资源、图片标签信息、页面布局信息(例如CSS等)的标签信息等。
S506、电子设备获取网页数据中图片的标签信息。
其中,以HTTP请求的响应报文为例,该网页数据由状态行、响应头部、空行和响应数据4部分组成。电子设备在接收到服务器返回的网页数据之后,可以通过浏览器首先解析状态行,查看表明请求是否成功的状态代码。然后,电子设备通过浏览器解析每一个响应头,响应头告知以下为若干字节的HTML文档和文档的字符集。最后,电子设备通过浏览器读取响应数据,其中,该网页数据的响应数据中包括文本资源、图片的标签信息、页面布局信息(例如CSS等)的标签信息等。电子设备可以从该响应数据中获取图片的标签信息,以及页面布局信息的标签信息。其中,图片的标签信息包括有图片所处图片服务器的地址信息。例如,图片的标签可以用统一资源定位符(uniform resource locator,URL)来表示。其中,URL由三部分组成:资源类型、存放资源的主机域名、资源文件名。存放资源的主机域名即为图片服务器的地址信息。示例仅仅用于解释本申请,不应构成限定。
其中,图片的标签信息不限于一个,可以是多个,页面布局信息的标签信息也不限于一个,可以是多个。当电子设备通过浏览器每解析到一个页面布局信息的标签信息时,电子设备可以根据页面布局信息的标签信息,确定出该页面布局信息的标签信息对应的服务器,并向该服务器发送获取页面布局信息的请求,该服务器接收到电子设备发送的获取页面布局信息的请求后,可以将页面布局信息的请求发送给电子设备。其中,当电子设备通过浏览器每解析到一个图片的标签信息时,就会执行下述步骤S507。
S507、电子设备向图片服务器发送第一请求,用于请求图片的标签信息对应图片资源内的前面部分数据。
其中,该图片资源内的前面部分数据是指图片资源内从第1字节开始至第L字节的数据,图片资源内的前面部分数据的长度为指定数据长度,即L的值为指定数据长度。其中,图片资源内的前面部分数据中包括有图片的尺寸信息。在本申请的实施例中,包括有图片的尺寸信息的数据都可以被称为第一指示信息,也即是说,第一指示信息可以是该图片内的前面部分数据,不限于此,第一指示信息还可以是其他包括有图片尺寸信息的数据。
电子设备在获取到网页数据中图片的标签信息之后,可以根据图片的标签信息确定出图片资源所在的图片服务器,并与图片服务器建立连接。其中,与图片服务器建立连接过程可以参考前述电子设备与网页服务器建立连接的过程,在此不再赘述。
电子设备在与图片服务器建立连接之后,由于电子设备的浏览器打开了无图模式,电子设备可以向图片服务器发送获取图片资源资源的头部数据的请求。其中,该头部数据可以是图片资源数据内从第1字节开始指定数据长度的数据。例如,优选的,指定数据长度可以是1K字节(Bytes),图片资源的头部数据可以是图片资源数据内的前1K字节的数据,其中,该图片资源数据内的前1K字节数据中包括有图片的尺寸信息。
示例性的,图片的标签或页面布局信息的标签可以用统一资源定位符(uniformresource locator,URL)来表示。其中,URL由三部分组成:资源类型、存放资源的主机域名、资源文件名。图片的资源类型可以有位图(bitmap,BMP)、便携式网络图片(prtablenetwork graphics,PNG)、联合图像专家组(joint photographic experts group,JPEG/JPG)等。
其中,BMP文件的格式可以参考图7,如图7所示,BMP文件可以包括BMP文件头(bitmap file header)、位图信息头(bitmap information)、调色板(color palette)、位图数据(bitmap data)字段。其中,该BMP文件头的大小为14字节,提供有BMP文件的格式、数据大小等信息。该位图信息头中依次包括有以下信息的数据段及其大小:位图信息头大小字段(4字节)、图像宽度字段(4字节)、图像高度字段(4字节)、颜色平面数字段(2字节)、比特数/像素字段(2字节)、图像数据压缩类型字段(4字节)、图像的大小字段(4字节)、水平分辨率字段(4字节)、垂直分辨率字段(4字节)、颜色索引数字段(4字节)、重要的颜色索引数字段(4字节)。该调色板为BMP文件格式中可选的字段,当BMP文件中使用索引来表示图像,调色板就是索引与该图像对应的颜色的映射表。该位图数据即为图片的图像数据。从如图7所示的BMP文件的格式可以看出,BMP类型图片的尺寸信息(图像宽度字段的数据和图像高度字段的数据)可以包含在BMP文件中的前54个字节内。图7中所示的BMP文件格式仅仅是一种示例,用于解释本申请,不应构成限定。
PNG文件的格式可以参考图8,如图8所示,PNG文件从头开始依次可以包括PNG文件标志、文件头数据块、调色板数据块、辅助数据块、图像数据块1~图像数据块N、图像结束数据块等。该辅助数据块可以是一个或多个,也可以是非必要的。其中,PNG文件标志的大小为8字节,用于标识出PNG文件类型。文件头数据块包括有文件数据块的数据长度字段(4字节)、数据块类型字段(4字节)、图像宽度字段(4字节)、图像高度字段(4字节)、图像深度字段(1字节)、颜色类型字段(1字节)、压缩方法字段(字节)、滤波器方法字段(1字节)、隔行扫描方法(1字节)、循环冗余码(4字节)。从如图7所示的PNG文件的格式可以看出,PNG类型图片的尺寸信息(图像宽度字段的数据和图像高度字段的数据)可以包含在PNG文件中的前33个字节中。图8中所示的BMP文件格式仅仅是一种示例,用于解释本申请,不应构成限定。
JPG文件的格式可以参考图9,如图9所示,JPG文件从头开始依次可以包括图像开始字段(SOI)字段、图像识别信息(APP0)字段、量化表(DQT)字段、图像帧开始(SOF0)字段、霍夫曼表(DHT)字段、扫描开始(SOS)字段、图像的压缩数据(scanData)字段、图像结束(EOI)字段。其中,图像开始(SOI)字段占用2个字节。图像识别信息字段占用18+3n字节,其中,n为缩略图的像素数量,一般的JPG文件中没有缩略图,n取0,即图像识别信息字段占用18字节。量化表字段占用的字节范围为134字节~520字节。图像帧开始字段占用16字节,其中,图像帧开始字段从头部到尾部包括的子字段及其占用的字节数为标记码字段(2字节)、数据段长度字段(2字节)、每个数据样本位数字段(1字节)、图像高度字段(2字节),图像宽度字段(2字节)、颜色分量数(1字节)、颜色分量1字段(颜色分量ID占1字节、颜色分量水平采样因子占4比特、颜色分量垂直采样因子占4比特、使用的量化表ID占1字节,共占3字节)、颜色分量2字段(颜色分量ID占1字节、颜色分量水平采样因子占4比特、颜色分量垂直采样因子占4比特、使用的量化表ID占1字节,共占3字节)、颜色分量3字段(颜色分量ID占1字节、颜色分量水平采样因子占4比特、颜色分量垂直采样因子占4比特、使用的量化表ID占1字节,共占3字节)。其中,如图9可以看出,JPG类型图片的尺寸信息包含在图像帧开始字段中,图像帧开始字段的结束位置距离JPG文件的头部开始处的偏移字节范围为170字节~556字节。因此,JPG类型图片的尺寸信息(图像宽度字段的数据和图像高度字段的数据)可以包含在JPG文件中的前556个字节中。图9中所示的JPG文件格式仅仅是一种示例,用于解释本申请,不应构成限定。
其中,上述图片文件类型格式仅仅用于示例性的解释本申请,不应构成限定。在具体实现中,图片文件类型格式不限于上述BMP文件类型、PNG文件类型、JPG文件类型,还可以有其他的图片文件类型,在此不一一赘述。
电子设备可以根据图片的标签信息(例如图片资源的URL)中存放资源的主机域名,确定该图片资源对应的图片服务器。电子设备可以根据资源文件名,向该图片服务器发送图片获取请求,该图片获取请求中包括有该图片的资源文件名以及图片资源的数据区段信息(例如图片资源的前1K字节数据)。其中,示例性的,上述图7所示的BMP类型的图片尺寸信息在BMP文件的前54个字节内,上述图8所示的PNG类型的图片尺寸信息在PNG文件的前33个字节内,上述图9所示的JPG类型的图片尺寸信息在JPG文件的前556个字节内,当电子设备获取图片资源的前面部分数据(例如前1K字节的数据)时,电子设备可以获取到图片的尺寸信息。
在一种可能的情况下,在电子设备获取到图片的标签之后,向图片服务器发送针对图片资源内前面部分数据的请求之前,电子设备可以判断图片标签中是否包括有图片的尺寸信息,若是,则电子设备根据图片标签中包括的图片尺寸信息,生成与该图片尺寸相同的占位图,并结合页面布局信息,将该占位图显示在该图片对应的图片显示区域。若否,则电子设备可以向图片服务器发送针对图片资源的头部数据的请求。其中,该图片资源的头部数据是指图片资源中从头头部开始计算有指定数据长度的数据段。
在一种可能的实现方式中,该图片标签中包括有图片的文件类型,在电子设备获取到图片标签之后,电子设备可以从图片标签中获取图片的文件类型,然后,电子设备可以根据图片的文件类型,确定与该图片的文件类型对应的指定数据长度。其中,不同的文件类型对应的指定数据长度不同。接着,电子设备可以向图片服务器发送针对图片资源内的前面部分数据的请求,其中,该针对图片资源内的前面部分数据的请求包括有指定数据长度信息。图片服务器在接收到该图片资源请求后,向电子设备发送该图片资源内前面指定数据长度的数据。这样,电子设备可以根据图片的文件类型,来确定从服务器上获取的图片资源的数据量,在保证能够获取到图片的尺寸信息的同时,节省了电子设备的流量。
示例性的,图片的文件类型与图片资源中电子设备需要获取的指定数据长度的对应关系可以如下表1所示:
表1
图片文件类型 |
需要获取的指定数据长度 |
BMP |
60字节 |
PNG |
40字节 |
JPG |
1K字节 |
由上表1可知,BMP文件类型对应的指定数据长度为60字节,PNG对应的指定数据长度为40字节,JPG文件对应的数据长度为1K字节。例如,电子设备获取到图片1的文件类型为PNG,由于PNG文件类型对应的指定数据长度为40字节,电子设备可以发送针对图片1对应图片资源内前面40字节的数据的请求给图片服务器,图片服务器在接收到请求后,将图片1对应图片资源内前面40字节的数据发送给电子设备。电子设备可以从该图片资源内前面40字节数据中解析出图片1的尺寸信息。上述示例仅仅用于解释本申请,不应构成限定。
S508、图片服务器向电子设备发送图片资源内的前面部分数据。
图片服务器在接收到电子设备发送的获取图片的请求之后,可以根据该图片的资源文件名,确定出该图片资源在图片服务器上的存储位置,并根据图片资源请求中的指定数据长度(例如1K字节,将该图片资源内前面指定数据长度的数据发送给电子设备。其中,该图片资源内前面指定数据长度的数据包括有图片的尺寸信息。
S509、电子设备从图片资源内前面部分数据数据中获取图片的尺寸信息。
电子设备在获取到图片资源内前面部分数据后,解析该指图片资源内前面部分数据,从该前面部分数据中查找到图像宽度字段和图像高度字段。然后,电子设备从图像宽度字段和图像高度字段中获取到图片的尺寸信息(包括图片的高度和图片的宽度)。
S510、电子设备根据图片的尺寸信息,生成与图片的尺寸相同的占位图,并显示在图片对应的图片显示区域。
电子设备在获取到图片的尺寸信息后,可以生成与图片尺寸相同的占位图,电子设备可以显示第一网页的页面,并根据页面布局信息,将该占位图显示在第一网页中该图片对应的图片显示区域。其中,该占位图可以是纯色的图片,例如,该占位图的颜色可以是灰色也可以是其他颜色,在此不作限定。
示例性的,如图6E所示,为本申请实施例中电子设备在浏览器开启无图模式打开网址“www.hwxinwen.com”的网页,其中,第一网页的名称为“新闻网”。其中,电子设备在浏览器正常模式下打开该“新闻网”的网页页面可以如上述图4A所示。其中,电子设备通过获取网页页面上任一个图片标签对应图片资源头部数据,可以获取到该图片的尺寸信息,从而可以生成与该图片的尺寸相同的占位图。当页面布局信息中未指定该图片对应图片显示区域的尺寸时,电子还设备可以将与该图片的尺寸相同的占位图,显示在该图片显示区域。
例如,页面布局信息中未指定图片显示区域641的尺寸、图片显示区域643的尺寸、图片显示区域645的尺寸、图片显示区域647的尺寸、图片显示区域649的尺寸。电子设备可以获取到图片显示区域641中原始图片的尺寸信息,然后生成与该图片显示区域641中原始图片(参考图4A所示图片显示区域411中的图片)的尺寸相同的占位图,显示在该图片显示区域641中。同样的方式,电子设备可以在图片显示区域643中显示与该图片显示区域643中原始图片相同尺寸的占位图,在图片显示区域645中显示与其原始图片相同尺寸的占位图,在图片显示区域647中显示与其原始图片相同尺寸的占位图,在图片显示区域649中显示与其原始图片相同尺寸的占位图。
在一种可能的情况下,在电子设备根据图片的尺寸信息,生成与图片的尺寸相同的占位图之前,电子设备可以获取网页的页面布局信息,电子设备可以判断页面布局信息中是否只指定了该图片对应图片显示区域的宽度,若是,则电子设备根据该图片显示区域的宽度,将该占位图缩放在图片的显示区域中。其中,电子设备可以从上述网页数据中获取到页面布局信息,或者电子设备可以从网页数据中获取到页面布局信息的标签(例如URL),根据页面布局信息的标签,可以从该页面布局信息的标签对应的服务器上获取该页面布局信息。这样,电子设备根据原始图片的尺寸在生成相同大小的占位图后,结合页面布局信息的约束将占位图显示网页页面上,可以使无图模式下页面排版效果与浏览器正常模式下显示原始图片的页面排版相同,提高了用户体验。
示例性的,如图6E所示,页面布局信息中只指定了图片显示区域646的宽度为400px,图片显示区域646中原始图片的尺寸为750*350px,电子设备可以根据图片显示区域646中原始图片的尺寸,生成同样大小的占位图,即占位图的大小也为750*350px。电子设备可以图片显示区域646的宽度为400px的约束,将占位图缩小比例为400*187px,显示在图片显示区域646中。
通过本申请实施例,在浏览器开启无图模式后,电子设备在通过该浏览器打开网页时,电子设备可以从网页服务器上获取网页布局信息及文字资源的同时,从网页服务器上获取图片资源中的前面部分数据(例如图片资源信息的前1K字节数据),其中,该图片资源中的前面部分数据包括有图片的尺寸。电子设备可以根据原始图片的尺寸以及图片显示区域尺寸信息,确定出图片显示区域中占位图的显示尺寸。这样,可以使电子设备的浏览器在无图模式下,网页页面的排版布局与正常模式一致,提高了用户的体验。
在一些应用场景中,在浏览器开启无图模式后,电子设备在通过该浏览器打开网页时,电子设备可以从网页服务器上获取网页服务器上获取网页数据,其中网页数据中包括有图片的标签信息。然后,电子设备将网页数据中图片的标签信息发送给查询服务器。查询服务器可以根据图片的标签信息,查询到图片的尺寸信息,并将图片的尺寸信息发送给电子设备。电子设备可以根据图片的尺寸以及图片显示区域尺寸信息,确定出图片显示区域中占位图的显示尺寸。这样,可以使电子设备的浏览器在无图模式下,网页页面的排版布局与正常模式一致,且节省了电子设备的流量,提高了用户的体验。
参考图10,图10为本申请实施例中提供的另一种页面显示方法的流程示意图。其中,该图10中的网页服务器和查询服务器可以是不同的服务器,也可以是相同的服务器。该查询服务器也可以是上述图5中的图库服务器,在此不作限定。如图10所示,该页面显示方法可以包括:
S1001、电子设备接收第一输入。
其中,该步骤S1001可以参考前述图5所示实施例中的步骤S501,在此不再赘述。
S1002、电子设备响应于第一输入,开启浏览器的无图模式。
其中,该步骤S1002可以参考前述图5所示实施例中的步骤S502,在此不再赘述。
S1003、电子设备接收第二输入。
其中,该步骤S1003可以参考前述图5所示实施例中的步骤S503,在此不再赘述。
S1004、响应于第二输入,电子设备向网页服务器发送网页请求。
其中,该步骤S1004可以参考前述图5所示实施例中的步骤S504,在此不再赘述。
S1005、网页服务器响应电子设备的网页请求,向电子设备返回网页数据。
其中,该步骤S1005可以参考前述图5所示实施例中的步骤S505,在此不再赘述。
S1006、电子设备获取网页数据中图片的标签信息。
其中,该步骤S1006可以参考前述图5所示实施例中的步骤S506,在此不再赘述。
S1007、电子设备发送图片的标签信息给查询服务器。
电子设备在获取到网页数据中图片的标签信息之后,可以查询服务器建立连接。其中,电子设备与查询服务器建立连接过程可以参考前述图5所示实施例中电子设备与网页服务器建立连接的过程,在此不再赘述。在电子设备与查询服务器建立连接后,电子设备可以将图片的标签信息发送给查询服务器。
S1008、查询服务器根据图片的标签信息,查询图片的尺寸信息。S1009、查询服务器在查询到图片的尺寸信息之后,返回图片的尺寸信息给电子设备。
其中,在查询服务器接收到图片的标签信息之后,查询服务器可以根据图片的标签信息从图片服务器上获取到该标签信息对应的图片资源。在获取到图片资源后,查询服务器可以解析图片资源中的数据,从图片资源的数据中获取到尺寸信息。
在一种可能的实现方式中,该查询服务器可以和图片服务器一样,都存储有该图片的标签信息对应的图片资源,查询服务器在获取到图片的标签信息对应的图片资源之后,查询服务器可以根据解析图片资源中数据,从图片资源的数据中获取到尺寸信息。
在一种可能的实现方式中,该查询服务器可以根据图片的标签信息通过互联网查询到该图片的标签信息对应的尺寸信息,在该查询服务器获取到该图片的尺寸信息之后,可以将该尺寸信息,发送给电子设备。
S1010、电子设备根据图片的尺寸信息,生成与图片的尺寸相同的占位图,并显示在图片的显示区域。
其中,该步骤S1010可以参考前述图5所示实施例中的步骤S510,在此不再赘述。
通过本申请实施例,电子设备将网页数据中图片的标签信息发送给查询服务器,让查询服务器代为查询到该图片的尺寸信息,查询服务器查询到图片的尺寸信息之后,将图片的尺寸信息发送给电子设备。电子设备可以根据图片的尺寸以及图片显示区域尺寸信息,确定出图片显示区域中占位图的显示尺寸。这样,可以使电子设备的浏览器在无图模式下,直接从查询服务器上获取到图片的尺寸信息,节省了电子设备浏览网页时的耗费的网络流量,也能够使网页页面的排版布局与正常模式一致,提高了用户的体验。
在一些应用场景中,针对一些图片的文件类型,例如JPG文件类型,图片资源文件中会包括有图片的缩略图,其中,该缩略图的数据量会小于整个图片资源文件的数据量。电子设备可以获取图片资源文件中的缩略图,并将图片的缩略图显示在该图片的显示区域。这样,可以节省电子设备浏览网页时所耗费的网络流量,优化了无图模式下的显示效果。
示例性的,如图11所示,JPG文件从头开始依次可以包括图像开始字段(SOI)字段、图像识别信息(APP0)字段、量化表(DQT)字段、图像帧开始(SOF0)字段、霍夫曼表(DHT)字段、扫描开始(SOS)字段、图像的压缩数据(scanData)字段、图像结束(EOI)字段。其中,图像识别信息(SOF0)字段中从头开始依次包括有标记码字段(2字节)、数据段长度字段(2字节)、交换格式字段(5字节)、主版本号字段(例如1字节)、副版本号字段(例如1字节)、图像密度单位字段(例如1字节)、X方向像素密度字段(2字节)、Y方向像素密度字段(2字节)、缩略图水平像素数目字段(例如1字节)、缩略图垂直像素数目字段(例如1字节)、RGB缩略图字段(3*n字节)。其中,RGB缩略图字段的长度为3*n字节,n是指缩略图的像素大小。例如,缩略图的尺寸为48*48px时,n=2304,RGB缩略图字段的长度为3*2304=6912字节。上述示例仅仅用于解释本申请,不应构成限定。
电子设备可以从图片服务器上获取图片资源内的前面部分数据(例如图片资源内的前1K字节)。电子设备在获取到图片资源内的前面部分数据之后,可以从图片资源内的前面部分数据中获取到缩略图在数据区段位置。电子设备可以判断该缩略图的数据区段位置是否在该图片资源内的前面部分数据中,若是,则电子设备可以直接从该图片资源内的前面部分数据中获取到图片的缩略图。若否,则电子设备可以将该缩略图的数据区段位置信息发送给图片服务器,请求图片服务器返回该图片的缩略图所在区段的数据。在电子设备获取到图片的缩略图之后,电子设备可以将图片的缩略图显示在图片的显示区域内。
下面介绍本申请实施例中提供的一种网页显示的方法的交互架构图。
如图12所示,电子设备可以包括浏览器网页渲染器1201、浏览器网络模块1202。其中浏览器网页渲染器1201可以通过程序接口与浏览器网络模块1202进行通信。浏览器网络模块1202可以通过无线或者有线的方式与图片服务器进行通信。其中,在本申请实施例提供的一种网页显示方法中,浏览器网页渲染器1201、浏览器网络模块1202与图片服务器的信息交互。其中:
1、浏览器网页渲染器1201可以解析HTML网页数据中的图片元素(即图片标签信息)。
其中,具体内容可以参考前述图5所示实施例中的步骤S506,在此不再赘述。
2、浏览器网页渲染器1201可以向浏览器网络模块1202发送图片资源的请求。
3、浏览器网络模块1202可以向图片服务器发送针对图片资源的前1K字节数据的请求。
其中,具体内容可以参考前述图5所示实施例中的步骤S507,在此不再赘述。
4、图片服务器返回图片资源的前1K字节数据给浏览器网络模块1202。
其中,具体内容可以参考前述图5所示实施例中的步骤S508,在此不再赘述。
5、浏览器网络模块1202返回图片资源的前1K字节数据给浏览器网页渲染器1201。
6、浏览器网页渲染器1201解析图片资源的前1K字节数据,获取图片的物理尺寸,并构建同等大小的占位图并显示在图片显示区域中。
示例性的,浏览器网页渲染器1201可以解析图片资源的前1K字节数据,得到图片的物理尺寸为750*350px,。浏览器网页渲染器1201可以构建尺寸的占位图,用于渲染页面。结合图片显示区域的宽度,例如图片显示区域的宽度为400px,最终在图片显示区域显示为400*187px的占位图。
其中,具体内容可以参考前述图5所示实施例中的步骤S509和步骤S510,在此不再赘述。
通过本申请实施例提供的一种网页显示的方法,在浏览器开启无图模式后,电子设备在通过该浏览器打开网页时,电子设备可以从网页服务器上获取网页布局信息及文字资源的同时,从网页服务器上获取图片资源中的前面部分数据(例如图片资源信息的前1K字节数据),其中,该图片资源中的前面部分数据包括有原始图片的尺寸。电子设备可以根据原始图片的尺寸以及图片显示区域尺寸信息,确定出图片显示区域中占位图的显示尺寸。这样,可以使电子设备的浏览器在无图模式下,网页页面的排版布局与正常模式一致,提高了用户的体验。
以上所述,以上实施例仅用以说明本申请的技术方案,而非对其限制;尽管参照前述实施例对本申请进行了详细的说明,本领域的普通技术人员应当理解:其依然可以对前述各实施例所记载的技术方案进行修改,或者对其中部分技术特征进行等同替换;而这些修改或者替换,并不使相应技术方案的本质脱离本申请各实施例技术方案的范围。