In the past year, many people are dissatisfied with the company without benefits, interpersonal relationship is not easy to get along with, no prospects for development and so on. They want to change a job to start over themselves in the New Year, so are you ready?

The following is a copy of the interview materials prepared by me, I wanted to use, but the company gave me a surprise on the first day of the New Year, the salary increase!!

1, the viewport

<meta name="viewport" The content = "width = device - width, initial - scale = 1.0, the minimum - scale = 1.0, the maximum - scale = 1.0, user - scalable = no" / > / / width Set the viewport width to a positive integer, or string 'device-width' // device-width device width // height Set the viewport height. // minimum-scale allows the user to scale at a minimum scale. // maximum-scale allows the user to scale at a maximum scale. // User-scalable Whether manual scaling is allowedCopy the code

Extended questions

How to deal with 1px rendering 2px on mobile

1. Partial processing of viewport attribute in mate tag, initial-scale is set to 1 REM according to the design standard, plus using transfrome scale(0.5) to reduce twice; 2 Handle the viewport attribute in the mate tag globally, and set initial-scale to 0.5 rem according to the design document standardCopy the code

2. Several ways to cross domains

The Same Origin Policy (SOP) is a convention introduced by Netscape in 1995. It is the core and most basic security function of the browser. Without the Same Origin policy, the browser is vulnerable to XSS and CSFR attacks. Same-origin means that the protocol, domain name, and port are the same. Even if two different domain names point to the same IP address, they are not same-origin.

So how do you solve cross-domain problems?

<script> var script = document.createElement('script'); script.type = 'text/javascript'; // Pass the argument and specify the callback execution function as onBack script.src = 'http://www..... :8080/login? user=admin&callback=onBack'; document.head.appendChild(script); Function onBack(res) {alert(json.stringify (res)); } </script> 2, document.domain + iframe cross-domain this scheme is only applicable to cross-domain application scenarios where the primary domain is the same and the subdomains are different. 1.) Parent window: (http://www.domain.com/a.html) <iframe id="iframe" src="http://child.domain.com/b.html"></iframe> <script> document.domain = 'domain.com'; var user = 'admin'; < / script > 2) child Windows: (http://child.domain.com/b.html) < script > document. The domain = 'domain.com'. Alert ('get js data from parent --> '+ window.parent. User); < / script > disadvantages: Please see the following rendering load optimization 3, nginx proxy cross-domain 4, nodejs middleware proxy cross-domain 5, the backend inside the header information set security domain more cross domain specific content see https://segmentfault.com/a/1190000011145364Copy the code

3. Rendering optimization

1. Disable iframe (block parent document onload event); * Iframe blocks the Onload event on the main page; * Search engine searchers cannot interpret such pages, which is bad for SEO; * Iframe and the home page share the connection pool, and browsers have restrictions on connections to the same domain, so parallel page loading can be affected. These two disadvantages need to be considered before using iframe. If you need to use an iframe, it is best to use javascript to dynamically add the SRC attribute value to the iframe to get around these two problems. 2. Do not use GIF images to implement loading effects (reduce CPU consumption and improve rendering performance); 3. Use CSS3 code instead of JS animation (avoid redrawing and rearrangement as much as possible); 4. For some small ICONS, you can use Base64-bit encoding to reduce network requests. However, it is not recommended to use large image, which consumes CPU. The advantages of small ICONS are: 1. Reduce HTTP requests; 2. Avoid cross-domain files. 3. The modification takes effect in time; <style></style> (because the JS thread and render thread in the Renderer process are mutually exclusive); 6, the page header <script</script> blocks the page; (because the JS thread and render thread in the Renderer process are mutually exclusive); 7. Hollow href and SRC blocks the loading of other resources on the page. Webpage Gzip, CDN hosting, data cache, picture server; 9, front-end template JS+ data, reduce bandwidth waste caused by HTML tags, front-end variables save AJAX request results, each operation of local variables, no request, reduce the number of requests 10, use innerHTML instead of DOM operation, reduce DOM operation times, optimize javascript performance. 11. Set className instead of style when there are many styles to set. Use fewer global variables and cache the results of DOM node lookups. Reduce I/O read operations. 13. Avoid CSS Expression, also known as Dynamic properties. Image preloading, style sheets at the top, scripts at the bottom with time stamps. 15. Avoid using tables in the main layout of a page. Tables are not displayed until the content is fully loaded, which is slower than div+ CSS layout. For ordinary websites, there is a unified idea, which is to optimize the front end as far as possible, reduce database operations, reduce disk IO. Optimization refers to the forward end, in the case of does not affect the function and experience, and can not on the server is being executed in the browser, can be directly on the cache server returned to the application server, applications can obtain results don't directly to the external, the machine can achieve the data not to remote, memory to be able to take not to take the disc, Do not query what is in the cache. Reducing database operations means reducing the number of updates, caching results to reduce the number of queries, letting your program complete the database operations as much as possible (such as join queries), reducing disk I/O means minimizing the use of file systems as caching, reducing the number of read and write files, etc. Program optimization is always about optimizing the slow parts, you can't "optimize" in a different language.Copy the code

