前端知识点
前端知识点
一、练习题总结
1.下列哪个样式定义后,内联(非块状)元素可以定义宽度和高度
答案：内联元素加上display：block;后被块级化。块级元素一般是其他元素的容器，可容纳内联元素和其他块状元素，块状元素排斥其他元素与其位于同一行，宽度(width)高度(height)起作用。因此，可以定义其宽度和高度。
none:此元素不会被显示;
inline：把元素变成内联元素;
inherit:规定应该从父元素继承 display 属性的值。
2.css属性position的属性值的描述：
static：默认，元素按照标准流来定位；relative：生成相对定位的元素，相对于元素本身正常位置进行定位。absolute：生成绝对定位的元素，相对于 static 定位以外的第一个祖先元素进行定位；fixed：生成绝对定位的元素，相对于浏览器窗口进行定位3.css属性overflow属性定义溢出元素内容区的内容会如何处理：
参数是scroll时候，必会出现滚动条。
参数是auto时候，子元素内容大于父元素时出现滚动条。
参数是visible时候，溢出的内容出现在父元素之外。
参数是hidden时候，溢出隐藏。
4.在html中通过标签打开一个链接，通过 标签的 target 属性规定在何处打开链接文档。
如果在标签中写入target属性，则浏览器会根据target的属性值去打开与其命名或名称相符的框架或者窗口.
在target中还存在四个保留的属性值如下：
| 值 | 描述 |
|---|---|
| _blank | 在新窗口中打开被链接文档。 |
| _self | 默认。在相同的框架中打开被链接文档。 |
| _parent | 在父框架集中打开被链接文档。 |
| _top | 在整个窗口中打开被链接文档。 |
| framename | 在指定的框架中打开被链接文档。 |
5.js事件常见事件的触发
onclick:鼠标点击某个对象时触发
onfocus：元素获取焦点时触发
onblur：元素失去焦点时触发
onchange：元素的内容改变时触发
onmousedown：鼠标被按下时触发
onmouseup：鼠标被松开时触发
onkeydown：某个键盘按键被按下时触发
onkeyup：某个键盘按键被松开时触发
onkeypress：某个键盘按键被按下并松开
onkeydown和onkeypress的具体区别：
1）一个放开一个没有放开，onkeydown 先于 onkeypress 发生。
2）onkeypress 无法识别系统按钮（如箭头键和功能键）。
2）onkeydown 捕获的 keyCode 不区分字母大小，而 onkeypress 区分。
6.flash和js通过什么类如何交互?
Flash提供了ExternalInterface接口与JavaScript通信，ExternalInterface有两个方法，call和addCallback
作用：call让Flash调用js里的方法，addCallback是用来注册flash函数让js调用。
- ExternalInterface.addCallback("在js里可调用的flash方法名",flash内方法) //在flash中通过这个方法公开，在js中可调用的flash内的方法;
- ExternalInterface.call("js方法",传给js的参数) //在flash里调用js里的方法
7.backgroundColor? background-color?
在使用点运算符时，浏览器看到“-”就没法正确解析了，在那种情况下，只能将该变量使用驼峰命名法来表示。而使用方括号表示法，"-"被理解为字符串中的内容，该字符串能被正确解析。
eg:
inputElement.style.backgroundColor = 'red'; // 这是没问题的
inputElement.style.background-color = 'red'; // 这是错的，浏览器看不懂啊...
inputElement.style["background-color"] = 'red'; // 这也是可以的
8.有关html5标签的说法
9.有关浏览器中使用js跨域获取数据的描述：
-
相同的域是指：域名、端口、协议都相同 -
js可以使用jsonp进行跨域 -
通过修改document.domain来跨子域 -
使用window.name来进行跨域
https://www.nowcoder.com/questionTerminal/2a92a78509e34a5b9df2d1220c5d6d89
10.
解析：
（1）Function是引用类型：保存在堆中，变量f1,f2是保存在栈中；
（2）闭包：一个函数（产生新的作用域）定义的局部变量、子函数的作用域在函数内，
但是一旦离开了这个函数，局部变量就无法访问，所以通过返回子函数到一个变量f1的方法，让
f1指向堆中的函数作用域，这样可以使用局部变量i.
(3) 过程：
第一次f1() :f1=Foo()中，先执行Foo(): i = 0,return值返回给f1 (f1指向子函数 f1()=function(){.....} 因为子函数没有 定义i，所以向上找到父函数定义的 i) ，并执行子函数 输出i=0,再自加 i =1(覆盖了父函数Foo 的 i值);
第二次f1() : 执行的是子函数 Function(){ ..},输出的是父函数 的 i=1,再自加 i =2;
第一次f2():同第一次f1(),不同的是 f2指向堆中一个新的对象 function(){ ...},所有此i非彼i,输出i=0;如果再次f2(),那么和第二次f1(),一样输出i=1。
11.JavaScript变量命名规则如下：
1、变量命名必须以字母、下划线”_”或者”$”为开头。其他字符可以是字母、_、美元符号或数字。
2、变量名中不允许使用空格和其他标点符号，首个字不能为数字。
3、变量名长度不能超过255个字符。
4、变量名区分大小写字母。(javascript是区分大小写的语言)
5、变量名必须放在同一行中
6、不能使用脚本语言中保留的关键字、保留字、true、false 和 null 作为标识符
12.有关javascript系统方法的描述：
parseFloat方法：解析一个字符串，并返回一个浮点数。如果字符串的第一个字符不能被转换为数字，那么 parseFloat() 会返回 NaN。（开头和结尾的空格是允许的）isNaN方法：该方法用于检测参数是否为数值型，如果是数值型，返回false，否则，返回true。escape方法： 该方法返回对一个字符串编码后的结果字符串eval方法：该方法将某个参数字符串作为一个JavaScript执行（返回字符串表达式中的值）
isFinite()方法：用于检查其参数是否是无穷大。如果 number 是有限数字（或可转换为有限数字），那么返回 true。否则，如果 number 是 NaN（非数字），或者是正、负无穷大的数，则返回 false。
13.有关HTML的Doctype和严格模式与混杂模式的描述
声明位于文档中的最前面，处于标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。
浏览器根据DOCTYPE是否存在以及使用的哪种DTD来选择要使用的呈现方法。
DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
在标准模式中，浏览器根据规范呈现页面；在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。https://www.nowcoder.com/test/question/done?tid=32394689&qid=15107#summary
14.有关JavaScript中 call和apply的描述：
call与apply都属于Function.prototype的一个方法，所以每个function实例都有call、apply属性。ECMAScript规范所有函数都包含两个非继承的方法，分别为call()和apply()，这两个函数都是在特定的作用域中调用函数，能改变函数的作用域，实际上是改变函数体内“this”的指代的对象。
call(thisObject[,arg1,arg2,arg3...]):
释义：第一个参数是运行函数的作用域，调用某一对象的一个方法，用另一个对象替换当前对象。
说明：call方法可以用来代替另一个对象调用一个方法，call方法将一个函数对象上下文从初始的上下文改变为thisObj指定的新对象，如果没有提供thisObject参数，那么Global对象被用于thisObject。
apply(thisObject[,argArray])：
释义：第一个参数是运行函数的作用域，调用对象的一个方法，用另一个对象替换当前对象。
说明：如果argArray不是一个有效数组或不是arguments对象，那么将导致一个 TypeError，如果没有提供argArray和thisObj任何一个参数，那么Global对象将用作thisObj。
二者区别：两者传递的参数不同，call传递的参数是逐一列举出来的，apply传递参数形式是数组。
https://www.cnblogs.com/mchtig/p/9272892.html
15.border:none以及border:0的区别
当定义border:none时，表示无边框样式，浏览器并不会对边框进行渲染，也就没有实际的宽度；而 border:0表示边框宽度为0。
定义边框时，除了设置宽度外，还必须设置边框的样式（solid,dotted,dashed,double;默认为none）才能显示出来。
16.CSS Sprites
1.简介
CSS Sprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许将一个页面涉及到的所有零星图片都包含到一张大图中， 利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位， 访问页面时避免图片载入缓慢的现象。
2.优点
（1）CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
（2）CSS Sprites能减少图片的字节；
（3）CSS Sprites解决了网页设计师在图片命名上的困扰，只需对一张集合的图片命名，不需要对每一个小图片进行命名，从而提高了网页制作效率。
（4）CSS Sprites只需要修改一张或少张图片的颜色或样式来改变整个网页的风格。
3.缺点
（1）图片合并麻烦：图片合并时，需要把多张图片有序的合理的合并成一张图片，并留好足够的空间防止版块出现不必要的背景。
（2）图片适应性差：在高分辨的屏幕下自适应页面，若图片不够宽会出现背景断裂。
（3）图片定位繁琐：开发时需要通过工具测量计算每个背景单元的精确位置。
（4）可维护性差：页面背景需要少许改动，可能要修改部分或整张已合并的图片，进而要改动css。在避免改动图片的前提下，又只能（最好）往下追加图片，但这样增加了图片字节。
17. 浏览器引擎（浏览器的内核）
1）Trident: IE 以Trident 作为内核引擎；
2) Gecko: Firefox 是基于 Gecko 开发；
3）WebKit: Safari, Google Chrome,傲游3,猎豹浏览器,百度浏览器
18.JavaScript对象——数组总结
https://www.cnblogs.com/daijing/p/10297685.html
数组排序：https://www.w3school.com.cn/js/js_array_sort.asp
数组迭代方法：https://www.w3school.com.cn/js/js_array_iteration.asp
二、面试常问知识点
1.浏览器的缓存机制、渲染机制
2.cookie和session的区别
3.splice和slice的区别
4.js的事件委托
https://www.cnblogs.com/html55/p/10164914.html
5.闭包、使用场景
6.输入url到回车的过程
https://blog.csdn.net/Crazypokerk_/article/details/89416546
7.Vue双向绑定 MVVM
8.