笔试题错题整理 *89

1. 45-69 之间的随机数 ：Math.random()24+45 ，Math.random()返回数值是 0-1 ，69-45 = 24，将24Math.Random()返回值得到0-24之间的数，
2. . 承上：将这些数字排序，默认要求是数字为整数，使用函数为Math.floor()
3. document.body
   
4. 获取目前时间，返回格式为xx-xx-xx

let time = new Date()
//获得年：getFullYear(),Year的Y为大写
//获得月：getMonth()，Month为单数，不加s  ，  月要加1  ！！！！！！！！！！！！！！！！！！！！！！！
//获得时、分都加s
console.log(time.getFullYear()+'年'+(time.getMonth()+1)+'月'+time.getDate()+'日'+time.getHours()+'时'+time.getMinutes()+'分')

5. 获得鼠标位置，要使用onmousemove事件，该事件返回一个e，e的内容如图

document.onmousemove=function(e){
   console.log(e.clientX+','+e.clientY)
}

6. typeof返回数据类型，对object和null都返回 object
7. 计算阶乘

function jiecheng(num){
   if(num==1){
        return 1
    }else{
        return num*jiecheng(num-1)
    }
}
console.log(jiecheng(4))

8. onclick事件（所有事件都没有大写字母）

document.getElementById('submit').onclick=function(o){
   var a = o.type.B=o.target
    console.log(a)
}

a的内容如图：

9. 事件冒泡，结构如下，adiv对应div中有个input，点击input会触发input的click事件，同时会触发div的点击事件

document.getElementById('submit').onclick=function(o){
   console.log('input has been clicked')
}
let adiv=document.getElementById('adiv')
adiv.addEventListener('click',()=>{
    console.log('adiv has been clicked')
})

阻止冒泡：冒泡（点击子元素触发事件，会触发父元素相同事件）

document.getElementById('submit').onclick=function(o){
   console.log('input has been clicked')
   o.stopPropagation()     //!!!!!!!!!!!!!  这 
  //    IE浏览器：window.event.cancelBubble = true; 
}
let adiv=document.getElementById('adiv')
adiv.addEventListener('click',()=>{
    console.log('adiv has been clicked')
})

阻止默认事件：阻止一些标签的默认事件，如a标签默认跳转，阻止默认事件后就不会跳转了

//html
 <a href="https://www.baidu.com">百度</a>

//js
let alick = document.querySelector('a')
alick.addEventListener('click',(e)=>{
    e.preventDefault()
    //IE浏览器window.event.returnValue = false; 
})

10. 奇怪的知识增加了
    
    
    Boolean([]) //true
    Number([]) //0
    Number({}) //NaN
    Number(false) //0
    

11. 前端页面由三层构成：结构层（html）、表示层（css）、行为层（js）

12. 怎么样从web前端方面优化性能？至少列举5点？
    HTML部分
    语义化HTML：好处在于可以使代码简洁清晰，支持不同设备，利于搜索引擎，便于团队开发；
    减少DOM节点：加速页面渲染；
    给图片加上正确的宽高值：这可以减少页面重绘，同时防止图片缩放；
    防止src属性和link的href属性为空：当值为空时，浏览器很可能会把当前页面当成其属性值加载；
    正确的闭合标签：如避免使用

    ，浏览器会多一个将它解析成<div></div>的过程；
    链接为目录或首页的地址后面加”/”，如http://www.5icool.org/；
    用LINK而不用@import方式导入样式；
    样式放在页头，JS放在页尾；
    缩小favicon.ico并缓存；

