前端面试题 | 程序员的自我修养

javascript

有一个全局变量 a，有一个全局函数 b，实现一个方法bindData，执行后，a的任何赋值都会触发b的执行。

vue简单的双向绑定原理

function bindData(target, event){
	for(var key in target) {
		if(target.hasOwnProperty(key)) {
			(function(){
				var v = target[key];
				Object.defineProperty(target, key, {
					get: function() {
						return v;
					},
					set: function(_value) {
						v = _value;
						event.call(this)
					}
				})
			})()
		}
	}
}

将数字转换成中文大写的表示，处理到万级别，例如 12345 -> 一万二千三百四十五 CodePen
react生命周期参考答案
闭包
v8引擎区别浏览器做的优化
编译型和解释型语言的区别
跟缓存相关的配置
如何提高webpack打包的速度
nginx 转发的配置
node 的一些特点
node对于字节流的控制
如何处理js的错误:eslint。
node垃圾回收
js内存溢出
if([]) 是true，但是[]==false,因为任何类型跟bool比较都会先转化为数值型。[]是object ,if的时候不是false。
()=>{} 箭头函数的区别
- 更短的语法糖
- 不绑定this，没有自己的this
- 没有arguments
- 不可以作为构造函数，不能用new
- 没有prototype
实现一个function 输入字符串，验证其字符串是合法的html标签，只要开闭合理就可以。使用栈来解决。
setTimeout(function(){},0)和process.nextTick()的区别
红黑树
promise，原生写一个
取得body下所有元素的tagname，并去重输出。
前端国际化
react组件，如何更换主题
setImmediate
flex布局 ie10 11不支持
css选择器优先级：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity
事件驱动
viewport有几种
prerender
[]==[] false 基本数据类型是值的比较，引用类型是地址的比较。

proto和prototype

Object.prototype.__proto__=null  
Object.__proto__=== Function.prototype 
Function.__proto__===Function.prototype 
Function.__proto__.__proto__=== Object.prototype

事件过程事件捕获-》目标-》事件冒泡

阻止冒泡方法

// 阻止冒泡
stopPropagation() //chrome
event.cancelBubble() //IE
// 阻止默认事件
preventDefault() //chrome 
event.returnValue() //IE

//JQuery 提供了两种方式来阻止事件冒泡。
 $("#div1").mousedown(function(event){
     event.stopPropagation();
 });
 $("#div1").mousedown(function(event){
     return false;
 });

断点续传，断点下载
array的基本方法
arguments转化为真正的数组Array.prototype.slice.call(arguments)

js数组去重

//for循环时，每次取出一个元素与对象///进行对比，如果这个元素不重复，则把//它存放到结果数组中，同时把这个元素的内容作为对象的一个属性，并赋值为1，存入到第2步建立的对象中。
Array.prototype.unique3 = function(){
 var res = [];
 var json = {};
 for(var i = 0; i < this.length; i++){
  if(!json[this[i]]){
   res.push(this[i]);
   json[this[i]] = 1;
  }
 }
 return res;
}
var arr = [112,112,34,'你好',112,112,34,'你好','str','str1'];
alert(arr.unique3());

深拷贝 CodePen

var clone = function(v) {
  var o = v.constructor === Array ? [] : {};
  for (var i in v) {
    o[i] = typeof v[i] === "Object" ? clone(v[i]) : v[i];
  }
  return o;
}

闭包

闭包是指有权访问另一个函数作用域中的变量的函数. 创建闭包常见方式,就是在一个函数内部创建另一个函数.
- 应用场景 设置私有变量和方法
- 不适合场景 返回闭包的函数是个非常大的函数
- 闭包的缺点 常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。
为什么会出现闭包这种东西，解决了什么问题

受JavaScript链式作用域结构的影响，父级变量中无法访问到子级的变量值，为了解决这个问题，才使用闭包这个概念。
交换两个变量的值，但不产生新的变量
1
2
3
4
5
var a=1;
var b=2;
a=a+b;
b=a-b;
a=a-b;

函数防抖和函数节流

函数防抖 频繁触发的情况下，只有足够的空闲时间，才执行代码一次

var timer = false
document.getElementById("debounce").onScroll = function() {
        clearTimeout(timer)  
        timer = setTimeout(function(){
                console.log(‘函数防抖’) 
        }, 300)     
}

函数节流 声明一个变量当标志位，记录当前代码是否在执行

var canScroll = true;
document.getElementById('throttle').onScroll = function() {
               if (!canScroll) {
                return;
               }
                canScroll = false;
                setTimeout(function(){
                   console.log('函数节流');
                   canScroll = true;
                },300)       
}

js继承
理解JS的6种继承方式
call 和apply
详解call和apply

node延迟函数执行顺序是什么？

setTimeout(()=>{
console.log(3)
},0);
setImmediate(()=>{
console.log(2)
});
process.nextTick(()=>{
console.log(4)
})

// 4 2 3
 
以上代码的执行顺序为：
 
1. process.nextTick
2. setImmediate
3. setTimeout

严格模式: “use strict”
数据类型: 6种，Undefined,Null,Boolean,Number,String,Object.注意数据不是哈，数组被归于object
使用typeof操作符，可能返回以下六种结果:undefined,boolean,string,number,object,function.
typeof null=object
函数不是一种数据类型。
虽然null==undefined ，但null指的是一个空的对象引用。undefined 表明变量没有被赋值或者未定义。
永远不要测试某个特定的浮点数
NaN是一种数值，NaN与任何数都不等，包括他本身。
Number() 可以转换任何数据类型，parseInt()和parseFloat()只能字符串转数值
Number(true)=1,Number(false)=0,Number(null)=0,Number(“”)=0
其他类型转化为字符串，.toString()方法，String(),区别在于null和undefined没有toSting()方法，必须要用String()
判断一个值是哪种基本类型使用typeof ,是哪种引用类型用instanceof
让js启动变量的回收，var a=121,a=null

