- 45-69 之间的随机数 :Math.random()24+45 ,Math.random()返回数值是 0-1 ,69-45 = 24,将24Math.Random()返回值得到0-24之间的数,
- . 承上:将这些数字排序,默认要求是数字为整数,使用函数为Math.floor()
- document.body
- 获取目前时间,返回格式为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()+'分')
- 获得鼠标位置,要使用onmousemove事件,该事件返回一个e,e的内容如图
document.onmousemove=function(e){
console.log(e.clientX+','+e.clientY)
}
- typeof返回数据类型,对object和null都返回 object
- 计算阶乘
function jiecheng(num){
if(num==1){
return 1
}else{
return num*jiecheng(num-1)
}
}
console.log(jiecheng(4))
- onclick事件(所有事件都没有大写字母)
document.getElementById('submit').onclick=function(o){
var a = o.type.B=o.target
console.log(a)
}
a的内容如图:
- 事件冒泡,结构如下,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;
})
-
奇怪的知识增加了
Boolean([]) //true
Number([]) //0
Number({}) //NaN
Number(false) //0
-
前端页面由三层构成:结构层(html)、表示层(css)、行为层(js)
-
怎么样从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压缩内容;
- Ajax工作原理:相当于在用户和服务器之间加了—个中间层,使用户操作与服务器响应异步化。这样把以前的一些服务器负担的工作转嫁到客户端,利于客户端闲置的处理能力来处理,减轻服务器和带宽的负担,从而达到节约ISP的空间及带宽租用成本的目的。
- 同步和异步:同步,就是调用某个东西时,调用方得等待这个调用返回结果才能继续往后执行。异步,和同步相反 调用方不会理解得到结果,而是在调用发出后调用者可用继续执行后续操作,被调用者通过状体来通知调用者,或者通过回掉函数来处理这个调用
- promise:异步执行的同步操作
- 序列化JSON字符串:eval() 或者 JSON.parse()
- 闭包:包含自由变量(未绑定到任何对象上的变量)的代码块,这些变量不是在任何全局上下文中声明的,也不是在该代码块中声明的,而是在定义代码块的环境中定义的。(局部变量: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、持久性:闭包外部函数调用完成后,闭包的结构依然存在,实现数据的持久使用
对页面影响:减少了全局变量、减少了函数的参数量、进行了封装;会占用内部资源,过多食用闭包会内存溢出
- js 延迟加载方法:动态创建dom、懒加载、defer和async
- 引入css方式:行内(分标签同在)、内嵌(写在头部的style,页面加载完成后在进行加载)、外链(import导入,优先级高于一切)
- css reset,浏览器不同,默认样式不同,需要处理浏览器兼容问题。最好办法:重新定义样式覆盖默认样式
- css sprites:css精灵把一堆小图片整合为一张大图片,减轻对服务器的请求数量
- <doctype>作用?浏览器严格模式、混杂模式、怪异模式? click
作用:告诉浏览器使用什么标准进行解析文件
严格模式(strict):排版和js的运作模式按照浏览器支持的最高标准进行执行
混杂模式(transitional):向后兼顾老的浏览器版本,防止站点无法工作
怪异模式(frameset):使用浏览器自己的标准解析执行代码
- 语义化标签:标签名直观
- 强制类型转换:parseInt、parseFloat、Number
- 隐式类型转换:== - ===
- IE和DOM事件流区别
IE | DOM | |
---|---|---|
执行顺序 | 冒泡事件 | 先捕获后冒泡 |
绑定函数 | attachEvent | addEventListener |
移除函数 | detachEvent | removeEventListener |
触发的事件是否有on | 有 | 无 |
this指向 | window | 触发事件的对象 |
- call的参数是散装、apply是写在数组里面
- 解析json数据:eval、parse(更安全)
- 获取非行间样式的函数(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')
- javascript的本地对象(array、abject、regexp这种可以通过new进行实例化的对象)、内置对象(Math、global(很多方法都是global对象的方法,如parseInt…))、宿主对象(window、document)
- 空元素:<br>、<hr>、<img>、<input>、<link>、<meta>
- css选择器
优先级:!important>id>class>tag
id选择器
类选择器
标签选择器
相邻选择器:h1+p
子选择器:ul < li
后代选择器:li a
通配符选择器:*
属性选择器:a[rel=‘external’]
伪类选择器:a:hover,li:nth-child(0) - 新增伪类:fist-of-type、last-of-type、only-of-type、only-child、nth-child(2)、:enabled、:disabled、:checked
- 可继承属性:font-size、font-family、color、ul、li、dl、dd、dt
不可继承属性:border、padding、margin、width、height - JavaScript对象的属性有哪些属性描述符:writable(是否可写)、configurable(是否可以删除、修改)、enumerable(是否能在for…in…循环中遍历出来,或是否能通过oobject.key例举出来)、value(属性值)
- 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定位 - 页面重构:编写css,让页面更合理化
- 为什么要初始化CSS样式:浏览器兼容问题,不初始化会出现浏览器之间的页面差距
- iframe缺点:会阻碍页面的onload事件
- css权重规则:标签:1;class:10;id:100;#div1 div{ }===>权重为 100+1=101,权重相同时,最后定义的样式会起作用
- 通用事件侦听器函数 78题!!!
- 结果
(function(x){
delete x; //只用于删除对象的某个属性,不能删除变量
alert(x); //弹出6
})(1+5);
- 已知input的id,如何获取输入框的输入值
document.getElementById('id').value
- 如何获取页面中的所有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)
-
在所有加减乘除等需要数字类型的地方,JS会自动使用Number构造函数对变量进行转换。
-
字符串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(''))
- .将字符串”<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)
- 为防止XSS攻击,需要对特殊字符进行转义,写方法将<, >, &, “进行转义
let str = '<script>" /script>'
function escapeHtml(str){
return str.replace(/[<>"&]/g,function(match){
switch (match) {
case ">":
return 'rg;'
break;
case "<":
return 'lg;'
break;
case "\"":
return '"'
break;
case "&":
return '&'
break;
default:
break;
}
})
}
console.log(escapeHtml(str));
- 按顺序执行,输出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)
}
- 获取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)
- 去除字符串开头结尾的空字符
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')
- 如果一对兔子每月生一对兔子;一对新生兔,从第二个月起就开始生兔子;假定每对兔子都是一雌一雄,试问一对兔子,第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))
- 绑定事件和普通事件有什么区别
绑定事件是对某元素进行监听,监听是否被触发,触发即执行所有绑定的函数
普通函数会覆盖,只会执行最新声明的一个
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.
-
absolute的containingblock计算方式跟正常流有什么不同?
-
position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样?
-
堆排序以及后序遍历
1、二叉树:一个节点最多有两个子节点
2、满二叉树:层数为k,节点总数为(2^k-1),即每一层都是满的
3、完全二叉树:共k层,1-(k-1)层的节点达到最大个数,第k层节点连续集中在最左边
4、平衡二叉树:左子树和右子树深度差的绝对值不超过1,左右子树都是平衡二叉树
5、哈夫曼树(最优二叉树),树的带权路径长度最小
6、大顶堆:每个结点的值都大于或等于其左右孩子结点的值
7、小顶堆:每个结点的值都小于或等于其左右孩子结点的值 -
已知子网掩码和地址,求网络号(已知B类地址的子网掩码为255.255.0.0,B类地址为127.24.36.55,那么它的网络号是多少?)
子网掩码显示取IP地址前两个数字,得网路号为:127.24.0.0 -
清理僵尸进程的
子进程已经结束了,父进程未对它进行善后处理,该进程变为了僵尸进程。系统会在每个进程结束的时候自动扫描其子进程,交由init接管,init自动wait子进程,init接管并清理,init接管的所有进程都不会变为僵尸进程。解决办法是父进程wait -
哈夫曼树的节点问题
-
stress压力测试工具(io资源、消耗内存、对cpu压力)
-
PostCSS:将css解析成抽象语法树
-
混合应用(Hybrid app)特点:既可以像原生应用(Native)一样访问设备多种功能,又可以像web应用一样一次开发多处应用,开发成本大于原生应用小于web应用
-
arguments:含有函数的实参,以及实现函数重载(同一个函数因参数不同,实现不同功能,如callee)
-
ES6中的symbol(标志),是独一无二的,用来修饰对象中的属性名
-
将列表转化为树形结构
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))
- 树转化为列表
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))
- 数组.slice(start,end);所得结果不包含end下标的元素
- document.write(‘afdfadf’); click
//将文字写如文档流(渲染在页面上),write是方法不是属性,接受字符串参数。
document.write('afdfadf');
//并不能给指定节点加如子节点,他是随着dom的构建执行的
//可以写入脚本。
document.write('<script>alert("oops!!!")<\/script>');
//可以一部引入js文件,插入子组件的原理,HTML构建DOM过程中遇到script便停下来,开始解析script。
//当HTML解析完成便会关闭文档流,关闭后再执行写入文档流write(settimeout的计时器很长,长到解析完html),会重写整个文档。
-
鼠标悬浮状态,伪类时(:hover)
-
cookie作用:跟踪统计用户访问网站习惯,提供个性化服务。存储用户密码和id,向服务器发送请求时将cookie一起发送给服务器。
-
检查某个元素是否支持当前浏览器
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')
}
- text-stroke仅chrome浏览器支持,webkit内核,该如何使用(经测试火狐92.0也支持)
.textStroke h1 {
color:while;
-webkit-text-stroke:2px black
}
- 一个块在另一个块中居中
//方法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;
}
- 查找某个节点的所有父节点
//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'))
-
常见浏览器内核:Webkit(chrome、safari)、Presto(Opera)、Gecko(火狐)、Trident(IE)
-
响应式设计:一个网站能够兼容多个终端(pc、pad、phone),而不是伪每个终端做一个版本
-
label标签,属性:for(用于绑定元素,绑定内容为元素的id,当点击标签时,所绑定元素将获得焦点)、accesskey(热键,代替点击标签的动作)
<label for="inputbox" accesskey="U">name</label>
<input id='inputbox' type="text">
-
元素设置浮动后(触发BFC),display的值为block
-
浏览器默认字体大小为12px,让其大小小于12px:transform:scale(0.8):缩小
-
服务端渲染对SEO更友好,而且首屏渲染通常更快一些
-
transform只对受控于盒模型的元素生效,原点为中心点,可以通过transform-origin变换原点位置,包含功能:matrix多种变形、为一、缩放、旋转、扭曲(skew)
-
webpack运行在本地node环境中
-
webpack(可以实现热更新,开发更加高效)、vue-cli都能打包大型项目
-
js五种基本数据类型:string、number、null、undefined、boolean;引用数据类型:object、array、function
-
五层体系结构click:(SSH:安全外壳协议,工作在应用层基础上的安全协议)
-
GBK 汉字占2个字节,英文占1个字节;UTF-8汉字占3个字节,英文占1个字节;都有中文简体和繁体字
-
js模块规范:CJS(commonjs,服务器端)amd(requirejs)、cmd(seajs)、umd(commonjs和amd的糅合)、esm(es6)
-
会引发GPU硬件加速(利用 GPU 进行渲染,减少 CPU 操作的一种优化方案)的CSS属性:transform、opacity、filter、will-change。
-
查找缓存会依次查找(Service Worker(浏览器缓存)、Memory Cache(内存)、Disk Cache(硬盘)、Push Cache(推送缓存)),查找不到才会请求网络。