Home Web Front-end HTML Tutorial The front-end needs to be improved: How long should the URL be? _html/css_WEB-ITnose

The front-end needs to be improved: How long should the URL be? _html/css_WEB-ITnose

Jun 24, 2016 am 11:57 AM
url front end

How long should a URL be? Why do I ask this question? There are many optimization guides that say: Minimize COOKIE, shorten URL, and use GET requests as much as possible, etc., in order to optimize the request and loading of WEB pages. However, the so-called "as much as possible" and "as much as possible" are only qualitative descriptions. From a quantitative point of view, how many bytes should be shortened to be considered short?

 

For example, during one of our homepage revisions, I saw the URLs of several interesting .js files through http analyzers, which looked like this:

[xhtml] view plaincopy

  1. https://static.alipay.net/build/js/app/tracker .js?v=083
  2. https://static.alipay.net/build/js/home/home.js?t=20101012
  3. https://static.alipay.net /build/js/pa/alieditcontrol-update.js?t=20101012
  4. https://static.alipay.net/javascript/arale_v1.0.js
  5. https://static .alipay.net/min/?b=javascript&f=arale/lang/aspect.js,arale/lang/md5.js,arale/lang/uri.js,arale/lang/tmpl.js,arale/lang/date. js,arale/lang/number.js,arale/http/jsonp.js,arale/http/ajax.js,arale/http/core.js,arale/event/event-chain.js,arale/class/declare. js,arale/fx/animator.js,aralex/widget.js,aralex/tplwidget.js,aralex/view.js,aralex/tab/tab.js,aralex/dropdown/dropdown.js,aralex/slider/slider. js,aralex/slider/switchslider.js

Pay attention to the last item. Well, don't be surprised, it is indeed such a long URL, the exact length is 443 bytes. But is it too long? Still not too long?

You must know that taking IE as an example, the URL length that can be processed is 2048 bytes. In other words, IE can handle it anyway. In fact, general browsers have no problem, so "correctness" is no problem. So, the next thing we want to talk about is efficiency.

  1. Packet header issues in TCP/IP protocol

In TCP/IP network, the underlying protocol is one thing, and the application layer protocol is another. . Therefore, as an application layer protocol, HTTP itself can transmit how much content it can and how to transmit it (for example, HTTP packets are generally bounded by 48K. When it exceeds 48K, application layer sub-packaging will occur, which is the so-called multipart). These are all determined by the application layer. Come to make an appointment. In the underlying protocol, the link layer and the transport layer have their own agreements on "how large a packet should be transmitted." Simply put, the transport layer agrees on the MSS (maximum segment size) of IP data packets, and the link layer agrees on the MTU (maximum transmission unit). If the size of an IP packet exceeds the MTU (ie, MSS TCP header IP header > MTU), the IP packet will be split into multiple packets for transmission at the link layer.

 

MSS is related to different transmission environments and has two recommended values. Generally speaking, - when the destination address is not a local address (in a different network segment from the source address), the default MSS value is usually 536; otherwise, the default MSS value is usually 1460. MTU is related to the network environment and has two recommended values. In general, - 576 bytes for serial port; - 1500 bytes for Ethernet.

There is a 40-byte difference between the two recommended values ​​of MTU/MSS, which is the general value of (TCP header IP header), which is capped at 120 bytes (20 20-byte IP /TCP header; 40 40-byte IP/TCP optional header). Therefore, in a complex network environment, the optimal value for the size of a single data packet available for the application layer network protocol should be less than 536-80 = 456 bytes, and try to be limited to 1460-80 = 1380 bytes. Such restrictions are the result of comprehensive consideration of transport layer and link layer protocols. However, some common suggestions also use the two values ​​​​of 536/1460, which is not fundamentally different from the discussion here. I'm just emphasizing that if we want a "sufficiently optimized request", what should the limit be?

  2. Header issues in HTTP protocol

So, now we come to HTTP, the application layer protocol. An HTTP request consists of a header and a data area. For an HTTP GET request, there can be only a header without a data area. The reason is that the content of the HTTP header is as follows (the header needs to end with 2 consecutive carriage returns and line feeds):

