Home IT Linux Windows Database Network Programming Server Mobile  
  Home \ Server \ HTTP Client Hints Introduction     - Let CentOS perform PPPoE dial-up, ADSL can be used in a network environment! (Linux)

- Linux Shell Scripting Interview Question (Linux)

- Java class HashSet (Programming)

- CentOS 7 virt-manager can not connect a local hypervisor (Linux)

- CentOS 6.4 under PXE + Kickstart unattended operating system installation (Programming)

- Linux command in the dialog whiptail (Linux)

- Django1.8 return json json string and the string contents of the received post (Programming)

- Linux Command Tutorial: du command to view disk space (Linux)

- Oracle database online redo logs are several methods of recovery of deleted (Database)

- iscsiadm command usage (Linux)

- Configure the Linux kernel and use iptables to do port mapping (Linux)

- Linux source code analysis tool (Linux)

- Ubuntu disable graphics card (Linux)

- How to upgrade Docker 1.6 on Fedora / CentOS (Server)

- On the PC goes heavy security watch your startup items (Linux)

- The Definitive Guide to Linux NAT network connection (Linux)

- Ordinary users how the Linux system shutdown (Linux)

- CentOS 6.5 installation VNCServer implement graphical access (Server)

- Axel install plug under CentOS 5/6 acceleration yum downloads (Linux)

- Linux security settings Notes (Linux)

  HTTP Client Hints Introduction
  Add Date : 2018-11-21      
  In recent years a variety of Web technology has been developed in explosion, every day a lot of new things emerge. For this phenomenon, the industry's two heavyweights has recently issued a document expressing their views: Stop pushing the web forward, Is the web platform getting too big ?. In fact, long before I realized that my current effort, understand all the new Web technology is almost impossible task, I am concerned about the focus on new technologies on the performance optimization.

Today, I would like to introduce the technology are: HTTP Client Hints, and also related to performance optimization. Using this technique, HTTP client (usually considered to be the browser) to take the initiative to tell some of the features the server, so the server more targeted output. The technology was developed by our well-known Ilya Grigorik proposed, is still in relatively early stages, more formal description of the document can be found here. Currently Chrome 46 (beta) already support it, IE and Firefox is still under consideration.

In fact, before the browser itself has a lot of properties in the HTTP request header fields such as the following:

User-Agent: provides browser type and version, operating system and version, browser kernel and other information;
Accept: indicate which browsers support MIME type (for example, Chrome by Accept show their support image / webp picture format);
Accept-Encoding: encoding show what this browser support (for example: gzip, deflate, sdch);
Accept-Language: show that the browser supports those languages;
Through these header fields, we are able to output different content for different clients. For example this blog format support Webp browser will use Webp to reduce the image size; localStorage this blog also disables caching policies for older versions of IE by User-Agent.

But there are some browser features, we can not direct access, such as screen resolution, device pixel ratio (devicePixelRatio), user bandwidth. In the mobile Web, in order to save as much as possible user flows, the output image size most appropriate resources. To solve this problem, common programs are: 1) use JS to obtain these properties, the dynamic mosaic image URL; 2) the use of HTML in the sizes and srcset property, picture tag or CSS in the image-set properties to achieve responsive image. Option 1 is simple, here skip; Scenario 2 There are many online articles, unfamiliar students can self-discovery "responsive image" about the next.

Here to see a scheme 2 is mentioned picture, sizes and srcset implemented responsive image tags (via):

HTML < picture>
  < -! Serve WebP to Chrome and Opera ->
  < Source
    media = "(min-width: 50em)"
    sizes = "50vw"
    srcset = "/ image / thing-200.webp 200w, /image/thing-400.webp 400w,
        /image/thing-800.webp 800w, /image/thing-1200.webp 1200w,
        /image/thing-1600.webp 1600w, /image/thing-2000.webp 2000w "
    type = "image / webp">
  < Source
    sizes = "(min-width: 30em) 100vw"
    srcset = "/ image / thing-crop-200.webp 200w, /image/thing-crop-400.webp 400w,
        /image/thing-crop-800.webp 800w, /image/thing-crop-1200.webp 1200w,
        /image/thing-crop-1600.webp 1600w, /image/thing-crop-2000.webp 2000w "
    type = "image / webp">
  < -! Serve JPEGXR to Edge ->
  < Source
    media = "(min-width: 50em)"
    sizes = "50vw"
    srcset = "/ image / thing-200.jpgxr 200w, /image/thing-400.jpgxr 400w,
        /image/thing-800.jpgxr 800w, /image/thing-1200.jpgxr 1200w,
        /image/thing-1600.jpgxr 1600w, /image/thing-2000.jpgxr 2000w "
    type = "image / vnd.ms-photo">
  < Source
    sizes = "(min-width: 30em) 100vw"
    srcset = "/ image / thing-crop-200.jpgxr 200w, /image/thing-crop-400.jpgxr 400w,
        /image/thing-crop-800.jpgxr 800w, /image/thing-crop-1200.jpgxr 1200w,
        /image/thing-crop-1600.jpgxr 1600w, /image/thing-crop-2000.jpgxr 2000w "
    type = "image / vnd.ms-photo">
  < -! Serve JPEG to others ->
  < Source
    media = "(min-width: 50em)"
    sizes = "50vw"
    srcset = "/ image / thing-200.jpg 200w, /image/thing-400.jpg 400w,
        /image/thing-800.jpg 800w, /image/thing-1200.jpg 1200w,
        /image/thing-1600.jpg 1600w, /image/thing-2000.jpg 2000w ">
  < Source
    sizes = "(min-width: 30em) 100vw"
    srcset = "/ image / thing-crop-200.jpg 200w, /image/thing-crop-400.jpg 400w,
        /image/thing-crop-800.jpg 800w, /image/thing-crop-1200.jpg 1200w,
        /image/thing-crop-1600.jpg 1600w, /image/thing-crop-2000.jpg 2000w ">
  < -! Fallback for browsers that do not support picture ->
  < Img src = "/ image / thing.jpg" width = "50%">
