Tencent internship | front end

  1. A quick introduction to yourself?

  2. The way of learning?

    1. Modern JavaScript Tutorial
    2. MDN
    3. Ruan Yifeng ES6 tutorial
    4. Various official documents
    5. Visit tech Community
    6. I’m not a big fan of video learning

  3. What technology are you most familiar with?

    1. Here I mentioned JS, CSS and H5
    2. Basically just say what comes to mind, you know
    3. The interviewer took the initiative and listened to me without interrupting

  4. Tell me aboutCDNThe principle of

    • Only said the function of CDN, the principle can not answer;

    Here are the answers from the Internet:

Assume that your accelerated domain name is www.a.com. After you access the CDN network and start to use the accelerated service, when the end user (Beijing) initiates an HTTP request, the processing flow is as shown in the following figure.

  1. When the end user (Beijing) towww.a.comThe LDNS initiates a domain name resolution request to the local DNS.
  2. LDNS checks if there are any in the cachewww.a.comIP address record of the. If yes, it is returned directly to the end user. If no, consult the authorized DNS.
  3. When authorized DNS is resolvedwww.a.comReturns the domain name CNAMEwww.a.tbcdn.comCorresponding IP address.
  4. The domain name resolution request is sent to AliyunDNSSchedules the system and assigns the best nodes for requestsIPAddress.
  5. LDNSTo obtainDNSParsing of returnsIPAddress.
  6. User acquisition resolutionIPAddress.
  7. Obtained from the userIPAddress initiates an access request to the resource.
    • If theIPIf the node corresponding to the address has cached the resource, the data will be directly returned to the user, for example, in steps 7 and 8 in the figure. The request ends.
    • If theIPIf the node corresponding to the address does not cache the resource, the node sends a request for the resource to the source site. After obtaining the resources, cache the resources to the node (for example, the Beijing node in the figure) based on the user-defined cache policy and return the resources to the user. The request ends. For details about how to configure a cache policy, seeCache configuration.

  1. Talk about common onesES6New features?

    1. Const, let

    2. The map, the set

    3. Promise, async, await

    4. Expansion operator…

    5. Deconstruction assignment

    6. Default values for function arguments

    7. The iterator, for… of

    8. Class

    9. Symbol

    10. Extension of functions and arrays

  2. New method compatibility?

    IE 10/11 above? (Smart guy, ES6 is completely dead in IE, Edge 14/15 compatibility is over 90%)

  3. How do I know if these methods are compatible?

    1. MDN
    2. Can I Use
    3. Go straight to the Internet

  4. . 和 Array.fromWhat’s the difference between a transform array?

    1. .Can only be used foriterable
    2. Array.fromNot only can be used foriterableCan also be used inArray like object

  5. Talk about direct useobjectSave the sum of key-value pairsmapWhat’s the difference between a key-value pair?

    My head was suddenly confused. I hadn’t looked at map for a long time and couldn’t answer

    1. ObjectThere are prototypes (unless actively set upObject.create(null)), there are some defaultskeyIt’s on the prototype chain, butmapThere is no
    2. inObjectObject, can only putString 和 SymbolAs akeyValue, but inmap,keyValues can be of any type
    3. throughMapIn thesizeProperty, which can be easily obtainedMapLength; Object has no direct length method

  6. The cache

    1. Why Etag

      1. Some files may change periodically, but their contents do not change (only the modification time), at which point we do not want the client to think that the file has been modified and redoGET;
      2. Some files are modified very frequently, such as in seconds or less,If-Modified-SinceThe granularity that can be examined is S
      3. Some servers do not know exactly when a file was last modified.

    2. If you could choose only one cache, what would it be? Why is that?

      1. Negotiation cache, if strong cache is selected, local data will never get the latest network data

    3. How do you reduce requests by selecting only the negotiated cache?

      A: Use localStorage and sessionStorage to help cache local data, and negotiate cache the data that is not available locally

      Follow-up: But localStorage and sessionStorage are mostly [character level] content, and network request data is mostly [file level] content

      A:… The whole won’t

  7. Intelligence problem: now is the afternoon 5:35 minutes, seek pointer included Angle?

    Here is very embarrassing, the subtraction is written as plus points, the interviewer asked me for my idea, I thought about it and found that it was written backwards/laughing and crying

  8. How do you use it anywayCSSHide an element?

    1. display : none
    2. visibility : hidden
    3. opacity : 0

  9. Can you think of anything else besides the usual three?

    1. After position moves off the screen, set Overflow: Hidden to prevent the user’s scroll wheel from finding the element
    2. The Z-index setting is shaded with other elements at the bottom and top of the screen
    3. If the element is empty, you can set the background color to Transparent

    I was so nervous about the interview that I couldn’t think of any other way.

    1. 2D graphics can be rotated by 90° with rotate
    2. All data is set to 0 and all borders and outside lines are removed and overflow: hidden

  10. Shake hands and wave?

    I’m just starting to say it before I say it again

  11. AJAX?

    Balabala omit

  12. Other front-end optimizations?

    1. Combine requests to reduce the number of requests
    2. Sprite, font ICONS, SVG, Webp
    3. The cache
    4. Compress resource size
    5. CDN
    6. DNS
    7. Resource loading time
    8. Reduce reflux redraw
    9. webpack
    10. Throttling stabilization

  13. You just mentionedWebpMay I sayWebpCompatibility?

    1. Webp has a better image compression algorithm
    2. As far as I know, Webp works well on Android phones

  14. webpThe principle of image format (why better compression)?

    silence

  15. What about compatibility on PC browsers?

    1. Probably compatible with Chrome as well
    2. It feels like overall compatibility should be poor
    3. I don’t know much about WebP compatibility in browsers

  16. Sprite, font ICONS, SVG ICONS reduce load load?

    Balabala omit

  17. How to make the patting method in your project compatible with IE?

    1. The first thought is to determine compatibility and build your own wheels (stupid)
    2. The interviewer reminds you to polyfill.

  18. What CSS goes on top and JS goes on bottom?

    1. Introduce script async and defer

  19. HTTP status code?

  20. Please complete a tool method to count the words that appear most frequently in pure English articles. Input is the content of the article, output is the words that appear most frequently and the number of times

  21. When can I start my internship?

  22. The internship time

  23. Senior year without classes?

ask

  1. What department am I interviewing for?

    CSIG Tencent Education

  2. What are the main technology stacks in the group? (MY major is Vue)

    Popular frameworks will be used, but React is mainly used in consideration of uniformity and convenient management. React is more preferred, but other frameworks also exist (public ownership as the main body, and multiple ownership common…).

  3. Group atmosphere?

  4. Is it teamwork or personal development?

    Teamwork… (chat)

Half past six in the evening, the end of the interview, each rush to dinner