[xhtml] view plaincopy

  1. ---------
  2. GET (...) HTTP/1.1
  3. Accept:*/*
  4. Referer:http://www.alipay.net/
  5. Accept -Language:zh-cn
  6. User-Agent: (...)
  7. Accept-Encoding:gzip, deflate
  8. Host:static.alipay.net
  9. Connection:Keep-Alive
  10. Cookie: (...)
  11. ---------

The GET (...) here can be followed by a complete GET request URL, and the parameters of the GET request are also placed on this URL, so there is no need for a separate data area. In the above HTTP request, some specific clients may have a few more or fewer http head fields, but usually the fields will be shorter. We only use this example to illustrate, so how many bytes does this "default (incomplete) HTTP header" use?

The answer is 184 bytes. However, it needs to be emphasized that the Referer is directly related to the URL currently being browsed. For example, the page currently being browsed is a 500-byte URL. Then when a hyperlink on the current web page is clicked, the Referer field will be filled with this 500-byte URL. A URL that is too long in a web page will consume more transmission when clicking a hyperlink. Here is another example.

Let’s not discuss the impact of the Referer field. Taking the above as an example, the best value we can use is only 456-184=272 bytes. These 272 bytes will be used in three places, namely the three places marked (...) above: GET, User-Agent and Cookie. The User-Agent field is related to the browser. Different browsers and the browsers handle different operating system environments will appear different. In JS and statistical software on the server, this field is often used to determine the browser environment, such as OS, version, etc. The value of this field is sometimes relatively long. Taking my current machine as an example, the value is: --------- Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; QQWubi 108 ; EmbeddedWB 14.52 from:http://www.bsalsa.com/ EmbeddedWB 14.52; .NET CLR 2.0.50727; InfoPath.2; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET CLR 1.1.4322; .NET CLR 3.5.21022; .NET4.0C; .NET4.0E) --------- Occupies 274 bytes. In other words, in fact, using 456 bytes under ideal circumstances is no longer enough. As discussed previously, we can do the next best thing: - Use a boundary value of 536 bytes, which does not take into account the 80-byte tcp/ip optional header.

In addition, it should be emphasized that the length of User-Agent is variable. For example, the 64 bytes of "EmbeddedWB..." above may not be available in ordinary computers. This is a third-party component. . Similarly, other browser environments (such as Maxthon) may cause this field to be longer. Based on this fact, I will still analyze this special situation in this case.

Taking 536 bytes as an example, we actually have 78 bytes available, so here we set the first level of optimization to: 70 bytes. It is recommended that the company can take a balanced value based on the data collected on the server side.

 

3. COOKIE consumption can be reduced to 0

Now, cookies are the largest consumer. Taking my current machine as an example, This value has several situations (different for different protocols and domains):

(1) For the homepage http://www.alipay.net/ , the value is 49 bytes: ali_apache_id=12.1.11.70.1275978936200.5; lastpg=

(2) for http://* .alipay.net/, the value is 171 bytes: ali_apache_id=12.1.11.70.1275978936200.5; ali_apache_sid=12.1.46.46.128998714836.4|1289988948; ALIPAYJSESSIONID= bYWcn4Wq0Z5FBCoHzfpn2f1XxDAmBepay; ali_apache_tracktmp=uid=

(3) For https://static.alipay.net/, the value is 307 bytes: cna=AKaaAhYBhU0BAeMdAHlnHNcd; ali_apache_id=169.17. 198.19.1272623861747.7; payMethod=directPay; _tb_order=38016166656317; defaultBank=ICBC; __utma=22931947.260433774.1277279158.1277279158.1282287558.2; __utm z=22931947.1282287558.2.2.utmcsr=life.alipay.net|utmccn=(referral)|utmcmd=referral|utmcct= /index.php

(4) For http(s)://img.alipay.net/, the value is 379 bytes: apay_id=159588238.127262386236866.128979461890689.1289969142342368.137; cna = AKaaAhYBhU0BAeMdAHlnHNcd; ali_apache_id=169.17.198.19.1272623861747.7; payMethod=directPay; _tb_order=38016166656317; defaultBank=ICBC; __utma=22931947.260433774.1277 279158.1277279158.1282287558.2; __utmz=22931947.1282287558.2.2.utmcsr=life.alipay.net|utmccn=(referral)| utmcmd=referral|utmcct=/index.php

(5) Other situations.

Why did cookie usage surge in situations 2, 3, and 4? In fact, although situations 3 and 4 are slightly different, the root cause of the problem is completely consistent with situation 2. Therefore, the following article only takes case 2 as an example. Tracking the http request process shows: - When requesting the homepage, the server returned four set-cookie responses.

 

The four responses (http response head) are as follows: --------

Set-Cookie:ali_apache_sid=10.2.46.46.128998714836.4|1289988948 ; path=/; domain=.alipay.net Set-Cookie:JSESSIONID=A8CE523AEA03E2C990D6796D6BAEC81E; =; Domain =.alipay.net; Path=/

--------

So in all subsequent http requests, the 171-byte cookie in the previous example (3) will be used. However, obviously, these cookies are meaningless in at least the following situations: - If you visit a redirect page, including redirects that return Status Code: 302, and redirects that use http-meta in html pages; - If the visited page is cached, for example, Status Code: 304 "Not Modified" will be returned; - If the visited page is static and does not require cookie recognition, such as .img, .js and .js in static.alipay.net. css files, etc.

Obviously, our images or other static resources in img, static can be cached, and whether it is cached or accessed for the first time, the cookie value is completely meaningless. For static pages (.html), if we do not use http server to statistically analyze visits to static pages, then these cookies are not needed. Therefore, for these resources and content, we should emphasize that these cookies are not sent, or used as little as possible (for some .html static pages, we may only need the session ID to analyze the user access chain).

The way to optimize cookies is very simple: deploy these static resources in a server/group that does not have .alipay.net as the domain, or use other independent domain names. In this case, for a specific and certainly the largest portion of resources, COOKIE consumption can be reduced to 0.

4. Shorten URL

Finally we come to the topic: How long can a URL be? Through the previous analysis, we still have 70 words of book available. Even under certain conditions, we need to leave track data for some page visits (such as session), then we still have 40~50 bytes available. Use . However, that's all, we are still far away from the 443 bytes mentioned at the beginning of this article.

 

But do we really need such a long URL?

The answer is no, we can shorten the URL. For example, in the previous example, the get part of our original URL is:

[xhtml] view plaincopy

    ---------
  1. /min?b=javascript&f=arale/lang/aspect.js,arale/lang/md5.js,arale/lang/uri.js ,arale/lang/tmpl.js,arale/lang/date.js,arale/lang/number.js,arale/http/jsonp.js,arale/http/ajax.js,arale/http/core.js,arale /event/event-chain.js,arale/class/declare.js,arale/fx/animator.js,aralex/widget.js,aralex/tplwidget.js,aralex/view.js,aralex/tab/tab.js ,aralex/dropdown/dropdown.js,aralex/slider/slider.js,aralex/slider/switchslider.js
  2. ---------

Look carefully, it actually means --------- /min?b=javascript&f=... ---------

field What follows f is actually the splicing of some static resources in the script project arale. On the server side, the min program splices some script fragments into a single .js file according to the parameters "b=javascript&f=..." and returns it to the browser. If there is no change, it directly returns Status Code: 304.

Then, in fact, the parameter block after the "f=..." field we request will be exactly the same every time. Or, even if the list of files required to be spliced ​​is different in different situations, there are only fairly limited combinations. This makes us naturally think of something: summation. Use this method to find a key (such as hash, md5, crc) for the above string, and then we can use this unique key to find the spliced ​​.js content?? This also means that the min program does not need to be used every time Splice text. In this way, the above URL can become (taking crc32 for the 396 bytes after the f field as an example): --------- /min?b=javascript&f=313466DB ------- -- Taking into account different version management: --------- /min?b=javascript&v=0.9b&f=313466DB ---------

Now, we will control the URL On a fairly small scale, with the addition of version management and content validity verification, the server-side min program can also be dynamically generated and cached if necessary. These modifications did not conflict with our original needs. The important thing is that we successfully controlled the get request to 35 bytes, and the remaining space fully met our

overall optimization needs:

The first level of optimization, 70 bytes!

5. Technology maturity and value

1. Twitter has long used this technology.

2. Similar to the arale project, the YQL (Yahoo! Query Language) project also has similar needs, so they turned "input a sql in the URL" into a short name through the above technology, for example: http://y.ahoo.it/iHQ8c0sv is equivalent to http://developer.yahoo.com/yql/console/?q=select woeid from geo.places where text="san francisco, ca"

3. Microsoft is still "silly and unclear", so you can see their official website very slowly. ^^.

4. When we have the conditions to reduce the http header to less than 456 bytes, we should do our best. For example, because Wangwang has an independent client, it can customize the http request head to reduce fields such as User-Agent.

5. When we always issue minimized HTTP requests from the browser, the network can always submit the request to the server as quickly as possible without waiting for multiple packages to be combined. This effect will be extremely obvious in slow networks and networks with a lot of packet loss. Simply put, if someone uses Thunder or BT on a LAN, minimizing HTTP requests will significantly improve the web browsing experience.

6. We should do version management of static resources such as scripts.

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
1 months ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

PHP function introduction—get_headers(): Get the response header information of the URL PHP function introduction—get_headers(): Get the response header information of the URL Jul 25, 2023 am 09:05 AM

PHP function introduction—get_headers(): Overview of obtaining the response header information of the URL: In PHP development, we often need to obtain the response header information of the web page or remote resource. The PHP function get_headers() can easily obtain the response header information of the target URL and return it in the form of an array. This article will introduce the usage of get_headers() function and provide some related code examples. Usage of get_headers() function: get_header

Why NameResolutionError(self.host, self, e) from e and how to solve it Why NameResolutionError(self.host, self, e) from e and how to solve it Mar 01, 2024 pm 01:20 PM

The reason for the error is NameResolutionError(self.host,self,e)frome, which is an exception type in the urllib3 library. The reason for this error is that DNS resolution failed, that is, the host name or IP address attempted to be resolved cannot be found. This may be caused by the entered URL address being incorrect or the DNS server being temporarily unavailable. How to solve this error There may be several ways to solve this error: Check whether the entered URL address is correct and make sure it is accessible Make sure the DNS server is available, you can try using the "ping" command on the command line to test whether the DNS server is available Try accessing the website using the IP address instead of the hostname if behind a proxy

PHP and Vue: a perfect pairing of front-end development tools PHP and Vue: a perfect pairing of front-end development tools Mar 16, 2024 pm 12:09 PM

PHP and Vue: a perfect pairing of front-end development tools. In today's era of rapid development of the Internet, front-end development has become increasingly important. As users have higher and higher requirements for the experience of websites and applications, front-end developers need to use more efficient and flexible tools to create responsive and interactive interfaces. As two important technologies in the field of front-end development, PHP and Vue.js can be regarded as perfect tools when paired together. This article will explore the combination of PHP and Vue, as well as detailed code examples to help readers better understand and apply these two

Questions frequently asked by front-end interviewers Questions frequently asked by front-end interviewers Mar 19, 2024 pm 02:24 PM

In front-end development interviews, common questions cover a wide range of topics, including HTML/CSS basics, JavaScript basics, frameworks and libraries, project experience, algorithms and data structures, performance optimization, cross-domain requests, front-end engineering, design patterns, and new technologies and trends. . Interviewer questions are designed to assess the candidate's technical skills, project experience, and understanding of industry trends. Therefore, candidates should be fully prepared in these areas to demonstrate their abilities and expertise.

What is the difference between html and url What is the difference between html and url Mar 06, 2024 pm 03:06 PM

Differences: 1. Different definitions, url is a uniform resource locator, and html is a hypertext markup language; 2. There can be many urls in an html, but only one html page can exist in a url; 3. html refers to is a web page, and url refers to the website address.

Is Django front-end or back-end? check it out! Is Django front-end or back-end? check it out! Jan 19, 2024 am 08:37 AM

Django is a web application framework written in Python that emphasizes rapid development and clean methods. Although Django is a web framework, to answer the question whether Django is a front-end or a back-end, you need to have a deep understanding of the concepts of front-end and back-end. The front end refers to the interface that users directly interact with, and the back end refers to server-side programs. They interact with data through the HTTP protocol. When the front-end and back-end are separated, the front-end and back-end programs can be developed independently to implement business logic and interactive effects respectively, and data exchange.

C# development experience sharing: front-end and back-end collaborative development skills C# development experience sharing: front-end and back-end collaborative development skills Nov 23, 2023 am 10:13 AM

As a C# developer, our development work usually includes front-end and back-end development. As technology develops and the complexity of projects increases, the collaborative development of front-end and back-end has become more and more important and complex. This article will share some front-end and back-end collaborative development techniques to help C# developers complete development work more efficiently. After determining the interface specifications, collaborative development of the front-end and back-end is inseparable from the interaction of API interfaces. To ensure the smooth progress of front-end and back-end collaborative development, the most important thing is to define good interface specifications. Interface specification involves the name of the interface

What is a front-end modular ESM? What is a front-end modular ESM? Feb 25, 2024 am 11:48 AM

What is front-end ESM? Specific code examples are required. In front-end development, ESM refers to ECMAScriptModules, a modular development method based on the ECMAScript specification. ESM brings many benefits, such as better code organization, isolation between modules, and reusability. This article will introduce the basic concepts and usage of ESM and provide some specific code examples. The basic concept of ESM In ESM, we can divide the code into multiple modules, and each module exposes some interfaces for other modules to

See all articles