if语句
处理的不是true或false 而是truly变量及falsely变量 就比如 if(a) 比较的则是!!a
typeof能判断哪些类型
所有值类型(undefined,string,number,symbol,boolean)
识别函数
判断是否为引用类型(不可再细分)(typeof null === "object")
闭包
自由变量的查找,是在函数定义的地方,向上级作用域查找,不是在执行的地方!!!
闭包可以隐藏数据
这是我自己写的一个闭包函数
箭头函数指向
单线程和异步
JS是单线程语言,只能同时做一件事
浏览器和nodejs已支持js启动进程,如Web Worker
JS和DOM渲染共用同一个线程,因为js可修改Dom
基于JS是单线程语言,所以异步不会阻塞代码执行 ,同步会阻塞代码执行
异步应用场景
网络请求 定时任务
一般的回调函数是嵌套型 而promise是管道型
async/await
为了解决callback hell
Promise then catch 链式调用,但也是基于回调函数
async/await是同步语法 彻底消灭回调函数
async/await和Promise的关系
执行async函数,返回的是Promise对象
await相当于Promise的then
try...catch可捕获异常,代替了Promise的catch
for...of 的应用场景
异步循环
宏任务macroTask 和微任务 microTask
宏任务:定时器,Ajax,DOM事件
微任务:Promise async/await
微任务执行时机比宏任务早
event loop 和DOM渲染
每次Call Stack清空(即每次轮询结束),即同步任务执行结束 都是DOM重新渲染的机会
微任务和宏任务的区别
宏任务:DOM渲染后触发,如setTimeout
微任务:DOM渲染前触发,如Promise
根本区别
微任务是ES6语法规定的
宏任务是有浏览器规定的
property和attribute
property: 修改对象属性 不会体现在html结构
attribute:修改html属性,会改变html结构
都有可能引起DOM重新渲染
DOM为树形结构
DOM性能
尽量减少DOM操作
频繁操作转为一次操作
需要用到document.createDocumentFragment()作为载体执行一次性操作,因为它处于DOM树之外,作为一个变量来使用
BOM
navigator 浏览器信息 screen 高宽度信息
location url信息 history
事件代理
代码简洁 减少浏览器内存占用 不可滥用
同源策略
协议,域名,端口必须一致
加载图片,css,js可无视同源策略
JSONP
<script>可绕过跨域限制
服务器可以任意拼接动态数据
<script>可以获得跨域数据 只有服务端愿意
cookie一开始是为了浏览器与·服务器之间通讯 而不是本地存储
cookie的缺点
存储大小 最大4kb
增加请求数据量
Storage
HTML5为存储而设计 最大可存5M
API简单易用
不会随着http请求被发送出去
cookie与Storage区别
容量
API易用性
是否随http请求发送出去
http
状态码分类
1** 服务器收到请求
2** 请求成功
3** 重定向 301永久重定向 302临时重定向 配合location 浏览器自动处理 304 资源未被修改
4** 客户端错误 404资源未找到 403没有权限
5** 服务端错误 504网关超时
http methods
get 获取数据
post 新建数据
Request Headers
Accept 浏览器可接收的数据格式
Accept-Encoding浏览器可接收的压缩算法 如gzip
Connection:kepp-alive 一次TCP连接重复使用
cookie
Host
User-Agent(简称UA)浏览器信息
Content-type 发送数据的格式 如application/json
Response Headers
Content-type 返回数据的格式 如application/json
Content-length 返回数据的大小 多少字节
Content-Encoding 返回数据的压缩算法
Set-cookie
自定义header
https
http和https
http是明文传输,敏感信息容易被劫持
http = http+加密 ,劫持了也无法解密
现代浏览器已开始强制http协议
加密方式
对称加密:一个key同负责加密,解密
不对称加密: 一对key,A加密之后,只能用B来解密
https同时用到了这两种加密方式(成本问题)
webpack和babel
ES6模块化,浏览器暂不支持
ES6语法,浏览器并不完全支持
压缩整合代码 让网页加载更快
前端linux常用命令
网页渲染为何把js代码放在最后
可能导致加载速度慢
img标签不会堵塞DOM的渲染
window.addEventListener('load',function(){
}) // 页面全部资源加载完才执行,包括图片视频
document.addEventListener('DOMContentloaded',function(){
}) // DOM渲染完即可执行,此时图片,视频还可能没有加载完
网页加载过程
加载资源的形式
加载资源的过程
渲染页面的过程
性能优化原则
多使用内存,缓存或其他方法
减少CPU计算量,减少网络加载耗时
适用于所有编程的性能优化——空间换时间
让加载更快
1.减少资源体积
2.减少访问次数:合并代码,SSR服务器渲染,缓存
3.使用更快的网络
让渲染更快
CSS放在head js放在body最下面
尽早执行js,用DOMContentLoaded触发
懒加载
对DOM查询进行缓存
将频繁操作DOM合并到一起插入DOM结构
节流throttle 和防抖debounce
常见的web前端攻击方式有哪些
XSS跨站请求攻击
在网站上嵌入<script>脚本来获取cookie,发送到我的服务器上(服务器配合跨域),有人查看时,我则可以获取访问者的cookie
XSS预防
替换特殊字符 如<变为<;>变为>; <script>就不会作为脚本执行
前后端都要替换,都做总不会有错
XSRF预防
使用post接口
增加验证,例如密码,短信验证码,指纹
纯函数
1.不改变源数组(没有副作用)
2.返回一个数组
concat,map,filter,slice
非纯函数
push,pop,shift,unshift
forEach some every reduce
自由变量的查找,要在函数定义的地方(而非执行的地方)
this指向不能在定义的时候下结论 执行时再去看this指向