前端HTML/CSS/JS 知识点

HTML 5

简称H5，是最新的第五代HTML标准。

语义化

H5 新增的标签能够让你更恰当地描述你的内容是什么，新增的语义化标签有<section>,<artical>,<footer>等等。

input和textarea的区别

input 是单行文本框，不可以换行，
textarea 是多行文本框，无value 属性

用一个div模拟textarea的实现

.main{
    width: 400px;
    min-height: 50px;
    max-height: 100px;
    _height: 100px; //IE6
    margin-left: auto;
    margin-right: auto;
    padding: 3px;
    outline: 0;
    border: 1px solid #a0b3d6;
    font-size: 12px;
    word-wrap: break-word;
    overflow-x: hidden;
    overflow-y: auto; //超过最大高度就出现滚动条
    _overflow-y: visible;
}
<div contenteditable="true" class="main">
    .....此处省略.....
</div>

CSS

盒模型

所有HTML元素都可以被看作一个盒子，它包括：边距，边框，填充，和实际内容。

flex 布局

弹性布局，任何一个容器都可以使用flex 布局，Webkit 内核的浏览器，必须加上-webkit前缀。

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

css单位

单位有很多，举例：绝对长度和相对单位，绝对长度有px、cm等，相对单位rem,em，vh,vw 等等
菜鸟教程--CSS单位

css选择器

类选择器，id选择器，属性选择器，*选择器，标签选择器以及其他各种复杂选择器查看下面的链接。
菜鸟教程--所有选择器

层叠上下文

z-index 的理解

常见页面布局

浮动布局，定位布局，flex布局，grid布局，表格布局

响应式布局

@media 媒体查询
可以在css样式里直接写

@media 类型 and (条件1) and (条件二)
{

css样式

}

也可以使用@import 导入

@import url("css/moxie.css") all and (max-width:980px);

也可以在link里

<link rel="stylesheet" type="text/css" href="css/moxie.css" media="all and (max-width=980px)"/>

css预处理器，后处理器

预处理器：可以被转换为CSS文件，但是它们灵活性比CSS好许多
Sass、LESS、Stylus 是目前最主流的 CSS 预处理器。
CSS 后处理器 是对 CSS 进行处理，并最终生成 CSS 的 预处理器

css3新特性

太多了。
transition, animation, transform以及新选择器等等
之前记录的CSS3 新特性：css3 新特性

display哪些取值

常见的 none,inline,inline-block,block以及更多

相邻的两个inline-block节点出现间隔

给父级盒子加上 font-size:0，然后给子元素加上相应的font-size 即可

meta viewport 移动端适配

viewport 是浏览器显示视图的区域，meta viewport标签可以让开发者控制显示页面内容的区域。

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

画三角形

通过设置宽高为0，设置border相关属性就可以实现三角形
border-color: transparent transparent #000 transparent;

1像素边框问题

百度一下

JS

原型/原型链/构造函数/实例/继承

有几种方式可以实现继承

五种：
对象冒充，call()方法方式，apply() 方法方式，原型链方式，混合方式
参考：五种实现继承的方式

arguments对象

JavaScript 没有重载，使用arguments 对象可以模拟重载，通过数组下标的方式访问实参。
arguments.length为函数实参个数，arguments.callee引用函数自身

数据类型判断

typeof 操作符可以判断数据类型，它返回表示数据类型的字符串（返回结果只能包number,boolean,string,function,object,undefined,symbol）
toString.call(testObj)
instanceof
更多方法

作用域链、闭包、作用域

原生Ajax 写法

IE7 以上以及其他浏览器都支持XMLHttpRequest 对象
XHR的用法
open()启动一个请求以备发送，接受三个参数，请求类型，请求的URL和是否异步发送的布尔值。
xhr.open('get','example.php',false)
调用send() 方法，接收一个参数，即请求体要发送的数据，如果不需要发送数据就传入null
xhr.send(null)
由于这次的请求是同步的，接下来的代码会等请求完成之后才会执行，在收到响应后，响应的数据会填充xhr对象的属性，相关属性的简介如下：
responseText:作为相应主体被返回的文本；
responseXML:如果响应的内容类型是“text/xml”或“application/xml”，这个属性一般将保存包含着响应数据的XML DOM文档；
status:响应的HTTP状态；
statusText:HTTP状态的说明；

完整的请求示例：(xhr 使用封装好的createXHR函数，高程三的572页)

xhr.open('get','example.txt',false);
xhr.send(null);
if((xhr.status>=200&&xhr.status<300)||xhr.status==304){
    alert(xhr.responseText)
}else{
    alert("Request was unsuccessfult:"+xhr.status);
}

对象深拷贝、浅拷贝

