[go: up one dir, main page]
More Web Proxy on the site http://driver.im/

CN110096662A - Webpage display method and related device - Google Patents

Webpage display method and related device Download PDF

Info

Publication number
CN110096662A
CN110096662A CN201910324479.7A CN201910324479A CN110096662A CN 110096662 A CN110096662 A CN 110096662A CN 201910324479 A CN201910324479 A CN 201910324479A CN 110096662 A CN110096662 A CN 110096662A
Authority
CN
China
Prior art keywords
picture
electronic equipment
webpage
information
data
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN201910324479.7A
Other languages
Chinese (zh)
Inventor
王辉
连志鸿
刘耀明
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Huawei Device Co Ltd
Petal Cloud Technology Co Ltd
Original Assignee
Huawei Technologies Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Huawei Technologies Co Ltd filed Critical Huawei Technologies Co Ltd
Priority to CN201910324479.7A priority Critical patent/CN110096662A/en
Publication of CN110096662A publication Critical patent/CN110096662A/en
Pending legal-status Critical Current

Links

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/957Browsing optimisation, e.g. caching or content distillation
    • G06F16/9577Optimising the visualization of content, e.g. distillation of HTML documents

Landscapes

  • Engineering & Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Data Mining & Analysis (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

The application discloses a webpage display method, which comprises the following steps: the electronic equipment firstly acquires address information of a picture server where a picture in a first webpage is located. Then, according to the address information of the picture server, first indication information is obtained from the picture server. The first indication information is used for indicating the size of the picture, and the data volume of the first indication information is smaller than that of the picture. Then, the electronic equipment constructs a occupation bitmap of the picture, wherein the occupation bitmap of the picture has the same size as that indicated by the first indication information. And finally, the electronic equipment displays the first webpage, and the occupying bitmap of the picture is displayed in the display area of the picture in the first webpage. Therefore, when the electronic equipment browses the webpage in the non-image mode when the browser starts, the page layout of the webpage is consistent with that of the browser in the image mode, and the user experience is improved.

Description

A kind of Webpage display process and relevant apparatus
Technical field
This application involves field of communication technology more particularly to a kind of Webpage display process and relevant apparatus.
Background technique
With the development of internet and mobile terminal, more and more users use mobile terminal accessing internet.And mesh The preceding limitation due to network flow and network speed, many times mobile terminal does not Load Image.For example, clear in mobile phone at present Look at device without under chart-pattern, browser takes picture the mode all disabled, so that browser is not shown in webpage Picture only shows an occupy-place figure in picture display area, can be with saving network flow by browser without chart-pattern.
Currently, browser can intercept the money of the picture in web page resources when the browser of mobile terminal is opened without chart-pattern Source request, and believed according to the label of cascading style sheets (cascading style sheets, CSS) or image in the page Breath, display and picture display area occupy-place figure of corresponding size.There is picture aobvious when not specified in the label information of CSS or image When showing the size dimension in region, then mobile terminal can show 1 pixel in the opened webpage of browser on picture display area The occupy-place figure of point size, or occupy-place figure is not shown.In this way, will lead to the layout errors of Webpage, so that the page is imitated There are deviations for fruit and page effect when normally showing picture on webpage, for example, text misplaces, and occupy-place figure is too long etc., influence User experience.
Summary of the invention
This application provides a kind of Webpage display process and relevant apparatus, realize electronic equipment and open in browser without figure When mode browses webpage, the page composition layout of webpage is consistent when there is chart-pattern with browser, improves user experience.
In a first aspect, this application provides a kind of Webpage display process, comprising: firstly, electronic equipment obtains the first webpage The address information of picture servers locating for middle picture.Then, the electronic equipment is according to the address informations of the picture servers, from this Picture servers obtain the first instruction information.Then, which is used to indicate the size of the picture, first instruction The data volume of information is less than the data volume of the picture.Then, which constructs the occupy-place figure of the picture, the occupy-place of the picture The size of figure is identical as the size of the first instruction information instruction.Finally, the electronic equipment shows first webpage, first net The occupy-place figure of the picture is shown in page in the display area of the picture.
By the embodiment of the present application, after browser is opened without chart-pattern, electronic equipment is opening net by the browser When page, while electronic equipment can obtain page layout information and literal resource from web page server, from web page server The upper dimension information for obtaining picture, electronic equipment can be determined according to the size and picture display area size information of picture Out in picture display area occupy-place figure size.In this way, can make the browser of electronic equipment under no chart-pattern, Webpage Imposition layout it is consistent with normal mode, improve the experience of user.
In one possible implementation, before the electronic equipment shows first webpage, this method further include: first First, which obtains the width information of the display area of the picture.The electronic equipment adjusts the picture according to the first ratio Display size of the occupy-place figure in the display area of the picture.Wherein, which is the width of the display area of the picture The ratio between the width of degree and the occupy-place figure of the picture, the width of the display area of the display width and picture of the occupy-place figure of the picture It is identical.In this way, electronic equipment according to the size of original image after the occupy-place figure for generating same size, in conjunction with page layout information Constraint occupy-place figure is shown on Webpage, can make to show under no chart-pattern lower page typesetting effect and browser normal mode Show that the page composition of original image is identical, improves user experience.
In one possible implementation, which is the first data in the picture, first data For the picture the 1st data cell to the data between l-th data cell, L is the positive integer greater than 1;Wherein, the data Unit includes: bit or byte.In this way, electronic equipment can obtain page layout information and literal resource from web page server While, from the previous section data (such as preceding 1K byte data of picture) obtained on web page server in picture, wherein should Previous section data in picture include the size of picture.In turn, it can make the browser of electronic equipment under no chart-pattern, The imposition layout of Webpage is consistent with normal mode, and saves data downloading flow, improves the experience of user.
In one possible implementation, which determines according to the file type of the picture.In this way, electronic equipment can be with According to the file type of picture, come determine the picture obtained from server previous section data data volume, guaranteeing While enough getting the dimension information of picture, the flow of electronic equipment is saved.
In one possible implementation, the electronic equipment is according to the address informations of the picture servers, from the picture Server obtains the first instruction information, comprising: the electronic equipment judge in the first webpage whether to include that the size of the picture is believed Breath, if it is not, obtaining the first instruction information from the picture servers then according to the address information of the picture servers.In this way, can be with When not having the dimension information of the picture in webpage, the dimension information of picture is obtained from picture servers, saves load net Data traffic consumed by page.
In one possible implementation, the electronic equipment is according to the address informations of the picture servers, from the picture Server obtains the first instruction information, comprising: the electronic equipment judges whether the mode of electronic equipment browsing webpage is no figure Mode, if so, address information of the electronic equipment according to the picture servers, obtains the first instruction letter from the picture servers Breath.In this way, no chart-pattern can be selectively turned on according to the demand of user, data traffic consumed by load webpage is saved.
In one possible implementation, picture servers locating for picture in the first webpage are obtained in the electronic equipment Before address information, this method further include: the electronic equipment receives the access request that user is directed to the first webpage, wherein the needle Access request to the first webpage includes the address information of web page server locating for first webpage;The electronic equipment is according to the net The address information of page server, obtains first webpage from the web page server.
Second aspect, this application provides a kind of electronic equipment, comprising: one or more processors, display screen, one or Multiple memories, transceiver;The one or more memory and the one or more processors and the transceiver couples, the transmitting-receiving Device with external communication device for being communicated, which communicates with the one or more processors, which deposits For reservoir for storing computer program code, which includes computer instruction, when one or more processing When device executes the computer instruction, so that the electronic equipment executes the net in the possible implementation of any one of any of the above-described aspect Page display methods.
The third aspect, the embodiment of the present application provide a kind of computer storage medium, which is characterized in that refer to including computer It enables, when computer instruction is run on an electronic device, so that electronic equipment executes the possible reality of any one of any of the above-described aspect Webpage display process in existing mode.
Fourth aspect, this application provides a kind of computer program products, when the computer program product is in computer When upper operation, so that electronic equipment executes the Webpage display process in the possible implementation of any one of any of the above-described aspect.
Detailed description of the invention
Fig. 1 is the structural schematic diagram of a kind of electronic equipment provided by the embodiments of the present application;
Fig. 2 is a kind of software architecture schematic diagram provided by the embodiments of the present application;
Fig. 3 is one group of network architecture schematic diagram provided by the embodiments of the present application;
Fig. 4 A-4B is one group of interface schematic diagram provided by the embodiments of the present application;
Fig. 5 is a kind of flow diagram of Webpage display process provided by the embodiments of the present application;
Fig. 6 A-6E has one group of interface schematic diagram to be provided by the embodiments of the present application;
Fig. 7 is a kind of structural schematic diagram of picture file type provided by the embodiments of the present application;
Fig. 8 is the structural schematic diagram of another picture file type provided by the embodiments of the present application;
Fig. 9 is the structural schematic diagram of another picture file type provided by the embodiments of the present application;
Figure 10 is a kind of flow diagram for Webpage display process that another embodiment of the application provides;
Figure 11 is a kind of structural schematic diagram for picture file type that another embodiment of the application provides;
Figure 12 is a kind of interworking architecture figure for Webpage display process that another embodiment of the application provides.
Specific embodiment
It is purged below in conjunction with attached drawing technical solutions in the embodiments of the present application, at large describes.Wherein, at this Apply embodiment description in, unless otherwise indicated, "/" indicate or the meaning, for example, A/B can indicate A or B;In text "and/or" is only a kind of incidence relation for describing affiliated partner, indicates may exist three kinds of relationships, for example, A and/or B, it can To indicate: individualism A exists simultaneously A and B, these three situations of individualism B, in addition, in the description of the embodiment of the present application In, " multiple " refer to two or more.
Hereinafter, term " first ", " second " are used for description purposes only, and it cannot be construed as to imply that or imply relative importance Or implicitly indicate the quantity of indicated technical characteristic.Define " first " as a result, the feature of " second " can be expressed or One or more of the features is implicitly included, in the description of the embodiment of the present application, unless otherwise indicated, " multiples' " contains Justice is two or more.
Fig. 1 shows the structural schematic diagram of electronic equipment 100.
Embodiment is specifically described by taking electronic equipment 100 as an example below.It should be understood that electronics shown in Fig. 1 is set Standby 100 be only an example, and electronic equipment 100 can have the more or less component than shown in Fig. 1, can To combine two or more components, or it can have different component configurations.Various parts shown in the drawings can be It is real in the combination of hardware, software or hardware and software including one or more signal processings and/or specific integrated circuit It is existing.
Electronic equipment 100 may include: processor 110, external memory interface 120, internal storage 121, general string Row bus (universal serial bus, USB) interface 130, charge management module 140, power management module 141, battery 142, antenna 1, antenna 2, mobile communication module 150, wireless communication module 160, audio-frequency module 170, loudspeaker 170A, receiver 170B, microphone 170C, earphone interface 170D, sensor module 180, key 190, motor 191, indicator 192, camera 193, display screen 194 and Subscriber Identity Module (subscriber identification module, SIM) card interface 195 Deng.Wherein sensor module 180 may include pressure sensor 180A, gyro sensor 180B, baroceptor 180C, magnetic Sensor 180D, acceleration transducer 180E, range sensor 180F, close to optical sensor 180G, fingerprint sensor 180H, temperature Spend sensor 180J, touch sensor 180K, ambient light sensor 180L, bone conduction sensor 180M etc..
It is understood that the structure of signal of the embodiment of the present invention does not constitute the specific restriction to electronic equipment 100.? In other embodiments of the application, electronic equipment 100 may include than illustrating more or fewer components, or the certain portions of combination Part perhaps splits certain components or different component layouts.The component of diagram can be with hardware, software or software and hardware Combination realize.
Processor 110 may include one or more processing units, such as: processor 110 may include application processor (application processor, AP), modem processor, graphics processor (graphics processing Unit, GPU), image-signal processor (image signal processor, ISP), controller, memory, coding and decoding video Device, digital signal processor (digital signal processor, DSP), baseband processor and/or Processing with Neural Network Device (neural-network processing unit, NPU) etc..Wherein, different processing units can be independent device, Also it can integrate in one or more processors.
Wherein, controller can be nerve center and the command centre of electronic equipment 100.Controller can be grasped according to instruction Make code and clock signal, generates operating control signal, the control completing instruction fetch and executing instruction.
Memory can also be set in processor 110, for storing instruction and data.In some embodiments, processor Memory in 110 is cache memory.The memory can save the instruction that processor 110 is just used or is recycled Or data.If processor 110 needs to reuse the instruction or data, can be called directly from the memory.It avoids Repeated access, reduces the waiting time of processor 110, thus improves the efficiency of system.
In some embodiments, processor 110 may include one or more interfaces.Interface may include integrated circuit (inter-integrated circuit, I2C) interface, integrated circuit built-in audio (inter-integrated circuit Sound, I2S) interface, pulse code modulation (pulse code modulation, PCM) interface, universal asynchronous receiving-transmitting transmitter (universal asynchronous receiver/transmitter, UART) interface, mobile industry processor interface (mobile industry processor interface, MIPI), universal input export (general-purpose Input/output, GPIO) interface, Subscriber Identity Module (subscriber identity module, SIM) interface, and/or Universal serial bus (universal serial bus, USB) interface etc..
I2C interface is a kind of bi-directional synchronization universal serial bus, including serial data line (serial data line, SDA) He Yigen serial time clock line (derail clock line, SCL).In some embodiments, processor 110 may include Multiple groups I2C bus.Processor 110 can by different I2C bus interface distinguish coupled with touch sensors 180K, charger, Flash lamp, camera 193 etc..Such as: processor 110 can make processor by I2C interface coupled with touch sensors 180K 110 are communicated with touch sensor 180K by I2C bus interface, realize the touch function of electronic equipment 100.
I2S interface can be used for voice communication.In some embodiments, processor 110 may include multiple groups I2S bus. Processor 110 can be coupled by I2S bus with audio-frequency module 170, be realized logical between processor 110 and audio-frequency module 170 Letter.In some embodiments, audio-frequency module 170 can transmit audio signal to wireless communication module 160 by I2S interface, real The function of now being received calls by bluetooth headset.
Pcm interface can be used for voice communication, by analog signal sampling, quantization and coding.In some embodiments, sound Frequency module 170 can be coupled with wireless communication module 160 by pcm bus interface.In some embodiments, audio-frequency module 170 Audio signal can also be transmitted to wireless communication module 160 by pcm interface, realize the function to receive calls by bluetooth headset Energy.The I2S interface and the pcm interface may be used to voice communication.
UART interface is a kind of Universal Serial Bus, is used for asynchronous communication.The bus can be bidirectional communications bus. The data that it will be transmitted are converted between serial communication and parallel communications.In some embodiments, UART interface usually by with In connection processor 110 and wireless communication module 160.Such as: processor 110 passes through UART interface and wireless communication module 160 In bluetooth module communication, realize Bluetooth function.In some embodiments, audio-frequency module 170 can be by UART interface to nothing Line communication module 160 transmits audio signal, realizes the function that music is played by bluetooth headset.
MIPI interface can be used to connect the peripheral components such as processor 110 and display screen 194, camera 193.MIPI connects Mouth includes camera serial line interface (camera serial interface, CSI), display screen serial line interface (display Serial interface, DSI) etc..In some embodiments, processor 110 and camera 193 are communicated by CSI interface, real The shooting function of existing electronic equipment 100.Processor 110 and display screen 194 realize electronic equipment 100 by DSI interface communication Display function.
GPIO interface can pass through software configuration.GPIO interface can be configured as control signal, may be alternatively configured as counting It is believed that number.In some embodiments, GPIO interface can be used for connecting processor 110 and camera 193, display screen 194, wirelessly Communication module 160, audio-frequency module 170, sensor module 180 etc..GPIO interface can be additionally configured to I2C interface, and I2S connects Mouthful, UART interface, MIPI interface etc..
Usb 1 30 is the interface for meeting USB standard specification, specifically can be Mini USB interface, and Micro USB connects Mouthful, USB Type C interface etc..Usb 1 30 can be used for connecting charger for the charging of electronic equipment 100, can be used for Data are transmitted between electronic equipment 100 and peripheral equipment.It can be used for connection earphone, audio played by earphone.The interface It can be also used for connecting other electronic equipments, such as AR equipment etc..
It is understood that the interface connection relationship of each intermodule of signal of the embodiment of the present invention, only schematically illustrates, The structure qualification to electronic equipment 100 is not constituted.In other embodiments of the application, electronic equipment 100 can also be used The combination of different interface connection type or multiple interfaces connection type in above-described embodiment.
Charge management module 140 is used to receive charging input from charger.Wherein, charger can be wireless charger, It is also possible to wired charger.In the embodiment of some wired chargings, charge management module 140 can pass through usb 1 30 Receive the charging input of wired charger.In the embodiment of some wireless chargings, charge management module 140 can pass through electronics The Wireless charging coil of equipment 100 receives wireless charging input.While charge management module 140 is that battery 142 charges, may be used also To be power electronic equipment by power management module 141.
Power management module 141 is for connecting battery 142, charge management module 140 and processor 110.Power management mould Block 141 receives the input of battery 142 and/or charge management module 140, is processor 110, internal storage 121, external storage Device, display screen 194, the power supply such as camera 193 and wireless communication module 160.Power management module 141 can be also used for monitoring Battery capacity, circulating battery number, the parameters such as cell health state (electric leakage, impedance).In some other embodiment, power supply pipe Reason module 141 also can be set in processor 110.In further embodiments, power management module 141 and Charge Management mould Block 140 also can be set in the same device.
The wireless communication function of electronic equipment 100 can pass through antenna 1, antenna 2, mobile communication module 150, wireless communication Module 160, modem processor and baseband processor etc. are realized.
Antenna 1 and antenna 2 electromagnetic wave signal for transmitting and receiving.Each antenna in electronic equipment 100 can be used for covering Cover single or multiple communication bands.Different antennas can also be multiplexed, to improve the utilization rate of antenna.Such as: it can be by antenna 1 It is multiplexed with the diversity antenna of WLAN.In other embodiments, antenna can be used in combination with tuning switch.
Mobile communication module 150, which can provide, applies wirelessly communicating on electronic equipment 100 including 2G/3G/4G/5G etc. Solution.Mobile communication module 150 may include at least one filter, switch, power amplifier, low-noise amplifier (low noise amplifier, LNA) etc..Mobile communication module 150 can receive electromagnetic wave by antenna 1, and to received electricity Magnetic wave is filtered, and the processing such as amplification is sent to modem processor and is demodulated.Mobile communication module 150 can also be right The modulated modulated signal amplification of demodulation processor, switchs to electromagenetic wave radiation through antenna 1 and goes out.In some embodiments, it moves At least partly functional module of dynamic communication module 150 can be arranged in processor 110.In some embodiments, mobile logical At least partly functional module of letter module 150 can be arranged in the same device at least partly module of processor 110.
Modem processor may include modulator and demodulator.Wherein, modulator is used for low frequency base to be sent Band signal is modulated into high frequency signal.Demodulator is used to received electromagnetic wave signal being demodulated into low frequency baseband signal.Then solution Adjust device that the low frequency baseband signal that demodulation obtains is sent to baseband processor.Low frequency baseband signal is through baseband processor Afterwards, it is delivered to application processor.Application processor is defeated by audio frequency apparatus (being not limited to loudspeaker 170A, receiver 170B etc.) Voice signal out, or image or video are shown by display screen 194.In some embodiments, modem processor can be Independent device.In further embodiments, modem processor can be independently of processor 110, with mobile communication module 150 or other function module be arranged in the same device.
It includes WLAN (wireless that wireless communication module 160, which can be provided and be applied on electronic equipment 100, Local area networks, WLAN) (such as Wireless Fidelity (wireless fidelity, Wi-Fi) network), bluetooth (bluetooth, BT), Global Navigation Satellite System (global navigation satellite system, GNSS), frequency modulation (frequency modulation, FM), the short distance wireless communication technology (near field communication, NFC) are red The solution of the wireless communications such as outer technology (infrared, IR).Wireless communication module 160 can be integrated into few communication One or more devices of processing module.Wireless communication module 160 receives electromagnetic wave via antenna 2, by electromagnetic wave signal frequency modulation And filtering processing, by treated, signal is sent to processor 110.Wireless communication module 160 can also connect from processor 110 Signal to be sent is received, frequency modulation is carried out to it, is amplified, is switched to electromagenetic wave radiation through antenna 2 and go out.
In some embodiments, the antenna 1 of electronic equipment 100 and mobile communication module 150 couple, antenna 2 and channel radio Believe that module 160 couples, allowing electronic equipment 100, technology is communicated with network and other equipment by wireless communication.It is described Wireless communication technique may include global system for mobile communications (global system for mobile communications, GSM), general packet radio service (general packet radio service, GPRS), CDMA access (code Division multiple access, CDMA), wideband code division multiple access (wideband code division multiple Access, WCDMA), time division CDMA (time-division code division multiple access, TD- SCDMA), long term evolution (long term evolution, LTE), BT, GNSS, WLAN, NFC, FM and/or IR technology etc..Institute Stating GNSS may include GPS (global positioning system, GPS), global navigational satellite system It unites (global navigation satellite system, GLONASS), Beidou satellite navigation system (beidou Navigation satellite system, BDS), quasi- zenith satellite system (quasi-zenith satellite System, QZSS) and/or satellite-based augmentation system (satellite based augmentation systems, SBAS).
Electronic equipment 100 realizes display function by GPU, display screen 194 and application processor etc..GPU is at image The microprocessor of reason connects display screen 194 and application processor.GPU is calculated for executing mathematics and geometry, is used for figure wash with watercolours Dye.Processor 110 may include one or more GPU, execute program instructions to generate or change display information.
Display screen 194 is for showing image, video etc..Display screen 194 includes display panel.Display panel can use liquid Crystal display screen (liquid crystal display, LCD), Organic Light Emitting Diode (organic light-emitting Diode, OLED), active matrix organic light-emitting diode or active-matrix organic light emitting diode (active-matrix Organic light emitting diode's, AMOLED), Flexible light-emitting diodes (flex light-emitting Diode, FLED), Miniled, MicroLed, Micro-oLed, light emitting diode with quantum dots (quantum dot light Emitting diodes, QLED) etc..In some embodiments, electronic equipment 100 may include 1 or N number of display screen 194, N For the positive integer greater than 1.
Electronic equipment 100 can be by ISP, camera 193, Video Codec, GPU, display screen 194 and at It manages device etc. and realizes shooting function.
ISP is used to handle the data of the feedback of camera 193.For example, opening shutter when taking pictures, light is passed by camera lens It is delivered on camera photosensitive element, optical signal is converted to electric signal, and camera photosensitive element passes to the electric signal at ISP Reason, is converted into macroscopic image.ISP can also be to the noise of image, brightness, colour of skin progress algorithm optimization.ISP can be with Exposure to photographed scene, the parameter optimizations such as colour temperature.In some embodiments, ISP can be set in camera 193.
Camera 193 is for capturing still image or video.Object generates optical imagery by camera lens and projects photosensitive member Part.Photosensitive element can be charge-coupled device (charge coupled device, CCD) or complementary metal oxide is partly led Body (complementary metal-oxide-semiconductor, CMOS) phototransistor.Photosensitive element turns optical signal It changes electric signal into, electric signal is passed into ISP later and is converted into data image signal.Data image signal is output to DSP by ISP Working process.Data image signal is converted into the RGB of standard, the picture signal of the formats such as YUV by DSP.In some embodiments, Electronic equipment 100 may include 1 or N number of camera 193, and N is the positive integer greater than 1.
Digital signal processor, in addition to can handle data image signal, can also handle it for handling digital signal His digital signal.For example, digital signal processor is used to carry out Fu to frequency point energy when electronic equipment 100 is when frequency point selects In leaf transformation etc..
Video Codec is used for compression of digital video or decompression.Electronic equipment 100 can be supported one or more Video Codec.In this way, electronic equipment 100 can play or record the video of a variety of coded formats, and such as: dynamic image is special Family's group (moving picture experts group, MPEG) 1, MPEG2, mpeg 3, MPEG4 etc..
NPU is neural network (neural-network, NN) computation processor, by using for reference biological neural network structure, Such as transfer mode between human brain neuron is used for reference, it, can also continuous self study to input information fast processing.Pass through NPU The application such as intelligent cognition of electronic equipment 100 may be implemented, such as: image recognition, recognition of face, speech recognition, text understanding Deng.
External memory interface 120 can be used for connecting external memory card, such as Micro SD card, realize that extension electronics is set Standby 100 storage capacity.External memory card is communicated by external memory interface 120 with processor 110, realizes that data store function Energy.Such as by music, the files such as video are stored in external memory card.
Internal storage 121 can be used for storing computer executable program code, and the executable program code includes Instruction.Processor 110 is stored in the instruction of internal storage 121 by operation, thereby executing the various functions of electronic equipment 100 Using and data processing.Internal storage 121 may include storing program area and storage data area.Wherein, storing program area Can storage program area, application program (such as sound-playing function, image player function etc.) needed at least one function etc.. Storage data area can store the data (such as audio data, phone directory etc.) etc. created in 100 use process of electronic equipment.This Outside, internal storage 121 may include high-speed random access memory, can also include nonvolatile memory, for example, at least One disk memory, flush memory device, generic flash memory (universal flash storage, UFS) etc..
Electronic equipment 100 can pass through audio-frequency module 170, loudspeaker 170A, receiver 170B, microphone 170C, earphone Interface 170D and application processor etc. realize audio-frequency function.Such as music, recording etc..
Audio-frequency module 170 is used to for digitized audio message to be converted into analog audio signal output, is also used for analogue audio frequency Input is converted to digital audio and video signals.Audio-frequency module 170 can be also used for audio-frequency signal coding and decoding.In some embodiments In, audio-frequency module 170 can be set in processor 110, or the partial function module of audio-frequency module 170 is set to processor In 110.
Loudspeaker 170A, also referred to as " loudspeaker ", for audio electrical signal to be converted to voice signal.Electronic equipment 100 can be with Music is listened to by loudspeaker 170A, or listens to hand-free call.
Receiver 170B, also referred to as " earpiece ", for audio electrical signal to be converted into voice signal.When electronic equipment 100 connects It answers a call or when voice messaging, it can be by the way that receiver 170B be answered voice close to human ear.
Microphone 170C, also referred to as " microphone ", " microphone ", for voice signal to be converted to electric signal.When making a phone call Or when sending voice messaging, voice signal can be input to microphone by mouth close to microphone 170C sounding by user 170C.At least one microphone 170C can be set in electronic equipment 100.In further embodiments, electronic equipment 100 can be set Two microphone 170C are set, in addition to collected sound signal, can also realize decrease of noise functions.In further embodiments, electronics is set Standby 100 can also be arranged three, four or more microphone 170C, realize that collected sound signal, noise reduction can also identify sound Directional recording function etc. is realized in source.
Earphone interface 170D is for connecting wired earphone.Earphone interface 170D can be usb 1 30, be also possible to Opening mobile electronic device platform (open mobile terminal platform, OMTP) standard interface of 3.5mm, the U.S. Cellular telecommunication industrial association (cellular telecommunications industry association of the USA, CTIA) standard interface.
Pressure signal can be converted into electric signal for experiencing pressure signal by pressure sensor 180A.In some implementations In example, pressure sensor 180A be can be set in display screen 194.There are many type of pressure sensor 180A, such as resistive pressure Sensor, inductance pressure transducer, capacitance pressure transducer, etc..Capacitance pressure transducer, can be including at least two Parallel-plate with conductive material.When effectively acting on pressure sensor 180A, the capacitor between electrode changes.Electronic equipment 100 determine the intensity of pressure according to the variation of capacitor.When there is touch operation to act on display screen 194, electronic equipment 100 is according to pressure Force snesor 180A detects the touch operation intensity.Electronic equipment 100 can also be believed according to the detection of pressure sensor 180A Number calculate touch position.In some embodiments, identical touch location, but the touch behaviour of different touch operation intensity are acted on Make, different operational orders can be corresponded to.Such as: when the touch operation for having touch operation intensity to be less than first pressure threshold value acts on When short message application icon, the instruction for checking short message is executed.When have touch operation intensity be greater than or equal to first pressure threshold When the touch operation of value acts on short message application icon, the instruction of newly-built short message is executed.
Gyro sensor 180B is determined for the athletic posture of electronic equipment 100.It in some embodiments, can be with Determine that electronic equipment 100 surrounds the angular speed of three axis (that is, x, y and z-axis) by gyro sensor 180B.Gyro sensors Device 180B can be used for shooting stabilization.Illustratively, when pressing shutter, gyro sensor 180B detection electronic equipment 100 is trembled Dynamic angle goes out the distance that lens module needs to compensate according to angle calculation, camera lens is allowed to offset electronic equipment by counter motion Stabilization is realized in 100 shake.Gyro sensor 180B can be also used for navigating, somatic sensation television game scene.
Baroceptor 180C is for measuring air pressure.In some embodiments, electronic equipment 100 passes through baroceptor The atmospheric pressure value that 180C is measured calculates height above sea level, auxiliary positioning and navigation.
Magnetic Sensor 180D includes Hall sensor.Electronic equipment 100 can use Magnetic Sensor 180D flip cover skin The folding of set.In some embodiments, when electronic equipment 100 is liding machine, electronic equipment 100 can be according to Magnetic Sensor The folding of 180D flip cover.And then according to the folding condition of the leather sheath detected or the folding condition of flip lid, setting flip lid is certainly The characteristics such as dynamic unlock.
Acceleration transducer 180E can detect the big of (the generally three axis) acceleration in all directions of electronic equipment 100 It is small.It can detect that size and the direction of gravity when electronic equipment 100 is static.It can be also used for identification electronic equipment posture, answer Switch for horizontal/vertical screen, the application such as pedometer.
Range sensor 180F, for measuring distance.Electronic equipment 100 can pass through infrared or laser distance measuring.? In some embodiments, photographed scene, electronic equipment 100 can use range sensor 180F ranging to realize rapid focus.
It may include such as light emitting diode (LED) and photodetector, such as photodiode close to optical sensor 180G. Light emitting diode can be infrared light-emitting diode.Electronic equipment 100 launches outward infrared light by light emitting diode.Electronics is set Standby 100 detect the infrared external reflection light from neighbouring object using photodiode.It, can be true when detecting sufficient reflected light Determining electronic equipment 100 nearby has object.When detecting insufficient reflected light, electronic equipment 100 can determine electronic equipment 100 do not have object nearby.Electronic equipment 100 can use to be pasted close to optical sensor 180G detection user's hand-hold electronic equipments 100 Nearly ear call, so that automatic distinguishing screen achievees the purpose that power saving.It can also be used for leather sheath mode, mouth close to optical sensor 180G Bag mode automatic unlocking and screen locking.
Ambient light sensor 180L is for perceiving environmental light brightness.Electronic equipment 100 can be according to the environment bright of perception Spend 194 brightness of automatic adjusument display screen.Automatic white balance adjustment when ambient light sensor 180L can also be used for taking pictures.Environment light Sensor 180L can also cooperate with close to optical sensor 180G, electronic equipment 100 be detected whether in pocket, with false-touch prevention.
Fingerprint sensor 180H is for acquiring fingerprint.The fingerprint characteristic that electronic equipment 100 can use acquisition realizes fingerprint Unlock accesses application lock, and fingerprint is taken pictures, fingerprint incoming call answering etc..
Temperature sensor 180J is for detecting temperature.In some embodiments, electronic equipment 100 utilizes temperature sensor The temperature of 180J detection, executes Temperature Treatment strategy.For example, when the temperature sensor 180J temperature reported is more than threshold value, electronics Equipment 100 executes the performance for reducing the processor being located near temperature sensor 180J, implements Thermal protection to reduce power consumption.? In other embodiments, when temperature is lower than another threshold value, electronic equipment 100 heats battery 142, leads to electricity to avoid low temperature The abnormal shutdown of sub- equipment 100.In some other embodiment, when temperature is lower than another threshold value, electronic equipment 100 is to battery 142 output voltage executes boosting, to avoid shutting down extremely caused by low temperature.
Touch sensor 180K, also referred to as " touch panel ".Touch sensor 180K can be set in display screen 194, by touching It touches sensor 180K and display screen 194 forms touch screen, also referred to as " touch screen ".Touch sensor 180K acts on it for detecting On or near touch operation.The touch operation that touch sensor can will test passes to application processor, to determine touching Touch event type.Visual output relevant to touch operation can be provided by display screen 194.In further embodiments, it touches Touching sensor 180K also can be set in the surface of electronic equipment 100, different from the location of display screen 194.
The available vibration signal of bone conduction sensor 180M.In some embodiments, bone conduction sensor 180M can be with Obtain the vibration signal of human body part vibration bone block.Bone conduction sensor 180M can also contact human pulse, receive blood pressure and jump Dynamic signal.In some embodiments, bone conduction sensor 180M also can be set in earphone, be combined into bone conduction earphone.Sound Frequency module 170 can parse voice based on the vibration signal for the part vibration bone block that the bone conduction sensor 180M is obtained Signal realizes phonetic function.The blood pressure jitter solution that application processor can be obtained based on the bone conduction sensor 180M Heart rate information is analysed, realizes heart rate detecting function.
Key 190 includes power button, volume key etc..Key 190 can be mechanical key.It is also possible to touch-key. Electronic equipment 100 can receive key-press input, generate key letter related with the user setting of electronic equipment 100 and function control Number input.
Motor 191 can produce vibration prompt.Motor 191 can be used for calling vibration prompt, can be used for touching vibration Dynamic feedback.For example, acting on the touch operation of different application (such as taking pictures, audio broadcasting etc.), different vibrations can be corresponded to Feedback effects.The touch operation of 194 different zones of display screen is acted on, motor 191 can also correspond to different vibrational feedback effects. Different application scenarios (such as: time alarm receives information, alarm clock, game etc.) different vibrational feedback effects can also be corresponded to Fruit.Touch vibrational feedback effect can also be supported customized.
Indicator 192 can be indicator light, can serve to indicate that charged state, electric quantity change can be used for instruction and disappear Breath, missed call, notice etc..
SIM card interface 195 is for connecting SIM card.SIM card can be by being inserted into SIM card interface 195, or from SIM card interface 195 extract, and realization is contacting and separating with electronic equipment 100.Electronic equipment 100 can support 1 or N number of SIM card interface, N For the positive integer greater than 1.SIM card interface 195 can support Nano SIM card, Micro SIM card, SIM card etc..The same SIM Card interface 195 can be inserted into multiple cards simultaneously.The type of multiple cards may be the same or different.SIM card interface 195 Different types of SIM card can also be compatible with.SIM card interface 195 can also be with compatible external storage card.Electronic equipment 100 passes through SIM Card and network interaction realize the functions such as call and data communication.In some embodiments, electronic equipment 100 uses eSIM, That is: embedded SIM card.ESIM card can cannot separate in electronic equipment 100 with electronic equipment 100.
The software systems of electronic equipment 100 can use layer architecture, event-driven framework, micronucleus framework, micro services frame Structure or cloud framework.The embodiment of the present invention by taking the android system of layer architecture as an example, exemplary illustration electronic equipment 100 it is soft Part structure.
Fig. 2 is the software architecture diagram of the electronic equipment 100 of the embodiment of the present invention.
Software is divided into several layers by layer architecture, and each layer has clearly role and the division of labor.Pass through between layers Software interface communication.In some embodiments, android system is divided into four layers, from top to bottom respectively application layer, answered With process block rack-layer, (Android runtime) and system library and inner nuclear layer when Android is run.
Application layer may include a series of application packages.
As shown in Fig. 2, application package may include camera, and picture library, calendar, call, map, navigation, WLAN, bluetooth, Music, video, the application programs such as short message.
Application framework layer provides Application Programming Interface (application for the application program of application layer Programming interface, API) and programming framework.Application framework layer includes some functions predetermined.
As shown in Fig. 2, application framework layer may include window manager, Content Provider, view system, phone pipe Manage device, resource manager, notification manager etc..
Window manager is for managing window writing routine.The available display screen size of window manager, judges whether there is shape State column, lock-screen, screen printing etc..
Content Provider is used to store and obtains data, and accesses these data by application program.The data It may include video, image, audio, the phone dialed and answered, browsing history and bookmark, telephone directory etc..
View system includes visible controls, such as the control of display text, shows the control etc. of picture.View system is available In building application program.What display interface can be made of one or more views.E.g., including the display of short massage notice icon Interface may include the view for showing text and the view for showing picture.
Telephone supervisor is for providing the communication function of electronic equipment 100.Such as talking state management (including connect, It hangs up).
Resource manager provides various resources, such as localized strings for application program, icon, picture, topology file, Video file etc..
Notification manager allows application program to show notification information in status bar, can be used for conveying and informs type Message, can be to disappear, without user's interaction automatically after short stay.For example notification manager be used to inform that downloading is completed, and disappear Breath prompting etc..Notification manager, which can also be, appears in the logical of system head status bar with chart or scroll bar textual form Know, for example, running background application program notice, can also be occur notice on the screen in the form of dialog box.Such as Text information is prompted in status bar, issues prompt tone, vibration of electronic equipment, indicator light flashing etc..
Android Runtime includes core library and virtual machine.Android runtime be responsible for Android system scheduling and Management.
Core library includes two parts: a part is the power function that java language needs to call, and another part is Android Core library.
Application layer and application framework layer operate in virtual machine.Virtual machine is by application layer and application program It is binary file that the java file of ccf layer, which executes,.Virtual machine is used to execute the management of Object Life Cycle, stack management, line Thread management, safety and the functions such as abnormal management and garbage reclamation.
System library may include multiple functional modules.Such as: surface manager (surface manager), media library (Media Libraries), three-dimensional graph process library (such as: OpenGL ES), 2D graphics engine (such as: SGL) etc..
Surface manager provides 2D and 3D figure layer for being managed to display subsystem for multiple application programs Fusion.
Media library supports a variety of common audios, video format playback and recording and static image file etc..Media library It can support a variety of audio/video coding formats, such as: MPEG4, H.264, MP3, AAC, AMR, JPG, PNG etc..
Three-dimensional graph process library is for realizing 3-D graphic drawing, image rendering, synthesis and figure layer process etc..
2D graphics engine is the drawing engine that 2D draws.
Inner nuclear layer is the layer between hardware and software.Inner nuclear layer includes at least display driving, webcam driver, and audio is driven It is dynamic, sensor driving.
A kind of schematic diagram of network architecture 30 provided by the embodiments of the present application is shown referring to Fig. 3, Fig. 3.As shown in figure 3, The network architecture 30 includes electronic equipment 100, server 200.Wherein, browser application can be installed on electronic equipment 100 Program, the browser application can be used as the client of server, and by network and server communication, which can be The combination of local area network or internet or both.The electronic equipment 100 can be general purpose personal computer, handheld device, machine top Terminal, mobile phone, PDA etc..The server 200 can be one, be also possible to multiple, be not limited thereto.When the money on webpage When source data is stored on multiple servers 200, electronic equipment 100 needs to access multiple servers 200 to obtain resource data. For example, web data can store in the link that on web page server, in web data may include picture resource, electronic equipment 100 can be according to the picture servers where the links and accesses picture resource of picture resource, to obtain picture resource.It is electric when being located at When the user of sub- equipment 100 will obtain data from server, which can use browser, and browser may be mounted at local Client or its distal end.Browser is sent out to server by network and is requested, it is desirable that refers to from the acquisition of the data storage device of server Determine content, server responds the request of browser, and sends the specified content to browser by network.
Wherein, when electronic equipment 100 accesses server by browser, HTTP (hyper text can be followed Transfer protocol, hypertext transfer protocol) communication mechanism.HTTP is a kind of network being most widely used in interconnection How agreement, http protocol define client (i.e. browser application on electronic equipment 100) from server requested webpage How Webpage is sent to client by the page and server, and http protocol uses request/response model.
The http protocol communication mechanism of web page browsing in the embodiment of the present application is described below.
Http protocol define electronic equipment how from web server request Webpage and server how net The page page sends electronic equipment to, and http protocol uses request/response model.During primary complete web page browsing, It will comply with http protocol between web browser, with web page server and complete following 4 steps:
(1) TCP connection is established;
Before carrying out web page browsing, web browser first has to establish connection by network and web page server, the company It is completed when connecing by TCP, the agreement and IP agreement construct Internet, i.e. TCP/IP protocol suite jointly.HTTP is to compare TCP Higher level application layer protocol, according to rule, only underlying protocol establishes the connection that just can be carried out upper-layer protocol later, because This first has to establish TCP connection, and the port numbers of general TCP connection are 80.
(2) electronic equipment sends web-page requests to web page server;
Once establishing TCP connection, electronic equipment can send web-page requests to web page server, and web-page requests include: Method, uniform resource locator (URL), protocol version, request header and the request data of request.Wherein, requesting method has GET, POST, HEAD, PUT, DELETE, OPTIONS, TRACE, CONNECT, and when web page browsing, it is general only to use GET method. URL is also referred to as web page address, is the resource address of standard on internet.Request header by key/value to forming, every row one Right, keyword and value answer English colon ": " to separate.Request header notifies server about the information of client request, typical Request header have:
User-Agent: the browser type of request is generated;
Accept: the identifiable content type list of client;
Host: the host name of request allows multiple domain names to exist together an IP address, i.e. fictitious host computer.
It uses in request data no longer GET method, but is used in POST method.
(3) web page server receives request and back page data;
Web page server analyzing web page request message, Location Request resource, and page data is write into TCP socket, by Client is read.The page data that web page server returns is made of statusline, response head, null and 4 part of response data.
(4) web browser is according to the page data received, load and the display page.
Currently, electronic equipment can browse the resource information on internet by browser, which includes text Resource and picture resource etc..Electronic equipment can first obtain web data from web page server, then according in web data Resource information label (such as uniform resource locator (uniform resource locator, URL)), access resource letter Resource Server where ceasing obtains literal resource and picture resource in webpage.As shown in Figure 4 A, it is opened in browser normal When mode, electronic equipment shows that browser opens the Webpage 410 of webpage (such as News Network).Wherein, the Webpage It include text and picture in 410.Wherein, include page layout information in the web data that above-mentioned electronic equipment is got with And the label of resource information.Electronic equipment can determine that picture is shown according to the page layout information (such as cascading style sheets) Position of the region in the page, gets the size of picture from picture resource, and according to the position of picture display area and The size of picture carries out typesetting to text and picture and then shows web interface 410 as shown in Figure 4 A.
Currently, for some picture display areas in the page, for example, the picture display area 411 in Fig. 4 A, in webpage Page layout information only include the display of the picture display area (such as picture display area 411) in Webpage 410 Position, and in the not specified picture display area picture display size.Resource pair is shown when electronic equipment gets the picture When the picture resource answered, which can be shown and be shown in the picture according to the size of picture in picture resource by electronic equipment In region, wherein the display effect of the picture is referred to such as the picture display area 411 in Fig. 4 A.
Page for some picture display areas in the page, for example, the picture display area 416 in Fig. 4 A, in webpage It includes the display position of the picture display area (such as picture display area 416) in Webpage 410 that face, which is laid out letter information, And specify the width of picture display area.When electronic equipment or area show the corresponding picture resource of resource to the picture region When, electronic equipment can determine the display of the final picture according to the size of picture in picture resource and the width of picture region The picture according to display size, is shown in the picture display area by size, then, electronic equipment.Wherein, the picture is aobvious Show that effect is referred to such as the picture display area 416 in Fig. 4 A.For example, being specified in the page layout information of Webpage 410 The width of picture display area 416 is 400 pixels (pixel, px), corresponds to the original of picture in the picture display area 416 Having a size of 750*350px, i.e. width is 750px, a height of 350px.When the display width of the picture needs and picture display area 416 When consistent, electronic equipment can according to the width of the picture display area 416 by the size scaling of the picture to 400*187px, Then, electronic equipment can show the picture in the picture display area 416 according to the size of 400*187px.
Due to the limitation of network flow and network speed, electronic equipment can open according to the demand of user browser without artwork Formula.After opening browser is without chart-pattern, when electronic equipment opens webpage by browser again, electronic equipment can be to webpage Server sends web-page requests, and web page server can return to webpage information electron equipment, and electronic equipment can parse webpage letter Picture element in breath.Since browser opens no chart-pattern, browser can intercept and correspond to picture resource for picture element Request.Since browser has intercepted the request for picture resource, electronic equipment can not get picture resource, also just can not Get the size of original image in picture display area.Therefore, Webpage occur the problem that
1, page layout information and the not specified picture for some picture display areas in Webpage, in webpage The display size of picture in display area, after browser is opened without chart-pattern, electronic equipment can be in the picture display area The occupy-place figure of upper 1 pixel size of display does not show occupy-place figure, for example, the picture display area 411, picture in Fig. 4 A are aobvious Show region 413, picture display area 414, picture display area 415, is opened in browser and reopen the webpage without chart-pattern Afterwards, it can show the occupy-place figure an of pixel size or not show occupy-place figure.In this way, it may appear that situations such as page text misplaces.
Illustratively, A, Fig. 4 B, Fig. 4 A show electronic equipment under browser normal mode and pass through browser referring to figure 4. The Webpage of opening, Fig. 4 B are shown after browser opens without chart-pattern, webpage page that electronic equipment is opened by browser Face.Wherein, the network address of webpage shown in Fig. 4 A and Fig. 4 B is identical.As shown in Fig. 4 A, 4B, due to not specified figure in page layout information Picture display area 411, picture display area 413, picture display area 414, the respective corresponding diagram in picture display area 415 in 4A The display size of piece.When browser unlatching loads webpage again without chart-pattern, as shown in Figure 4 B, electronic equipment is shown in picture Region 411, picture display area 413, picture display area 414, picture display area 415 neither show respectively corresponding picture, Occupy-place figure is not shown yet.Therefore, the size of picture display area becomes 1 pixel position size, and in page layout information, it searches The position of rope frame 412 is determined according to the position of picture display area 411, for example, the search box 412 and picture display area It is separated by 10 pixel positions, when the size of picture display area 411 becomes 1 pixel position, as shown in Figure 4 B, the search box 412 Position in Webpage 430 can Xiang Zuoyi.Therefore, the text in the search box in Fig. 4 A can be as shown in Figure 4 B to left avertence It moves, has upset the layout of the page, influence visual experience when user browses webpage.
2, for some picture display areas in Webpage, it is aobvious that the page layout information in webpage only specifies picture Show the width in region.After browser is opened without chart-pattern, height of the electronic equipment since picture display area can not be got, Therefore, the occupy-place figure not of uniform size with picture under browser normal mode can be shown in picture display area.
Illustratively, Fig. 4 A shows the Webpage that electronic equipment is opened by browser under browser normal mode, Fig. 4 B is shown after browser opens without chart-pattern, Webpage that electronic equipment is opened by browser.Wherein, Fig. 4 A and figure The network address of webpage shown in 4B is identical.As shown in Fig. 4 A, 4B, due to only specifying picture viewing area in Fig. 4 A in page layout information The width (such as 400px) in domain 416, after browser is opened without chart-pattern, electronic equipment is shown due to that can not get picture The height in region, as shown in Figure 4 B, electronic equipment can show default height (such as 300px) on picture display area 416 Occupy-place figure, wherein picture shows dimensions as 400*187px, picture shown in Fig. 4 B in picture display area 416 shown in Fig. 4 A Occupy-place figure shows dimensions as 400*300px in display area 416, in Fig. 4 B in picture display area 416 occupy-place figure display Height and the display height of picture in picture display area 416 in Fig. 4 A are inconsistent.The layout for having upset the page, affects user Browse visual experience when webpage.
Based on the above issues, this application provides a kind of Webpage display process, after browser is opened without chart-pattern, electronics For equipment when opening webpage by the browser, electronic equipment can obtain page layout information and text from web page server While resource, from previous section data (such as the preceding 1K of picture resource information obtained on web page server in picture resource Byte data), wherein the previous section data in the picture resource include the size of original image.Electronic equipment can root According to the size and picture display area size information of original image, the display ruler of occupy-place figure in picture display area is determined It is very little.In this way, can make the browser of electronic equipment under no chart-pattern, the imposition layout of Webpage is consistent with normal mode, Improve the experience of user.
A kind of Webpage display process provided by the embodiments of the present application is illustrated below with reference to the attached drawing of the application.
A kind of flow diagram of Webpage display process provided by the embodiments of the present application is shown referring to Fig. 5, Fig. 5.Wherein, Web page server and picture servers in Fig. 5 can be two different servers, be also possible to the same server.Such as Fig. 5 It is shown, this method comprises:
S501, electronic equipment receive the first input.S502, electronic equipment open the nothing of browser in response to the first input Chart-pattern.
Wherein, which operates to open browser without the input of chart-pattern.For example, first input can be figure For the input operation 632 (such as click) of no chart-pattern button 631 in 6C.
Illustratively, as shown in Figure 6A, electronic equipment shows the interface 610 of main screen on touch screen, the interface 610 Show that the page for being placed with application icon, the page include multiple application icons (for example, weather application icon, stock Application icon, calculator application icon, setting application icon, mail applications icon, Alipay application icon, facebook application drawing Mark, browser application icon 611, picture library application icon, music application icon, Video Applications icon, application shop icon).It is more It further include page indicator below a application icon, to show the positional relationship of the page currently shown Yu other pages.The page There are multiple tray icons (such as dialing application icon, Information application icon, contact application icon, camera below indicator Application icon), tray icon can keep display in page switching, and the page may include multiple application icons and page instruction Symbol;Page indicator may not be a part of the page, individualism, and above-mentioned tray icon is also optional, the application reality It is without limitation to apply example.
Electronic equipment can receive user and operate 612 (such as clicking), response for the input of browser application icon 611 612 are operated in the input, electronic equipment can show main browser page face 620 as shown in Figure 6B.
As shown in Figure 6B, the browser interface 620 display include search input frame 621, search button 622, scanning by Button 623, navigation bar 624.Wherein, navigation bar 624 includes switching page up button, switches lower one page button, returns to browser Home button, more buttons 625.Wherein, which is used to receive the network address or search words of user's input.
Electronic equipment can receive user for the input operation 626 (such as click) of more buttons 625, in response to the needle 626 are operated to the input of more buttons 625, electronic equipment can show window 630 shown in Fig. 6 C.
As shown in Figure 6 C, the window 630 display includes that Night is switched, opened without chart-pattern switch 631, desktop UA It closes, seamless browsing switch, addition bookmarks button, bookmark/history button, setting button, refresh web page buttons.
Electronic equipment can receive user for the input operation 632 (such as click) without chart-pattern switch 631, response In the input operate 632, electronic equipment can open browser without chart-pattern.Wherein, after browser is opened without chart-pattern, When electronic equipment opens webpage by browser, electronic equipment does not show the picture on webpage, and shows and picture ruler on webpage Very little identical occupy-place figure.Above-mentioned first input can be the input operation 632 for no chart-pattern switch 631, but be not limited to This, can also be other inputs, such as input by voice, open browser without chart-pattern.
S503, electronic equipment receive the second input.S504, it is inputted in response to second, electronic equipment is sent out to web page server Send web-page requests.
Wherein, wherein the second input can be in Fig. 6 D in user after inputting webpage network address, for search button 622 Input operate 633 (such as clicking), without being limited thereto, the second input can also be user in other Webpages for webpage The input of link operates (such as clicking), and the second input can also be that user requests access to other input operations of webpage, herein It repeats no more.Wherein, in the embodiment of the present application, the webpage that user requests access to can be referred to as the first webpage, subsequent implementation Electronic equipment that is to say the data of first webpage to the web data of the request of web page server in example.
Illustratively, as shown in Figure 6 D, no chart-pattern switch 631, due to receive user input operate 632 (such as Click), switch to opening state, i.e., electronic equipment have turned on browser without chart-pattern.Electronic equipment can receive user and exist Search for the webpage network address (for example, " www.hwxinwen.com ") of input frame input.
Electronic equipment can receive user and operate 633 (such as clicking) for the input of search button 622, defeated in response to this Enter operation 633, electronic equipment can first parse the webpage network address and correspond to IP address, get to the corresponding IP address of webpage network address it Afterwards, electronic equipment can by browser application by Transmission Control Protocol with a random port (such as the port in Transmission Control Protocol Random one in 1024 to 65535) it is requested to the 80 ports initiation TCP connection of the web page program of web page server.Webpage clothes Business device can establish TCP connection according to Transmission Control Protocol and electronic equipment after receiving the TCP connection request of electronic equipment transmission.
After establishing TCP connection, electronic equipment can to web page server send web-page requests (such as based on HTTP assist Discuss the HTTP request of cluster).The web-page requests are for electronic equipment to web server request web data (such as hypertext markup Language (hyper text markup language, HTML) file).
The web-page requests of S505, web page server response electronic equipment, return to web data to electronic equipment.
After web page server receives the web-page requests (such as HTTP request) of electronic equipment, web page server parsing should HTTP request, Location Request resource, and corresponding web data (such as index.html file) is write into TCP socket, it sends out Electronic equipment is given, is read by the browser on electronic equipment.It wherein, include textual resources, picture mark in the web data Sign information, label information of page layout information (such as CSS etc.) etc..
S506, electronic equipment obtain the label information of picture in web data.
Wherein, by taking the response message of HTTP request as an example, the web data is by statusline, response head, null and response 4 part of data composition.Electronic equipment can be parsed first after the web data for receiving server return by browser Statusline, check show request whether successful state code.Then, electronic equipment passes through each response of browser resolves Head, head response inform that the following are the character set of the html document of several bytes and document.Finally, electronic equipment is read by browser Take response data, wherein include textual resources, the label information of picture, page layout letter in the response data of the web data Cease the label information etc. of (such as CSS etc.).Electronic equipment can obtain the label information and page of picture from the response data The label information of face layout information.Wherein, the label information of picture includes the address information of picture servers locating for picture.Example Such as, the label of picture can be indicated with uniform resource locator (uniform resource locator, URL).Wherein, URL is consisted of three parts: resource type, host domain name, the resource file name for storing resource.Storage resource host domain name be The address information of picture servers.Example is used only for explaining the application, should not constitute restriction.
Wherein, the label information of picture is not limited to one, can be multiple, and the label information of page layout information is also unlimited In one, can be multiple.When electronic equipment is often resolved to the label information of a page layout information by browser, electricity Sub- equipment can determine the corresponding service of the label information of the page layout information according to the label information of page layout information Device, and the request for obtaining page layout information is sent to the server, which receives the acquisition page of electronic equipment transmission After the request of face layout information, the request of page layout information can be sent to electronic equipment.Wherein, when electronic equipment passes through When browser is often resolved to the label information of a picture, following step S507 is carried out.
S507, electronic equipment send the first request to picture servers, for requesting the label information of picture to correspond to picture Previous section data in resource.
Wherein, the previous section data in the picture resource refer in picture resource since the 1st byte to lth byte Data, the length of the previous section data in picture resource are specified data length, i.e., the value of L is specified data length.Wherein, It include the dimension information of picture in previous section data in picture resource.It include picture in embodiments herein The data of dimension information can be said to the first instruction information, in other words, the first instruction information can be in the picture Previous section data, it is without being limited thereto, first instruction information can also be that other include the data of dimension of picture information.
Electronic equipment, can be true according to the label information of picture in getting web data after the label information of picture The picture servers where picture resource are made, and establish connection with picture servers.Wherein, connection is established with picture servers Process can establish the process of connection with reference to aforementioned electronic devices and web page server, and details are not described herein.
Electronic equipment is after establishing connection with picture servers, since the browser of electronic equipment opens no artwork Formula, electronic equipment can send the request for obtaining the header data of picture resource resource to picture servers.Wherein, the head number According to the data that can be the specified data length since the 1st byte in picture resource data.For example, it is preferable to, specify data long Degree can be 1K byte (Bytes), and the header data of picture resource can be the data of the preceding 1K byte in picture resource data, It wherein, include the dimension information of picture in the preceding 1K byte data in the picture resource data.
Illustratively, the label of picture or the label of page layout information can use uniform resource locator (uniform Resource locator, URL) it indicates.Wherein, URL is consisted of three parts: resource type, store resource host domain name, Resource file name.The resource type of picture can have bitmap (bitmap, BMP), portable network picture (prtable Network graphics, PNG), joint photographic experts group (joint photographic experts group, JPEG/ JPG) etc..
Wherein, the format of BMP file can refer to Fig. 7, as shown in fig. 7, BMP file may include BMP file header (bitmap file header), message bit pattern head (bitmap information), palette (color palette), position Diagram data (bitmap data) field.Wherein, the size of the BMP file header is 14 bytes, is provided with format, the number of BMP file According to information such as sizes.It successively include the data segment and its size of following information: message bit pattern head size in the message bit pattern head Field (4 byte), picture traverse field (4 byte), picture altitude field (4 byte), planes of color digital section (2 byte), ratio Special number/pixel field (2 byte), Image Data Compression type field (4 byte), the size field of image (4 byte), horizontal point Resolution field (4 byte), vertical resolution field (4 byte), color index digital section (4 byte), important color index number Field (4 byte).The palette is optional field in BMP file format, when indicating image using index in BMP file, Palette is exactly the mapping table for indexing color corresponding with the image.The bitmap data is the image data of picture.From such as Fig. 7 Shown in the format of BMP file can be seen that the dimension information of BMP type picture (data and image of picture traverse field be high Spend the data of field) it may be embodied in preceding 54 bytes in BMP file.BMP file format shown in fig. 7 is only one Kind example should not constitute restriction for explaining the application.
The format of PNG file can refer to Fig. 8, as shown in figure 8, PNG file successively may include PNG file from the beginning Mark, file header data block, palette data block, ancillary chunk, 1~video data block of video data block N, image terminate to count According to block etc..The ancillary chunk can be one or more, be also possible to non-essential.Wherein, the size of PNG file mark is 8 bytes, for identifying PNG file type.File header data block includes data length field (4 words of file data blocks Section), data block type field (4 byte), picture traverse field (4 byte), picture altitude field (4 byte), picture depth word Section (1 byte), color type field (1 byte), compression method field (byte), filtered method field (1 byte), interlacing are swept Retouch method (1 byte), Cyclic Redundancy Code (4 byte).It can be seen that PNG type map from the format of PNG file as shown in Figure 7 The dimension information (data of picture traverse field and the data of picture altitude field) of piece may be embodied in preceding 33 in PNG file In a byte.BMP file format shown in fig. 8 is only a kind of example, for explaining the application, should not constitute restriction.
The format of JPG file can refer to Fig. 9, as shown in figure 9, JPG file successively may include that image is opened from the beginning Beginning field (SOI) field, image recognition information (APP0) field, quantization table (DQT) field, picture frame start (SOF0) field, Huffman table (DHT) field, scanning start (SOS) field, the compressed data of image (scanData) field, image and terminate (EOI) field.Wherein, image starts (SOI) field 2 bytes of occupancy.Image recognition information field occupies 18+3n byte, In, n is the pixel quantity of thumbnail, does not have thumbnail in general JPG file, and n takes 0, i.e. image recognition information field occupies 18 bytes.Quantifying the bytes range that literary name section occupies is 134 bytes~520 bytes.Picture frame starts field and occupies 16 bytes, In, picture frame start the byte number of the subfield that field includes from head to tail portion and its occupancy for label code field (2 byte), Data segment, length field (2 byte), each data sample digit field (1 byte), picture altitude field (2 byte), image is wide (it is horizontal that color component ID accounts for 1 byte, color component for degree field (2 byte), color component number (1 byte), 1 field of color component The quantization table id that decimation factor accounts for 4 bits, the color component Vertical Sampling factor accounts for 4 bits, uses accounts for 1 byte, accounts for 3 bytes altogether), (color component ID accounts for 1 byte to 2 field of color component, the color component level sampling factor accounts for 4 bits, color component Vertical Sampling The quantization table id that the factor accounts for 4 bits, uses accounts for 1 byte, accounts for 3 bytes altogether), 3 field of color component (color component ID account for 1 byte, The quantization table id that the color component level sampling factor accounts for 4 bits, the color component Vertical Sampling factor accounts for 4 bits, uses accounts for 1 word Section, accounts for 3 bytes altogether).Wherein, such as Fig. 9 as can be seen that the dimension information of JPG type picture be included in picture frame start in field, The offset bytes range that picture frame starts the head beginning of the end position distance JPG file of field is 170 bytes~556 words Section.Therefore, the dimension information (data of picture traverse field and the data of picture altitude field) of JPG type picture may include In preceding 556 bytes in JPG file.JPG file format shown in Fig. 9 is only a kind of example, for explaining this Shen Please, restriction should not be constituted.
Wherein, above-mentioned picture file type format is used only for illustratively explaining the application, should not constitute restriction.Having During body is realized, picture file type format is not limited to above-mentioned BMP file type, PNG file type, JPG file type, can be with There are other picture file types, will not repeat them here.
Electronic equipment can be according to the host domain of storage resource in the label information (such as URL of picture resource) of picture Name, determines the corresponding picture servers of the picture resource.Electronic equipment can be sent out according to resource file name to the picture servers Picture acquisition request is sent, includes the resource file name of the picture and the data segments of picture resource in the picture acquisition request Information (such as preceding 1K byte data of picture resource).Wherein, illustratively, the dimension of picture of above-mentioned BMP type shown in Fig. 7 Information is in preceding 54 bytes of BMP file, and the dimension of picture information of above-mentioned PNG type shown in Fig. 8 is 33 before PNG file In a byte, the dimension of picture information of above-mentioned JPG type shown in Fig. 9 is in preceding 556 bytes of JPG file, when electronics is set When standby previous section data (data of 1K byte before such as) for obtaining picture resource, the available ruler to picture of electronic equipment Very little information.
In a kind of possible situation, after electronic equipment gets the label of picture, needle is sent to picture servers Before the request of previous section data in picture resource, whether it includes picture that electronic equipment may determine that in picture tag Dimension information, if so, electronic equipment generates identical as the dimension of picture according to the dimension of picture information for including in picture tag Occupy-place figure, and combine page layout information, which is shown into picture display area corresponding in the picture.If it is not, then Electronic equipment can send the request of the header data for picture resource to picture servers.Wherein, the head of the picture resource Portion's data refer to that from the beginning head starts to calculate the data segment for having specified data length in picture resource.
In one possible implementation, include the file type of picture in the picture tag, obtained in electronic equipment After getting picture tag, electronic equipment can obtain the file type of picture from picture tag, and then, electronic equipment can be with According to the file type of picture, specified data length corresponding with the file type of the picture is determined.Wherein, different files classes The corresponding specified data length of type is different.Then, before electronic equipment can be directed in picture resource to picture servers transmission The request of facial divided data, wherein should include specified data length for the request of the previous section data in picture resource Information.Picture servers send the specified number in front in the picture resource after receiving picture resource request, to electronic equipment According to the data of length.In this way, electronic equipment can be according to the file type of picture, to determine the picture obtained from server money The data volume in source saves the flow of electronic equipment while guaranteeing to get the dimension information of picture.
Illustratively, pair for the specified data length that electronic equipment needs to obtain in the file type of picture and picture resource Should be related to can be as shown in table 1 below:
Table 1
Picture file type The specified data length for needing to obtain
BMP 60 bytes
PNG 40 bytes
JPG 1K byte
By upper table 1 it is found that the corresponding specified data length of BMP file type is 60 bytes, the corresponding specified data of PNG are long Degree is 40 bytes, and the corresponding data length of JPG file is 1K byte.For example, the file type that electronic equipment gets picture 1 is PNG, since the corresponding specified data length of PNG file type is 40 bytes, electronic equipment can be sent for 1 corresponding diagram of picture To picture servers, picture servers are upon receiving a request, right by picture 1 for the request of the data of 40 bytes of front in piece resource The data of 40 bytes of front in picture resource are answered to be sent to electronic equipment.Electronic equipment can out of this picture resource front 40 words Joint number parses the dimension information of picture 1 in.Above-mentioned example is used only for explaining the application, should not constitute restriction.
S508, picture servers send the previous section data in picture resource to electronic equipment.
Picture servers, can be according to the money of the picture after receiving the request of acquisition picture of electronic equipment transmission Source filename, determines storage location of the picture resource in picture servers, and according to picture resource request in it is specified Data length (such as 1K byte, specify the data of data length to be sent to electronic equipment front in the picture resource.Wherein, It includes the dimension information of picture that the data of data length are specified in front in the picture resource.
S509, electronic equipment from picture resource in previous section Data Data obtain picture dimension information.
Electronic equipment is being got in picture resource after previous section data, is parsed this and is referred to front face score in picture resource According to finding picture traverse field and picture altitude field from the previous section data.Then, electronic equipment is from picture traverse The dimension information (width of height and picture including picture) of picture is got in field and picture altitude field.
S510, electronic equipment generate occupy-place figure identical with the size of picture, and be shown according to the dimension information of picture The corresponding picture display area of picture.
Occupy-place figure identical with dimension of picture, electronics can be generated after getting the dimension information of picture in electronic equipment Equipment can show the page of the first webpage, and according to page layout information, which is shown the figure in the first webpage The corresponding picture display area of piece.Wherein, which can be the picture of pure color, for example, the color of the occupy-place figure can be Grey is also possible to other colors, is not limited thereto.
Illustratively, as illustrated in fig. 6e, it opens for electronic equipment in the embodiment of the present application in browser and is opened without chart-pattern The webpage of network address " www.hwxinwen.com ", wherein entitled " News Network " of the first webpage.Wherein, electronic equipment is clear Look under device normal mode open should the Webpage of " News Network " can be as shown in above-mentioned Fig. 4 A.Wherein, electronic equipment is by obtaining Any one picture tag is taken on Webpage to correspond to picture resource header data, the available dimension information to the picture, from And occupy-place figure identical with the size of the picture can be generated.It is shown when the picture not specified in page layout information corresponds to picture When the size in region, occupy-place figure identical with the size of the picture can be shown in the picture display area by electronics also equipment.
For example, the size of not specified picture display area 641 in page layout information, the size of picture display area 643, The size of picture display area 645, the size of picture display area 647, the size of picture display area 649.Electronic equipment can To get the dimension information of original image in picture display area 641, then generate with it is original in the picture display area 641 The identical occupy-place figure of size of picture (picture in the picture display area 411 with reference to shown in Fig. 4 A), is shown in the picture and shows In region 641.Same mode, electronic equipment can be shown in picture display area 643 with the picture display area 643 in The occupy-place figure of the identical size of original image shows the occupy-place figure of size identical as its original image in picture display area 645, The occupy-place figure that identical with its original image size is shown in picture display area 647, in picture display area 649 display and The occupy-place figure of the identical size of its original image.
In a kind of possible situation, in electronic equipment according to the dimension information of picture, generate identical as the size of picture Occupy-place figure before, the page layout information of the available webpage of electronic equipment, electronic equipment may determine that page layout information In whether only specify the width that the picture corresponds to picture display area, if so, electronic equipment is according to the picture display area Width, by the occupy-place figure scaling in the display area of picture.Wherein, electronic equipment can be obtained from above-mentioned web data The label (such as URL) of page layout information can be got from web data to page layout information or electronic equipment, According to the label of page layout information, the page layout can be obtained from the corresponding server of label of the page layout information Information.In this way, electronic equipment according to the size of original image after the occupy-place figure for generating same size, in conjunction with page layout information Constraint occupy-place figure is shown on Webpage, can make to show under no chart-pattern lower page typesetting effect and browser normal mode Show that the page composition of original image is identical, improves user experience.
Illustratively, as illustrated in fig. 6e, the width that picture display area 646 is only specified in page layout information is 400px, the size of original image is 750*350px in picture display area 646, and electronic equipment can be according to picture display area The size of original image in 646, generates an equal amount of occupy-place figure, i.e. the size of occupy-place figure is also 750*350px.Electronic equipment It can be the constraint of 400px with the width of picture display area 646, it is 400*187px that occupy-place figure, which is reduced ratio, is shown in picture In display area 646.
By the embodiment of the present application, after browser is opened without chart-pattern, electronic equipment is opening net by the browser When page, while electronic equipment can obtain page layout information and literal resource from web page server, from web page server Previous section data (such as preceding 1K byte data of picture resource information) in upper acquisition picture resource, wherein picture money Previous section data in source include the size of picture.Electronic equipment can be shown according to the size and picture of original image Region size information determines the display size of occupy-place figure in picture display area.In this way, the browser of electronic equipment can be made Under no chart-pattern, the imposition layout of Webpage is consistent with normal mode, improves the experience of user.
In application scenes, after browser is opened without chart-pattern, electronic equipment is opening net by the browser When page, electronic equipment can obtain from web page server and obtain web data on web page server, wherein wrap in web data Include the label information of picture.Then, the label information of picture in web data is sent to query service device by electronic equipment.It looks into The dimension information of picture can be inquired, and the dimension information of picture is sent to according to the label information of picture by asking server Electronic equipment.Electronic equipment can determine picture viewing area according to the size and picture display area size information of picture The display size of occupy-place figure in domain.In this way, can make the browser of electronic equipment under no chart-pattern, the typesetting cloth of Webpage Office is consistent with normal mode, and saves the flow of electronic equipment, improves the experience of user.
With reference to Figure 10, Figure 10 is the flow diagram of another page display method provided in the embodiment of the present application.Its In, web page server and query service device in the Figure 10 can be different server, be also possible to identical server.It should Query service device is also possible to the picture library server in above-mentioned Fig. 5, is not limited thereto.As shown in Figure 10, the page display side Method may include:
S1001, electronic equipment receive the first input.
Wherein, step S1001 can be with reference to the step S501 in aforementioned embodiment illustrated in fig. 5, and details are not described herein.
S1002, electronic equipment in response to first input, open browser without chart-pattern.
Wherein, step S1002 can be with reference to the step S502 in aforementioned embodiment illustrated in fig. 5, and details are not described herein.
S1003, electronic equipment receive the second input.
Wherein, step S1003 can be with reference to the step S503 in aforementioned embodiment illustrated in fig. 5, and details are not described herein.
S1004, it is inputted in response to second, electronic equipment sends web-page requests to web page server.
Wherein, step S1004 can be with reference to the step S504 in aforementioned embodiment illustrated in fig. 5, and details are not described herein.
The web-page requests of S1005, web page server response electronic equipment, return to web data to electronic equipment.
Wherein, step S1005 can be with reference to the step S505 in aforementioned embodiment illustrated in fig. 5, and details are not described herein.
S1006, electronic equipment obtain the label information of picture in web data.
Wherein, step S1006 can be with reference to the step S506 in aforementioned embodiment illustrated in fig. 5, and details are not described herein.
The label information that S1007, electronic equipment send picture gives query service device.
Electronic equipment after the label information of picture, can establish connection in getting web data with query service device. Wherein, electronic equipment and query service device, which establish connection procedure, can refer to electronic equipment and net in aforementioned embodiment illustrated in fig. 5 Page server establishes the process of connection, and details are not described herein.After electronic equipment and query service device establish connection, electronic equipment The label information of picture can be sent to query service device.
S1008, query service device inquire the dimension information of picture according to the label information of picture.S1009, query service Device returns to the dimension information electron equipment of picture after inquiring the dimension information of picture.
Wherein, after query service device receives the label information of picture, query service device can be according to the mark of picture Label information gets the corresponding picture resource of the label information from picture servers.After getting picture resource, inquiry clothes Business device can parse the data in picture resource, get dimension information from the data of picture resource.
In one possible implementation, which can all be stored with the figure as picture servers The corresponding picture resource of the label information of piece, query service device the corresponding picture resource of label information for getting picture it Afterwards, query service device can get dimension information from the data of picture resource according to data in parsing picture resource.
In one possible implementation, which can be looked into according to the label information of picture by internet The corresponding dimension information of label information for asking the picture, after the query service device gets the dimension information of the picture, The dimension information can be sent to electronic equipment.
S1010, electronic equipment generate occupy-place figure identical with the size of picture, and show according to the dimension information of picture In the display area of picture.
Wherein, step S1010 can be with reference to the step S510 in aforementioned embodiment illustrated in fig. 5, and details are not described herein.
By the embodiment of the present application, the label information of picture in web data is sent to query service device by electronic equipment, Allow query service device on behalf of the dimension information for inquiring the picture, it, will after query service device inquires the dimension information of picture The dimension information of picture is sent to electronic equipment.Electronic equipment can be believed according to the size and picture display area size of picture Breath, determines the display size of occupy-place figure in picture display area.In this way, the browser of electronic equipment can be made in no chart-pattern Under, the dimension information of picture is directly got from query service device, save electronic equipment browsing webpage when consuming net Network flow also can make the imposition layout of Webpage consistent with normal mode, improve the experience of user.
In application scenes, for the file type of some pictures, such as JPG file type, picture resource file In will include the thumbnail of picture, wherein the data volume of the thumbnail can be less than the data volume of entire picture resource file.Electricity Thumbnail in the sub- available picture resource file of equipment, and the thumbnail of picture is shown in the display area of the picture. In this way, network flow spent when electronic equipment browsing webpage can be saved, the display effect under no chart-pattern is optimized.
Illustratively, as shown in figure 11, JPG file successively may include from the beginning image start field (SOI) field, Image recognition information (APP0) field, quantization table (DQT) field, picture frame start (SOF0) field, huffman table (DHT) word Section, scanning start (SOS) field, the compressed data of image (scanData) field, image and terminate (EOI) field.Wherein, image It from the beginning successively include label code field (2 byte), data segment, length field (2 words in identification information (SOF0) field Section), exchange format field (5 byte), major version number field (such as 1 byte), minor version number field (such as 1 byte), image Density unit field (such as 1 byte), X-direction pixel density field (2 byte), Y-direction pixel density field (2 byte), contracting Sketch map horizontal pixel count field (such as 1 byte), thumbnail vertical pixel number field (such as 1 byte), RGB thumbnail word Section (3*n byte).Wherein, the length of RGB thumbnail field is 3*n byte, and n refers to the pixel size of thumbnail.For example, breviary When the size of figure is 48*48px, n=2304, the length of RGB thumbnail field is 3*2304=6912 byte.Above-mentioned example is only It is only used for explaining the application, restriction should not be constituted.
Electronic equipment can obtain the previous section data in picture resource (such as in picture resource from picture servers Preceding 1K byte).Electronic equipment after getting the previous section data in picture resource, can be out of picture resource before Thumbnail is got in facial divided data in data segments position.Electronic equipment may determine that the data segments position of the thumbnail Whether in the previous section data in the picture resource, if so, before electronic equipment can be directly out of this picture resource The thumbnail of picture is got in facial divided data.If it is not, then electronic equipment can believe the data segments position of the thumbnail Breath is sent to picture servers, the data of section where request picture servers return to the thumbnail of the picture.In electronic equipment After getting the thumbnail of picture, electronic equipment can be shown the thumbnail of picture in the display area of picture.
A kind of interworking architecture figure of the method for the web displaying provided in the embodiment of the present application is provided.
As shown in figure 12, electronic equipment may include browsing device net page renderer 1201, browser network module 1202.Its Middle browsing device net page renderer 1201 can be communicated by routine interface with browser network module 1202.Browser network Module 1202 can be communicated by wireless or wired mode with picture servers.Wherein, it is mentioned in the embodiment of the present application In a kind of Webpage display process supplied, browsing device net page renderer 1201, browser network module 1202 and picture servers Information exchange.Wherein:
1, browsing device net page renderer 1201 can parse picture element (the i.e. picture tag letter in html web page data Breath).
Wherein, particular content can be with reference to the step S506 in aforementioned embodiment illustrated in fig. 5, and details are not described herein.
2, browsing device net page renderer 1201 can send the request of picture resource to browser network module 1202.
3, browser network module 1202 can send the preceding 1K byte data for being directed to picture resource to picture servers Request.
Wherein, particular content can be with reference to the step S507 in aforementioned embodiment illustrated in fig. 5, and details are not described herein.
4, picture servers return to the preceding 1K byte data of picture resource to browser network module 1202.
Wherein, particular content can be with reference to the step S508 in aforementioned embodiment illustrated in fig. 5, and details are not described herein.
5, browser network module 1202 returns to the preceding 1K byte data of picture resource to browsing device net page renderer 1201.
6, browsing device net page renderer 1201 parses the preceding 1K byte data of picture resource, obtains the physical size of picture, And it constructs the occupy-place figure of same size and is shown in picture display area.
Illustratively, browsing device net page renderer 1201 can parse the preceding 1K byte data of picture resource, obtain picture Physical size be 750*350px,.Browsing device net page renderer 1201 can construct the occupy-place figure of size, for rendering the page. In conjunction with the width of picture display area, such as the width of picture display area is 400px, is finally shown as in picture display area The occupy-place figure of 400*187px.
Wherein, particular content can be with reference to the step S509 and step S510 in aforementioned embodiment illustrated in fig. 5, herein no longer It repeats.
Pass through a kind of method of web displaying provided by the embodiments of the present application, after browser is opened without chart-pattern, electronics For equipment when opening webpage by the browser, electronic equipment can obtain page layout information and text from web page server While resource, from previous section data (such as the preceding 1K of picture resource information obtained on web page server in picture resource Byte data), wherein the previous section data in the picture resource include the size of original image.Electronic equipment can root According to the size and picture display area size information of original image, the display ruler of occupy-place figure in picture display area is determined It is very little.In this way, can make the browser of electronic equipment under no chart-pattern, the imposition layout of Webpage is consistent with normal mode, Improve the experience of user.
The above, above embodiments are only to illustrate the technical solution of the application, rather than its limitations;Although referring to before Embodiment is stated the application is described in detail, those skilled in the art should understand that: it still can be to preceding Technical solution documented by each embodiment is stated to modify or equivalent replacement of some of the technical features;And these It modifies or replaces, the range of each embodiment technical solution of the application that it does not separate the essence of the corresponding technical solution.

Claims (10)

1. a kind of Webpage display process characterized by comprising
Electronic equipment obtains the address information of picture servers locating for picture in the first webpage;
The electronic equipment obtains the first instruction letter from the picture servers according to the address information of the picture servers Breath;The first instruction information is used to indicate the size of the picture, and the data volume of the first instruction information is less than the figure The data volume of piece;
The electronic equipment constructs the occupy-place figure of the picture, the size of the occupy-place figure of the picture and the first instruction information The size of instruction is identical;
The electronic equipment shows first webpage, shows in the display area of picture described in first webpage described The occupy-place figure of picture.
2. the method according to claim 1, wherein before the electronic equipment shows first webpage, The method also includes:
The electronic equipment obtains the width information of the display area of the picture;
The electronic equipment adjusts display of the occupy-place figure of the picture in the display area of the picture according to the first ratio Size, wherein first ratio is the ratio between the width of the width of the display area of the picture and the occupy-place figure of the picture, The display width of the occupy-place figure of the picture is of same size with the display area of the picture.
3. the method according to claim 1, wherein the first instruction information is the first number in the picture According to first data are the 1st data cell of the picture to the data between l-th data cell, and L is greater than 1 Positive integer;Wherein, the data cell includes: bit or byte.
4. according to the method described in claim 3, it is characterized in that, the L is determined according to the file type of the picture.
5. the method according to claim 1, wherein address of the electronic equipment according to the picture servers Information obtains the first instruction information from the picture servers, comprising:
The electronic equipment judge in the first webpage whether include the picture dimension information, if it is not, then according to the figure The address information of piece server obtains the first instruction information from the picture servers.
6. the method according to claim 1, wherein address of the electronic equipment according to the picture servers Information obtains the first instruction information from the picture servers, comprising:
The electronic equipment judges whether the mode of the electronic equipment browsing webpage is no chart-pattern, if so, the electronics Equipment obtains the first instruction information from the picture servers according to the address information of the picture servers.
7. the method according to claim 1, wherein being obtained in the first webpage locating for picture in the electronic equipment Before the address information of picture servers, the method also includes:
The electronic equipment receives the access request that user is directed to the first webpage, wherein the access for being directed to the first webpage is asked Seek the address information including web page server locating for first webpage;
The electronic equipment obtains first net according to the address information of the web page server from the web page server Page.
8. a kind of electronic equipment characterized by comprising one or more processors, display screen, one or more memory, Transceiver;One or more of memories and one or more of processors and the transceiver couples, the transceiver For being communicated with external communication device, the display screen and one or more of processor communications are one or more For a memory for storing computer program code, the computer program code includes computer instruction, when one or When multiple processors execute the computer instruction, so that the electronic equipment is executed as claim 1-7 is described in any item Webpage display process.
9. a kind of computer storage medium, which is characterized in that including computer instruction, when the computer instruction is in electronic equipment When upper operation, so that the electronic equipment executes such as the described in any item Webpage display process of claim 1-7.
10. a kind of computer program product, which is characterized in that when the computer program product is run on computers, make It obtains the computer and executes such as the described in any item Webpage display process of claim 1-7.
CN201910324479.7A 2019-04-22 2019-04-22 Webpage display method and related device Pending CN110096662A (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201910324479.7A CN110096662A (en) 2019-04-22 2019-04-22 Webpage display method and related device

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201910324479.7A CN110096662A (en) 2019-04-22 2019-04-22 Webpage display method and related device

Publications (1)

Publication Number Publication Date
CN110096662A true CN110096662A (en) 2019-08-06

Family

ID=67445505

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201910324479.7A Pending CN110096662A (en) 2019-04-22 2019-04-22 Webpage display method and related device

Country Status (1)

Country Link
CN (1) CN110096662A (en)

Cited By (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111339465A (en) * 2020-03-04 2020-06-26 北京字节跳动网络技术有限公司 Picture processing method and device, computer equipment and storage medium
CN112579204A (en) * 2020-12-23 2021-03-30 卡斯柯信号有限公司 Universal human-computer interface display system
CN112802457A (en) * 2021-04-14 2021-05-14 北京世纪好未来教育科技有限公司 Method, device, equipment and storage medium for voice recognition
CN114586008A (en) * 2019-08-09 2022-06-03 荣耀终端有限公司 Method and electronic equipment for displaying page elements

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105373545A (en) * 2014-08-25 2016-03-02 阿里巴巴集团控股有限公司 Picture display method and device
CN106445970A (en) * 2015-08-11 2017-02-22 腾讯科技(深圳)有限公司 Place holder loading method and device
CN107197353A (en) * 2017-05-24 2017-09-22 环球智达科技(北京)有限公司 The processing method of the occupy-place figure of interface images
US9858246B1 (en) * 2014-03-27 2018-01-02 Amazon Technologies, Inc. Determining and generating a number of images meeting particular size ranges and selecting an image for display in a placeholder of a network document

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US9858246B1 (en) * 2014-03-27 2018-01-02 Amazon Technologies, Inc. Determining and generating a number of images meeting particular size ranges and selecting an image for display in a placeholder of a network document
CN105373545A (en) * 2014-08-25 2016-03-02 阿里巴巴集团控股有限公司 Picture display method and device
CN106445970A (en) * 2015-08-11 2017-02-22 腾讯科技(深圳)有限公司 Place holder loading method and device
CN107197353A (en) * 2017-05-24 2017-09-22 环球智达科技(北京)有限公司 The processing method of the occupy-place figure of interface images

Cited By (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114586008A (en) * 2019-08-09 2022-06-03 荣耀终端有限公司 Method and electronic equipment for displaying page elements
CN111339465A (en) * 2020-03-04 2020-06-26 北京字节跳动网络技术有限公司 Picture processing method and device, computer equipment and storage medium
CN112579204A (en) * 2020-12-23 2021-03-30 卡斯柯信号有限公司 Universal human-computer interface display system
CN112579204B (en) * 2020-12-23 2022-08-02 卡斯柯信号有限公司 Universal human-computer interface display system
CN112802457A (en) * 2021-04-14 2021-05-14 北京世纪好未来教育科技有限公司 Method, device, equipment and storage medium for voice recognition

Similar Documents

Publication Publication Date Title
CN110597512B (en) Method for displaying user interface and electronic equipment
CN115473957B (en) Image processing method and electronic equipment
EP4027238B1 (en) Card rendering method and electronic device
WO2020253758A1 (en) User interface layout method and electronic device
CN114706503A (en) Application display method and electronic equipment
CN110114747A (en) A kind of notifier processes method and electronic equipment
CN109559270A (en) A kind of image processing method and electronic equipment
CN110751503B (en) Advertisement processing method and electronic equipment
CN110096662A (en) Webpage display method and related device
WO2022089121A1 (en) Method and apparatus for processing push message
CN114363462A (en) Interface display method and related device
CN109857401A (en) Display methods, graphic user interface and the electronic equipment of electronic equipment
WO2020233556A1 (en) Call content processing method and electronic device
CN109819306A (en) Media file clipping method, electronic device and server
CN114722377A (en) Method, electronic device and system for authorization by using other devices
CN111615820A (en) Method and equipment for performing domain name resolution by sending key value to GRS server
WO2022206763A1 (en) Display method, electronic device, and system
CN110286975A (en) A kind of display methods and electronic equipment of foreground elements
WO2021031862A1 (en) Data processing method and apparatus thereof
WO2022078116A1 (en) Brush effect picture generation method, image editing method and device, and storage medium
CN115022982B (en) Multi-screen cooperative non-inductive access method, electronic equipment and storage medium
CN113380240B (en) Voice interaction method and electronic equipment
WO2022089276A1 (en) Collection processing method and related apparatus
WO2022135157A1 (en) Page display method and apparatus, and electronic device and readable storage medium
CN114567871A (en) File sharing method and device, electronic equipment and readable storage medium

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
TA01 Transfer of patent application right
TA01 Transfer of patent application right

Effective date of registration: 20220509

Address after: 523799 Room 101, building 4, No. 15, Huanhu Road, Songshanhu Park, Dongguan City, Guangdong Province

Applicant after: Petal cloud Technology Co.,Ltd.

Address before: 523808 Southern Factory Building (Phase I) Project B2 Production Plant-5, New Town Avenue, Songshan Lake High-tech Industrial Development Zone, Dongguan City, Guangdong Province

Applicant before: HUAWEI DEVICE Co.,Ltd.

Effective date of registration: 20220509

Address after: 523808 Southern Factory Building (Phase I) Project B2 Production Plant-5, New Town Avenue, Songshan Lake High-tech Industrial Development Zone, Dongguan City, Guangdong Province

Applicant after: HUAWEI DEVICE Co.,Ltd.

Address before: 518129 Bantian HUAWEI headquarters office building, Longgang District, Guangdong, Shenzhen

Applicant before: HUAWEI TECHNOLOGIES Co.,Ltd.

RJ01 Rejection of invention patent application after publication
RJ01 Rejection of invention patent application after publication

Application publication date: 20190806