2019年前端面试题-02

2024年4月12日 134次阅读 来源: 云鱼Cloudy

  1. px、em和rem的区分

    • px示意像素 (盘算机屏幕上的一个点：1px = 1/96in)，是相对单元，不会因为其他元素的尺寸变化而变化；
    • em示意相关于父元素的字体大小。em是相对单元 ，没有一个牢固的度量值，而是由其他元素尺寸来决议的相对值。

    • rem：相对单元，可明白为”root em”, 相对根节点html的字体大小来盘算，CSS3新加属性，chrome/firefox/IE9+支撑。

      恣意浏览器的默许字体高都是16px。所以未经调解的浏览器都相符: 1em=16px。那末12px=0.75em, 10px=0.625em。
为了简化盘算，在css中的body挑选器中声明Font-size=62.5%，这就使em值变成16px*62.5%=10px, 如许12px=1.2em, 10px=1em, 也就是说只须要将你的本来的px数值除以10，然后换上em作为单元就好了。

  2. 文雅降级和渐进加强

    • 渐进加强（Progressive Enhancement）：一最先就针对低版本浏览器举行构建页面，完成基础的功用，然后再针对高等浏览器举行效果、交互、追加功用到达更好的体验。
    • 文雅降级（Graceful Degradation）：一最先就构建站点的完整功用，然后针对浏览器测试和修复。比方一最先运用 CSS3 的特征构建了一个运用，然后逐渐针对各大浏览器举行 hack 使其能够在低版本浏览器上一般浏览。

  3. eval()的作用

    eval() 函数可盘算某个字符串，并实行个中的的 JavaScript 代码。
    语法：

    eval(string)

  4. JS哪些支配会形成内存走漏

    JS的接纳机制：
    找出不再运用的变量，然后开释掉其占用的内存，然则这个历程不是及时的，因为其开支比较大，所以渣滓接纳体系（GC）会依据牢固的时刻距离,周期性的实行。
    渣滓收集器必须跟踪究竟哪一个变量没用，关于不再有效的变量打上标记，以备未来收回其内存。用于标记的无用变量的战略能够因完成而有所区分，一般情况下有两种完成体式格局：“标记消灭”和“援用计数”。援用计数不太经常使用，标记消灭较为经常使用。
    1、标记消灭
    　　这是javascript中最经常使用的渣滓接纳体式格局。当变量进入实行环境是，就标记这个变量为“进入环境”。从逻辑上讲，永久不能开释进入环境的变量所占用的内存，因为只需实行流进入相应的环境，就能够会用到他们。当变量脱离环境时，则将其标记为“脱离环境”。
    　　渣滓收集器在运转的时刻会给存储在内存中的一切变量都加上标记。然后，它会去掉环境中的变量以及被环境中的变量援用的标记。而在此以后再被加上标记的变量将被视为预备删除的变量，原因是环境中的变量已没法接见到这些变量了。末了。渣滓收集器完成内存消灭事情，烧毁那些带标记的值，并接纳他们所占用的内存空间。
    *关于这一块，发起读读 ，关于作用域链的一些学问详解，读完差不多就知道了，哪些变量会被做标记。

    function test(){
  var a=10;//被标记，进入环境
  var b=20;//被标记，进入环境
}
test();//实行终了以后a、b又被标记脱离环境，被接纳

    2、援用计数
    　　另一种不太罕见的渣滓接纳战略是援用计数。援用计数的寄义是跟踪纪录每一个值被援用的次数。当声清楚明了一个变量并将一个援用范例赋值给该变量时，则这个值的援用次数就是1。相反，假如包含对这个值援用的变量又取得了别的一个值，则这个值的援用次数就减1。当这个援用次数变成0时，则申明没有办法再接见这个值了，因而就能够将其所占的内存空间给收回来。如许，渣滓收集器下次再运转时，它就会开释那些援用次数为0的值所占的内存。

    function test(){
  var a={};//a的援用次数为0
  var b=a;//a的援用次数加1，为1
  var c=a;//a的援用次数加1，为2
  var b={};//a的援用次数减1，为1
}

    哪些支配会形成内存走漏：
    1.不测的全局变量引发的内存走漏，一个未声明变量的援用会在全局对象中建立一个新的变量。在浏览器的环境下，全局对象就是 window，也就是说：

    function foo(arg) {
    bar = "aaaaa";
}

