JS Job FAQs Collection

1, viewport

    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />    // width    设置viewport宽度，为一个正整数，或字符串‘device-width’    // device-width  设备宽度    // height   设置viewport高度，一般设置了宽度，会自动解析出高度，可以不用设置    // initial-scale    默认缩放比例（初始缩放比例），为一个数字，可以带小数    // minimum-scale    允许用户最小缩放比例，为一个数字，可以带小数    // maximum-scale    允许用户最大缩放比例，为一个数字，可以带小数    // user-scalable    是否允许手动缩放

Extended questions

How to deal with mobile 1px is rendered into 2px problem

    1 局部处理        mate标签中的 viewport属性 ，initial-scale 设置为 1         rem 按照设计稿标准走，外加利用transfrome 的scale(0.5) 缩小一倍即可；    2 全局处理        mate标签中的 viewport属性 ，initial-scale 设置为 0.5        rem 按照设计稿标准走即可

2, cross-domain several ways

First of all, to understand the browser of the same Origin policy/sop (same origin policy) is a convention, introduced by the Netscape Company 1995 Browser, it is the most core of the browser and the most basic security features, if the lack of the same-origin policy, the browser is vulnerable to XSS, CSFR and other attacks. The so-called homologous refers to the "protocol + domain + port" three of the same, even if two different domain names point to the same IP address, also non-homologous.

So how to solve cross-domain problem?

    1 via Jsonp cross-Domain 1.) Native implementation: <script> var script = document.createelement (' script ');                    Script.type = ' Text/javascript ';            The parameter is passed and the callback execution function is specified as onback script.src = ' http://www.....:8080/login?user=admin&callback=onBack ';                    Document.head.appendChild (script);            Callback Execution function Onback (res) {alert (json.stringify (res));        } </script> 2, Document.domain + iframe cross-domain This scenario is limited to the same primary domain, with different cross-domain scenarios for subdomains. 1.) parent window: (http://www.domain.com/a.html) <iframe id= "iframe" src= "http://child.domain.com/b.html" ></ifram                e> <script> document.domain = ' domain.com ';            var user = ' admin '; </script> 2.) child window: (http://child.domain.com/b.html) <script> do                Cument.domain = ' domain.com '; Gets the parent window variable alert (' Get JS DATA from parent---> ' + window.parent.user); </script> Disadvantages: Please see below rendering load Optimization 3, nginx agent cross-Domain 4, NODEJS middleware agent cross-Domain 5, back end in the header information to set the security domain name more cross-domain specific content see 1190000     011145364

3. Rendering optimization

    1. Disable the use of an IFRAME (blocking the parent document onload event); *iframe will block the OnLoad event on the main page; * Search engine retrieval procedures can not interpret this page, not conducive to SEO;        *iframe shares the connection pool with the main page, and the browser restricts the connection to the same domain, which can affect the parallel loading of the page. These two drawbacks need to be considered before using an IFRAME.    If you need to use an IFRAME, it is best to add the SRC attribute value dynamically to the IFRAME via JavaScript, which can bypass the two questions above. 2. Disable the use of GIF images for loading effect (reduce CPU consumption, improve rendering performance), 3, use CSS3 code instead of JS animation (to avoid redrawing and reflow as much as possible); 4, for some small icons, you can use Base64 bit encoding to reduce network requests. But it is not recommended to use the larger image, CPU-intensive; The advantage of small icons is: 1. Reduce the HTTP request; 2. Avoid cross-domain files; 3. The modification takes effect in time; 5. Page The <style></style> of the head will block the page, (because the JS thread and the render thread in the renderer process are mutually exclusive); 6, the page header <script</script> blocks the page; Renderer process in the JS thread and render thread is mutually exclusive), 7, the page Hollow href and SRC will block the loading of other resources of the page (blocking the download process), 8, web Gzip,cdn hosting, data cache, image server; 9, front-end template JS    + data, reduce the bandwidth wasted due to HTML tags, the front end with variables to save the results of Ajax requests, each operation of local variables, no request, reduce the number of requests 10, using innerHTML instead of DOM operations, reduce DOM operations, optimize JavaScript performance.    11, when you need to set a lot of styles set classname instead of directly manipulate style. 12, less use of global variables, cache DOM node lookup results.    Reduce IO read operations.    13. Avoid using CSS expression (CSS expressions), also known as dynamic properties. 14, picture preload, put the style sheet at the top, put the script at the bottom of the timestamp。        15, avoid in the main layout of the page to use table,table to wait for the contents of the full download before it will be displayed, the display is slower than the div+css layout.            For the common web site has a unified thinking, is to maximize the front-end optimization, reduce database operations, reduce disk IO. To the front-end optimization refers to, without affecting the functionality and experience, can be performed in the browser do not perform on the server, can be directly returned on the cache servers do not go to the application server, the program can directly obtain the results do not go to the external, the internal data obtained from the computer not to remote access, memory            Can not be taken to the disk to take, some of the cache do not go to the database query. Reducing database operations means reducing the number of updates, caching the results by reducing the number of queries, and doing the operations of the database as much as possible with your program (for example, join queries), reducing disk IO by minimizing the use of the file system as a cache, reducing the number of read and write files, and so on.             Program optimization should always optimize the slow part, in order to change the language is not "optimized".

