Read for 10 minutes

preface

In 2013, smartphones just started to enter the era of 1,000 yuan, the cost of mobile hardware and mobile App development is much higher than the average market price in 2020, and the mobile enterprise website is still a new concept.

Enterprises and governments begin to pay attention to the mobile browser experience of portal websites, such as China Government Website, Lenovo, Microsoft, W3C, CSDN, Pathfinder, etc. In the process of looking for mobile solutions of enterprise websites, after a comprehensive comparison of budget, technology, product experience and service quality, Allmobilize, a solution that introduced “one line of code to make the web mobile” into the original PC front-end project, was actually a js external script immediately after the head tag of the web page. And this JS script has what research and development knowledge worth learning?

<script src="htpp://cdn.example.com/allmobilize.js"></script>
Copy the code

In some cases

​

Features of Allmobilize

One line of code, rapid deployment

Simply embed a line of JavaScript code into a web page and make your site mobile, which is cheap for customers to learn and accept

<script charset="utf-8" src="http://cdn.example.com/allmobilize.min.js" >
Copy the code

​

Automatic updates, real-time content synchronization

After the adaptation, the mobile website content automatically synchronizes with the PC in real time, without the need for human synchronization maintenance. The synchronization rate is 99.9%, and the average synchronization response time is less than 0.01 seconds.

​

URL unchanged, uniform URL

Mobile website and PC website has always been consistent, without the need for secondary promotion, help to improve the website ranking in mobile search engines; Unified URL, also conducive to highlight the corporate image, improve customer trust.

​

Principle analysis and implementation

Summed up in three core steps:

1. Prevent the browser from rendering the original PC page rendering.

2. Create a new reading view template on the mobile web.

3. Mobile view template and PC view data fusion, rendering.

Prevent the browser from rendering the original PC web page rendering

If you go to www.kuaishou.com/ and the browser renders normally, it will see the PC version of the page. If you introduce a line of script that is expected to prevent the browser from rendering the PC version of the page and display a mobile view, how can you do that in the script?

1. 1 Prevents resource loading, style, and script execution

The DOM document loading steps are known:

(1) Parse HTM L structure

(2) Load the external script and style sheet files

(3) Parse and execute the script code

[img,ifram,script, link] [img,ifram,script, link]

(5) Load external files such as pictures

(6) The page is loaded

To prevent resource loading, style and script execution, you need to make the web page DOM unrecognizable by the browser:

// Add prefix window.addEventListener("DOMContentLoaded") to all img, iframe, script,video, etc tags. Function () {img (), iframe (), script (),style ()}, false);Copy the code

Href Modified X-href

The original

<link rel="shortcut icon" href="//static.yximgs.com/udata/pkg/fe/favicon.70ff1fcc.ico" type="image/x-icon">
Copy the code

After the adjustment

<link rel="shortcut icon" x-href="//static.yximgs.com/udata/pkg/fe/favicon.70ff1fcc.ico" type="image/x-icon">
Copy the code

SRC is changed to x-src

The original

< img SRC = "/ / static.yximgs.com/udata/pkg/fe/kwai_qrcode.a6dfe547.png" Alt = "qr code" class = "image" >Copy the code

After the adjustment

< img X-ray SRC = "/ / static.yximgs.com/udata/pkg/fe/kwai_qrcode.a6dfe547.png" Alt = "qr code" class = "image" >Copy the code

Script increase type = “text/x – script”

The original

<script> console.log(' Fast hand, embrace every life ') </script>Copy the code

After the adjustment

<script type="text/x-script"> console.log(' fast hand, hug every life ') </script>Copy the code

Increase media style = “x – the media”

The original

<style>
.logo{
  background:orange;
}
</style>
Copy the code

After the adjustment

<style media="x-media">
.logo{
  background:orange;
 }
</style>
Copy the code

2.1 Prevent images, new Windows, and other objects from loading lazily

Window.stop () in Web Api does just that, and IE also supports it through Document.execCommand (‘stop’)

//IE document.execCommand('stop'); / / Chrome and Firefox window. The stop ();Copy the code

Create mobile rendering content

In the first step, we have successfully prevented the browser from rendering the original PC web rendering, so in the second step we need to create the mobile experience view.

What new web content should users see? How do different web addresses differentiate?

2.1 Mapping new web configuration through regular

In Allmobilize. Js, we first designed a set of dictionaries with regular expressions as keys and mobile web content configured as values.

{
"^\/docs\/(News|news)\.asp":{
   'template': 'general', 
   'crawlData':function($){
    var title = $('.header .title').text();
    return {
     title:title
    }
   }
 },
"\/detail\/(.+)$":{
   'template': 'detail',
   'crawlData':function($){
    var content = $('.content').text();
    return {
     content:content
    }
   }
 }
}
Copy the code

In the code to conform to the “^ \ docs \ / (News | News) \. Asp” or “\ / detail \” (. +) web pages to fit the regular rules. The template and crawlData, respectively, correspond to a front-end template (built into the AllMobilize script, which is actually a brand new HTML with its own CSS, JS, and HTML) and a function to fetch the data. For example, a new page template or data configuration, etc., where the “regular rules of the web page are adapted. The template and crawlData, respectively, correspond to a front-end template (built into the AllMobilize script, which is actually a brand new HTML with its own CSS, JS, and HTML) and a function to fetch the data. For example, a new page template or data configuration, etc., where the “regular rules of the web page are adapted. The template and crawlData, respectively, correspond to a front-end template (built into the AllMobilize script, which is actually a brand new HTML with its own CSS, JS, and HTML) and a function to fetch the data. For example, the new page template or data configuration and so on, where the operation of the DOM model context is actually the original PC DOM model, so that the PC DOM text, data synchronization

2.2 Opening a new document

var currentPageConf = {template,crawlData}; / / assume that matched the current web page routing configuration let newDocHtml = currentPageConf. GetTemplate (). The render (currentPageConf. CrawlData ($)) / / open a written document document.open('text/html','replace'); // The method writes a text string to a document stream opened by document.open() document.write(newDocHtml); // to end a write to a Document by document.write (), which is usually opened by document.open (). document.close();Copy the code

3. Real-time synchronization of mobile terminal data content

The dom model context involved in the $operation in the crawlData function involved in the second step is actually the original PC DOM model. After blocking the rendering of the original web page, the Allmobilize script not only creates a new view, At the same time, the entire DOM node of the original web page will be cached in advance, so that the data on the original DOM node can be captured to complete the real-time synchronous update of the data content in the new web page. Finally, for example, the navigation of the computer version must correspond to the navigation of the new web page content on the mobile end one by one.

Finally, look at the sequence diagram below to see how the AllMobilize script works:

​

conclusion

This scheme was a very good innovation in the market in 2013. For some HTML pages with a long history of non-standard coding and a large number of table layouts, although there is still a lot of manual coding, the implementation cost of the enterprise to complete the mobile website is far reduced. At that time, Lenovo China’s mobile terminal store was completed and launched within a week.

About scaling

Here’s how Allmobilize finally came to scale in 2013:

  • By crawling and machine learning accumulated a lot of website adaptation of the common script and principles, automatically generate the website adaptation script
  • Create and encode template files quickly with Web IDE and building block drag-and-drop tools, as well as data extraction script coding, reducing the programming threshold
  • Template for interworking with CMS vendors
  • Open source HTML5 cross-screen front-end framework AmazeUI
  • Manpower outsourcing on a large scale to further reduce costs

Finally, interested students can visit the case website such as www.gov.cn/ in mobile terminal debugging mode to explore the “one-line code adapting website technology”. I hope this technology will inspire you.