// 实际上等价于
function foo(arg) {
    window.bar = "aaaaa";
}

// 相似的
function foo() {
    this.variable = "qqqqq";
}
//this 指向全局对象（window）
foo();

    2.闭包引发的内存走漏

    
function fn1(){
    var n=1;
    function fn2(){//在加一个fn2当他的子集
        alert(n);
    }
return fn2(); 
//return出来后 他就给 window了所以一向存在内存中。因为一向在内存中，在IE里轻易形成内存走漏
}
fn1();

    3.dom清空或删除时，事宜未消灭致使的内存走漏

    var elements={
    button: document.getElementById("button"),
    image: document.getElementById("image"),
    text: document.getElementById("text")
};
function doStuff(){
    image.src="http://some.url/image";
    button.click():
    console.log(text.innerHTML)
}
function removeButton(){
  document.body.removeChild(document.getElementById('button'))
}

    4.轮回援用

    function leakMemory() {
    var el = document.getElementById('el');
    var o = { 'el': el };
    el.o = o;
}

    5.定时器setTimeout和setInterval：当不须要setInterval或许setTimeout时，定时器没有被clear，定时器的回调函数以及内部依靠的变量都不能被接纳，形成内存走漏。比方：vue运用了定时器，须要在beforeDestroy 中做对应烧毁处置惩罚。js也是一样的。

    clearTimeout(***)
clearInterval(***)

    6.假如在mounted/created 钩子中运用了$on，须要在beforeDestroy 中做对应解绑($off)处置惩罚

    beforeDestroy() {
  this.bus.$off('****');
}

    7.死轮回

    while(1){
    a++;
}

    8.给DOM对象增加的属性是一个对象的援用

    var testObject = {};
document.getElementById('idname').property = testObject;  //假如DOM不被消弭，则testObject会一向存在，形成内存走漏
  5. bootstrap相应式完成的道理

    百分比规划+媒体查询

  6. CSS款式掩盖划定规矩

    • 划定规矩一：因为继续而发作款式争执时，近来先人得胜。
    • 划定规矩二：继续的款式和直接指定的款式争执时，直接指定的款式得胜

    • 划定规矩三：直接指定的款式发作争执时，款式权值高者得胜。

      款式的权值取决于款式的挑选器，权值定义如下表:
```
CSS挑选器                    权值
标签挑选器                    1
类挑选器                    10
ID挑选器                    100
内联款式                    1000
伪元素(:first-child)        1
伪类(:link)                10
```
能够看到，内联款式的权值>>ID挑选器>>类挑选器>>标签挑选器，除此以外，子女挑选器的权值为每项权值之和，比方”#nav .current a”的权值为100 + 10 + 1 = 111。

    • 划定规矩四：款式权值雷同时，后者得胜。

    • 划定规矩五：!important的款式属性不被掩盖。

  7. position的值， relative和absolute离别是相关于谁举行定位的

    1. absolute:天生相对定位的元素， 相关于近来一级的定位不是 static 的父元夙来举行定位（相关于近来的已定位，即position为absolute或许relative的元素的先人元素）。
    2. fixed（老IE不支撑）天生相对定位的元素，一般相关于浏览器窗口或 frame 举行定位。
    3. relative天生相对定位的元素，相关于其在普通流中的位置举行定位（相关于本元素原始位置举行定位）。
    4. static默许值。没有定位，元素涌现在一般的流中
    5. sticky天生粘性定位的元素，容器的位置依据一般文档流盘算得出
  8. 诠释下CSSsprites，以及你要如安在页面或网站中运用它

    CSS Sprites实在就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background-repeat”，“background-position”的组合举行背景定位，background-position能够用数字能准确的定位出背景图片的位置

  9. 怎样增加、移除、挪动、复制、建立和查找节点？

    1）建立新节点

createDocumentFragment() //建立一个DOM片段
createElement() //建立一个详细的元素
createTextNode() //建立一个文本节点

2）增加、移除、替代、插进去
appendChild() //增加
removeChild() //移除
replaceChild() //替代
insertBefore() //插进去

