继续磕面经(前端)
title: 继续磕面经
toc: true
date: 2018-09-26 17:31:07
categories:javascript
- Web
tags:css
- JavaScript
- HTML
- CSS
- Vue
- 设计模式
- HTTP
- ES6
js的基本数据类型
Undefined、Null、Boolean、Number、String五种基本数据类型html
获取变量的数据类型有哪些方法
typeof，返回六种结果：undefined、boolean、number、string、object、function前端typeof ''; // string typeof 1; // number typeof true; // boolean typeof undefined; // undefined typeof null; //object typeof []; // object typeof new Function(); //function typeof new Date(); //object typeof new RegExp(); //object
instanceof，判断是不是一个类的实例vuetrue instanceof Boolean; // false 1 instanceof Number; // false '' instanceof String; // false [] instanceof Array; // true ({}) instanceof Object; // true (function(){}) instanceof Function; // true new Boolean(true) instanceof Boolean; // trueinstanceof实现原理，沿着原型链寻找：javafunction myInstanceof(left, right) { left = left.__proto__; right = right.prototype; while (true) { if (left === null) return false; if (left === right) return true; left = left.__proto__; } }constructor，一个类的constructor会指向本身的引用。jquery须要注意的是：webpack
null和undefined是无效的对象，所以没有constructor，须要经过typeof来判断。- JS对象的constructor是不稳定的。当开发者重写prototype后，原有的constructor会丢失，constructor会默认为Object。
''.constructor == String; // true (1).constructor Number; // true true.constructor == Boolean; // true new Function().constructor == Function; // true new Date().constructor == Date; //true
Object.prototype.toStringes6Object.prototype.toString.call(''); //[object String] Object.prototype.toString.call(1); //[object Number] Object.prototype.toString.call(true); //[object Boolean] Object.prototype.toString.call(undefined); //[object Undefined] Object.prototype.toString.call(null); //[object Null] Object.prototype.toString.call(new Function()); //[object Function] Object.prototype.toString.call(new Date()); //[object Date] Object.prototype.toString.call([]); //[object Array] Object.prototype.toString.call(new RegExp()); //[object RegExp] Object.prototype.toString.call(new Error()); //[object Error] Object.prototype.toString.call(document); //[object HTMLDocument] Object.prototype.toString.call(window); //[object global] window是全局对象global的引用 // 代码来自 红尘客栈-古月 的CSDN 博客 ，全文地址请点击：https://blog.csdn.net/mozuncangtianbaxue/article/details/77151598?utm_source=copy
JS的拷贝？
基本数据类型会新开辟一个数据段来保存值，web
可是对象的拷贝其实是拷贝了对实际对象的引用，咱们能够把对象名看作指针。
深拷贝的方法
须要注意的是：slice()和concat()只深拷贝了一级属性。
递归复制全部属性
function deepClone(arg) { if (arg == null || typeof arg != 'object') return arg; let newObj = Array.isArray(arg) ? [] : {}; for (let key in arg) { if (arg[key] != null && typeof arg[key] == 'object') { newObj[key] = deepClone(arg[key]); } else { newObj[key] = arg[key]; } } return newObj; }使用JSON的parse和stringify
function deepClone(arg) { return typeof arg == 'object' ? JSON.parse(JSON.stringify(arg)) : arg; }使用JQuery的extend方法
$.extend([deep], target, object1[, objectN ])- 用于将一个或多个对象的内容合并到目标对象
- 若是多个对象具备相同的属性，则后者会覆盖前者的属性值
function deepClone(arg) { if (arg == null || typeof arg != 'object') return arg; if (arg instanceof Array) return $.extend(true,[],arg); else return $.extend(true,{},arg); }
CSS单位有哪些
相对长度
| 单位 | 描述 |
|---|---|
| em | 它是描述相对于应用在当前元素的字体尺寸，因此它也是相对长度单位。通常浏览器字体大小默认为16px，则2em == 32px； |
| ex | 依赖于英文子母小 x 的高度 |
| ch | 数字 0 的宽度 |
| rem | 根元素（html）的 font-size |
| vw | viewpoint width，视窗宽度，1vw=视窗宽度的1% |
| vh | viewpoint height，视窗高度，1vh=视窗高度的1% |
| vmin | vw和vh中较小的那个。 |
| vmax | vw和vh中较大的那个。 |
| % | 介绍连接 |
绝对长度
| 单位 | 描述 |
|---|---|
| cm | 厘米 |
| mm | 毫米 |
| in | 英寸 (1in = 96px = 2.54cm) |
| px | 像素 (1px = 1/96 of 1in) |
| pt | point，大约1/72英寸； (1pt = 1/72in) |
| pc | pica，大约6pt，1/6英寸； (1pc = 12 pt) |
网页渲染的流程
参考：https://www.cnblogs.com/dojo-lzz/p/3983335.html
页面解析渲染该过程主要分为如下步骤：
- 解析HTML
- 构建DOM树
- DOM树与CSS样式进行附着构造呈现树
- 布局
- 绘制
- 浏览器怎么知道收到的包是html文件（content-type）
- CSS会阻塞DOM解析么（不会阻塞DOM解析，会阻塞DOM渲染，阻塞后面的JS执行）
- 知道哪些content-type（参考连接）
- text/html ：HTML格式
- text/css：CSS格式
- text/plain ：纯文本格式
- text/xml ：XML格式
- image/gif ：gif图片格式
- image/jpeg ：jpg图片格式
- image/png ：png图片格式
- application/xml ： XML数据格式
- application/x-javascript：.js
- application/json ： JSON数据格式
- application/pdf ： pdf格式
- application/msword ： Word文档格式
- application/octet-stream ： 二进制流数据（如文件下载）
- application/x-www-form-urlencoded ： POST 提交数据
- multipart/form-data ： 表单上传文件
- bfc（看这里）
- 清浮动的方法（父元素:after，结尾空div clear，父元素定义height，overflow，父元素table，结尾br clear）
- 水平方向有margin叠加么（没有）
JS继承
- 原型链继承
- 借用构造函数
- 组合继承
- 原型式继承（浅拷贝）
- 寄生式继承（原型式继承的加强版）
- 寄生组合式继承
- 原型继承能够继承非原型属性么
- 修正constructor
- apply/call方法和原型方法的区别
vue：v-model
双向绑定
<input v-model="searchText">
等价于：
<input v-bind:value="searchText" v-on:input="searchText = $event.target.value" >
设计模式
单例模式
- 用来解决哪些问题——一个全局使用的类频繁地建立与销毁。
- 只能用闭包实现么
- 写个单例模式
// es5实现
// 最简单的实现，没有什么封装性
var singleton1 = {
attr: 1,
method: function() {return this.attr;}
};
// 利用构造函数内部解析，不安全
function singleton2 {
if (singleton2.instance !== undefined) {
return singleton2.instance;
}
this.name = "xxx";
this.age = "20";
singleton2.instance = this;
}
// 利用闭包
var singleton3 = (function() {
var instance;
function constructor() {
// blabla
}
function getInstance() {
if (instance === undefined) {
instance = new constructor();
}
return instance;
}
return {
getInstance: getInstance;
};
})();
// ================================================
// es6 实现
// 懒汉式单例
class Singleton1 {
// 构造方法
constructor() {
// this.xxx = xxx
}
static getInstance() {
if (!this.instance) {
this.instance = new Singleton1()
}
return this.instance
}
}
// 饿汉式单例
class Singleton2 {
// 构造方法
constructor() {
// this.xxx = xxx
}
static getInstance() {
return this.instance
}
}
Singleton2.prototype.instance = new Singleton2()
预解析
在当前做用域下，js运行以前，会把带有var和function关键字的事先声明，并在内存中安排好。而后再从上到下执行js语句。函数声明会最早获得提高，而后是变量声明。
DOM
- 已知父节点获取第一个子节点（parentObj.firstChild）
- 查兄弟节点（previousSibing前一个，nextSibing后一个）
- 在某个子节点后面插入节点（利用nextSibing、lastChild、insertBefore()、appendChild()）
对象的存储方式
实际存储在堆中，在栈中存储的是堆内存储地址。
因此能够把变量名看作指针。
内存回收方式
标记清除、引用计数（问题：循环引用，IE9以前BOM和DOM是COM实现的，垃圾收集采用的是引用计数，所以也会出现问题）
String为何有length属性
基本包装类型
已知一个function ClassA() {}，如何使得new ClassA()和ClassA()返回的值都是新的实例
函数内部判断this是否为window
用数据结构表示项目之间的依赖
双向链表？map？不知道。。。
判断一个图有没有环
无向图：不断去掉度为1的点
有向图：拓扑排序
从输入url到显示完成了什么
- 用户输入URL地址
- 浏览器解析URL解析出主机名
- 浏览器将主机名转换成服务器ip地址（浏览器先查找本地DNS缓存列表 没有的话 再向浏览器默认的DNS服务器发送查询请求 同时缓存）
- 浏览器将端口号从URL中解析出来
- 浏览器创建一条与目标Web服务器的TCP链接（三次握手）
- 浏览器向服务器发送一条HTTP请求报文
- 服务器向浏览器返回一条HTTP响应报文
- 浏览器解析文档
- 若是文档中有资源 重复6 7 8 动做 直至资源所有加载完毕
- 关闭链接
- 渲染页面
- 浏览器会不会缓存dns
- 会，不一样浏览器缓存时间不同
- https多了什么步骤
- https: http + 通讯加密 + 证书 + 完整性保护，http secure
- 证书能够证实服务器或客户端的身份
- ssl: secure socket layer，安全套接层
- 多了SSL安全套接层。HTTP直接和TCP通讯。当使用SSL时，则变为先和SSL通讯，再由SSL和TCP通讯。因此HTTPS能够看作身披SSL协议外壳的HTTP。
- 假如客户端最大下行10m，服务端最大上行100m，服务端会直接以10m的速率发包么（加增乘减，AIMD）
- 上行就是上传的速度,下行就是下载的速度
- 加法增大（Additive Increase）：执行拥塞避免算法后，使拥塞窗口缓慢增大，以防止网络过早出现拥塞
- 乘法减少（Multiplicative Decrease）：不论在慢开始阶段或拥塞避免阶段，只要出现超时，就把慢开始门限值减半（当前拥塞窗口的一半）
- 将这两种算法结合起来被称为AIMD算法
- 浏览器解析数据是所有收到才解析仍是边收边解析
- 若是加载
<link>须要十秒，分别在head和body那么加载时用户会看到什么 - script，同上，还有外联/内联
<!-- 做者：toln 连接：https://www.zhihu.com/question/61309490/answer/304391361 来源：知乎 著做权归做者全部。商业转载请联系做者得到受权，非商业转载请注明出处。 --> HTML的加载不会受到js加载的影响 页面渲染的大体过程为，先下载解析HTML并创建DOM树，再解析css绘制渲染树。前者搭建页面结构，后者增添页面样式。而在创建DOM树的过程就会遇到诸如img、外联css和script标签，此时就要加载外部资源了。加载资源是由单独的下载线程进行异步加载的，浏览器会并行加载，不过具体并行最大数量是有必定限制的，不一样浏览器可能不同。可是加载css和js资源比较特殊，它们的加载会影响页面渲染。css加载不会阻塞DOM树解析，但会阻塞渲染（这是因为渲染依赖于css，若是不等css加载完就渲染的话那么等css加载解析完又得从新渲染，可能又要重绘或者回流）。对于js资源的加载，则会阻塞DOM树的构建和渲染，除非设置了script标签的异步属性。 放在head中会在解析DOM树和渲染页面前就加载，并阻塞页面。js正常状况下加载完就会当即执行，在js脚本中只能访问当前script以上的DOM，脚本执行结束后再继续解析DOM。js执行引擎和页面渲染是由不一样的线程来执行，但这二者是互斥的，也就是说js执行过程是没法构建DOM和渲染页面的。这是一种优化机制，因为js可能会对DOM及样式进行修改，若是解析js过程当中同时构建DOM，就可能形成先后内容不一致或者重复构建。因此应该把script放在body中，使页面更快完成渲染。
实现parse函数解析?b=1&c=2这样的字段
function myParse(arg) {
arg = arg.split('?')[1].split('&');
let obj = {};
for (let i = 0; i < arg.length; i++) {
obj[arg[i].split('=')[0]] = arg[i].split('=')[1];
}
return obj;
}
箭头函数的区别，能当作构造函数么
ES6如何获取函数参数
rest
setTimeout准时么
不许时，只是到了时间后加入执行队列
ES6手写观察者模式
观察者模式
定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，全部依赖于它的对象都将获得通知。
产生0-100的随机数
Math.floor(Math.random()*100);
http报文结构，header有哪些字段
起始行、首部、主体。之间由CR+LF（回车换行）隔开。
header：首部
跨域
只有当 域名、协议、端口 都相同时才视为同源。
方法：
- 跨资源共享
- document.domain
- 图像ping
- jsonp
- comet
- websocket
手写全部排序算法和DFS、BFS
快排、堆排、基数排序
// 插入排序
function insertionSort(arr) {
for (var i = 1; i < arr.length; i++) {
var tmp = arr[i];
var j = i-1;
while (j >= 0 && tmp < arr[j]) {
arr[j+1] = arr[j--];
}
arr[j+1] = tmp;
}
return arr;
}
// 二分插入排序
function binaryInsertionSort(arr) {
for (var i = 1; i < arr.length; i++) {
var tmp = arr[i], left = 0, right = i-1;
while (left <= right) {
var mid = parseInt((left + right) / 2);
if (arr[mid] < tmp) left = mid + 1;
else right = mid-1;
}
for (var j = i; j > left; j--) {
arr[j] = arr[j-1];
}
arr[left] = tmp;
}
return arr;
}
盒模型
标准盒模型和IE盒模型
session和cookie区别
替换元素
浏览器根据元素的标签和属性，来决定元素的具体显示内容
img、input、textarea、select、obejct、button、label都是替换元素（置换元素）
面向对象的特性
封装继承多态
封装：把客观事物封装成抽象的类，而且类能够把本身的数据和方法只让可信的类或者对象操做，对不可信的进行信息隐藏。
继承：可使用现有类的全部功能，并在无需从新编写原来的类的状况下对这些功能进行扩展。
多态：实现多态，有二种方式：覆盖，重载。
同步异步区别
- 同步方法调用一旦开始，调用者必须等到方法调用返回后，才能继续后续的行为。
- 异步方法调用更像一个消息传递，一旦开始，方法调用就会当即返回，调用者就能够继续后续的操做。而，异步方法一般会在另一个线程中，“真实”地执行着。整个过程，不会阻碍调用者的工做。
js异步加载方法
defer、async、建立script插入到DOM中
串行和并行
串行是指多个任务时，各个任务按顺序执行，完成一个以后才能进行下一个。
并行指的是多个任务能够同时执行。
数据库index及实现
进程和线程
| 方面 | 进程 | 线程 |
|---|---|---|
| 根本区别 | 操做系统资源分配的基本单位 | 任务调度和执行的基本单位 |
| 开销方面 | 每一个进程都有独立的代码和数据空间（程序上下文），程序之间的切换会有较大的开销 | 线程能够看作是轻量级的进程。同一类线程共享代码和数据空间，每一个线程都有本身独立的运行栈和程序计数器，线程之间切换的开销很小 |
| 所处环境 | 操做系统中多个进程能够并发运行 | 同一个进程中能够有多个线程同时执行（经过CPU调度，在每一个时间片中只有一个线程执行） |
| 内存分配 | 系统在运行时会为每一个进程分配不一样的内存空间 | 除了CPU外，系统不会为线程分配内存（线程使用的资源来自其所属进程的资源），线程组之间只能共享资源 |
| 包含关系 | 进程能够包含多个线程，且这些线程能够并发运行 | 线程是进程的一部分，因此线程也被称为轻权进程或者轻量级进程 |
进程间通讯方法
- 共享内存
- 信息传递
- 管道通讯
进程或线程的同步方法
管程、信号量
尾递归
若一个函数在尾位置调用自己（或是一个尾调用自己的其余函数等），则称这种状况为尾递归，是递归的一种特殊情形。而形式上只要是最后一个return语句返回的是一个完整函数，它就是尾递归。这里注意：尾调用不必定是递归调用，可是尾递归必定是尾调用。
position
浮动
圣杯布局、双飞翼布局
<!DOCTYPE html>
<html>
<head>
<title>圣杯布局</title>
<style type="text/css">
.main, .left, .right {
position: relative;
float: left;
min-height: 150px;
}
.container {
padding: 0 300px 0 200px;
}
.main {
width: 100%;
background-color: red;
}
.left {
width: 200px;
margin-left: -100%;
left: -200px;
background-color: green;
}
.right {
width: 300px;
margin-left: -300px;
left: 300px;
background-color: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>双飞翼布局</title>
<style type="text/css">
.container, .left, .right {
position: relative;
float: left;
min-height: 150px;
}
.main {
padding: 0 300px 0 200px;
}
.container {
width: 100%;
background-color: red;
}
.left {
width: 200px;
margin-left: -100%;
background-color: green;
}
.right {
width: 300px;
margin-left: -300px;
background-color: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="main"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</body>
</html>
动画实现div无限旋转
@keyframes rotate{
from {transform: rotate(0deg);}
to {transform: rotate(359deg);}
}
div {
animation: rotate 3s linear infinite;
}
前端性能优化
https://blog.csdn.net/mapbar_front/article/details/79836443
304实现原理
若是web服务器返回304响应，则表示此请求的本地缓存是最新的，能够直接使用。这种方法能够节省带宽，避免重复响应。
webSocket是哪一层的
应用层
实现add(1)(2)(3) == 6
function add(num) {
num += add.num?add.num:0;
add.num = num;
return add;
}
add.valueOf = function() {
return add.num;
};
实现相似于(10).add(5).reduce(2).add(1)的链式调用
Number.prototype.add = function(num) {return this+num;};
Number.prototype.reduce = function(num) {return this-num;};
js是单线程的，如何实现定时
setTimeout
ES6代理
Proxy 能够理解成，在目标对象以前架设一层“拦截”，外界对该对象的访问，都必须先经过这层拦截，所以提供了一种机制，能够对外界的访问进行过滤和改写。
Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操做，能够译为“代理器”。
http://es6.ruanyifeng.com/#docs/proxy
Object.create()
Object.create()方法建立一个新对象，使用现有的对象来提供新建立的对象的__proto__。
计算一个数转换成二进制后1的个数
function oneCount(num) {
var re = 0;
num = num.toString(2);
for (var i = 0; i < num.length; i++) {
if (num[i] == '1') re++;
}
return re;
}
HTTP长链接
HTTP/1.1开始Connection:keep-alive
状态码5xx
服务器端问题
https默认端口
443
tcp链接过程当中的状态考察
https://blog.csdn.net/qwertyupoiuytr/article/details/68938963
三次握手四次挥手详细
http2.0
多路复用和1.x请求的区别
unsigned int类型扩展长度
一个长度为一百万的数组中，超过一半都是某一个值，求这个值
https://blog.csdn.net/bzfys/article/details/73733917
渐进加强和优雅降级
渐进加强（Progressive Enhancement）：一开始就针对低版本浏览器进行构建页面，完成基本的功能，而后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。
优雅降级（Graceful Degradation）：一开始就构建站点的完整功能，而后针对浏览器测试和修复。好比一开始使用 CSS3 的特性构建了一个应用，而后逐步针对各大浏览器进行 hack 使其能够在低版本浏览器上正常浏览。
没有辅助空间的状况下交换两个数的值
function swap1(a, b) {
b = a + b;
a = b - a;
b = b - a;
}
// 使用异或
function swap2(a, b) {
b = a ^ b;
a = b ^ a;
b = b ^ a;
}
前端安全
XSS——跨站脚本攻击
CSRF——跨站请求伪造
SQL注入
let暂时性死区和块级做用域
类数组
对于一个普通的对象来讲，若是它的全部property名均为非负整数，同时也有相应的length属性，那么虽然该对象并非由Array构造函数所建立的，它依然呈现出数组的行为，在这种状况下，这些对象被称为“类数组对象”。
与普通对象不一样的是，类数组对象拥有一个特性：能够在类数组对象上应用数组的操做方法。
var o ={0:42,1:52,2:63,length:3}
console.log(Array.prototype.join.call(o));//“42,52,63”
console.log(Array.prototype.slice.call(o,1,2));//52
在浏览器环境中，document.getElementsByTagName()语句返回的就是一个类数组对象。
在function调用中，function代码内的arguments变量(保存传入的参数)也是一个类数组对象。
在ECMAScript 5标准中，字符串string就是一个只读的类数组对象：
var s = "History"; console.log(s[3]);//"t" console.log(Array.prototype.join.call(s, " "));//"H i s t o r y"
for in 缺点
for..in循环会把原型(prototype)中方法与属性给遍历出来，因此这可能会致使代码中出现意外的错误。
为了不这个问题，咱们可使用对象的hasOwnProperty()方法来避免这个问题。
forEach()
ES6中map遍历实现原理
数组去重
死锁
https详细过程
加密算法，对称仍是非对称。md5,SHA,AES
模块化
webpack、AMD、CMD
数组的各类方法
内存换页算法
事件循环
ajax调用中，后台数据返回线程和前端UI线程是怎样通讯和交互的，说一下实现原理
手写封装jsonp
function myCallback(data) {
console.log(data);
}
function jsonp(url, data, callback) {
if (data == 'string') {
callback = data;
data = {};
}
url += url.indexOf('?') == -1 ? '?' : '&';
url += 'callback=' + callback;
for (var key in data) {
url += '&' + key + '=' + data[key];
}
var script = document.createElement('script');
script.setAttribute('src', url);
document.querySelector('head').appendChild(script);
}
事件委托
也叫事件代理。
利用事件冒泡，只指定一个事件处理程序，就能够管理某一类型的全部事件。
TCP和UDP
soket阻塞模式
doctype
AJAX实现原理，手写实现
使用XMLHttpRequest实现
transform实现垂直居中
.center {
position: relative;
top: 50%;
transform: translateX(-50%);
}
call、apply、bind
bind返回修改this后的函数
call和apply当即执行，call顺序传参，apply传入数组
vuex流程
vue生命周期
前端缓存机制
js多位数字每隔三位加一个逗号
function addCommas0(num) {
num = (num || 0).toString();
var re = '';
while (num.length > 3) {
re = ',' + num.slice(-3) + re;
num = num.slice(0, num.length-3);
}
if (num) re = num + re;
return re;
}
function addCommas1(num) {
return num.toLocaleString();
}
function addCommas2(num) {
return (num || 0).toString().replace(/\B(?=(?:\d{3})+\b)/g, ',')
}
其中正则方法参考自https://www.cnblogs.com/sivkun/p/7123963.html
\d 等价于[0-9]，表示数字字符
关于\b和\B能够看这个，很易懂
(?=(?:\d{3})+\b)) 里的 (?= ) 部分表示匹配一个位置，这个位置以后的内容符合这个括号里的条件，也就是 (?:\d{3})+\b
()表示捕获分组，()会把每一个分组里的匹配的值保存起来，使用$n(n是一个数字，表示第n个捕获组的内容)
(?:)表示非捕获分组，和捕获分组惟一的区别在于，非捕获分组匹配的值不会保存起来
(?:\d{3})+\b 表示一串长度能够被三整除的数字直至末尾
移动端适配
https://blog.csdn.net/chenjuan1993/article/details/81710022
移动端的性能优化
https://blog.csdn.net/u010683915/article/details/71043188
实现getElementsByClassName
function getElementsByClassName(className) {
if (document.getElementsByClassName) {
return document.getElementsByClassName(className);
} else {
var elements = [];
var allNodes = document.getElementsByTagName('*');
for (var i = 0; i < allNodes.length; i++) {
var tmpClassNames = allNodes[i].className.replace(/\s+/g,',').split(',');
for (var j = 0; j < tmpClassNames.length; j++) {
if (tmpClassName[j] == className) {
elements.push(allNodes[i]);
break;
}
}
}
return elements;
}
}
DOM 选择器
document.getElementById()——元素id在ie8如下的浏览器不区分id大小写，并且也返回匹配的name属性的元素
document.getElementsByName()——只有部分标签name可生效（表单、表单元素、img、iframe）
document.getElementsByTagName()
document.getElementsByClassName()——ie8和ie8如下的ie版本中没有
CSS选择器：（不是实时的）
在css中怎么选，这里就怎么选
document.querySelector()
document.querySelectorAll()
Web前端打包工具
https://baijiahao.baidu.com/s?id=1577252811128016864&wfr=spider&for=pc
webpack 首选
gulp 其次
grunt 已经落伍
jquery选择器实现
浏览器最小显示的字体大小 若是想要显示更小怎么办
12px transform
commomJS AMD CMD es6用的哪一个
https://www.cnblogs.com/dongdongseven/p/7724106.html
$documnent.ready() VS window.onload() 哪一种先执行
$document.ready()在DOM加载完毕时执行
window.onload()在整个页面全部资源都加载完成时执行
属性getter和setter
由getter和setter定义的属性称为存储器属性。
当程序查询存储器属性的值时，JavaScript调用getter方法（无参数）。
当程序设置存储器属性的值时，JavaScript调用setter方法，将赋值表达式右侧的值当作参数传入setter。能够忽略setter的返回值。
若是属性同时具备setter和getter方法，那么它是一个读/写属性。
若是只有getter方法，那么就是一个只读属性。
若是只有setter方法，那么就是一个只写属性，读取只写属性老是返回undefined。
var p = {
// 数据属性
x: 1.0,
y: 1.0,
// 存储器属性
get r() {
return Math.sqrt(this.x*this.x + this.y*this.y);
},
set r(newValue) {
var oldValue = Math.sqrt(this.x*this.x + this.y*this.y);
var ratio = newValue/oldValue;
this.x *= ratio;
this.y *= ratio;
}
};
Object.definePropoty()
Object.defineProperty(obj, prop, descriptor)
obj
要在其上定义属性的对象。
prop
要定义或修改的属性的名称。
descriptor
将被定义或修改的属性描述符。
| configurable | enumerable | value | writable | get | set | |
|---|---|---|---|---|---|---|
| 数据描述符 | Yes | Yes | Yes | Yes | No | No |
| 存取描述符 | Yes | Yes | No | No | Yes | Yes |
var o = {}; // 建立一个新对象
// 在对象中添加一个属性与数据描述符的示例
Object.defineProperty(o, "a", {
value : 37,
writable : true,
enumerable : true,
configurable : true
});
// 对象o拥有了属性a，值为37
// 在对象中添加一个属性与存取描述符的示例
var bValue;
Object.defineProperty(o, "b", {
get : function(){
return bValue;
},
set : function(newValue){
bValue = newValue;
},
enumerable : true,
configurable : true
});
o.b = 38;
// 对象o拥有了属性b，值为38
// o.b的值如今老是与bValue相同，除非从新定义o.b
// 数据描述符和存取描述符不能混合使用
Object.defineProperty(o, "conflict", {
value: 0x9f91102,
get: function() {
return 0xdeadbeef;
}
});
// throws a TypeError: value appears only in data descriptors, get appears only in accessor descriptors
解释性语言和编译性语言
计算机不能直接理解高级语言，只能直接理解机器语言，因此必需要把高级语言翻译成机器语言，计算机才能执行高级语言编写的程序。
翻译的方式有两种，一个是编译，一个是解释。两种方式只是翻译的时间不一样。
解释性语言的定义：
解释性语言的程序不须要编译，在运行程序的时候才翻译，每一个语句都是执行的时候才翻译。这样解释性语言每执行一次就须要逐行翻译一次，效率比较低。
现代解释性语言一般把源程序编译成中间代码，而后用解释器把中间代码一条条翻译成目标机器代码，一条条执行。
编译性语言的定义：
编译性语言写的程序在被执行以前，须要一个专门的编译过程，把程序编译成为机器语言的文件，好比exe文件，之后要运行的话就不用从新翻译了，直接使用编译的结果就好了（exe文件），由于翻译只作了一次，运行时不须要翻译，因此编译型语言的程序执行效率高。
代码三要素
可读性
可维护性
可变动性
- 1. 前端面试经历（持续更新）
- 2. 继续前行
- 3. 前端面试——JS继承
- 4. 前端面经
- 5. 2020，继续前行！
- 6. 前端面试经
- 7. 前端面经(四）
- 8. 2020前端面经
- 9. 2020 WTM 继续向前
- 10. 前端面试题系列 - 继承
- 更多相关文章...
- • C# 继承 - C#教程
- • Swift 继承 - Swift 教程
- • 使用阿里云OSS+CDN部署前端页面与加速静态资源
- • Docker容器实战(一) - 封神Server端技术
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 前端面试经历（持续更新）
- 2. 继续前行
- 3. 前端面试——JS继承
- 4. 前端面经
- 5. 2020，继续前行！
- 6. 前端面试经
- 7. 前端面经(四）
- 8. 2020前端面经
- 9. 2020 WTM 继续向前
- 10. 前端面试题系列 - 继承