1.typeof是用来干什么的?
typeof可以判断所有的值类型
可以判断函数
但是所有的引用类型返回的都是object
2.instaceof主要用来用来判断该实例对象是否是通过对应的构造函数构造出来的实例,比如可以用来判断是否是数组
3.原型关系
每个class都有显示原型prototype
每个实例都有隐式原型proto
实例的proto指向class的prototype
4.基于原型的执行规则
获取实例对象的属性,或执行实例对象的方法时,先在自己身上找属性和方法,如果没有就自动去
proto里面查找
5.闭包:
闭包的本质是作用域应用的特殊情况,常变现为,函数作为参数传递,或函数作为返回值
也就是函数定义的地方和执行的地方不一样
自由变量:不在当前作用域定义的,却在当前作用域使用了的变量
自由变量的查找,是在函数定义的地方向上一级作用域进行查找,而非在函数执行的地方进行查找
6.异步
异步的由来是JS是基于单线程的,
主要应用场景是加载图片,发送网络请求,设置定时任务
promise主要是来消除回调地狱 callback hell,不易维护和可读,嵌套太深
而promise是管道式的,可读性更强
eventloop 事件轮询
异步和dom事件都是基于回调来实现的,也就是eventloop机制
但是dom事件不是异步
事件轮询分为5个部分
browser console
call stack
web APIs
eventloop
callback queue
例如执行到定时器时,会将该定时器放入web apis 然后等到同步代码执行完了,推入callback queue
eventloop会一直轮训,直到callback queue里面队列到该定时器的函数,就执行该函数到call stack
promise进阶
promise三个状态 pendding resolve(fulfilled) reject
状态表现
pending状态不会触发then,catch
resolve会触发后续的then回调函数
reject会触发后续的catch函数
async 和await 主要是解决了异步的回调,在async函数里面可以用同步的语法写异步代码
async函数,里面的await 同行的执行函数,立马执行,下面行数的代码归为异步代码,会在同步代码执行完之后再次执行
执行async函数返回的必定是一个promise对象
微任务microTask宏任务macroTask
宏任务:setTimeout setInterval ajax dom事件(宏任务要在dom渲染后触发)
微任务:async await /Promise(微任务在dom渲染前触发) 他会把当前执行的微任务放入 micro task queue里面,依次推入 call stack
微任务比宏任务要先执行
new promise 传入的函数会立即执行 后面的then会归为微任务,在所有的同步带脉执行完后再微任务的micro task queue中依次执行
web-api-dom
property和attribute的区别
poperty可以修改对象的属性,不会体现在html结构中,相当于默认的一些属性如width,height,默认是不显示的,但你通过对应的
dom元素点width就可以拿到该dom元素的宽度
attribute时动过set 和get来自定义属性,会改变html的结构,会体现在html结构中
property和attribute都会引起dom的重新渲染
如何优化dom操作的性能
可以缓存查询结果,比如先记录
const pList = doucument.getElementsByTagName('p')
const length = pList.length
在通过循环遍历该plist里面的p元素,而不是直接一个循环一次查询每个p元素,并做操作
将频繁操作改为一次性操作如:
插入多个li标签
可以县创建个文档片段,用循环把要加的li标签添加进这个文档片段里面
const fragment = doucument.createDocumentFragment()
再把循环完成的fragment appendChild到指定的父元素里面
Bom操作相关的问题
bom 有 navigator screen location history
可以通过 let ua = navigator.userAgent获取当前浏览器的信息
可以通过
let width = screen.width 获取屏幕的宽度
let height = screen.height 获取屏幕的宽度
location
location.herf 获取当前网页的完整地址
location.protocol 是http还是https
location.pathName 获取域名后的目录
location.host 获取域名
location.search 获取查询的参数
location.hash 取hash值,就是地址栏#后面的内容
事件
添加事件监听addEventListener()
事件冒泡,例如一个 p标签 他有父元素div1 ,并且p标签和div1都添加了一个点击事件,如果点击P标签,那么div1的点击事件也会触发
,事件冒泡是一层一层的往上冒.直到body
阻止事件默认行为 preventDefault 例如A标签的跳转行为去掉
阻止事件冒泡 event.stopPropagation
事件代理
优点:代码简洁 减少浏览器内存使用 但是不要滥用 常用于加载更多这种的瀑布流
ajax
手写ajax
const xhr = new XMLhttpRequest()
xhr.open('GET',url,true)
xhr.onreadystatechange = function (){
if(readystate ===4 && status ===200){
console.log(xhr.responseText)
}
}
xhr.send(null)
//如果是post请求的话,要在send方法里面加上请求的参数
跨域
同源策略
ajax请求时,浏览器要求当前网页和server端必须同源(安全性考虑)
同源:协议,域名,端口三者必须一致
加载图片 ,css ,js可无视同源策略
所有的跨域都必须经过服务端的允许和配合
jsonp的原理
jsonp的原理是利用<script>标签不受同源策略的限制,通过与服务端沟通,在<script>的src属性里面请求对应的
地址,并且在后面加上动态的参数,让后端调用挂载在window上的callback函数,server段动态拼接一些信息完成跨域返回值
解决跨域一个是jsonp一个cros(这个一般服务端来完成)
当接受到一个代表错误的状态码如404,500,从fetch()返回的promise不会被标记为reject
存储
cookie
本身适用于浏览器和服务端通讯(属于http请求的一部分),被借用来做本地存储的,
一般是通过字符串分割的形式
doucument.cookie
cookie会随每次请求当成数据发送在requestHeaders里面,而sessionStorage和localStorage则不会
sessionstroage是当前会话,关闭浏览器就消失
locaStage是本地存储和sessionStorage都是5M的存储空间,但是关闭浏览器不会消失
htpp
状态码
1xx 服务器接收到请求
2xx 如200 请求成功
3xx 重定向 302 (临时重定向,配合responseHeaders里面的location) 301(永久重定向,配合location,下次访问改地址,浏览器自动跳转到重定向的地址) 304资源未修改,服务器不会再发送新的资源(用于缓存,性能优化)
4xx 如404 客户端错误
5xx 如500 服务端错误 504网关超时
restful-api
http 1.0 GET POST HEAD
hettp1.1 OPTIONS PUT PATCH DELETE TRACE CONNECT
传统API是当作功能,restful-api是当做资源的标识不要在url中传参数,要用method当操作类型
http headers
常见的headers如 requestHeaders responseHeaders
requestHeaders
accept浏览器可以接受的数据格式
accept-encoding 浏览器可以接受的一些压缩算法如gzip
accept-languange浏览器可接受的语言如 中文 CN
connecttion: keep-alive 一次tcp连接重复使用
cookie
host 域名
user-agent UA 浏览器信息
content-type 发送数据的格式 application/json
responseHeaders
content-type 返回的数据格式 application/json
content-length 返回数据的大小,字节
content-coding 返回数据的压缩方法 如gzip
set-cookie
变量提升的原因是js引擎是先编译再执行,所有的申明都会先给object active对象上设置这个申明变量的key为
OA对象的属性,并设置为undifined
http缓存:
什么是缓存?第二次进入该网页,没必要把所有的资源访问一遍,一些不需要重新获取的东西,不让他重新获取
为什么需要缓存?减少网络请求的数量和体积,变相的加快了页面的加载和渲染,性能得到提升
哪些资源可以缓存?静态资源:css js img
responseHeaders 里面的cache-control
max-age : 100000 意思是缓存最大日期为100000秒 单位是秒
no-cache:不需要缓存,正常请求 ,不用强制缓存,交给服务端来处理
no-store:不用服务端处理,直接强制获取 不常见
private:作为用户作为缓存
public:中间路由,中间代理也可以做缓存
关于expires
也是在response headers 也是控制缓存过期 但是已经被 cache-control代替 (现在浏览器还是兼容expires,但是和cache-control一起存在的话,优先cache-control)
http缓存策略 - 协商缓存
服务器端缓存策略
服务器判断客户端资源,是否和服务端资源一样
一致则返回304,否则返回200和最新资源
资源标识:
在response headers里面有两种
Last-modified资源的最后修改时间
etag资源的唯一标识(一个字符串,类似人的指纹)
Last-modified和Etag
优先使用Etag if-None-Match
Last-modified只能精确到秒级 If-Modified-Since
如果资源被重复生成,资源不变,则Etag更精确
刷新页面对http缓存的影响
不同刷新操作,不同的缓存策略
正常操作,强制缓存有效,协商缓存有效
手动刷新,强制缓存无效,协商缓存有效
强制刷新,强制缓存无效,协商缓存无效
抓包
H5页面,手机和电脑在同一个wifi环境,并且手机代理改成和电脑的地址一致,访问电脑的页面的地址
mac charles windows fiddler
es6模块化
export default(不使用解构赋值可以用defalut) {a,b}
import a from a
a.a a.b
export {a,b}
import {a,b} from a
a b
网页是如何加载和渲染出来的?
加载过程
1.DNS解析:根据域名解析出对应的ip
2.浏览器根据IP地址对服务器发起http请求
3.服务器处理http请求,并返回给浏览器
渲染过程
1.根据html代码生成dom Tree
2.根据css代码生成cssom
3,将DOMTree和CSS Tree整合成render Tree
4.根据render tree 进行页面渲染
5.遇到<Script>则暂停渲染,优先加载并执行 js代码,再继续
6.直到把render Tree完成
window.onload和DomContentLoaded
onload是页面图片视频等等都加载完,才执行
domContentLoaded是dom渲染完就执行,也就是img和video都没加载完的时候就会执行(可以用来加载图片)
性能优化原则
1.多使用内存缓存和其他方法
2.减少cpu计算量,减少网络加载耗时
3.适用于所有的编程性能优化,空间换时间
加载更快
减少资源体积:压缩代码
减少访问次数:合并代码,ssr服务器渲染,缓存
使用更快的网络:CDN
让渲染更快
css放在head里面,js放在body里面
尽早开始执行JS,用domContentloaded触发
懒加载(图片懒加载,上滑加载更多)
对dom查询进行缓存
频繁dom操作,合并到一起,如一起进行插入dom结构操作
防抖debounce
用户输入结束或暂停时,才会触发change事件
就是添加一个定时器,每次输入超过定时器设置的时间就让他把对应输入框的内容展示出来
节流
预防xss攻击
xss跨站脚本攻击
将 < 改成 < > 改成>
可以在npm 上搜xss,有对应的插件,可以把指定地方的<>改成字符串
预防xsrf攻击
xsrf跨站请求伪造
使用post请求
添加短信验证,密码,指纹验证等
性能优化
让加载更快
1.减少资源体积:压缩代码
2.减少访问次数:合并代码,ssr服务端渲染,使用缓存
3.使用更快的网络:cdn
让渲染更快
1.css放在head,js放在body最下面
2.尽早执行js,用domContentLoaded触发
3.懒加载,(图片懒加载,上滑加载更多)
4.对dom查询进行缓存
5.频繁操作dom,合并到一起插入dom结构
6.节流throttle,防抖debounce