4. Stages of the event

1: capture phase --> 2: target phase --> 3: bubbling phase document --> target target ----> document Therefore, the difference between setting the third addEventListener parameter to true and false is clear: True indicates that the element responds to the event during the "capture phase" of the event (when passed from the outside in); False indicates that the element responds to the event during its "bubbling phase" (passing from inside out).Copy the code

5, let var const

Let allows you to declare a variable, statement, or expression whose scope is limited to the block level. The LET binding is not subject to variable promotion, which means that the LET declaration is not promoted to the point where the variable is currently in the "temporary dead zone" from the start of the block until initialization. Since variable declarations (and other declarations) are always handled before any code executes, So declaring a variable anywhere in code is always equivalent to declaring const at the beginning of code to create a read-only reference to a value (that is, a pointer) The basic types are Undefined, Null, Boolean, Number and String, which are stored on the stack. Compound types include Array and Object, which are stored in the heap. Const a = 3; const a = 3; const a = 3; const a = 3; An error will be reported when a = 5; However, if it is a compound type and only one of the values of the compound type is changed, it will still work.Copy the code

Arrow function

Syntax is shorter than function expressions and does not bind its own this, arguments, super, or new.target. These function expressions are best used for non-method functions, and they cannot be used as constructors.Copy the code

Get an array out of order quickly

Var arr =,2,3,4,5,6,7,8,9,10 [1]; Arr.sort (function(){return math.random () -0.5; }) console.log(arr);Copy the code

Explanation :(lack of language organization ability, please do not make fun of)

First: when return is less than 0, a is placed before B; Is equal to 0, the relative positions of a and B remain the same; Greater than 0, b will be placed before A; Here you will find that the array is in positive order at the beginning, and each permutation will be preceded by a random number (note that each permutation means each permutation in the red box, a total of 9 permutations, and there may be multiple comparisons in a permutation). When the random number is greater than 0.5, a second comparison will be made. When the second random number is still greater than 0.5, a second comparison will be made until the random number is greater than 0.5 or the first rank. When the random number of a permutation is less than 0.5, the two indexes of the current comparison will not change, and the next permutation will continue.Copy the code

8, font family

@宋 体 SimSun @blackbody SimHei @wechat Yahei Microsoft Yahei @microsoft JhengHei @new 宋体 NSimSun @mingliu @mingliu @ FangSong @ KaiTi @ FangSong_GB2312 FangSong_GB2312 @ KaiTi_GB2312 KaiTi_GB2312 @ @ Font: Microsoft Yahei,SimSun,Helvetica; }Copy the code

9. Meta tags that may be used