JavaScript的新标准

await
symbol
async
reflect
proxy

webpack

webpack babel配置中的stage-0是什么意思？
webpack 打包构建速度优化
- 缩小文件的搜索范围
- 私用DllPlugin减少基础模块的编译次数
- 使用happyPack开启多进程Loader转换
- 使用ParallelUglifyPlugin开启多进程压缩JS 文件
webpack 开发体验优化
- 监听文件修改并自动刷新
- 开启模块热替换HMR
优化输出质量，减小输出代码体积
- 区分环境，减小生产环境代码体积
- 压缩JS ES CSS
- 使用Tree Shaking 踢出JS死代码
优化输出质量，加速网络请求
- CDN加速
- HTTP2
- 公共代码提取
- 按需加载
提升代码运行效率
- 使用Prepack提前求值
- 使用Scope Hoisting，作用域提升
使用输出分析工具
- 官方工具Webpack Analyse
- webpack-bundle-analyzer
其他TIPs
- use: [‘babel-loader?cacheDirectory’]，缓存babel编译结果结果。
- profile:true 展示webpack构建性能信息
- cache:true 通过缓存提升构建速度
- 使用url-loader将小图片用base64加到css或者js中。
- 通过imagemin-webpack-plugin压缩图片，通过webpack-spritesmith制作雪碧图
- 开发环境下将devtool设置为cheap-module-eval-source-map，因为生成这种source map的速度最快，能加速构建。在生产环境下将devtool设置为hidden-source-map

模块化

AMD requirejs 依赖前置
CMD seajs 就近依赖
commonjs node
ES6模块化：export import

前端安全

XSS（跨站脚本攻击）
CSRF跨站请求伪造

伪造成合法用户发起请求。一个网站中有一个a标签href是删除用户信息的url，如果是post可以模拟表单提交。
HTTP劫持，
界面操作劫持，
错误的内容推断（使用X-Content-Type-OptionsHTTP:nosniff）
保护cookies httpOnly为true，阻止js调用该cookies属性。

vue

vue 更新机制，双向绑定。
react 更新机制，diff算法。
事件机制 emit和 on实现。

React

React高阶组件

HTML5离线存储和本地缓存

离线存储

localStorage 和 sessionStorage方法
不同域下就算key相同取不到的值也不同，如localhost和127.0.0.1

localStorage.setItem("key","value")
localStorage.getItem("key","value")
localStorage.removeItem("key")
localStorage.clear()

css

实现图片边框和渐变边框

1	border-image:url() linear-gradient(red, yellow) 10;

多背景设置

1
2
3

background-image: url(https://mdn.mozillademos.org/files/11305/firefox.png),
url(https://mdn.mozillademos.org/files/11307/bubbles.png),
linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));

文字省略样式：

1
2
3

text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;

文字波浪下划线
1
text-decoration:green wavy underline
清除浮动方法 CodePen
等高布局 CodePen
- 最完美的解决方式：等高布局有几种不同的方法，但目前为止我认为浏览器兼容最好最简便的应该是padding补偿法。首先把列的padding-bottom设为一个足够大的值，再把列的margin-bottom设一个与前面的padding-bottom的正值相抵消的负值，父容器设置超出隐藏，这样子父容器的高度就还是它里面的列没有设定padding-bottom时的高度，当它里面的任一列高度增加了，则父容器的高度被撑到它里面最高那列的高度，其他比这列矮的列则会用它们的padding-bottom来补偿这部分高度差。因为背景是可以用在padding占用的空间里的，而且边框也是跟随padding变化的，所以就成功的完成了一个障眼法。

盒子模型 box-sizing

1 2	content-box = width （content的宽） border-box = width + border + padding

垂直水平居中 CodePen
自适应居中 CodePen
css3实现正方形

css3新特性（举几个例子）

Text-decoration：文字和边界可以填充颜色

1
2
3

Text-fill-color: 文字内部填充颜色
Text-stroke-color: 文字边界填充颜色
Text-stroke-width: 文字边界宽度

border-radius和rgba透明度支持

Gradient 渐变效果

1	background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),to(#FE280E));

阴影（Shadow）和反射（Reflect）效果

flex布局
Transitions, Transforms 和 Animation CodenPen
css 预编译
- less
- stylus
- post css
- css module

正则表达式

写一个简单的模板引擎（字符串和正则）

var tem="我爱你，${0},${1}"
var a="小吴"
var b="小刘"
function tempFunc(template){
var reps=template.match(/\${[\d]+}/g)
for(let i=0;i<reps.length;i++){
	var ar=arguments[i+1]
	if(ar){
		template=template.replace(reps[i],ar)	 
	}else{
		template=template.replace(reps[i],"")
	}
}
	return template
}

var t=tempFunc(tem,a,b)

12345678.22 转化为 12,345,678.22

1	'1234567891'.replace(/(\d+?)(?=(\d{3})+$)/g, '$1,')

12,345,678.20 转化为 12345678.20

new Number(string.replace(/[^0-9.]/g,''))

网络

DNS
- dig www.baidu.com 可以查看DNS解析过程
- 域名总长度则不能超过253个字符
- ICANN 管理 WHOIS 数据库
http1和http2区别
- 新的二进制格式
- 多路复用
- header压缩
- 服务端推送：server push
https 的过程和服务器搭建
http 的无状态

web 新技术

Web Assembly
PWA
Houdini：自定义css属性
web socket
service work

项目经验

选择你最引以为傲的项目，细细聊。