3）查找
getElementsByTagName() //经由过程标签称号
getElementsByName() //经由过程元素的Name属性的值
getElementById() //经由过程元素Id，唯一性

  10. 浏览器的内核离别是什么?

    • IE: trident内核
    • Firefox：gecko内核
    • Safari：webkit内核
    • Opera：之前是presto内核，Opera现已改用Google Chrome的Blink内核
    • Chrome：Blink(基于webkit，Google与Opera Software共同开发)
  11. 请诠释JSONP的事情道理，以及它为什么不是真正的AJAX。

    JSONP (JSON with Padding)是一个简朴高效的跨域体式格局，HTML中的script标签能够加载并实行其他域的javascript，因而我们能够经由过程script标记来动态加载其他域的资本。比方我要从域A的页面pageA加载域B的数据，那末在域B的页面pageB中我以JavaScript的情势声明pageA须要的数据，然后在 pageA顶用script标签把pageB加载进来，那末pageB中的剧本就会得以实行。JSONP在此基础上加入了回调函数，pageB加载完以后会实行pageA中定义的函数，所须要的数据会以参数的情势通报给该函数。JSONP易于完成，然则也会存在一些平安隐患，假如第三方的剧本随便地实行，那末它就能够改动页面内容，截获敏感数据。然则在受信托的两边通报数据，JSONP是异常适宜的挑选。

  12. 请诠释一下JavaScript的同源战略。

    在客户端编程语言中，如javascript和 ActionScript，同源战略是一个很重要的平安理念，它在保证数据的平安性方面有着重要的意义。同源战略划定跨域之间的剧本是断绝的，一个域的剧本不能接见和支配别的一个域的绝大部分属性和要领。那末什么叫雷同域，什么叫差别的域呢？当两个域具有雷同的协定, 雷同的端口，雷同的host，那末我们就能够以为它们是雷同的域。同源战略还应该对一些特殊情况做处置惩罚，比方限定file协定下剧本的接见权限。当地的HTML文件在浏览器中是经由过程file协定翻开的，假如剧天性经由过程file协定接见到硬盘上别的恣意文件，就会涌现平安隐患，现在IE8另有如许的隐患。

  13. 浏览器是怎样衬着页面的？

    1. 剖析HTML文件，建立DOM树。自上而下，碰到任何款式（link、style）与剧本（script）都邑壅塞（外部款式不壅塞后续外部剧本的加载）。
    2. 剖析CSS。优先级：浏览器默许设置<用户设置<外部款式<内联款式<HTML中的style款式；
    3. 将CSS与DOM兼并，构建衬着树（Render Tree）
    4. 规划和绘制，重绘（repaint）和重排（reflow）

  14. 对<meta></meta>标签有什么明白

    <html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <meta name="author" content="w3school.com.cn">
    <meta name="revised" content="David Yang,8/1/07">
    <meta name="generator" content="Dreamweaver 8.0en">
</head>
<body>
    <p>本文档的 meta 属性标识了创作者和编辑软件。</p>
</body>
</html>
  15. 请写出你对闭包的明白，并列出简朴的明白

    运用闭包重要是为了设想私有的要领和变量。
    闭包的长处是能够防止全局变量的污染，瑕玷是闭包会常驻内存，会增大内存运用量，运用不当很轻易形成内存走漏。
    闭包有三个特征：
    1.函数嵌套函数
    2.函数内部能够援用外部的参数和变量
    3.参数和变量不会被渣滓接纳机制接纳

  16. JavaScript中怎样检测一个变量是一个String范例？请写出函数完成

    typeof(obj) === "string"
typeof obj === "string"
obj.constructor === String
  17. 推断一个字符串中涌现次数最多的字符，统计这个次数

  18. $(document).ready()要领和window.onload有什么区分？

    1. window.onload要领是在网页中一切的元素(包含元素的一切关联文件)完整加载到浏览器后才实行的。
    2. $(document).ready()要领能够在DOM载入停当时就对其举行支配，并挪用实行绑定的函数。

  19. js遍历

    1. for轮回

    2. forEach轮回：forEach() 要领用于挪用数组的每一个元素，并将元素通报给回调函数。没有返回值。

      array.forEach(function(currentValue[, index, arr), thisValue])

    3. map()函数：map() 要领返回一个新数组，数组中的元素为原始数组元素挪用函数处置惩罚后的值。

      array.map(unction(currentValue,index,arr), thisValue)

    4. filter函数：要领建立一个新的数组，新数组中的元素是经由过程搜检指定数组中相符前提的一切元素。

      array.filter(function(currentValue[,index,arr), thisValue])

    5. some函数：some() 要领用于检测数组中的元素是不是满足指定前提（函数供应），some() 要领会顺次实行数组的每一个元素：

      array.some(function(currentValue[,index,arr),thisValue])

    6. 对象in要领

      let obj ={a:'2',b:3,c:true};