4. Various stages of the event

1：捕获阶段 ---> 2：目标阶段 ---> 3：冒泡阶段document   ---> target目标 ----> document由此，addEventListener的第三个参数设置为true和false的区别已经非常清晰了：true表示该元素在事件的“捕获阶段”（由外往内传递时）响应事件；false表示该元素在事件的“冒泡阶段”（由内向外传递时）响应事件。

5, let Var const

let 允许你声明一个作用域被限制在块级中的变量、语句或者表达式    let绑定不受变量提升的约束，这意味着let声明不会被提升到当前    该变量处于从块开始到初始化处理的“暂存死区”。var 声明变量的作用域限制在其声明位置的上下文中，而非声明变量总是全局的    由于变量声明（以及其他声明）总是在任意代码执行之前处理的，所以在代码中的任意位置声明变量总是等效于在代码开头声明    const 声明创建一个值的只读引用 (即指针)    这里就要介绍下 JS 常用类型     String、Number、Boolean、Array、Object、Null、Undefined    其中基本类型 有 Undefined、Null、Boolean、Number、String，保存在栈中；    复合类型 有 Array、Object ，保存在堆中；        基本数据当值发生改变时，那么其对应的指针也将发生改变，故造成 const申明基本数据类型时，    再将其值改变时，将会造成报错， 例如 const a = 3 ; a = 5 时 将会报错；    但是如果是复合类型时，如果只改变复合类型的其中某个Value项时， 将还是正常使用；

6. Arrow function

    语法比函数表达式更短，并且不绑定自己的this，arguments，super或 new.target。这些函数表达式最适合用于非方法函数，并且它们不能用作构造函数。    

7, quickly let an array of disorderly order

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

Explained here: (Lack of language organization ability, do not spit groove)

首先： 当return 的值    小于 0 ，那么 a 会被排列到 b 之前；    等于 0 ， a 和 b 的相对位置不变；    大于 0 ， b 会被排列到 a 之前；这里你会 发现起始 的时候数组是正序排列，每当进行一次排列的时候， 都会先随机一个随机数 （注意这里的每一次排列 指 每一个红框指一次排列， 共9次排列 ， 一次排列中可能存在多次比较）；当一次排列的 随机数大于0.5 时 将会进行第二次比较， 当第二次随机数 仍然大于0.5 时 ，    将会再 进行一次比较， 直到 随机数大于0.5 或者排列到第一位；当一次排列的 随机数 小于0.5时 当前比较的两项 索引将不会改变 ，继续下一次 的排列；

8. Font font-family

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

9. Meta tags that may be used

        <!--setting Zoom-<meta name= "viewport" content= "Width=device-width, Initial-scale=1, User-scalable=no, MI Nimal-ui "/> <!--can hide the address bar, only for iOS Safari (note: After IOS7.0 version, the effect is not seen on safari)--<meta name=" apple-mobile-web-app- Capable "content=" yes "/> <!--style for Safari top status bar for iOS (optional default/black/black-translucent)--<meta name= "Apple-mobile-web-app-status-bar-style" content= "Black"/> <!--iOS Disables the recognition of numbers as phone numbers/ignores the identification of email addresses in the Android platform-and    Lt;meta name= "format-detection" content= "Telephone=no, email=no"/> Other meta tags <!--fast mode with 360 browser enabled (WebKit)-- <meta name= "renderer" content= "WebKit" > <!--avoid IE using compatibility mode--<meta http-equiv= "x-ua-compatible" con Tent= "Ie=edge" > <!--optimized for handheld devices, mainly for some older browsers that do not recognize viewport, such as BlackBerry-to-<meta name= "handheldfriendly" content= "t Rue > <!--Microsoft's old-fashioned browser--<meta name= "mobileoptimized" content= "the" "<m" > <!--UC-forced vertical screen ETA name= "Screen-orientation "content=" Portrait "> <!--QQ Force vertical Screen--<meta name=" X5-orientation "content=" Portrait "> <!-- UC Force full Screen--<meta name= "Full-screen" content= "yes" > <!--QQ Force full Screen--<meta name= "X5-fullscreen" C Ontent= "true" > <!--UC Application Mode--<meta name= "Browsermode" content= "Application" > <!--QQ Application Mode--&G    T <meta name= "X5-page-mode" content= "app" > <!--windows Phone Click No Highlight--<meta name= "msapplication-tap-h Ighlight "content=" no ">

