1. viewport

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  • widthProgrammiertechnologie
  • device-width: Legt die Viewport-Breite fest; diese kann eine positive Ganzzahl oder die Zeichenkette device-width sein
  • height: Gerätebreite
  • initial-scale: Legt die Viewport-Höhe fest. Im Allgemeinen wird, sobald die Breite festgelegt ist, die Höhe automatisch geparst, sodass sie nicht festgelegt werden muss
  • minimum-scale: Standard-Zoomverhältnis (anfängliches Zoomverhältnis), eine Zahl, die Dezimalstellen haben kann
  • maximum-scale: Minimales, für den Benutzer zulässiges Zoomverhältnis, eine Zahl, die Dezimalstellen haben kann
  • user-scalable⟧: Maximales, für den Benutzer zulässiges Zoomverhältnis, eine Zahl, die Dezimalstellen haben kann: Maximum zoom ratio allowed for the user, a number that can have decimals

: Ob manuelles Zoomen erlaubt ist

Erweiterte Frage: Wie geht man mit dem Problem um, dass 1px auf Mobilgeräten als 2px gerendert wird?

1. Lokale Behandlung

In der viewport-Eigenschaft des meta-Tags setzen Sie initial-scale auf 1

Verwenden Sie rem gemäß dem Standard des Design-Mockups und nutzen Sie zusätzlich scale(0.5) von transform, um es um die Hälfte zu verkleinern

2. Globale Behandlung

In der viewport-Eigenschaft des meta-Tags setzen Sie initial-scale auf 0.5

2. Verschiedene Möglichkeiten zum Umgang mit Cross-Domain

2. Verschiedene Möglichkeiten zum Umgang mit Cross-Domain

Lassen Sie uns zunächst die Same-Origin-Policy des Browsers verstehen

Die Same Origin Policy/SOP (Same origin policy) ist eine Konvention, die 1995 von Netscape in Browser eingeführt wurde. Sie ist die zentralste und grundlegendste Sicherheitsfunktion des Browsers. Fehlt die Same-Origin-Policy, ist der Browser anfällig für Angriffe wie XSS und CSRF. Der sogenannte gleiche Ursprung (same origin) bedeutet, dass "Protokoll + Domain + Port" alle identisch sind. Selbst wenn zwei verschiedene Domains auf dieselbe IP-Adresse verweisen, sind sie nicht same-origin.

Wie lösen wir also das Cross-Domain-Problem?

<script>
var script = document.createElement('script');
script.type = 'text/javascript';

// 传参并指定回调执行函数为onBack
script.src = 'http://www.....:8080/login?user=admin&callback=onBack';
document.head.appendChild(script);

// 回调执行函数
function onBack(res) {
    alert(JSON.stringify(res));
}
</script>

1. Cross-Domain über JSONP, native Implementierung:

2. Cross-Domain über document.domain + iframe

Diese Lösung ist auf Cross-Domain-Szenarien beschränkt, bei denen die Hauptdomain dieselbe ist, aber die Subdomains unterschiedlich sind.

<iframe id="iframe" src="http://child.domain.com/b.html"></iframe>
<script>
document.domain = 'domain.com';
var user = 'admin';
</script>