CSS部分
避免使用CSS Expressions(CSS表达式)：如background-color: expression( (newDate()).getHours()%2 ? “#B8D4FF” : “#F08A00″ ) ;
避免使用CSS Filter（CSS滤镜）；
使用CSS缩写，减少代码量；
通过CSS Sprites把同类图片合成一张，减少图片请求；
减少查询层级：如.header .logo要好过.header .top .logo；
减少查询范围：如.header>li要好过.header li；
避免TAG标签与CLASS或ID并存：如a.top、button#submit；
删除重复的CSS；

Javscript部分
尽量少用全局变量；
使用事件代理绑定事件，如将事件绑定在body上进行代理；
避免频繁操作DOM节点；
不使用EVAL；
减少对象查找，如a.b.c.d这种查找方式非常耗性能，尽可能把它定义在变量里；
类型转换：把数字转换成字符串使用”” + 1，浮点数转换成整型使用Math.floor()或者Math.round()；
对字符串进行循环操作，譬如替换、查找，应使用正则表达式；
删除重复的JS；

服务器部分（对网站文件和资源进行优化 (√)）
尽量合并CSS、JS文件，或将其直接写在页面上，减少HTTP请求；(√)
压缩CSS、JS文件，缩短文件传输时间； (√)
避免404错误：特别要避免给404指定一个停摆页面，否则所有404错误都将会加载一次页面；
一般要求减少DNS查询次数，如同一个页面的请求资源尽量少的使用不同的主机名，这可以减少网站并行下载的数量，但很多网站为了加速下载资源其实是特意用了多个主机名，这里要做一个权衡；
使用CDN加速，使用户从离自己最近的服务器下载文件； (√)
减少Cookie的大小，使用无cookie的域，客户端请求静态文件的时候，减少 Cookie 的反复传输对主域名的影响；
为文件头指定Expires，使内容具有缓存性； (√)
使用gzip压缩内容；

13. Ajax工作原理：相当于在用户和服务器之间加了—个中间层，使用户操作与服务器响应异步化。这样把以前的一些服务器负担的工作转嫁到客户端，利于客户端闲置的处理能力来处理，减轻服务器和带宽的负担，从而达到节约ISP的空间及带宽租用成本的目的。
14. 同步和异步：同步，就是调用某个东西时，调用方得等待这个调用返回结果才能继续往后执行。异步，和同步相反 调用方不会理解得到结果，而是在调用发出后调用者可用继续执行后续操作，被调用者通过状体来通知调用者，或者通过回掉函数来处理这个调用
15. promise：异步执行的同步操作
16. 序列化JSON字符串：eval() 或者 JSON.parse()
17. 闭包：包含自由变量（未绑定到任何对象上的变量）的代码块，这些变量不是在任何全局上下文中声明的，也不是在该代码块中声明的，而是在定义代码块的环境中定义的。（局部变量：local）。子对象会一级一级地向上寻找所有父对象的变量

<scripttype=’text/javascript’>
	function bibao(){
	   var i = 99;
	   iAdd = function(){  //闭包：是一段包含自由变量的代码块
	       i++;//i是在定义iAdd的环境中声明的
	   }
	   function b(){
	       console.log('in b : ', i)
	   }
	   return b;
	}
	var result = bibao();//执行bibao函数，返回 b 整个函数
	result();//b函数执行，结果为99
	iAdd();//iAdd函数执行,bibao函数调用完成，i变量依然存在，仍然可以访问
	result();//b函数再次执行，结果为100
</script>

闭包特性：
1、封闭性：外部函数无法访问闭包内部变量，除非闭包向外界提供接口
2、持久性：闭包外部函数调用完成后，闭包的结构依然存在，实现数据的持久使用

对页面影响：减少了全局变量、减少了函数的参数量、进行了封装；会占用内部资源，过多食用闭包会内存溢出

18. js 延迟加载方法：动态创建dom、懒加载、defer和async
19. 引入css方式：行内（分标签同在）、内嵌（写在头部的style，页面加载完成后在进行加载）、外链（import导入，优先级高于一切）
20. css reset，浏览器不同，默认样式不同，需要处理浏览器兼容问题。最好办法：重新定义样式覆盖默认样式
21. css sprites：css精灵把一堆小图片整合为一张大图片，减轻对服务器的请求数量
22. <doctype>作用？浏览器严格模式、混杂模式、怪异模式？ click
    作用：告诉浏览器使用什么标准进行解析文件
    严格模式（strict）：排版和js的运作模式按照浏览器支持的最高标准进行执行
    混杂模式（transitional）：向后兼顾老的浏览器版本，防止站点无法工作
    怪异模式（frameset）：使用浏览器自己的标准解析执行代码

24. 语义化标签：标签名直观
25. 强制类型转换：parseInt、parseFloat、Number
26. 隐式类型转换：== - ===
27. IE和DOM事件流区别

	IE	DOM
执行顺序	冒泡事件	先捕获后冒泡
绑定函数	attachEvent	addEventListener
移除函数	detachEvent	removeEventListener
触发的事件是否有on	有	无
this指向	window	触发事件的对象

28. call的参数是散装、apply是写在数组里面
29. 解析json数据：eval、parse（更安全）
30. 获取非行间样式的函数（IE和其他浏览器获取不同），行间（标签内部,style即可获取）；非行间（内嵌或外链）

function getStyle(obj,attr){
    if(obj.currentStyle){
        console.log('IE')
        return obj.currentStyle[attr]
    }else{
        console.log('other')
        return getComputedStyle(obj,false)[attr]
    }
}
let obj = document.getElementById('div1')
console.log(getStyle(obj,'background-color')

31. javascript的本地对象（array、abject、regexp这种可以通过new进行实例化的对象）、内置对象（Math、global（很多方法都是global对象的方法，如parseInt…））、宿主对象（window、document）
32. 空元素：<br>、<hr>、<img>、<input>、<link>、<meta>
33. css选择器
    优先级：!important>id>class>tag
    id选择器
    类选择器
    标签选择器
    相邻选择器：h1+p
    子选择器：ul < li
    后代选择器：li a
    通配符选择器：*
    属性选择器：a[rel=‘external’]
    伪类选择器：a:hover，li:nth-child(0)
34. 新增伪类：fist-of-type、last-of-type、only-of-type、only-child、nth-child(2)、:enabled、:disabled、:checked
35. 可继承属性：font-size、font-family、color、ul、li、dl、dd、dt
    不可继承属性：border、padding、margin、width、height
36. JavaScript对象的属性有哪些属性描述符：writable（是否可写）、configurable（是否可以删除、修改）、enumerable（是否能在for…in…循环中遍历出来，或是否能通过oobject.key例举出来）、value（属性值）
    
37. position定位方式
    1）position: static
    没有定位，元素生成时正常显示。
    2）position: relative
    相对定位。生成相对定位的元素，元素没有脱离文档流，通过设置top,left等值，相对于其原有的位置进行定位，不影响其它元素的布局。
    3）position: absolute
    绝对定位。生成绝对定位的元素，脱离文档流，相对于static定位外的第一个父级元素进行定位，可设置top,left,right,bottom值进行定位
    4）position: fixed
    绝对定位。生成绝对定位元素，脱离文档流，相对于浏览器窗口进行定位
    5）position:sticky
    relative+fixed，在达到阈值（top，left，right，bottom定义）之前是relative定位，达到阈值后fixed定位
38. 页面重构：编写css，让页面更合理化
39. 为什么要初始化CSS样式：浏览器兼容问题，不初始化会出现浏览器之间的页面差距
40. iframe缺点：会阻碍页面的onload事件
41. css权重规则：标签：1；class：10；id：100；#div1 div{ }===>权重为 100+1=101，权重相同时，最后定义的样式会起作用
42. 通用事件侦听器函数 78题！！！

43. 结果

(function(x){
   delete x;  //只用于删除对象的某个属性，不能删除变量
   alert(x);   //弹出6
})(1+5);

44. 已知input的id，如何获取输入框的输入值

document.getElementById('id').value

45. 如何获取页面中的所有checkbox

//首先，checkbox是input标签写成的
<input type='checkbox'/>
//然后，获取checkbox
let inputlist = document.getElementsByTagName('input')       //注意，此处element为复数，不是通过Tag，而是TagName
console.log(inputlist)
let len = inputlist.length
let checkboxlist=[]
while(len--){
    //type在attributes中
    if(inputlist[len].type=='checkbox'){
        checkboxlist.push(inputlist[len])
    }
}
console.log(checkboxlist)

46. 在所有加减乘除等需要数字类型的地方，JS会自动使用Number构造函数对变量进行转换。
    

47. 字符串foo=”get-element-by-id”,写一个function将其转化成驼峰表示法”getElementById”。

let str='get-element-by-id'
let strarray=str.split('-')
let strARRAY=[]
for(let i=0;i<strarray.length;i++){
	//将每个单词第一个字母大写，再获取第二到最后一个字母，进行拼接
    strARRAY.push(strarray[i].charAt(0).toUpperCase().concat(strarray[i].substr(1)))
}
console.log(strARRAY.join(''))

48. .将字符串”<tr><td>{$id}</td><td>{$name}</td></tr>”中的{$id}替换成10，{$name}替换成Tony （使用正则表达式）

let str = '<tr><td>{$id}</td><td>{$name}</td></tr>'
let newstr = str.replace(/{\$id}/g,'10').replace(/{\$name}/g,'Tony')    //说了多少遍了，正则表达式没有引号，左右两边起使为斜杠
console.log(newstr)

49. 为防止XSS攻击，需要对特殊字符进行转义，写方法将<, >, &, “进行转义

let str = '<script>"&nbsp;/script>'
function escapeHtml(str){
    return str.replace(/[<>"&]/g,function(match){
        switch (match) {
            case ">":
                return 'rg;'
                break;
            case "<":
                return 'lg;'
                break;
            case "\"":
                return '&quot;'
                break;
            case "&":
                return '&amp;'
                break;
            default:
                break;
        }
    })
}
console.log(escapeHtml(str));

50. 按顺序执行，输出1，2，3

//输出四个4
for(var i = 1;i<=3;i++){
    setTimeout(function(){
        console.log(i)
    },1000)
}
//方法1
for(var i = 1;i<=3;i++){
    setTimeout(function(){
        console.log(i)
    }(i),1000)         //立即执行函数
}

//方法2
for(let i = 1;i<=3;i++){    //形成块级作用域
    setTimeout(function(){
        console.log(i)
    },1000)
}

50. 获取url中的参数，以对象形式返回

let urlstr = 'http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e'
let argumentslist=urlstr.substr(urlstr.indexOf('?')+1).split('&')

console.log(argumentslist)

let len=argumentslist.length
let argumentObject={}
for(let i=0;i<len;i++){
    lists = argumentslist[i].split('=')
    argumentObject[lists[0]]=lists[1]
}

console.log(argumentObject)

51. 去除字符串开头结尾的空字符

let str1 = '\t\ntrim string \t\n'
String.prototype.trim=function(){
	//谁调用谁是this
    return this.replace(/\s+/,'').replace(/\s+$/,'')
}
console.log(str1.trim()=='trim string')

let str1 = '\t\ntrim string \t\n'
String.prototype.trim=function(str){
	//使用传递的参数
    return str.replace(/\s+/,'').replace(/\s+$/,'')
}
//可以使用传参的方法
console.log(str1.trim(str1)=='trim string')

52. 如果一对兔子每月生一对兔子；一对新生兔，从第二个月起就开始生兔子；假定每对兔子都是一雌一雄，试问一对兔子，第n个月能繁殖成多少对兔子？（使用callee完成）

[1,1,2,3,5,8,13,21.......]，得到最后一个数字
function fn(n){
    if(n==1 || n==2){
        return 1
    }else{
    	//没有从前往后算性能好
        return arguments.callee(n-1)+arguments.callee(n-2)    //总体意思就是：前面一个数字包含1的数量 +  前面第二个数字包含1的数量，每次都要进行到1
        //或者直接调用fn函数
        //return fn(num-1)+fn(num-2)
    }
}
console.log(fn(6))

53. 绑定事件和普通事件有什么区别
    绑定事件是对某元素进行监听，监听是否被触发，触发即执行所有绑定的函数
    普通函数会覆盖，只会执行最新声明的一个

var ys1 = document.getElementById('addEv'),
ys2 = document.getElementById('onCl');
ys1.addEventListener('click',function () {
    console.log(1);
});
ys1.addEventListener('click',function () {
    console.log(2)
});
//会弹出1，2；
ys2.onclick = function(){
    console.log(3);
}
ys2.onclick = function(){
    console.log(4);
}
//只会弹出4.

54. absolute的containingblock计算方式跟正常流有什么不同？

55. position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？

56. 堆排序以及后序遍历
    1、二叉树：一个节点最多有两个子节点
    2、满二叉树：层数为k，节点总数为(2^k-1)，即每一层都是满的
    3、完全二叉树：共k层，1-(k-1)层的节点达到最大个数，第k层节点连续集中在最左边
    4、平衡二叉树：左子树和右子树深度差的绝对值不超过1，左右子树都是平衡二叉树
    5、哈夫曼树（最优二叉树），树的带权路径长度最小
    6、大顶堆：每个结点的值都大于或等于其左右孩子结点的值
    7、小顶堆：每个结点的值都小于或等于其左右孩子结点的值

57. 已知子网掩码和地址，求网络号（已知B类地址的子网掩码为255.255.0.0,B类地址为127.24.36.55,那么它的网络号是多少？）
    子网掩码显示取IP地址前两个数字，得网路号为：127.24.0.0

58. 清理僵尸进程的
    子进程已经结束了，父进程未对它进行善后处理，该进程变为了僵尸进程。系统会在每个进程结束的时候自动扫描其子进程，交由init接管，init自动wait子进程，init接管并清理，init接管的所有进程都不会变为僵尸进程。解决办法是父进程wait

59. 哈夫曼树的节点问题

60. stress压力测试工具（io资源、消耗内存、对cpu压力）

61. PostCSS：将css解析成抽象语法树

62. 混合应用（Hybrid app）特点：既可以像原生应用（Native）一样访问设备多种功能，又可以像web应用一样一次开发多处应用，开发成本大于原生应用小于web应用

63. arguments：含有函数的实参，以及实现函数重载（同一个函数因参数不同，实现不同功能，如callee）

64. ES6中的symbol(标志)，是独一无二的，用来修饰对象中的属性名

65. 将列表转化为树形结构

const list=[
   {
        'id':1,
        'text':'asas',
        'parentId':0
    },
    {
        'id':2,
        'text':'bcbc',
        'parentId':1
    },
    {
        'id':3,
        'text':'dcdc',
        'parentId':1
    },
    {
        'id':4,
        'text':'sfdgser',
        'parentId':0
    },
    {
        'id':5,
        'text':'sfvar',
        'parentId':4
    },
]
function listToTree(data){
    //树可能不止一颗
    let tree=[]
    //以列表项的id为键，内容为value，创建对象；在检索某节点对应的父节点时可直接使用key值，若直接使用数组创建树，在给某节点的父节点添加子节点的时候，最坏情况下需要查找整个数组才能找到父节点。
    let temps={}
    for(let i =0;i<data.length;i++){
        temps[data[i]['id']]=data[i]
    }

    for(let temp in temps){
        if(temps[temp].parentId!=0){
            //注意子节点可能不止一个，所以在尚没发现孩子节点的时候需要拆功能键孩子节点数组
            if(!temps[temps[temp].parentId].children){
                temps[temps[temp].parentId].children=[]
            }
            temps[temps[temp].parentId].children.push(temps[temp])
        }else{
            tree.push(temps[temp])
        } 
    }
    return tree
}

console.log(listToTree(list))

66. 树转化为列表

const trees=[
    {
        'id':1,
        'text':'asas',
        'parentId':0,
        'children':[
            {
                'id':2,
                'text':'bcbc',
                'parentId':1
            },
            {
                'id':3,
                'text':'dcdc',
                'parentId':1
            }
        ]
    },

    {
        'id':4,
        'text':'sfdgser',
        'parentId':0,
        'children':[
            {
                'id':5,
                'text':'sfvar',
                'parentId':4
            }
        ]
    }
    
]
function treetolist(data){
    let list = []
    trees.forEach(tree=>{
        if(tree.children){
            //遍历数组
            for(let i=0;i<tree.children.length;i++){
                list.push(tree.children[i])
            }
            delete tree.children
            list.push(tree)
        }else{
            list.push(tree)
        }
    })
    return list
}
console.log(treetolist(trees))

67. 数组.slice(start,end)；所得结果不包含end下标的元素
68. document.write(‘afdfadf’); click

//将文字写如文档流（渲染在页面上），write是方法不是属性，接受字符串参数。
document.write('afdfadf');
//并不能给指定节点加如子节点，他是随着dom的构建执行的
//可以写入脚本。
document.write('<script>alert("oops!!!")<\/script>');
//可以一部引入js文件，插入子组件的原理，HTML构建DOM过程中遇到script便停下来，开始解析script。
//当HTML解析完成便会关闭文档流，关闭后再执行写入文档流write（settimeout的计时器很长，长到解析完html），会重写整个文档。

69. 鼠标悬浮状态，伪类时（:hover）

70. cookie作用：跟踪统计用户访问网站习惯，提供个性化服务。存储用户密码和id，向服务器发送请求时将cookie一起发送给服务器。

71. 检查某个元素是否支持当前浏览器

function hasattribute(attribute){
    let adiv = document.createElement('div')
    console.log(adiv.style)
    if(attribute in adiv.style){   // in  元素是否是数组（对象）中的元素（属性）
        return true
    }
    let websites = [ '-khtml-', '-ms-' ,'-o-' ,'-moz-', '-webkit-'];

    //下面的处理视情况而定
    attribute.replace('/~[a-z]/',function(cha){
        return cha.toLowerCase
    })

    let formatattr=''
    websites.forEach(website=>{
        formatattr=website+attribute
        if(formatattr in adiv.style){
            return true
        }
    }) 
    return false

}
if(hasattribute('transition')){
    console.log('yes')
}

72. text-stroke仅chrome浏览器支持，webkit内核，该如何使用(经测试火狐92.0也支持)

.textStroke h1 {
   color:while;
    -webkit-text-stroke:2px black
}

73. 一个块在另一个块中居中

//方法1
.A {
    position: relative;
    width: 500px;
    height: 500px;
    background-color: green;
    display: flex;       //！！！！
    align-items: center;  /*垂直居中*///！！！！！
}

.B {
    width: 300px;
    height: 300px;
    background-color: blue;
    margin:auto;       //！！！！
}

//方法2
.A {
    position: relative;
    width: 500px;
    height: 500px;
    background-color: green;
    display: flex;     //！！！！
    align-items: center;  /*垂直居中*/     //！！！！
    justify-content:space-around;        //！！！！
	/*或者
	justify-content:center;        //！！！！
	*/
}

.B {
    width: 300px;
    height: 300px;
    background-color: blue;
}

74. 查找某个节点的所有父节点

//HTML
<div class="textStroke" id='tar'>
    <h1>test text-stroke</h1>
    <div class="A" id="a"><div class="B" id="b"></div></div>
</div>


//JS
function findparent(id){
    if(id){
        let parent=[]
        let ele = document.getElementById(id).parentNode
        while(ele.tagName){        //DOM树结构，可以从一个点往上一层一层的找，可以往下一层一层的找，所以使用while循环
            parent.push(ele)
            ele=ele.parentNode     
        }
        return parent
    }
    return null
}
console.log(findparent('b'))

75. 常见浏览器内核：Webkit（chrome、safari）、Presto（Opera）、Gecko（火狐）、Trident（IE）

76. 响应式设计：一个网站能够兼容多个终端（pc、pad、phone），而不是伪每个终端做一个版本

77. label标签，属性：for（用于绑定元素，绑定内容为元素的id，当点击标签时，所绑定元素将获得焦点）、accesskey（热键，代替点击标签的动作）

<label for="inputbox" accesskey="U">name</label>
<input id='inputbox' type="text">

78. 元素设置浮动后（触发BFC），display的值为block

79. 浏览器默认字体大小为12px，让其大小小于12px：transform:scale(0.8):缩小

80. 服务端渲染对SEO更友好，而且首屏渲染通常更快一些

81. transform只对受控于盒模型的元素生效，原点为中心点，可以通过transform-origin变换原点位置，包含功能：matrix多种变形、为一、缩放、旋转、扭曲（skew）

82. webpack运行在本地node环境中

83. webpack（可以实现热更新，开发更加高效）、vue-cli都能打包大型项目

84. js五种基本数据类型：string、number、null、undefined、boolean；引用数据类型：object、array、function

85. 五层体系结构click：（SSH：安全外壳协议，工作在应用层基础上的安全协议）
    

86. GBK 汉字占2个字节，英文占1个字节；UTF-8汉字占3个字节，英文占1个字节；都有中文简体和繁体字

87. js模块规范：CJS（commonjs，服务器端）amd（requirejs）、cmd（seajs）、umd（commonjs和amd的糅合）、esm（es6）

88. 会引发GPU硬件加速（利用 GPU 进行渲染，减少 CPU 操作的一种优化方案）的CSS属性：transform、opacity、filter、will-change。

89. 查找缓存会依次查找（Service Worker（浏览器缓存）、Memory Cache（内存）、Disk Cache（硬盘）、Push Cache（推送缓存）），查找不到才会请求网络。