< / Picture>
This lengthy code just to achieve a responsive image, albeit with some exaggeration, the actual use generally does not write so full, but you can get a conclusion: the more realization of the policy on the client, HTML, the greater the volume redundancy, maintainability and readability worse.

But after using the HTTP Client Hints, a browser initiates a resource request in sub-page, will bring resolution, device pixel ratio, the image width and other information through a series of new header field, making all kinds of complex strategies can move go to the server implements. Here we take a look at the details:

First, with the support of HTTP Client Hints browser after the page also you need to explicitly enable it. This is because not all services have achieved a responsive end output policy, sent each of these new head may cause waste.

As usual, this function can also be HTTP response headers and meta tags are two ways to turn on and configure:

Accept-CH: DPR, Width, Viewport-Width

< Meta http-equiv = "Accept-CH" content = "DPR, Width, Viewport-Width">
In HTTP Client Hints page is enabled, all the sub-resource request (no matter what type, no matter what way to create), will carry the header Accept-CH attribute specified, for example:

BASHAccept: image / webp, image / *, * / *; q = 0.8
Accept-Encoding: gzip, deflate, sdch
Accept-Language: zh-CN, zh; q = 0.8, en; q = 0.6, en-US; q = 0.4, ja; q = 0.2, de; q = 0.2, zh-TW; q = 0.2, cs; q = 0.2, pt; q = 0.2, ko; q = 0.2
Connection: keep-alive
DPR: 2
Host: qgy18.imququ.com
User-Agent: Mozilla / 5.0 (Macintosh; Intel Mac OS X 10_11_0) AppleWebKit / 537.36 (KHTML, like Gecko) Chrome / 46.0.2490.13 Safari / 537.36
Viewport-Width: 1280
Width: 128
With these heads, image server can know the client devicePixelRatio 2, image width is 128px, support Webp format, so the most appropriate output 256px double Webp FIG. But how do you know this image browser needs to use it as a double map (that is shown as 128px)? This need to increase the following fields in the response header as DPR response:

Content-DPR: 2
It should be noted that the request header Width field, is calculated according to the sizes attribute of the img tag. If the picture does not specify sizes, or request pictures by JS created the browser does not know Width, will not carry this head.

In fact, in addition to the DPR, Viewport-Width and Width, the document also provides for the two fields, but after I tested Chrome 46 did not support them, here a brief introduction:

Downlink: downlink bandwidth used to indicate the current network, the unit is Mbps;
Save-Data: used to indicate the current browser is working under the provincial traffic patterns, the value of 1 or 0;
As can be seen these two properties, but also to the user as much as possible to save bandwidth and design. It is foreseeable that there will be more follow-up field applied to HTTP Client Hints agreement in the past. With the popularity of HTTP / 2, and so increase the number of header compression header field overhead becomes small.

It is noteworthy that, after using the HTTP Client Hints, the server for the same URL may be output different content, so it is an intermediate node, or the browser, when implementing response Cache must be heart needs more for different situations cache parts content. This need to use HTTP / 1 in the Vary response header, for example:

Vary: DPR, Width, Downlink
This response shows that if a cache, the cache is generated when the needs of the Key request header in the DPR, the value of Width and Downlink calculations inside.

Well, HTTP Client Hints technology introduced here. Very pleased to see that most of the new Web technologies are to HTML, CSS and JavaScript to add functionality and features, but the technology is put before the complex code and logic moved back, so we can move forward with ease HTML code . Some open-source image processing system has begun to support this new feature, and some foreign CDN hosting services are definitely ready for it, I look forward to its future.
- ld.so.conf.d profile (Linux)
- Linux disk and File System Concepts (Linux)
- Linux operating system must know the security command (Linux)
- The correct way of logical backup mysqldump (Database)
- Oracle and MySQL difference between the jdbc (Database)
- Use web2py + uWSGI + Nginx Web server built on Linux (Server)
- RHEL6.5 install the latest version of Vim and increase support for the Python2.7.5 (Linux)
- MySQL development common query summary (Database)
- Depth understanding of C language (Programming)
- GNU Linux system variables (sysctl configuration commands) integrated use (Linux)
- What is Java EE (Programming)
- Turning off the interface eth0: error: Disconnect the device 'eth0' (Linux)
- SpringMVC garbage processing (Programming)
- Some common regular expressions (Linux)
- Common Linux System Troubleshooting (Linux)
- OpenVPN offsite interconnecting room availability and load balancing solution (Server)
- Linux installation notes under GAMIT (Linux)
- Linear table with a Java implementation of the iterator (Programming)
- Linux regex sed detailing (Linux)
- Spring Data study notes -Helloworld (Programming)
  CopyRight 2002-2016 newfreesoft.com, All Rights Reserved.