浅拷贝--只复制了引用而没有复制到值。

var obj1 = {
name: 'klaus'
}
var obj2 = obj1
obj2.name = 'crazy'

console.log('obj1:', obj1)   // {name: "crazy"} 
console.log('obj2:', obj2)   // {name: "crazy"}

我们只想复制对象的数据，而不想修改原来的值，所以有了深拷贝。
如果对象没有函数，只是键值对数据，使用JSON方法

var obj2 = JSON.parse(JSON.stringify(obj1))

第三方库lodash

var objects = [{ 'a': 1 }, { 'b': 2 }];
var deep = _.cloneDeep(objects);
console.log(deep[0] === objects[0]); // => false

参考

图片懒加载、预加载

原理是现在 img 处放一个占位，真是的图片地址放在img 标签的另一个属性（自定义属性）上，当用户滚动页面或者点击图片上的加载时就会将这个属性上的值赋给src。
预加载是消耗服务器前端性能换取更好的用户体验。
参考

实现页面加载进度条

this关键字

函数式编程

手动实现parseInt

为什么会有同源策略

怎么判断两个对象是否相等

事件模型

事件委托、代理
如何让事件先冒泡后捕获

window的onload事件和domcontentloaded

for...in迭代和for...of有什么区别

函数柯里化

call apply区别，原生实现bind

call，apply，bind三者用法和区别：角度可为参数、绑定规则（显示绑定和强绑定），运行效率、运行情况。

async/await

立即执行函数和使用场景

设计模式(要求说出如何实现,应用,优缺点)/单例模式实现

iframe的缺点有哪些

数组问题

数组去重
数组常用方法
查找数组重复项
扁平化数组
按数组中各项和特定值差值排序

BOM属性对象方法

服务端渲染

垃圾回收机制

eventloop

进程和线程
任务队列

如何快速让字符串变成已千为精度的数字

ES6

声明 let、const

let 是 es6 新增的用于声明变量，和 var 差不多，有以下几点区别：

var没有块级作用域，let 有
var可以重复声明变量，但let不能，在声明变量之前使用变量会报错，而var会报 undefined

解构赋值

从数组和对象中提取值，对变量进行赋值

声明类与继承：class、extend

class 类，添加属性和原型不一样

class User {
    name = "John"; 
} 
let user = new User();
alert(user.name); // John
alert(User.prototype.name); // undefined

必须使用new 来调用
不可枚举，原型中enumerable 为false
总是使用 use strict

Promise的使用与实现

解决了ajax 的回调地狱

generator（异步编程、yield、next()、await 、async）

await/async 语法糖

箭头函数this指向问题、拓展运算符

map和set

map类似对象，set类似数组，但有区别。

有没有用过，如何实现一个数组去重，map数据结构有什么优点？

set 可用于数组去重，因为set 不会添加重复的值，使用扩展运算符...(内部使用for of)可以将set 转换为数组

[...new Set(array)]

map优点： map 中不仅仅可以使用字符串作为键，，各种类型的值（包括对象）都可以当作键。Map 结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现。

ES6怎么编译成ES5,css-loader原理,过程

ES6转成ES5的常见例子

babel

使用es5实现es6的class

浏览器

输入url到展示页面过程发生了什么？

浏览器查找域名的 IP 地址,先查找本地hosts文件是否有对应的规则，如果有就会直接使用里面的ip地址，如果没有，浏览器会发出一个 DNS（Domain Name System，域名系统）请求到本地DNS服务器，本地DNS服务器一般都是你的网络接入服务器商提供，比如中国电信，中国移动。
浏览器向 web 服务器发送一个 HTTP 请求

全面的解释

重绘与回流

重绘(repaint): 当元素样式的改变不影响布局时，浏览器将使用重绘对元素进行更新，此时由于只需要UI层面的重新像素绘制，因此损耗较少
回流(reflow): 当元素的尺寸、结构或触发某些属性时，浏览器会重新渲染页面，称为回流。此时，浏览器需要重新经过计算，计算后还需要重新页面布局，因此是较重的操

会触发回流的操作：

页面初次渲染
浏览器窗口大小改变
元素尺寸、位置、内容发生改变
元素字体大小变化
添加或者删除可见的 dom 元素
激活 CSS 伪类（例如：:hover）
查询某些属性或调用某些方法
clientWidth、clientHeight、clientTop、clientLeft
offsetWidth、offsetHeight、offsetTop、offsetLeft
scrollWidth、scrollHeight、scrollTop、scrollLeft
getComputedStyle()
getBoundingClientRect()
scrollTo()

回流必定触发重绘，重绘不一定触发回流。重绘的开销较小，回流的代价较高。