Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "what are the Web front-end technologies?". In the operation of actual cases, many people will encounter such a dilemma. Next, let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

The scope of Web front-end technology

1. Programming language / technology (HTML,JavaScript,CSS, etc.)

two。 Cross browser compatibility / support (JS Framework,CSS Library)

3. Network transmission performance (parallel download, bandwidth utilization)

4. Browser rendering time / performance (TTI is the waiting time before users can interact, JS execution performance)

Personally, Facebook has undoubtedly become a technical star again, and while everyone is still lamenting its major improvement to PHP, HipHop (Blocked inside China mainland), Facebook has brought you a surprise in front-end technology this year.

The problems faced by Facebook

500m (Million) registered users, 50% visit at least once a day, the average daily online time is 5 hours and 25 minutes. The bandwidth and server pressure are very high.

The solution of Facebook

Quickling

Facebook came up with a new term Ajaxify, which, as its name implies, translates traditional POST/GET into Ajax requests. The advantage is obvious: first of all, it reduces unnecessary HTML transfers, requesting and rendering only the parts of the page that need to be updated, which in turn reduces the amount of content that needs to be transferred and speeds up the time it takes to deliver content to users. And it also reduces the unnecessary rendering of HTML by the server. Facebook also mentioned that repetitive load/unload can be reduced for session.

Using Ajax may not be new news, and the reasons for rejecting this technology may be largely based on the needs of SEO. The solution is also simple: using Ajax as a means to improve the user experience, not as a necessary way to browse a website, can solve the problem of SEO (P.S. Facebook does not need SEO).

The whole program includes: Link Controller, HistoryManager, BootLoader, Busy Indicator, CSS Unloading, Permanent link support, Resetting timer functions. There is nothing special about these scenarios themselves, and most of them can be explained as link controller, which means to convert a standard HTML LINK request into an Ajax request (by binding the click event). The value of Facebook is that it provides this complete solution, which ensures the usability of the website to a certain extent.

Effect:

It increases the transmission time of the website by 10% per cent and the rendering speed of server pages by 20 per cent and 30 per cent.

Scope of use:

45% of Facebook pages use this technology.

PageCache

To put it simply, the visited pages are cached on the client. But we know that as a highly interactive site like Facebook, we need to ensure that users can get the updated information as soon as possible, rather than showing users a meaningless expired page.

Facebook designed a framework to identify whether a page came from the cache (guess: page * * caches all Ajax's Callback and Result locally after loading. The Facebook page obtains the page content based on Ajax). If it comes from the cache, update the module that needs to be updated through Ajax (guess: the div Id and the corresponding callback handler to be updated on this page are pre-defined through JavaScript, and downloaded at the same time when the page is downloaded).

It mentions three types of updates: incremental updates, user overrides (such as users replying to a comment on the page) and cross-page updates (such as identifying a message as read on the message detail page and updating the number of unread messages on the front page). The core idea is still updated according to Ajax. The specific ideas are as follows:

Incremental update: updates all predefined modules that need to be updated incrementally as long as the page comes from the cache.

User replication: user actions are recorded through HistoryManager and all actions marked "replayable" are replayed after reading the cache page.

Cross-page update: send a signal to the client through the server Database API to identify the expired cache as invalid (it is not clear how to implement it. Perhaps the DB side provides an open webservice, and the client continuously accesses the API through Ajax to get this information. After the cache expiration signal is obtained, the information that needs to be updated through the Ajax update.

By the way, Facebook mentioned a tip for updating Ajax content to avoid page changes / flickering, which is to set the place that needs to be updated to blank instead of updating its content directly.

Effect:

Accelerated website response time by 10 times and saved 20% of server-side page rendering costs.

BigPipe

This technique makes the entire page fetch / render in parallel by dividing the page into individual Pagelets. (it feels a lot like iframe sets, but Facebook is implemented using Ajax. ). This technology is the cornerstone of Quickling and PageCache. This technology includes both server and client, and both front and back end break the previous rendering form of the page.

Implementation details:

The Response of Pagelet is in JSON format, including id,css,js,content,onload and other attributes and corresponding content. After receiving it, it will be rendered through a predefined JS function.

Advanced features provided by Pagelet: inheritance of Pagelet, Phased Rendering (guess: rendering according to rules, that is, rendering according to Pagelet's Response), cross-Pagelet dependency (data dependency, display dependency, JS dependency).

Three modes of BigPipe:

◆ one-time rendering mode: normal mode, which supports search engines and is used to support clients that do not support JS.

◆ pipeline mode: parallel mode, parallel request, and instant rendering.

◆ parallel mode: parallel requests, but render after getting the results of all requests.

Effect:

Increased page response time by two times.

Extended Reading: a probe into the Facebook background Technology of the World's PHP site

The problems faced by YouTube

Daily 2Billion visits. Upload 35 hours of content per minute. But YouTube needs to play video in real time! As soon as possible.

YouTube solution

1. Move the JavaScript reference position from the beginning to the end of the page.

two。 Embed Flash Player directly (use JS to load Flash Player before YouTube). Use the JS at the end of the page to determine the Flash version of the client (or does not support Flash) to replace pre-embedded Flash Player or content (if necessary) to support a specific customer base.

Effect: page rendering time reduced from ~ 400ms to ~ 200ms. Flash playback time reduced from ~ 1200ms to ~ 1100ms.

3. Preload video connection: use JavaScript to create Image reference video content to parse DNS and pre-open a connection for later use.

Effect: the total time to establish a video connection is reduced from ~ 260ms to ~ 180ms.

4. Offer a simplified version: this is boring, just provide a simplified version.

Effect: the page loading time is reduced from ~ 1750ms to ~ 1100ms.

5. UIX Widget system: delayed loading of non-critical content. In fact, the whole paragraph is nothing new, most of it is omitted, but only through Ajax to dynamically load non-critical content after the page is rendered. What is more special is to take advantage of the event bubbling of JS, using a handler at the top to deal with various events (the advantages are unknown. Maybe it's just that the code is concise and concentrated), identify and identify the corresponding handler through CSS.

Yahoo Mail

How does Yahoo build the next generation Mail system? The answer is through YUI3. Yahoo technology is absolutely *, it has developed the Web front-end technology to a very mature stage, taking into account all aspects of Web (data compression, modularization, efficient CSS, non-blocking JavaScript loading, static content delivery, the use of browser Cache, etc.), so there is little innovation. To some extent, some of Facebook's so-called innovations are just hindsight. Yahoo has already considered and implemented these plans, but it may not be so targeted.

Baidu

I feel that as a whole, I tend to introduce the organizational structure and some outdated content.

Taobao

Some questions about when to use Ajax and when not to use it are also being discussed.

On the contrary, the lean testing of Taobao intrigued me. He Yun, an employee of Taobao from Microsoft, described how Taobao carried out CI (continuous integration). Some experiences such as code coverage testing are also instructive.

This is the end of the content of "what are the Web front-end technologies?" thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.