第一篇
1.var的变量提升的底层原理是什么?
JS引擎的工作方式是:
1)先解析代码,获取所有被声明的变量 。
2)然后再运行;也就是说分为预处理和执行两个阶段。
变量提升:所有变量的声明语句都会被提升到代码头部。但是变量提升只对var命令声明的变量有效,如果一个变量不是用var命令声明的,就不会发生变量提升。
js里的function也可看做变量,也存在变量提升情况。
2.JS如何计算浏览器的渲染时间?
1)解析HTML生成DOM树。
2)解析CSS生成CSSOM规则树。
3)将DOM树与CSSOM规则树合并在一起生成渲染树。
4)遍历渲染树开始布局,计算每个节点的位置大小信息。
5)将渲染树每个节点绘制到屏幕。
优化考虑:
CSS优先:引入顺序上,CSS资源先于JavaScript资源。
JS置后:通常把JS代码放到页面底部,且JavaScript应尽量少影响DOM的构建。
3.JS的回收机制?
1)垃圾回收机制是为了以防内存泄漏,(内存泄漏,当已经不需要某块内存时这块内存还存在着) ,垃圾回收机制就是间歇的不定期的寻找到不再使用的变量,并释放掉他们所指向的内存。
2)JS有两种变量:全局变量和在函数中产生的局部变量。局部变量的生命周期在函数执行过后就结束了,此时便可将它引用的内存释放(即垃圾回收),但全局变量生命周期会持续到浏览器关闭页面。
3)JS执行环境中的垃圾回收器有两种方式:标记清除(mark and sweep)、引用计数(reference counting)。
标记清除:垃圾收集器给内存中的所有变量都加上标记,然后去掉环境中的变量以及被环境中的变量引用的变量的标记。在此后再背加上的标记的变量即为需要回收的变量,因此环境中的变量已经无法访问到这些变量。
4)引用计数:这种方式常常会引起内存泄漏,低版本的IE使用这种方式。机制就是跟踪一个值的引用次数,当声明一个变量并将一个引用类型赋值给该变量时该值引用次数加1,当这个变量指向其它一个时该值的引用次数便减1。当该值引用次数为0时就会被回收。
4.水平垂直居中的方式?
1)定位
父元素设置为:position:relative;
子元素设置为:position::absolute;
距上50%,距左50%,然后减去元素自身宽度的距离就可以实现。
width: 100px; height: 100px; position: absolute; left: 50%; top: 50%; margin: -50% 0 0 -50%;
2)flex布局
display: flex; //flex布局 justify-content: center;//使子项目水平居中 align-items: center;//使子项目垂直居中
3)table-cell(不推荐)
display: table-cell; vertical-align: middle;//使子元素垂直居中 text-align: center;//使子元素水平居中
5.实现一个三栏布局,中间板块自适应的方法有哪些?
1)浮动方式(float + margin)
<div class="content"> <div class="left">left</div> <div class="right">right</div> <div class="center">center</div> </div>
.left { float: left; width: 100px; height: 200px; } .right { float: right; padding: 0; width: 100px; height: 200px; } .center { margin: 0 100px 0 200px; }
2)定位布局(position + margin)
缺点:如果中间栏含有最小宽度限制,或是含有宽度的内部元素,当浏览器宽度小到一定程度时,会发生层重叠的情况。
3)flex布局(flex:1):这种布局,高度由内容决定。
4)table布局:这种布局,高度由内容决定。
5)Grid布局
6)圣杯布局(float、负边距、relative)
7)双飞翼布局
优点:
【1】主要内容先加载。
【2】兼容目前所有的主流浏览器,包括IE6在内。
【3】实现不同的布局方式,可以通过调整相关CSS属性即可实现。
圣杯布局与双飞翼布局比较:
【1】都是左右栏定宽,中间栏自适应的三栏布局,中间栏都放到文档流前面,保证先行渲染。
【2】解决方案基本相似:都是三栏全部设置左浮动float:left,然后分别解决中间栏内容被覆盖的问题。
【3】解决中间栏内容被覆盖问题时,圣杯布局设置父元素的padding,双飞翼布局在中间栏嵌套一个div,内容放到新的div中,并设置margin,实际上双飞翼布局就是圣杯布局的改进方案。
6. 如何判断一个对象是否是数组?
1)isPrototypeOf,判定Array是不是在obj的原型链中,如果是,则返回true,否则false;
2)obj instanceof Array;
3)Object.prototype.toString.call(obj);
4)Array.isArray(obj); //不推荐 当Array.isArray()不可用时,可做如下兼容
if (!Array.isArray) { Array.isArray = function (arg) { return Object.prototype.toString.call(arg) === '[object Array]'; } }
7.行内元素和块级元素有哪些?img属于什么元素?
1)块元素(block element)
【1】address - 地址
【2】blockquote - 块引用
【3】center - 居中对齐块
【4】dir - 文本方向 dir="rtl" 文本从右到左 <bdo dir="rtl">该段落文字从右到左显示。</bdo>
【5】div - 常用块级元素,也是css layout的主要标签
【6】dl - 定义列表
【7】fieldset - form控制组
【8】form - 交互表单
【9】h1 - 大标题
【10】h2 - 副标题
【11】h3 - 3级标题
【12】h4 - 4级标题
【13】h5 - 5级标题
【14】h6 - 6级标题
【15】hr - 水平分割线
【16】menu - 菜单列表
【17】noframes - frames可选内容,(对于不支持frame的浏览器显示此区块内容)
【18】noscript - 可选脚本内容(对于不支持script的浏览器显示此内容)
【19】ol - 排序表单
【20】p - 段落
【21】pre - 格式化文本
【22】table - 表格
【23】ul - 非排序列表
2)内联元素(inline element)
【1】a - 锚点
【2】abbr - 缩写 <abbr title="World Health Organization">WHO</abbr>
【3】acronym - 首字母缩写 <acronym title="as soon as possible">ASAP</acronym>
【4】b - 粗体(不推荐)
【5】bdo - <bdo dir="rtl">该段落文字从右到左显示。</bdo>
【6】big - 大字体
【7】br - 换行
【8】cite - 引用
【9】code - 计算机代码(在引用源码的时候需求)
【10】dfn - 定义字段
【11】em - 强调
【12】font - 字体设定
【13】i - 斜体
【14】img - 图片
【15】input - 输入框
【16】kbd - 定义键盘文本
【17】label - 表格标签
【18】q - 短引用 ""号引用
【19】s - 删除中短线(不推荐)
【20】samp - 定义范例计算机代码
【21】select - 项目选择
【22】small - 小字体文本
【23】span - 常用内联容器,定义文本内区块
【24】strike - 中划线
【25】strong - 粗体强调
【26】sub - 下标
【27】sup - 上标
【28】textarea - 多行文本输入框
【29】tt - 电传文本
【30】u - 下划线
【31】var - 定义变量
3)可变元素
可变元素为根据上下文语境决定该元素为块元素或者内联元素。
【1】applet - java applet
【2】button - 按钮
【3】del - 删除文本
【4】iframe - inline frame
【5】ins - 插入的文本 <p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
【6】map - 图片区块(map)
【7】object - object对象
【8】script - 客户端脚本
8.margin坍陷?
问题:当两个盒子在垂直方向上设置margin值时,会出现塌陷现象。
1.给父盒子添加border
2.给父盒子添加padding-top
3.给父盒子添加overflow:hidden
4.父盒子:position:fixed
5.父盒子:display:table
6.给子元素的前面添加一个伪元素
属性为:content: "";
display: table;
7:综合解决塌陷、重叠方案
.clearfix::before, .clearfix::after { content: ""; display: table; clear: auto; }
9.说说BFC原理?
BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。
因为BFC内部的元素和外部的元素绝对不会互相影响,因此,当BFC外部存在浮动时,它不会影响BFC内部Box的布局,BFC会通过变窄,而不与浮动有重叠。
同样的,当BFC内部有浮动时,为了不影响外部元素的布局,BFC计算高度时会包括浮动的高度。
避免marin重叠也是这样的一个道理。
10.写一下节点增删改?
1)document.createElement(标签名)
2)父级.appendChild(要追加的元素) // 在指定父级子节点最后一个后面追加子元素
3)父级.insertBefore(新的元素,指定的已有子元素) // 在父级的指定子元素前面插入一个新元素(注意:先判断如果第二个参数的节点是否存在)
4)元素.cloneNode
5)父级.removeChild(已有子元素)
5)父级.replaceChild(新的元素节点,原有元素节点)
11.如何获取元素的父节点和兄弟节点,写一下?
1)获取父节点
// 1. parentNode获取父节点 // 获取的是当前元素的直接父元素 var p = document.getElementById("test").parentNode; // 2. parentElement获取父节点 // parentElement和parentNode一样,只是parentElement是ie的标准 var p1 = document.getElmentById("test").parentElement; // 3. offsetParent获取所有父节点 var p2 = document.getElementById("test").offsetParent;
2)获取兄弟节点
// 1. 通过获取父节点再获取子节点来获取兄弟节点 var brother1 = document.getElementById("test").parentNode.children[1]; // 2. 获取上一个兄弟节点 // 在获取前一个兄弟节点的时候可以使用previousSibling和previousElementSibling。 // 他们的区别是previousSibling会匹配字符,包括换行和空格,而不是节点。previousElementSibling则直接匹配节点。 var brother2 = document.getElementById("test").previousElementSibling; var brother3 = document.getElementById("test").previousSibling; // 3. 获取下一个兄弟节点 var brother4 = document.getElementById("test").nextElementSibling; var brother5 = document.getElementById("test").nextSibling;
12.给你一个乱序数组,你怎么排序?
sort、冒泡、选择、二分法。
转自:http://www.itlike.com/article