QQ WEB front-end interview experience

A few days ago, I received SNG's internship interview notice. It was the next night. It was the first time I had such a close encounter with Tencent headquarters. I was still very excited. However, during the university period, I lived in a mess, and the foundation was not solid. Although I had two internship experiences, the final result was still unsatisfactory. In the interview process, whether it is the basic written test or the reconstruction plan of the project before the interview questions, the answers are not very ideal. Not many people read my blog, so I just want to redo it as a memory of my interview experience.

1. null, undefinedThe difference?
It is used for objects that do not exist, and it is used nullfor declared objects that are not defined undefined.

2. evalWhat does it do?
Execute a string as if it were a Javascript expression.

3. How to judge whether an object belongs to a certain class?
instanceof Used to indicate whether the object is an instance of a specific class

Note the difference between the other two
typeof: check the data type of the variable: check
hasOwnPropetyif the object has the given property or object

4. The difference between synchronous and asynchronous?
Synchronous : No other actions are performed between the client sending the request and the server returning the result
Asynchronous : The client can perform other operations after sending the request

5. What are the ways of js lazy loading?

window.onload creatElement(‘script’);
document.write()
Iframe
ajaxpost evalcode

6. The difference between .call() and .apply()?
Calling a method of an object replaces the current object with another object. callThe incoming parameter is an object, and applyan array is passed in.

7. How to judge whether the current script is running in the browser or node environment?
By judging whether globalthe object is window, if not, it is in the nodeenvironment.

8. Please point out the difference between document load and document ready? The
load event needs to be fully loaded to trigger the event, and it can be triggered readyas long as the DOM structure is loaded.

9. What data types does Javascript have, which are pass-by-value and which are pass-by-reference?

Pass value:
- stringString
- Numerical valueNumber
- booleanBool
Address:
- arrayArray
- objectObject
- functionFunction
other:
- undefined
- null

10. Which operations will cause memory leaks, can you give an example?

A memory leak is any object that persists after you no longer have or need it.

setTimeout()Memory leak when the first parameter is a string instead of a function
The attribute added to the dom object is a reference to an object
dom object and js object refer to each other

function Encapsulator(element){
    this.ElementReference = element;
    element.myProp        = this;
}
new Encapsulator(document.getElementById('div'));

attachEventUse binding events for dom objects .

11. How many touch screen events are included in the mobile terminal?

touchstart
touchmove
touchend
touchcancel

12. There is a delay in the click event on the mobile terminal. What is the time and why? How to deal with it?
300ms, the problem left by the iphone browser in order to listen to the double-click zoom event.

Disable zoom
fastclick
zepto-like tap

13. How to solve Zepto's point-through (event penetration) problem?

Reason : The tap event needs to be bubbled to the document to trigger, and the click event will be triggered before the bubble is reached. There is a 300ms delay on the iphone, so there will be a click through.

solution

touchend
fastclick

14. Explain why the following code is not an IIFE (immediately called function expression);

function foo(){};

What changes should be made to make it an IIFE?
The definition of the function cannot be executed

(function foo(){})();

15. Please list several Javascript host objects and native objects respectively

Host object : Window, Navigator,Image
Native Objects : Null, Number, Boolean, String, Object, Function, Array,RegExp

16. Please list as many ajax cross-domain solutions and principles as possible

jsonp

<script>
function callback(json){
    //do something
}
</script>
<script src="http://localhost:80/data.php?callback=callback"></script>

//The data format returned above callback({id:1,name:'haha'});

iframe

17. Please describe the difference between json and jsonp. The principle of jsonp?
json It is a data exchange format and jsonpan unofficial cross-domain data exchange protocol. The
jsonpprinciple same as above

18. List as many front-end performance optimization measures and solutions as possible

css alcohol
cdn acceleration
script lazy loading
img lazy loading
js, css code compression and merger
local cache

19. Write the result of running the following code

var length = 10;
function fn(){
    console.log(this.length);
}
var obj = {
    length:5,
    method:function(fn){
        fn();
        arguments[0]();
    }
}
obj.method(fn,1);

10, 2