<! <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal UI "/> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal UI" /> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal UI" --> <meta name="apple-mobile-web-app-capable" content="yes" /> <! -- Safari always stands for IOS (default/black/ black-always) --> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <! <meta name="format-detection"content="telephone=no, Email =no" /> Meta tags <! <meta name="renderer" content="webkit"> <! <meta HTTP-equiv =" x-UA-compatible "content="IE=edge"> <meta http-equiv=" x-UA-compatible" content="IE=edge"> <meta name="HandheldFriendly" content="true"> <! < Meta Name ="MobileOptimized" content="320"> <! --> <meta name="screen-orientation" content="portrait"> <! --> <meta name="x5-orientation" content="portrait"> <! --> <meta name="full-screen" content="yes"> <! <meta name="x5-fullscreen" content="true"> <! <meta name=" browserMode "content="application"> <! <meta name="x5-page-mode" content="app"> <! <meta name="msapplication-tap-highlight" content="no">Copy the code

Eliminate the Transition screen

.css { -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden; -webkit-perspective: 1000; } Transition animations (when hardware acceleration is not enabled) will shake, the above solution is just a way to change the view to enable hardware acceleration; Another way to enable hardware acceleration:.css {-webkit-transform: translate3d(0,0,0); Moz - transform: translate3d (0, 0); - ms - transform: translate3d (0, 0); The transform: translate3d (0, 0); } The most common way to start hardware acceleration is: Animator: animator: animator: animator: animator: animator: animator: animator: animator: animator: animator: animator It is generally used in conjunction with opacity and translate (besides the above attributes that can trigger hardware acceleration, other attributes do not become a composite layer after testing). Disadvantages: Hardware acceleration will lead to excessive CPU performance consumption and increased battery power consumption; So try to avoid overusing hardware acceleration.Copy the code

11. Android 4.x bug

1. The browser shipped with Samsung Galaxy S4 does not support border-RADIUS 2. When setting both border-radius and background color, the background color will overflow to the part outside the rounded corner 3. For some mobile phones (such as Samsung), link A supports mouse: Visited event, that is to say, after the visit of the link, the text becomes purple. 4. Android cannot play multiple audio files at the same timeCopy the code

12. JS Determines the source of the device

