px、em和rem的区别javascript
rem:相对单位,可理解为”root em”, 相对根节点html的字体大小来计算,CSS3新加属性,chrome/firefox/IE9+支持。php
任意浏览器的默认字体高都是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做为单位就好了。
优雅降级和渐进加强css
eval()的做用html
eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码。
语法:前端
eval(string)
JS哪些操做会形成内存泄露vue
JS的回收机制:
找出再也不使用的变量,而后释放掉其占用的内存,可是这个过程不是实时的,由于其开销比较大,因此垃圾回收系统(GC)会按照固定的时间间隔,周期性的执行。
垃圾收集器必须跟踪到底哪一个变量没用,对于再也不有用的变量打上标记,以备未来收回其内存。用于标记的无用变量的策略可能因实现而有所区别,一般状况下有两种实现方式:“标记清除”和“引用计数”。引用计数不太经常使用,标记清除较为经常使用。
一、标记清除
这是javascript中最经常使用的垃圾回收方式。当变量进入执行环境是,就标记这个变量为“进入环境”。从逻辑上讲,永远不能释放进入环境的变量所占用的内存,由于只要执行流进入相应的环境,就可能会用到他们。当变量离开环境时,则将其标记为“离开环境”。
垃圾收集器在运行的时候会给存储在内存中的全部变量都加上标记。而后,它会去掉环境中的变量以及被环境中的变量引用的标记。而在此以后再被加上标记的变量将被视为准备删除的变量,缘由是环境中的变量已经没法访问到这些变量了。最后。垃圾收集器完成内存清除工做,销毁那些带标记的值,并回收他们所占用的内存空间。
*关于这一块,建议读读 ,关于做用域链的一些知识详解,读完差很少就知道了,哪些变量会被作标记。java
function test(){ var a=10;//被标记,进入环境 var b=20;//被标记,进入环境 } test();//执行完毕以后a、b又被标记离开环境,被回收
二、引用计数
另外一种不太常见的垃圾回收策略是引用计数。引用计数的含义是跟踪记录每一个值被引用的次数。当声明了一个变量并将一个引用类型赋值给该变量时,则这个值的引用次数就是1。相反,若是包含对这个值引用的变量又取得了另一个值,则这个值的引用次数就减1。当这个引用次数变成0时,则说明没有办法再访问这个值了,于是就能够将其所占的内存空间给收回来。这样,垃圾收集器下次再运行时,它就会释放那些引用次数为0的值所占的内存。web
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会一直存在,形成内存泄漏
百分比布局+媒体查询
CSS样式覆盖规则
规则三:直接指定的样式发生冲突时,样式权值高者获胜。
样式的权值取决于样式的选择器,权值定义以下表: ``` CSS选择器 权值 标签选择器 1 类选择器 10 ID选择器 100 内联样式 1000 伪元素(:first-child) 1 伪类(:link) 10 ``` 能够看到,内联样式的权值>>ID选择器>>类选择器>>标签选择器,除此之外,后代选择器的权值为每项权值之和,好比”#nav .current a”的权值为100 + 10 + 1 = 111。
规则四:样式权值相同时,后者获胜。
position的值, relative和absolute分别是相对于谁进行定位的
CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background-repeat”,“background-position”的组合进行背景定位,background-position能够用数字能精确的定位出背景图片的位置
怎样添加、移除、移动、复制、建立和查找节点?
1)建立新节点 createDocumentFragment() //建立一个DOM片断 createElement() //建立一个具体的元素 createTextNode() //建立一个文本节点 2)添加、移除、替换、插入 appendChild() //添加 removeChild() //移除 replaceChild() //替换 insertBefore() //插入 3)查找 getElementsByTagName() //经过标签名称 getElementsByName() //经过元素的Name属性的值 getElementById() //经过元素Id,惟一性
浏览器的内核分别是什么?
JSONP (JSON with Padding)是一个简单高效的跨域方式,HTML中的script标签能够加载并执行其余域的javascript,因而咱们能够经过script标记来动态加载其余域的资源。例如我要从域A的页面pageA加载域B的数据,那么在域B的页面pageB中我以JavaScript的形式声明pageA须要的数据,而后在 pageA中用script标签把pageB加载进来,那么pageB中的脚本就会得以执行。JSONP在此基础上加入了回调函数,pageB加载完以后会执行pageA中定义的函数,所须要的数据会以参数的形式传递给该函数。JSONP易于实现,可是也会存在一些安全隐患,若是第三方的脚本随意地执行,那么它就能够篡改页面内容,截获敏感数据。可是在受信任的双方传递数据,JSONP是很是合适的选择。
在客户端编程语言中,如javascript和 ActionScript,同源策略是一个很重要的安全理念,它在保证数据的安全性方面有着重要的意义。同源策略规定跨域之间的脚本是隔离的,一个域的脚本不能访问和操做另一个域的绝大部分属性和方法。那么什么叫相同域,什么叫不一样的域呢?当两个域具备相同的协议, 相同的端口,相同的host,那么咱们就能够认为它们是相同的域。同源策略还应该对一些特殊状况作处理,好比限制file协议下脚本的访问权限。本地的HTML文件在浏览器中是经过file协议打开的,若是脚本能经过file协议访问到硬盘上其它任意文件,就会出现安全隐患,目前IE8还有这样的隐患。
浏览器是如何渲染页面的?
对<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>
使用闭包主要是为了设计私有的方法和变量。
闭包的优势是能够避免全局变量的污染,缺点是闭包会常驻内存,会增大内存使用量,使用不当很容易形成内存泄露。
闭包有三个特性:
1.函数嵌套函数
2.函数内部能够引用外部的参数和变量
3.参数和变量不会被垃圾回收机制回收
JavaScript中如何检测一个变量是一个String类型?请写出函数实现
typeof(obj) === "string" typeof obj === "string" obj.constructor === String
$(document).ready()方法和window.onload有什么区别?
js遍历
forEach循环:forEach() 方法用于调用数组的每一个元素,并将元素传递给回调函数。没有返回值。
array.forEach(function(currentValue[, index, arr), thisValue])
map()函数:map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。
array.map(unction(currentValue,index,arr), thisValue)
filter函数:方法建立一个新的数组,新数组中的元素是经过检查指定数组中符合条件的全部元素。
array.filter(function(currentValue[,index,arr), thisValue])
some函数:some() 方法用于检测数组中的元素是否知足指定条件(函数提供),some() 方法会依次执行数组的每一个元素:
array.some(function(currentValue[,index,arr),thisValue])
对象in方法
let obj ={a:'2',b:3,c:true}; for (var i in obj) { console.log(obj[i],i) } console.log(obj);
Object.keys(obj)和 Object.values(obj)函数
const obj = { id:1, name:'zhangsan', age:18 } console.log(Object.keys(obj)) console.log(Object.values(obj))
js数组处理函数总结
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
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
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
array.reduce(reducer):方法对数组中的每一个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值。
reducer函数接收4个参数: 1 Accumulator (acc) (累计器) 2 Current Value (cur) (当前值) 3 Current Index (idx) (当前索引) 4 Source Array (src) (源数组)
欢迎阅读:
2019年前端面试题-01
2019年前端笔试题
2019年前端面试题-03
我是Cloudy,年轻的前端攻城狮一枚,爱专研,爱技术,爱分享。
我的笔记,整理不易,感谢阅读、点赞和收藏。
文章有任何问题欢迎你们指出,也欢迎你们一块儿交流前端各类问题!