The first fn scope is in the window, the argument is the object, so the object calls fn, this points to the argument, and the length is 2

20. Write the result of running the following code

function fn(a){
    console.log(a);
    var a = 2;
    function a(){}
    console.log(a);
}
fn(1);

function a(){}, 2

Functions precede variable declarations,

21. Write the result of running the following code

if('a' in window){
    var a = 10;
}
alert(a);

The variable is precompiled, the value of a is undefined in the window object

22. Write the result of running the following code

var f = true;
if(f === true){
    var a = 10;
}
function fn(){
    var b = 20;
    c = 30;
}
fn();
console.log(a);// 10
console.log(b);// error
console.log(c);// 30

10,error,30

The only thing the title owner did right, 囧

23. Write a generic (IE compatible) event listener function

my.Event = {
    ready : function(fn){
        if(fn == null){
            fn = document;
        }
        var onload = window.onload;
        if(typeof onload != 'function'){
            window.onload = fn;
        }
        else{
            window.onload = function(){
                onload();
                fn();
            }
        }
    },
    addEvent : function(ele, type, handler){
        if(ele.addEventListener){
            ele.addEventListener(type,hanlder,flase);
        }
        else if(ele.attachEvent){
            ele.attachEvent('on'+type,function(){
                hanlder.call(ele);
            });
        }
        else{
            ele['on'+type] = hanlder;
        }
    },
    removeEvent : function (ele, type, hanlder){
        if(ele.removeEventListener){
            ele.removeEventListener(type,hanlder,false);
        }
        else if(ele.detachEvent){
            ele.detachEvent('on'+type,hanlder);
        }
        else{
            ele['on'+type] = null;
        }
    },
    stopPropagation : function(event){
        if(event.stopPropagation){
            event.stopPropagation();
        }
        else{
            event.cancelBubble = true;
        }
    },
    preventDefault : function(event){
        if(event.preventDefault){
            event.preventDefault();
        }
        else{
            event.returnValue = false;
        }
    },
    getTarget : function(event){
        return event.target || event.srcElement;
    },
    getEvent : function(e){
        var ev = e || window.event;
        if(!ev){
            var c = this.getEvent.caller;
            while(c){
                ev = c.arguments[0];
                if(ev && Event === ev.constructor){
                    break;
                }
                c = c.caller;
            }
        }
        return ev;
    }
}

24. For the following dom, implement a script so that the corresponding sequence number is output when the alert corresponds to li. For example, when the second li is clicked, the alert result is 2

<ul>
    <li>呵呵</li>
    <li>哈哈</li>
    <li>嘿嘿</li>
    <li>嘎嘎</li>
    <li>呱呱</li>
</ul>

 <script type="text/javascript">
    var lis = document.getElementsByTagName('li');
    for(var i = 0, length = lis.length; i < length; i++) {
      (function(i) {
        lis[i].onclick = function() {
          alert(i + 1);
        };
      })(i); 
    }
  </script>

25. Please write a function to parse the URL parameter into an object
such as url = “ http://qq.com/index.html?key0=0&key1=1&key2=2 ”

function parseQueryString(url) {
  var obj = {};
  var a = url.split('?');
  if(a === 1) return obj;
  var b = a[1].split('&');
  for(var i = 0, length = b.length; i < length; i++) {
    var c = b[i].split('=');
    obj[c[0]] = c[1];
  }
  return obj;
}
var url = 'http://witmax.cn/index.php?key0=0&key1=1&key2=2';
var obj = parseQueryString(url);
console.log(obj.key0, obj.key1, obj.key2);

The above are the on-site written test questions. The items asked later are mainly to point out some obvious problems in my previous company. The most classic ones are the problems of mobile terminal adaptation and front-end construction (packaging and compression optimization). The interviewer was quite good, and gave a very pertinent but shocking feedback: "Your contact with the front-end is a little short, and many things have already been done in your freshman and sophomore years."

After the interview, I actually knew the result in my heart. In the past, as long as you can change the plug-in in a startup company, you can probably do it with ease. However, if you want to enter a big company like Tencent, you still have to read a book and lay a solid foundation.