块状元素 div h1 h2 table ul ol p
内联元素 span img input button
offsetWidth=(内容宽度+内边距+边框),无外边距
margin纵向重叠问题：
相邻元素的margin-top和margin-bottom会发生重叠 空白内容的p也会重叠
margin负值问题：
margin-top 和margin-left负值,元素向上、向左移动
margin-right负值，右侧元素左移，自身不受影响
margin-bottom负值,下方元素上移，自身不受影响
BFC理解和应用
什么是BFC?如何应用block format context ，块级格式化上下文，内部渲染不会影响外部
形成BFC的常见条件：
float不是none
position是absolute或fixed
overflow不是visible
display是flex inline-block等值
常见应用:
overflow：hidden的使用
圣杯布局和双飞翼布局目的:
三栏布局，中间一栏最先加载和渲染(内容最重要)
两侧内容固定,中间内容随宽度自适应
技术总结:使用float布局
两侧使用margin负值，以便和中间内容横向重叠
防止中间内容被两侧覆盖，一个用padding一个用margin
圣杯布局：left：自己左移，right：没有宽度，如何下面的凑上去
手写clearfix
.clearfix:after{
content:‘‘;
display:table;
clear:both;
}
.clearfix{
*zoom:1;
}
flex实现一个三点色子
absolute和relative定位
relative依据自身定位
absolute依据最近一层的定位元素定位
水平居中
inline元素 text-align:center
block元素 margin:auto
absolute元素 left:50%+margin-left 负值
垂直居中
inline元素 line-height的值等于height值
absolute元素 top:50%+margin-top负值 [需要知道元素尺寸]
absolute元素 transform: translate(-50%, -50%); [不需要知道元素尺寸，浏览器兼容性不太好]
absolute元素 top,left,bottom,right=0+margin:auto [不需要知道元素尺寸]
css图文样式
line-height 如何继承
写具体数值,如30px,则继承该值
写比例 ,如2/1.5,则继承该比例
写百分比,如200%，则继承计算出来的值
css响应式
rem是什么
px：绝对长度单位
em：相对长度单位，相对于本元素
rem：相对长度单位，相对于根元素，常用于响应式
方案：
媒体查询 media-query
rem
css响应式vw-wh
window.screen.height 屏幕高度
window.innerHeight 网页视口高度
document.body.clientHeight body高度
vh网页窗口高度的1/100
vw网页视口宽度的1/100
vmax取两者最大值
vmin取两者最小值
JS参数都是值传递
null存在栈中，但是typeof null=="object" ,属于特殊引用类型
const a=100+10 //110
const b=100+‘10‘ //‘10010‘
const c=true+‘10‘ //‘true10‘
100"100" //true
0‘‘ //true
0false //true
false=‘‘ //true
nullundefined //true
//除了null之外，其他都一律用=，例如
const obj={x:100}
if(obj.anull){}
//相当于:
//if(obj.a=null||obj.a===undefined)
truely和falsely变量
0、NaN、‘‘、null、undefined、false 是falsely变量，其他都是truely变量
this取什么值是执行的时候确定的，不是定义的时候确定的，
settimeout()=>{}箭头函数的this是上一级的
闭包可以进行数据隐藏
异步：
JS是单线程语言
event loop(事件循环、事件轮询)
js是单线程运行的
异步要基于回调来实现
event loop就是异步回调的实现原理
JS如何执行:从前到后,一行一行执行；如果某一行执行报错,则停止下面代码的执行;先把同步代码执行完,再执行异步
总结event loop
同步代码,一行一行放在call stack执行
遇到异步,会先记录下，等待时机(定时、网络请求)
时机到了，就移动到callback queue
如果call stack为空,event loop开始工作
轮询查找callback queue,如果有则移动到call stack
然后继续轮询查找
DOM事件和event loop
JS是单线程
异步(settimeout,ajax)使用回调，基于event loop
DOM事件也使用回调,基于event loop
promise
注意:catch正常返回resolved，里面有报错才返回reject
Promise.resolve().then(()=>{
console.log(1)
throw new Error("error1)
}).catch(()=>{
console.log(2)
}).then(()=>{
console.log(3)
})
//结果 1 2 3 因为如果不在catch里面reject，返回的依然是resolve
async/await
执行async函数,返回的是promise对象
await相当于promise的then(是接收resolve的,reject要用reject捕获)
try..catch可捕获异常,代替了promise的catch
async
async function async1(){
console.log() 2
async async2()
console.log() 5
}
async function async2(){
console.log() 3
}
console.log() 1
async1()
console.log() 4
for of的使用
宏任务和微任务
宏任务 :settimeout,setinterval,ajax,dom
微任务 ： Promise async/await
微任务执行时机比宏任务要早
(宏任务:DOM渲染后触发,如settimeout
微任务:DOM渲染前触发,如promise
)
微任务是ES6语法规定的，宏任务是由浏览器规定的
异步的任务,微任务是在micro task queue ，宏任务是在web api里面
event-loop和DOM渲染的关系
1.Call Stack空闲
2.执行当前的微任务
3.尝试DOM渲染
4.触发Event Loop
event-loop
js是单线程
先执行同步代码，再执行异步代码
property和attribute
property:修改任务属性,不会体现到html结构中
attribute:修改html属性,会修改html结构
两者都有可能引起DOM重新渲染
property能够从attribute中得到同步；
attribute不会同步property上的值；
attribute和property之间的数据绑定是单向的，attribute->property；
更改property和attribute上的任意值，都会将更新反映到HTML页面中；
BOM
如何识别浏览器类型
知识点
navigator
const ua=navigator.userAgent
const isChrome=ua.indexOf(‘Chrome‘)
console.log(isChrome)
screen
console.log(screen.width)
console.log(screen.height)
location
console.log(location.href)
console.log(location.protocol)
console.log(location.pathname)
console.log(location.search)
console.log(location.hash)
history
history.back()
history.forward()
事件绑定和事件冒泡
const p1=document.getElementById(‘p1‘)
const body=document.body
bindEvent(p1,‘click‘,e=>{
e.stopPropagation()
alert(‘激活‘)
})
bindEvent(body,‘click‘,e=>{
alert(‘取消‘)
})
事件代理(无限下拉图片列表,如何监听每个图片的点击)
事件代理解决了元素过多，不易于每个元素都绑定事件
1.代码简洁
2.减少浏览器内存占用
3.不要滥用
const div=document.getElementById(‘div3‘)
bindEvent(div,‘click‘,event=>{
event.preventDefault()
const target=event.target
if(target.nodeName===‘A‘){
alert(target.innerHTML)
}
})
const div=document.getElementById(‘div3‘)
bindEvent(div,‘click‘,function(event){ //注意这里不要用箭头函数因为会指向window,如果要用需要使用event不能使用this
event.preventDefault()
const target=event.target
if(target.nodeName===‘A‘){
alert(target.innerHTML)
}
})
ajax
xmlHttpRequest
//get请求
const xhr=new XMLHttpRequest()
xhr.open("POST","/api",false)
xhr.onreadystatechange=function(){
if(xhr.readyState=4){
if(xhr.status=200){
alert(xhr.responseText)
}
}
}
xhr.send()
const postData={
userName:‘zhangsan‘,
password:‘xxx‘
}
xhr.send(JSON.stringify(postData))
跨域
加载图片js可无视同源策略
jquery实现jsonp
$.ajax({
url:‘http://localhost:88882‘,
dataType:‘jsonp‘,
jsonpCallback:‘callback‘,
success:function(data){
console.log(data)
}
})
function ajax(url){
const p=new Promise((resolve,reject)=>{
const xhr=new XMLHttpRequest()
xhr.open(‘GET‘,url,true)
xhr.onreadystatechange=function(){
if(xhr.readyState=4){
if(xhr.status=200){
resolve(
JSON.parse(xhr.responseText)
)
}else if(xhr.status===404){
reject(new Error(‘404 not found‘))
}
}
}
xhr.send(null)
})
return p
}
const url=‘/data/test.json‘
ajax(url).then(res=>console.log(res)).catch(err=>console.log(err))
实现ajax
1.jquery的ajax
2.fetch(但是兼容性不是很好)
3.axios
Restful API
传统API设计:把每个url当做一个功能使用
Restful API设计:把每个url当做一个唯一的资源(尽量不用url参数,用method表示操作类型)
http常见header
request headers
response headers
request headers:
accept、accept-encoding、accept-languange、connection、cookie、host、user-agent、content-type
response headers:
content-type、content-length、content-encoding、set-cookie
缓存：
哪些资源可以被缓存:静态资源(js css img)
http 缓存cache-Control:
Response Headers中
控制强制缓存的逻辑
cache-control的取值:max-age、no-cache(浏览器不缓存)、no-store(客户端不采用缓存)、private(手机什么的不允许)、public
expires
已经被cache-control代替
http 缓存-协商缓存
服务端缓存策略
服务器判断客户端资源,是否和服务端资源一样,一样则返回304，否则返回200和最新的资源
资源标识,在Response Headers中,有两种:
Last-Modified资源的最后修改时间
Etag资源的唯一标识(一个字符串)
Last-Modified和Etag
优先使用Etag,Last-Modified只能精确到秒级
如果资源被重复生成,而内容不变,则Etag更精确
不同刷新操作,不同的缓存策略
正常操作:强制缓存有效,协商缓存有效
手动刷新:强制缓存失效,协商缓存有效
强制刷新:强制缓存失效,协商缓存失效
window.addEventListener(‘load‘,function(){
//页面的全部资源加载完才会执行,包括图片、视频等
})
document.addEventListener(‘DOMContentLoaded‘,function(){
//DOM渲染完即可执行,此时图片、视频可能没有加载完
})
性能优化
加载更快
减少资源体积:压缩代码
减少访问次数:合并代码,SSR服务器端渲染,缓存
使用更快的网络:CDN
让渲染更快
CSS放在head,JS放在body
尽早开始执行JS，用DOMContentLoaded触发
懒加载
对DOM查询进行缓存
频繁的DOM操作,合并到一起插入DOM结构(创建一个文档片段,此时还没有插入到DOM树中,const frag=document.createDocumentFragment())
节流throttle,debounce
SSR
服务器端渲染:将网页和数据一起加载,一起渲染
非SSR(前后端分离):先加载网页,再加载数据,再渲染数据
防抖
节流
安全
XSS跨站请求攻击
预防:替换<>标签
XSRF跨站请求伪造
使用post接口
增加验证,例如密码\短信验证
var和let const的区别
var是es5语法,let const是es6语法；var有变量提升
var和let是变量,可以修改;const是常量,不可修改
let const有块级作用域,var没有
typeof能判断哪些类型
undefined string number boolean symbol
object(typeof null ===‘object‘)
function
手写深度比较isEqual
function isObject(obj){
return typeof obj=‘object‘ && obj !null
}
function isEqual(obj1,obj2){
if(!isObject(obj1)|| !isObject(obj2)){
return obj1=obj2
}
if(obj1=obj2){
return true
}
const obj1Keys=Object.keys(obj1)
const obj2Keys=Object.keys(obj2)
if(obj1Key.length!==obj2Keys.length){
return false
}
for(let key in obj1){
const res=isEqual(obj1[key],obj2[key])
if(!res){
return false
}
}
return true
}
split()和join()区别
const arr=[10,20,30,40]
const popRes=arr.pop()
console.log(popRes,arr)
// pop()方法从数组中删除最后一个元素，并返回该元素的值。此方法更改数组的长度
const shiftRes=arr.shift()
console.log(shiftRes,arr)
//shift() 方法从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度。
const pushRes=arr.push(50)
console.log(pushRes,arr)
// push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度此方法更改数组的长度。
const unshiftRes=arr.unshift(5)
console.log(unshiftRes,arr)
//unshift() 方法将一个或多个元素添加到数组的开头，并返回该数组的新长度(该方法修改原有数组)。
纯函数
1.不改变源数组(没有副作用)
2.返回一个数组
// // 纯函数：1. 不改变源数组（没有副作用）；2. 返回一个数组
// const arr = [10, 20, 30, 40]
// // concat
// const arr1 = arr.concat([50, 60, 70])
// // map
// const arr2 = arr.map(num => num * 10)
// // filter
// const arr3 = arr.filter(num => num > 25)
// // slice
// const arr4 = arr.slice()
// // 非纯函数
// // shift pop(返回删除的那个值) unshift push (返回长度)
// // forEach
// // some every
// // reduce
// // splice
// const arr = [10, 20, 30, 40, 50]
// // slice 纯函数
// const arr1 = arr.slice()
// const arr2 = arr.slice(1, 4)
// const arr3 = arr.slice(2)
// const arr4 = arr.slice(-3)
// // splice 非纯函数
// const spliceRes = arr.splice(1, 2, ‘a‘, ‘b‘, ‘c‘)
// // const spliceRes1 = arr.splice(1, 2)
// // const spliceRes2 = arr.splice(1, 0, ‘a‘, ‘b‘, ‘c‘)
// console.log(spliceRes, arr)
const res = [10, 20, 30].map(parseInt)
console.log(res)
// 拆解
[10, 20, 30].map((num, index) => {
return parseInt(num, index)
})
ajax请求get和post的区别
get一般用于查询操作,post一般用户操作
get参数拼接在url上,post放在请求体内
安全性:post易于防止CSRF
jsonp为什么本质不是ajax
jsonp是通过script标签进行,ajax是通过XMLHttpRequest
new Object()和Object.create()区别
{}等同于new Object(),原型Object.prototype
Object.create(null)没有原型
Object.create({})可指定原型
解析url参数
function query(name){
const search=location.search
const p=new URLSearchParams(search)
return p.get(name)
}
传统方式，分析search
function queryToObj(){
const res={}
const search=location.search.substr(1)
search.split(‘&‘).forEach(paramStr=>{
const arr=paramStr.split(‘=‘)
const key=arr[0]
const val=arr[1]
res[key]=val
})
return res
}
使用urlsearchParams
function queryToObj(){
const res={}
const pList=new URLSearchParams(location.search)
pList.forEach((val,key)=>{
res[key]=val
})
return res
}
数组拍平function flat(arr){
const isDeep=arr.some(item=>item instanceof Array)
if(!isDeep){
return arr
}
const res=Array.prototype.concat.apply([],arr)
return flat(res)
}
数组去重
function unique(arr){
const res=[]
arr.forEach(item=>{
if(res.indexOf(item)<0){
res.push(item)
}
})
}
function unique(arr){
const set=new Set(arr)
return [...set]
}
Object.assign不是深拷贝
牛客网:
sort排序
从小到大升序:return a-b
从大到小降序:return b-a
Math.round(x)
如果参数的小数部分大于 0.5，则舍入到下一个绝对值更大的整数
如果参数的小数部分小于 0.5，则舍入到下一个绝对值更小的整数
阻止默认事件：
e.preventDefault()
e.returnValue = false (IE)
阻止冒泡：
e.stopPropagation()
e.cancelBubble = true (IE)
document.getElementById("button1").disabled = true;
document.getElementById("button1").setAttribute(“disabled”,”true”);
stopImmediatePropagation() 取消事件冒泡同时阻止当前节点上的事件处理程序被调用，影响当前的事件***
stopPropagation() 取消事件冒泡，不影响事件***
cancelBubbe() 取消事件冒泡
returnValue() 取消事件默认行为
jquery获取窗口元素高度
height() - 设置或返回元素的高度
innerWidth() - 返回元素的宽度（包含 padding）
innerHeight() - 返回元素的高度（包含 padding）
outerWidth() - 返回元素的宽度（包含 padding 和 border）
outerHeight() - 返回元素的高度（包含 padding 和 border）
数组遍历的几种方法:for of for in forEach map everyone some filter
优化:SplitChunksPlugin
基本的值类型有 （null，undefined，boolean，number，string，symbol），
引用类型 object ，常见的引用类型如 array ，function
jquery中文文档 https://jquery.cuishifeng.cn/
蓝湖 https://lanhuapp.com/web/#/item
swiper https://www.swiper.com.cn/
去格式化 https://www.23bei.com/tool-162.html
原文：https://www.cnblogs.com/lceihen/p/14598864.html