10, eliminate transition splash screen

    .css {        -webkit-transform-style: preserve-3d;        -webkit-backface-visibility: hidden;        -webkit-perspective: 1000;    }    过渡动画（在没有启动硬件加速的情况下）会出现抖动的现象， 以上的 解决方案只是改变 视角 来启动硬件加速的一种方式；    启动硬件加速的 另外一种方式：         .css {            -webkit-transform: translate3d(0,0,0);            -moz-transform: translate3d(0,0,0);            -ms-transform: translate3d(0,0,0);            transform: translate3d(0,0,0);        }        启动硬件加速    最常用的方式：translate3d、translateZ、transform    opacity属性/过渡动画（需要动画执行的过程中才会创建合成层，动画没有开始或结束后元素还会回到之前的状态）    will-chang属性（这个比较偏僻），一般配合opacity与translate使用（而且经测试，除了上述可以引发硬件加速的属性外，    其它属性并不会变成复合层），    弊端： 硬件加速会导致 CPU性能占用量过大，电池电量消耗加大 ；因此 尽量避免泛滥使用硬件加速。

11. Android 4.x Bug

    1.三星 Galaxy S4中自带浏览器不支持border-radius缩写    2.同时设置border-radius和背景色的时候，背景色会溢出到圆角以外部分    3.部分手机(如三星)，a链接支持鼠标:visited事件，也就是说链接访问后文字变为紫色    4.android无法同时播放多音频audio    5.oppo 的border-radius 会失效

12. JS Judgment Equipment Source

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

13. Audio elements and video elements cannot be played automatically in iOS and Andriod

        原因： 因为各大浏览器都为了节省流量，做出了优化，在用户没有行为动作时（交互）不予许自动播放；    /音频，写法一    <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>        优先播放音乐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；

14, CSS implementation of single-line text overflow display ...

Directly on the effect: compared to multiple lines of text overflow to do processing, a single line is much simpler and easier to understand.

Implementation method

overflow: hidden;text-overflow:ellipsis;white-space: nowrap;当然还需要加宽度width属来兼容部分浏览。

15. Realize multi-line text overflow display ...

Effect:

Implementation method:

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

Scope of application:

Due to the use of WebKit CSS extension properties, this method is suitable for WebKit browser and mobile side;

Note:

1、-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：2、display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。3、-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。

If you think this is not beautiful enough, then look down:

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%);}不要只顾着吃，要注意胃口，此方法有个弊端 那就是 【未超出行的情况下也会出现省略号】 ，这样会不会很挫！！！ 没办法，只能结合JS 进行优化该方法了。

Note:

1、将height设置为line-height的整数倍，防止超出的文字露出。2、给p::after添加渐变背景可避免文字只显示一半。3、由于ie6-7不显示content内容，所以要添加标签兼容ie6-7（如：<span>…<span/>）；兼容ie8需要将::after替换成:after。

16, so that the text can not be copied

This should be familiar to everyone, sometimes "you know" in order to quickly search the answer, but killed will not let you copy

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

That some Web pages in order to respect the original, copy of the text will be added a source of explanation, how is it done? That's a good question! And so that's your question-_-.

General idea:

1、答案区域监听copy事件，并阻止这个事件的默认行为。2、获取选中的内容（window.getSelection()）加上版权信息，然后设置到剪切板（clipboarddata.setData()）。

17, the box vertical horizontal Center

This question is like the interview must ask Yes! Anyway, I must ask, haha!!! In fact, how many kinds of implementation ideas, as long as you can achieve it!

Available in 4 different ways

1、定位 盒子宽高已知， position: absolute; left: 50%; top: 50%; margin-left:-自身一半宽度; margin-top: -自身一半高度;2、table-cell布局 父级 display: table-cell; vertical-align: middle;  子级 margin: 0 auto;3、定位 + transform ; 适用于 子盒子 宽高不定时； （这里是本人常用方法）        position: relative / absolute;    /*top和left偏移各为50%*/       top: 50%;       left: 50%;    /*translate(-50%,-50%) 偏移自身的宽和高的-50%*/    transform: translate(-50%, -50%); 注意这里启动了3D硬件加速哦 会增加耗电量的 （至于何是3D加速 请看浏览器进程与线程篇）4、flex 布局    父级：         /*flex 布局*/        display: flex;        /*实现垂直居中*/        align-items: center;        /*实现水平居中*/        justify-content: center;再加一种水平方向上居中 ：margin-left : 50% ; transform: translateX(-50%);

18, change the font color size of placeholder

In fact, this method is also on the PC side can, the real machine fart with no, then I cried. But just stick it out.

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

19, the most efficient array to find the maximum value

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

20, a shorter array to rewrite the method

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

21. When the Vue parent-child component is nested, each life-cycle hook within the component triggers the sequencing

First we can look at the component as a function, when the parent component imports the child component, when it is declared and loaded the function,
This function (subcomponent) is not executed until it is called. So what is the order of each declaration cycle hook trigger in a parent-child component?
Such as:

With 222 is a subcomponent, so the first order is to create the parent component before the subassembly is worn, and when the subcomponent is created and the entity Dom mounts complete, the stepfather component is mounted to complete

Note: Resources from their own long-term collection and collation, such as with other sites and the same part of the forum, sorry!

JS Job FAQs Collection