1.) Elternfenster: (http://www.domain.com/a.html)

<script>
document.domain = 'domain.com';
// 获取父窗口中变量
alert('get js data from parent ---> ' + window.parent.user);
</script>

2.) Kindfenster: (http://child.domain.com/b.html)

Nachteil: Bitte beachten Sie die Rendering- und Ladeoptimierung unten.

3. Cross-Domain über nginx-Proxy

4. Cross-Domain über Node.js-Middleware-Proxy

3. Rendering-Optimierung

3. Rendering-Optimierung

  • 1. Vermeiden Sie die Verwendung von iframe (es blockiert das onload-Ereignis des übergeordneten Dokuments)
  • iframe blockiert das onload-Ereignis der Hauptseite;
  • Suchmaschinen-Crawler können solche Seiten nicht interpretieren, was nicht gut für SEO ist;

iframe und die Hauptseite teilen sich den Verbindungspool, und Browser haben Beschränkungen für Verbindungen zur selben Domain, daher beeinträchtigt dies das parallele Laden der Seite.

Sie müssen diese beiden Nachteile berücksichtigen, bevor Sie iframe verwenden. Wenn Sie iframe verwenden müssen, ist es am besten, den Wert des src-Attributs dynamisch per JavaScript zum iframe hinzuzufügen, wodurch die oben genannten zwei Probleme umgangen werden können.

2. Vermeiden Sie die Verwendung von GIF-Bildern für Ladeeffekte (um den CPU-Verbrauch zu reduzieren und die Rendering-Leistung zu verbessern);

3. Verwenden Sie CSS3-Code anstelle von JS-Animationen (vermeiden Sie Repaint und Reflow so weit wie möglich);

4. Für einige kleine Icons kann Base64-Kodierung verwendet werden, um Netzwerkanfragen zu reduzieren. Für große Bilder wird sie jedoch nicht empfohlen, da sie viel CPU verbraucht;

  • Die Vorteile kleiner Icons sind:
  • 1. HTTP-Anfragen reduzieren;
  • 2. Cross-Domain-Dateianfragen vermeiden;

3. Änderungen werden sofort wirksam;5. Das `<style>`-Tag im Seitenkopf

blockiert die Seite; (weil im Renderer-Prozess der JS-Thread und der Rendering-Thread sich gegenseitig ausschließen);6. The page head's `<script>` tag

will block the page; (because in the Renderer process, the JS thread and the rendering thread are mutually exclusive);

7. Empty href and src in the page will block the loading of other page resources (block the download process);

8. Web Gzip, CDN hosting, data caching, image servers;

9. Front-end templating JS + data, reducing bandwidth waste caused by HTML tags. The front end uses variables to save AJAX request results, and operates on local variables every time without making requests, reducing the number of requests.

10. Use innerHTML instead of DOM operations, reducing the number of DOM operations and optimizing JavaScript performance.

11. When there are many styles to set, use className instead of directly manipulating style.

12. Use fewer global variables and cache the results of DOM node lookups. Reduce IO read operations.

13. Avoid using CSS Expression (css expression), also known as Dynamic properties (dynamic properties).

14. Preload images, put style sheets at the top, put scripts at the bottom, and add a timestamp.

15. Avoid using table in the main layout of a page. A table will only be displayed after its content is completely downloaded, and it displays slower than a div + CSS layout.

4. Stages of Events

1：捕获阶段 ---> 2：目标阶段 ---> 3：冒泡阶段
document   ---> target目标 ----> document

Thus, the difference between setting the third parameter of addEventListener to true and false is already very clear:

  • true means the element responds to the event during the "capture phase" (when it is transmitted from outside to inside);
  • false means the element responds to the event during the "bubble phase" (when it is transmitted from inside to outside).

5、let var const

  • let: Allows you to declare variables, statements, or expressions whose scope is limited to block level. let bindings are not subject to variable hoisting, meaning that let declarations are not hoisted to the current scope, and the variable is in a "temporal dead zone" from the start of the block until initialization is processed.

  • var: The scope of a var-declared variable is limited to the context of its declaration position, rather than the variable always being global. Since variable declarations (and other declarations) are always processed before any code execution, declaring a variable anywhere in the code is always equivalent to declaring it at the beginning of the code.

  • const declares a read-only reference to a value (i.e., a pointer). Here we need to introduce the common JS types: String, Number, Boolean, Array, Object, Null, Undefined. Among them, the primitive types are Undefined, Null, Boolean, Number, String, which are stored in the stack; the composite types are Array and Object, which are stored in the heap. When the value of a primitive data type changes, its corresponding pointer also changes. Therefore, when const is used to declare a primitive data type and its value is changed later, an error will be reported. For example, `const a = 3; a = 5` will cause an error. However, for a composite type, if you only change one of the Value items of the composite type, it will still work normally.

6. Arrow Functions

The syntax is shorter than that of function expressions, and it does not bind its own this, arguments, super, or new.target. These function expressions are best suited for non-method functions, and they cannot be used as constructors.

7. Quickly Shuffle an Array

var arr = [1,2,3,4,5,6,7,8,9,10];
arr.sort(function(){
    return Math.random() - 0.5;
})
console.log(arr);

Explanation here: (I am not good at organizing language, so please don't mock me)

First, when the return value is:

  • less than 0, then a will be placed before b.
  • If it equals 0, the relative position of a and b remains unchanged;
  • If it is greater than 0, b will be arranged before a;

Here you will find that the array is initially in ascending order. Each time a sorting pass is performed, a random number is generated first (note that each "sorting pass" here refers to each red box as one pass, with 9 passes in total, and a single pass may involve multiple comparisons);

When the random number of a pass is greater than 0.5, a second comparison will be performed. If the second random number is still greater than 0.5, another comparison will be performed, until the random number is greater than 0.5 or it reaches the first position;

When the random number of a pass is less than 0.5, the indices of the two items currently being compared will not change, and the next pass continues;

8. Font Family (font-family)

@ 宋体      SimSun
@ 黑体      SimHei
@ 微软雅黑   Microsoft Yahei
@ 微软正黑体 Microsoft JhengHei
@ 新宋体    NSimSun
@ 新细明体  MingLiU
@ 细明体    MingLiU
@ 标楷体    DFKai-SB
@ 仿宋     FangSong
@ 楷体     KaiTi
@ 仿宋_GB2312  FangSong_GB2312
@ 楷体_GB2312  KaiTi_GB2312  
@
@ 说明：中文字体多数使用宋体、雅黑，英文用Helvetica

body { font-family: Microsoft Yahei,SimSun,Helvetica; }

9. Meta Tags That May Be Used

<!-- 设置缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
<!-- 可隐藏地址栏，仅针对IOS的Safari（注：IOS7.0版本以后，safari上已看不到效果） -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- 仅针对IOS的Safari顶端状态条的样式（可选default/black/black-translucent ） -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- IOS中禁用将数字识别为电话号码/忽略Android平台中对邮箱地址的识别 -->
<meta name="format-detection"content="telephone=no, email=no" />

Other meta tags

<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">

10. Eliminating Transition Flicker

.css {
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
}

Transition animations (without hardware acceleration enabled) may experience jitter. The above solution is only one way to enable hardware acceleration by changing the view perspective; another way to enable hardware acceleration:

.css {
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

Enable hardware acceleration

Most common methods: translate3d, translateZ, transform

opacity property/transition animation (the compositing layer is only created during the animation; if the animation hasn't started or has ended, the element returns to its previous state)

will-change property (this is relatively obscure), generally used together with opacity and translate (and after testing, except for the above properties that can trigger hardware acceleration, other properties will not become composited layers).

Disadvantages: Hardware acceleration can cause excessive CPU usage and increased battery consumption; therefore, try to avoid overusing hardware acceleration.

11、android 4.x bug

  • 1. The built-in browser on Samsung Galaxy S4 does not support the border-radius shorthand
  • 2. When setting border-radius and background color at the same time, the background color will overflow outside the rounded corners
  • 3. On some phones (such as Samsung), a links support the mouse :visited event, meaning the text turns purple after the link is visited
  • 4. Android cannot play multiple audio elements simultaneously
  • 5. On OPPO devices, border-radius may become invalid

12. JS device source detection

// 判断移动端设备
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();
})


// 判断微信浏览器
function isWeixin(){
    var ua = navigator.userAgent.toLowerCase();
    if(ua.match(/MicroMessenger/i)=='micromessenger'){
        return true;
    }else{
        return false;
    }
}

12. Using JS to Determine the Device Source

Reason:Because major browsers have optimized to save data traffic, they do not allow autoplay when the user has not performed any action (interaction);

//音频，写法一
<audio src="music/bg.mp3.html" autoplay loop controls>你的浏览器还不支持哦</audio>

//音频，写法二
<audio controls="controls"> 
    <source src="music/bg.ogg.html" type="audio/ogg"></source>
    <source src="music/bg.mp3.html" type="audio/mpeg"></source>
    优先播放音乐bg.ogg，不支持在播放bg.mp3
</audio>

//JS绑定自动播放（操作window时，播放音乐）
$(window).one('touchstart', function(){
    music.play();
})

//微信下兼容处理
document.addEventListener("WeixinJSBridgeReady", function () {
    music.play();
}, false);

//小结
//1.audio元素的autoplay属性在IOS及Android上无法使用，在PC端正常；
//2.audio元素没有设置controls时，在IOS及Android会占据空间大小，而在PC端Chrome是不会占据任何空间；
//3.注意不要遗漏微信的兼容处理需要引用微信JS；

13. Audio and video elements cannot autoplay in iOS and Android

Let's go straight to the effect: compared to handling multi-line text overflow, single-line is much simpler and easier to understand.

Implementation method:

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

Of course, you also need to add the width property to be compatible with some browsers.

14. CSS Implementation for Single-line Text Overflow Displaying Ellipsis

Effect:

Implementation method:

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

Applicable scope:

Because it uses WebKit's CSS extension properties, this method is applicable to WebKit browsers and mobile devices;

Note:

1. -webkit-line-clamp is used to limit the number of lines of text displayed in a block element. To achieve this effect, it needs to be combined with other WebKit properties. Common combined properties:

2. display: -webkit-box; a required combined property that displays the object as a flexible box model.

3. -webkit-box-orient; a required combined property that sets or retrieves the arrangement of child elements of the flexible box object.

If you think this is still not beautiful enough, then continue looking at the effect below:

Is this 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 be too quick to rejoice. This method has a drawback: the ellipsis will also appear when the text does not exceed the line. Isn't that ugly? There's no way around it, so we have to combine it with JS to optimize this method.

Note:

  • 1. Set height to an integer multiple of line-height to prevent overflowing text from showing.
  • 2. Adding a gradient background to p::after can prevent text from being only half displayed.
  • 3. Since IE6-7 does not display content, you need to add a tag to be compatible with IE6-7 (such as:…); to be compatible with IE8, replace ::after with :after.

15. Implementing Multi-line Text Overflow Displaying Ellipsis

Everyone should be familiar with this. Sometimes, you know, to quickly search for answers, it absolutely doesn't let you copy:

-webkit-user-select: none; 
-ms-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;

16. Make Text and Images Non-copyable

This question seems to be a must-ask in interviews! I always ask it, haha! Actually, it doesn't matter how many implementation approaches there are, as long as you can achieve it!

Provide 4 methods:

  • 1. Positioning: the box width and height are known; position: absolute; left: 50%; top: 50%; margin-left: -half of its own width; margin-top: -half of its own height;

  • 2. table-cell layout: parent display: table-cell; vertical-align: middle; child margin: 0 auto;

  • 3. Positioning + transform; suitable when the child box width and height are not fixed; (this is my commonly used method)

    position: relative / absolute;
/*top和left偏移各为50%*/
   top: 50%;
   left: 50%;
/*translate(-50%,-50%) 偏移自身的宽和高的-50%*/
transform: translate(-50%, -50%); 注意这里启动了3D硬件加速哦 会增加耗电量的 （至于何是3D加速 请看浏览器进程与线程篇）

  • 4. flex layout

    父级： 
/*flex 布局*/
display: flex;
/*实现垂直居中*/
align-items: center;
/*实现水平居中*/
justify-content: center;

Add one more method for horizontal centering:margin-left : 50% ; transform: translateX(-50%);

Some web pages, out of respect for originality, append a source note to copied text. How is that done? Good question! I've been waiting for this question -_-.

General idea:

  • 1. Listen for the copy event in the answer area and prevent the default behavior of this event.
  • 2. Get the selected content (window.getSelection()), add copyright information, and then set it to the clipboard (clipboarddata.setData()).

17. Center a Box Vertically and Horizontally

Actually, this method only works on PC; it's useless on real devices. I cried at the time. But I'll still post it.

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;
}

18. Changing the Font Color and Size of placeholder

var arr = [ 1,5,1,7,5,9];
Math.max(...arr)  // 9

19. The Quickest Way to Get the Maximum Value of an Array

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

20. A Shorter Way to Deduplicate an Array

First, we can regard the child component as a function. When the parent component imports the child component, it is like declaring and loading this function; the function (child component) is only executed when it is called. So what is the trigger order of each lifecycle hook in the parent and child components? As shown below:

Article source: https://segmentfault.com/a/1190000013331105