Home IT Linux Windows Database Network Programming Server Mobile  
           
  Home \ Server \ HTTP Client Hints Introduction     - RabbitMQ tutorial examples: RabbitMQ installation under Windows (Linux)

- Apache2.4.7 make an error [exports.lo] Error 1 Solution (Server)

- Zabbix Agent for Linux Installation and Configuration (Server)

- Ubuntu 14.04 next upgrade to GNOME 3.12 (Linux)

- Basic Operation Linux files and directories (Linux)

- Use OpenWrt build WDS wireless network extension on V2 WHR-G300N (Linux)

- RPM package creation Getting Started (Linux)

- Linux server operating system security configuration (Linux)

- WebLogic administrator account and reset the password (Database)

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

- CentOS6 5 Configure SSH password Free (Linux)

- Linux Network Programming - raw socket Example: sending a UDP packet (Programming)

- Oracle 11g dataguard main library backup and recovery to the test environment in one database error (Database)

- Installing PHP Memcache extension under Linux (Server)

- Linux Getting Started tutorial: Experience Xen Virtual Machine chapter (Linux)

- Intruder tools Knark Analysis and Prevention Linux environment (Linux)

- Boost notes --Asio - (1) a simple small example of synchronous communication (Programming)

- Fedora 20, Fedora 19, CentOS 6 and RHEL6 users how to install Wine 1.7.15 (Linux)

- Hadoop namenode do NFS disaster recovery (Server)

- iOS persistence of data archiving NSKeyedArchiver (Programming)

 
         
  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
or:

< 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.
     
         
       
         
  More:      
 
- Heartbeat (v1, v2, pacemaker) cluster components Overview (Server)
- gzip, bzip2, xz, tar, zip compression, archive Detailed (Linux)
- How to install Hadoop on CentOS7 (Server)
- How open source code libraries hosted on Github (Linux)
- MySQL query plan key_len know all (Database)
- Approach the next Linux shared interrupts (Linux)
- Firewall chapter of Linux server security configuration (Linux)
- Ubuntu install video playback software SMPlayer 14.9.0.7042 (Linux)
- Installation Yarock 1.1.4 Music Player in Ubuntu (Linux)
- Linux Platform Oracle 11g Single Instance Installation Deployment Configuration Quick Reference (Database)
- Java Virtual Machine class loading mechanism and bytecode execution engine (Programming)
- Linux bash: scp: command not found the problem (Linux)
- The AWK use Cygwin tools mysql binlog log viewer (Database)
- Installation of Theano + CUDA under Ubuntu (Linux)
- Ora-14450: attempt to access ah transactional temptable already in use (Database)
- Under Ubuntu 15.04 installation JDK8 (Linux)
- Linux netstat command to get started (Linux)
- MongoDB fragmentation (Cluster) (Database)
- Single-node Hadoop installation notes distributed pseudo & (Server)
- S5PV210 development board for embedded development environment to build under Ubuntu (Linux)
     
           
     
  CopyRight 2002-2016 newfreesoft.com, All Rights Reserved.