function deviceType(){ var ua = navigator.userAgent; var agent = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"]; for(var i=0; i<len,len = agent.length; i++){ if(ua.indexOf(agent[i])>0){ break; } } } deviceType(); window.addEventListener('resize', function(){ deviceType(); }) WeChat some not quite same function isWeixin () {var ua = the navigator. UserAgent. ToLowerCase (); if(ua.match(/MicroMessenger/i)=='micromessenger'){ return true; }else{ return false; }}Copy the code

13. The Audio and video elements do not play automatically on ios and Android

Reason: In order to save traffic, major browsers have made optimization, when the user does not act (interaction) does not allow automatic playback; <audio SRC ="music/bg.mp3" autoplay loop controls> </audio> <audio controls="controls"> <source SRC ="music/bg.ogg" type="audio/ogg"></source> <source SRC ="music/bg.mp3" Type ="audio/mpeg"></source> priority to play bg.ogg, does not support automatic playback when playing bg.mp3 </audio> //JS binding. $(window). One (' touchStart ', function(){music.play(); }) / / WeChat compatible processing under the document. The addEventListener (" WeixinJSBridgeReady ", function () {music. Play (); }, false); 1. The autoplay attribute of the audio element is unavailable on IOS and Android, but works properly on PC. //2. The audio element without controls takes up space on IOS and Android, while Chrome does not take up any space on PC. //3. Note that the compatibility processing of wechat needs to reference wechat JS;Copy the code

14, CSS implementation of single line text overflow display…

Direct effect: A single line is much simpler and easier to understand than a multi-line text overflow.

Implementation method

overflow: hidden; text-overflow:ellipsis; white-space: nowrap; Of course, you also need to add the width genus to allow partial browsing.Copy the code

Implement multi-line text overflow display…

Effect:

Implementation method:

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
Copy the code

Scope of application:

This method is suitable for WebKit browsers and mobile terminals because WebKit CSS extension attributes are used.

Note:

1. -webkit-line-clamp is used to limit the number of lines of text displayed on a block element. To achieve this effect, it needs to combine the other WebKit properties. 2. Display: -webkit-box; Properties that must be combined to display the object as an elastic stretchable box model. 3. -webkit-box-orient Must attach to a property that sets or retrieves the arrangement of children of a flex box object.Copy the code

If that doesn’t seem pretty enough to you, read on:

Effect:

Is that what you want?

Implementation method:

div { position: relative; line-height: 20px; max-height: 40px; overflow: hidden; } div:after { content: "..." ; position: absolute; bottom: 0; right: 0; padding-left: 40px; background: -webkit-linear-gradient(left, transparent, #fff 55%); background: -o-linear-gradient(right, transparent, #fff 55%); background: -moz-linear-gradient(right, transparent, #fff 55%); background: linear-gradient(to right, transparent, #fff 55%); } don't just eat, pay attention to appetite, this method has a drawback that is [not beyond the line of the case will also appear ellipsis], this will not be very bad!! There is no way, can only be combined with JS to optimize the method.Copy the code

Note:

1. Set height to an integer multiple of line-height to prevent additional text from being exposed. 2. Add a gradient background to p:: After to avoid half-displayed text. Ie6-7 does not display content, so add a label compatible with IE6-7 (e.g. <span>... < / span >). To be compatible with IE8, replace ::after with :after.Copy the code

Let the text and text not copy

This point should be familiar to all of you, sometimes [you know] in order to quickly search the answer, but you will not let you copy

-webkit-user-select: none; 
-ms-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
Copy the code

In order to respect the original, some pages copy the text will be added a paragraph of origin, how to do it? Good question! Wait for your problem – -.

General idea:

The answer section listens for the copy event and blocks its default behavior. 2. Get the selected content (window.getSelection()), add the copyright information, and set it to the clipboardData.setData ().Copy the code

17. The box is vertically and horizontally centered

This is like an interview question! Anyway I must ask, ha ha!! Actually has nothing to do with how many kinds of implementation ideas, as long as you can achieve it!

Four methods are provided

1. The width and height of the positioning box are known, position: Absolute; left: 50%; top: 50%; Margin-left :- half the width of itself; Margin-top: - half of its own height; 2. Table-cell parent display: table-cell; vertical-align: middle; Margin: 0 auto; 3. Position + transform; Suitable for sub-box width and height is not timing; (here is my usual method) /*top and left offset is 50%*/ top: 50%; left: 50%; / * translate (50%, 50%) offset its own width and height 50% * / transform: translate (50%, 50%); 4, Flex layout parent: /*flex layout */ display: flex; /* align-items: center; /* Implement horizontal center */ justify-content: center; Margin-left: 50%; margin-left: 50%; transform: translateX(-50%);Copy the code

18, Change the placeholder font color size

In fact, this method can also be in the PC end, the real machine fart use is not, I cried at that time. But post it anyway

input::-webkit-input-placeholder { 
    /* WebKit browsers */ 
    font-size:14px;
    color: #333;
} 
input::-moz-placeholder { 
    /* Mozilla Firefox 19+ */ 
    font-size:14px;
    color: #333;
} 
input:-ms-input-placeholder { 
    /* Internet Explorer 10+ */ 
    font-size:14px;
    color: #333;
}
Copy the code

The fastest array to maximize

Var arr = [1,5,1,7,5,9]; Math.max(... arr) // 9Copy the code

20, shorter array to redo method

[... new Set (,12,1,2,1,6,12,13,6] [2, "12", 2)] / [2, "12", 12, 1, 6, 13]Copy the code

21. When a VUE parent component is nested, the sequence of lifecycle hooks within the component is triggered

First of all, we can treat the child as a function function. When the parent component imports the child, it is declared and loaded, and the function (child component) will be executed when called. What is the sequence in which the declarative cycle hooks fire in the parent component? The diagram below:

The one with 222 in the figure below is a child component, so the parent component is created first and then the child component is put through. The parent component is mounted only after the child component is created and the entity DOM is mounted

Note: resources come from their own long-term collection and collation, if there is the same part with other sites and forums, sorry!