Today, a brother went for an interview and asked about two questions. And he doesn’t usually like to go into the basics. Where am I? Let’s focus on how to answer these two questions.

A, Array. Prototype. Slice. The call (the arguments)

Array. The prototype. Slice. The call (the arguments) will have length attribute of object into an Array. As follows:

{
  letA = {length: 2, 0:'a', 1:'b'}; Array.prototype.slice.call(a); / / /"a"."b"]

  leta={length:3}; Array.prototype.slice.call(a); // [undefined, undefined,undefined] }Copy the code

In fact, people familiar with the little red book, should know this principle, where am I? I recommend you to delve into the little red book. What about the methods inside first of all, call? In my previous article, I talked about how I use call, apply, and bind.

Slice has two uses: string. slice and array. slice. The first returns a String and the second returns an Array. Where am I? The main exploration is the latter, the source code for Slice


function slice(start, end) { 
var len = ToUint32(this.length), result = []; 
for(var i = start; i < end; i++) { 
    result.push(this[i]); 
} 
    return result; 
}   
Copy the code

So according to the source code to explore Array. Prototype. Slice. The call (the arguments) should be:

Array.prototype.slice = function(start,end){ var result = new Array(); start = start || 0; end = end || this.length; // Call changes the direction of thisfor(var i = start; i < end; i++){
          result.push(this[i]);
     }
     return result;
}
Copy the code

And I’m sure that with this kind of deep exploration, I’m pretty much on my way to understanding what this means.

Two, VUE bidirectional binding

Regarding two-way binding of data, I found that I can’t write complicated code here. Originally, I thought I could write a subscription-publisher model, but for interviews, I’ll just write a few simple ones.

<! DOCTYPE html> <head></head> <body> <div id="app">
    <input type="text" id="a">
    <span id="b"></span>
  </div>

  <script type="text/javascript">
   var obj = {};
   Object.defineProperty(obj, 'hello', {
       get: function() {
           console.log('get val:'+ val);
           return val;
       },
       set: function(newVal) {
            val = newVal;
            console.log('set val:'+ val);
            document.getElementById('a').value = val;
            document.getElementById('b').innerHTML = val; }}); document.addEventListener('keyup'.function(e) {
      obj.hello = e.target.value;
    });
   </script>
  </body>
</html>
Copy the code

Here is a simple example, which is a two-way binding of data when we know the DOM ID. Code is relatively simple, test available

Reduce HTTP requests

+ CSS Sprites

CSS Sprites, CSS Sprites, merge images, display elements by specifying CSS backgroud-image and backgroud-position.

+ Combine JS scripts and CSS stylesheets

Appropriately combine multiple JS scripts into one script and multiple CSS stylesheets into one style sheet.

+ Use external JS and CSS files

Inlining all JS and CSS is more efficient when the user visits the page without caching because of the extra HTTP request overhead associated with external JS and CSS. One HTTP request is faster than three HTTP requests.

In fact, using external JS and CSS files produces faster access speed. This is because external JS and CSS files can be cached by the browser. When the same JS and CSS is requested next time, the browser does not send HTTP requests, but uses cached JS and CSS files, reducing the number of HTTP requests.

+ Configure multiple domain names and CDN acceleration

Typically, browsers have a limited number of concurrent requests for a domain name, such as 100 files to load, but browsers can only request 10 files concurrently at a time, which would be time-consuming. Therefore, configuring multiple domain names maximizes the number of concurrent requests.

Said in the last

Although I have no intention of changing jobs for the time being, it would be a good thing to sum up their interview experience. At the very least, I learned a lot and recalled a lot. I also found a lot of shortcomings. I expect they will tell me more interesting interview topics when they talk to me next time…