for (var i in obj) {
    console.log(obj[i],i)
}
console.log(obj);

    7. Object.keys（obj）和 Object.values（obj）函数

      const obj = {
　　　　id:1,
　　　　name:'zhangsan',
　　　　age:18
}
console.log(Object.keys(obj))
console.log(Object.values(obj))

  20. js数组处置惩罚函数总结

    1. array.push()：push() 向数组的末端增加一个或更多元素，并返回新的长度。
    2. array.pop()：删除并返回数组的末了一个元素
    3. array.unshift()： 向数组的开首增加一个或更多元素，并返回新的长度.
    4. array.shift() ：删除并返回数组的第一个元素
    5. array.reverse() ：要领将数组中元素的位置倒置,并返回该数组。该要领会转变原数组。
    6. array.sort() ：要领用 原地算法 对数组的元素举行排序，并返回数组。排序算法现在是 稳固的 。默许排序递次是依据字符串Unicode码点。因为它取决于详细完成，因而没法保证排序的时刻和空间复杂性。原数组上原地排序，原数组转变。
    7. array.concat(array2) ：要领用于兼并两个或多个数组。此要领不会变动现有数组，而是返回一个新数组。

    8. array.join()：creates and returns a new string by concatenating all of the elements in an array (or an array-like object ), separated by commas or a specified separator string. If the array has only one item, then that item will be returned without using the separator.

      var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr.join()
//     output: George,John,Thomas

    9. string.slice(start,end) ：要领提取一个字符串的一部分，返回一个从原字符串中提取出来的新字符串。

      // 语法:
str.slice(beginSlice[, endSlice])

beginSlice:
必须。划定从那边最先拔取。假如是负数，那末它划定从数组尾部最先算起的位置。也就是说，-1 指末了一个元素，-2 指倒数第二个元素，以此类推。

endSlice:
可选。划定从那边完毕拔取。该参数是数组片段完毕处的数组下标。假如没有指定该参数，那末切分的数组包含从 start 到数组完毕的一切元素。假如这个参数是负数，那末它划定的是从数组尾部最先算起的元素。

//实例: 
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr.slice(1) // output: John,Thomas

    10. array.splice() ：要领经由过程删除或替代现有元素或许原地增加新的元夙来修正数组,并以数组情势返回被修正的内容。此要领会转变原数组。

      // 语法:
array.splice(startIndex,howmany[,item1,.....])

// 示例1: 增加元素
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,1,"Lemon","Kiwi");    // output: Banana,Orange,Lemon,Kiwi,Mango

// 示例2: 删除元素
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,2);    // output: Banana,Orange
    11. array.indexOf()：返回数组对象的原始值

    12. array.reduce(reducer)：要领对数组中的每一个元素实行一个由您供应的reducer函数(升序实行)，将其效果汇总为单个返回值。

       reducer函数吸收4个参数:
1    Accumulator (acc) (累计器)
2    Current Value (cur) (当前值)
3    Current Index (idx) (当前索引)
4    Source Array (src) (源数组)
    13. array.map()：对数组的每一项运用回调函数，返回新数组。
    14. array.some()：数组中只需有一项满足给定前提则返回true。
    15. array.filter()：要领建立一个新数组, 其包含经由过程所供应函数完成的测试的一切元素。
    16. array.every()：数组的每一项都满足给定前提则返回true。
    17. forEach：数组遍历，与for轮回一样，没有返回。

迎接浏览：
2019年前端面试题-01
2019年前端笔试题
2019年前端面试题-03

我是Cloudy，年青的前端攻城狮一枚，爱专研，爱手艺，爱分享。

个人笔记，整顿不容易，谢谢浏览、点赞和珍藏。

文章有任何题目迎接人人指出，也迎接人人一同交换前端种种题目！

    原文作者：云鱼Cloudy
    原文地址: https://segmentfault.com/a/1190000019414129
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