学习笔记

Css

1. 盒模型宽度计算

offsetWidth 宽度+内边距+边框，无外边距

2. margin纵向重叠

相邻元素的margin-top和margin-bottom会发生重叠，空白p标签也会重叠

P{
    font-size:16px;
    line-height:1;
    margin-top:10px;
    margin-bottom:15px;
}
AAA


BBB
AAA-BBB之间的距离：15px

3. margin负值问题

top、left负值，元素上、左移动
right负值，右侧元素左移，自身不受影响
bottom负值，下方元素上移，自身不受影响

4. BFC理解和应用

定义
- 块级格式化上下文，一块独立的渲染区域，内部元素的渲染不会影响边界以外的元素
形成条件
- float不是none
- position是absolute或fixed
- overflow不是visible
- displat是 flex inline-block等
作用
- 清除浮动

4. float布局

圣杯布局和双飞翼布局

三栏布局，中间最先加载
两侧固定，中间自适应
一般用于PC
技术总结
- 使用float布局
- 两侧使用margin负值，以便和中间内容横向重叠
- 使用padding防止中间内容覆盖

   圣杯布局
   this is header
      
         this is center
         this is left
         this is right
      
   this is footer

   body {
      min-width: 550px;
   }
   #header {
      text-align: center;
      background-color: #f1f1f1;
   }

   #container {
      padding-left: 200px;
      padding-right: 150px;
   }
   #container .column {
      float: left;
   }

   #center {
      background-color: #ccc;
      width: 100%;
   }
   #left {
      position: relative;
      background-color: yellow;
      width: 200px;
      margin-left: -100%;
      right: 200px;
   }
   #right {
      background-color: red;
      width: 150px;
      margin-right: -150px;
   }

   #footer {
      text-align: center;
      background-color: #f1f1f1;
   }

   /* 手写 clearfix */
   .clearfix:after {
      content: '';
      display: table;
      clear: both;
   }

   双飞翼布局
   
        
            this is main
        
    
    
        this is left
    
    
        this is right
    

   body {
      min-width: 550px;
   }
   .col {
      float: left;
   }

   #main {
      width: 100%;
      height: 200px;
      background-color: #ccc;
   }
   #main-wrap {
      margin: 0 190px 0 190px;
   }

   #left {
      width: 190px;
      height: 200px;
      background-color: #0000FF;
      margin-left: -100%;
   }
   #right {
      width: 190px;
      height: 200px;
      background-color: #FF0000;
      margin-left: -190px;
   }

5. 手写clear fix

/* 手写 clearfix */
.clearfix:after {
   content: '';
   display: table;
   clear: both;
}
.clearfix{
   *zoom: 1   兼容ie低版本
}

6. flex布局

常用语法
- flex-direction //方向
- justify-content //对齐方式
- align-items //交叉轴对齐方式
- flex-wrap //是否换行
- align-self //子元素在交叉轴的对齐方式
三点色子


   
   
   
 
.box {
   width: 200px;
   height: 200px;
   border: 2px solid #ccc;
   border-radius: 10px;
   padding: 20px;

   display: flex;
   justify-content: space-between;
}
.item {
   display: block;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background-color: #666;
}
.item:nth-child(2) {
   align-self: center;
}
.item:nth-child(3) {
   align-self: flex-end;
}

7. 居中

水平居中
- inline元素：text-align:center
- blick元素：margin:auto
- absolute：left:50%+margin - left 负值
垂直居中
- inline元素：line-height的值等于height值
- absolute：top:50% + margin-top 负值 //需要知道元素尺寸
- absolute：top:50% + transform(-50%,-50%)
- absolute：top、left、bottom、right=0 + margin:auto

8. line-height继承问题

写具体数值，则继承该值
写比例 2或1.5，则直接继承比例
写百分比，则继承计算出来的值

8. CSS响应式

rem解释
- 相对长度单位，相对于根元素
响应式的常用方案
- medi-query，根据屏幕宽度设置font-size
网页视口尺寸
- window.screen.height //屏幕高度
- window.innerHeight //网页视口高度
- document.body.clientHeight //body高度
- vh 网页视口高度
- vw 网页视口宽度

JS

1. 类型

常见值类型字符串、数字、布尔、undefined、Symbol
常见引用类型对象、数组
特殊引用类型 null、函数

2. typeof 运算符

识别所有值类型
识别函数
判断是否是引用类型(不可再细分，识别为object)

3. 深拷贝

 /**
 * 深拷贝
 * @param {Object} obj 要拷贝的对象
 */
 function deepClone(obj = {}) {
    if (typeof obj !== 'object' || obj === null || obj == undefined) {
       // obj 是 null ，或者不是对象和数组，直接返回
       return obj
    }

    // 初始化返回结果
    let result
    if (obj instanceof Array) {
       result = []
    } else {
       result = {}
    }

    for (let key in obj) {
       // 保证 key 不是原型的属性
       if (obj.hasOwnProperty(key)) {
             // 递归调用！！！
             result[key] = deepClone(obj[key])
       }
    }

    // 返回结果
    return result
    //使用 const obj2 = deepClone(obj1)
 }

4. 类型转换

字符串拼接
== 判断==null之外，全部使用===
if语句和逻辑运算

5. 原型和原型链

class类
- constructor 构造函数
- 属性
- 方法
继承
- 通过extends继承，super继承父类

// 父类
class People {
  constructor(name){
    this.name = name
  }
  eat(){
    console.log('eat')
  }
}
//子类
class Student extends People{
  constructor(name,number){
    super(name)
    this.number = number
  }
}

原型
- 每个class都有显示原型prototype
- 每个实例都有隐式原型proto
- 实例的proto指向对应class的prototype
- 在找属性或者方法时先在自身属性和方法寻找，找不到则自动去proto查找
原型链
- 下级通过__proto去寻找上级的prototype
- instanceof 顺着原型链能找到就时true

jq简单实现

class jQuery {
   constructor(selector) {
      const result = document.querySelectorAll(selector)
      const length = result.length
      for (let i = 0; i < length; i++) {
            this[i] = result[i]
      }
      this.length = length
      this.selector = selector
   }
   get(index) {
      return this[index]
   }
   each(fn) {
      for (let i = 0; i < this.length; i++) {
            const elem = this[i]
            fn(elem)
      }
   }
   on(type, fn) {
      return this.each(elem => {
            elem.addEventListener(type, fn, false)
      })
   }
   // 扩展很多 DOM API
}

// 插件
jQuery.prototype.dialog = function (info) {
   alert(info)
}

// “造轮子”
class myJQuery extends jQuery {
   constructor(selector) {
      super(selector)
   }
   // 扩展自己的方法
   addClass(className) {

   }
   style(data) {
      
   }
}

// const $p = new jQuery('p')
// $p.get(1)
// $p.each((elem) => console.log(elem.nodeName))
// $p.on('click', () => alert('clicked'))

5. 作用域和闭包

闭包-作用域应用的特殊情况
- 函数作为参数被传递
- 函数作为返回值被返回
- 自由变量的查找是在函数定义的地方。不是在执行的地方
- 作用
  - 隐藏数据
this
- this是在函数执行的时候确定的，不是定义的地方确定的
手写bing函数

   // 模拟 bind
   Function.prototype.bind1 = function () {
      // 将参数拆解为数组
      const args = Array.prototype.slice.call(arguments)

      // 获取 this（数组第一项）
      const t = args.shift()

      // fn1.bind(...) 中的 fn1
      const self = this

      // 返回一个函数
      return function () {
         return self.apply(t, args)
      }
   }

   function fn1(a, b, c) {
      console.log('this', this)
      console.log(a, b, c)
      return 'this is fn1'
   }
   // bind不会直接执行，需要赋值后再手动执行
   const fn2 = fn1.bind1({x: 100}, 10, 20, 30)
   const res = fn2()
   console.log(res)

6. 异步和单线程

event loop(事件轮询)
Promise
- 三种状态(pending、resolved、rejected)

return new Promise((resolve,reject)=>{
   setTimeOut(()=>{
      resolve()
   },1000)
})

async/await
- 使异步函数更像同步函数
- 解决callbak
async/await和promise的关系
- 执行async函数，返回的是Promise对象
- await相当于Promise的then
- try...catch可捕获异常，代替了Promese的catch
- await后的代码，都被看做是异步(重要)

for...of常用于异步的遍历

!(async function(){
   for(let i of nums){
      const res = await muti(i)
      console.log(res)
   }
})()

宏任务和微任务
- 宏任务：setTimeout,setInterval,Ajax,DOM事件 DOM渲染后触发
- 微任务：Promise async/await
- 微任务执行比宏任务早 DOM渲染前触发

7. Web API

DOM操作
1. 创建元素 document.createElement('p')
2. 插入节点 div.appendChild(p)
3. 获取父元素 p1.parentNode
4. 获取子元素列表 p1.childNodes
5. 删除节点 div.removeChild(p)
6. property修改对象属性，attribute修改HTML属性，尽量修改propety
DOM性能
1. 避免频繁操作DOM
2. 对DOM查询做缓存
3. 将频繁操作改成一次性操作
4. 先创建文档片段 createDocumentFragment，再将DOM结构插入文档片段中，再将文档片段一次性插入DOM结构
BOM操作
1. 识别浏览器类型 navigator.userAgent
2. location.href 返回整个链接
3. .protocol 返回 http
4. .host 返回 www.baidu.com
5. .search返回文号之后的
6. .hash返回#之后的
7. .pathname返回路径

9. 事件

 //通用事件绑定函数
 functio bindEvent(elem,type,fn){
    elem.addEventListener(type,fn)
 }

 bindEvent(btn1,'click',(e)=>{})

event.stopPropagation() 阻止事件冒泡
利用事件冒泡来做事件代理

10. ajax

const xhr = new XMLHttpRequest()
xhr.open("GET","/api",false)
xhr.onreadystatechange = function(){
   if(readyState===4){
      if(xhr.status===200){
         console.log(xhr.responseText)
      }
   }
} 
xhr.send(null)
readyState 0未初始化，还没调用send()方法
1. 载入，已调用send()方法，正在发送请求
2. 载入完成，send方法执行完成，已经接收到响应内容
3. 交互，正在解析响应内容
4. 完成，解析完成，客户端可以调用

同源策略协议、域名、端口图片、css、js无视跨域

cookie最多4K，每次会发送到服务端

http

get获取数据，post新建数据，patch/put更新数据，delete删除数据
传统API设计：把每个url当做一个功能
Restful API：把每个url当做一个唯一资源
传统的：/api/list?page=2
Restful API：/api/list/2

http headers

requset 客户端发给服务器
- Accept 浏览器可接收的数据格式
- Accept-Encoding 浏览器可接收的压缩算法
- Accept-Languange 浏览器可接收的语言
- Connection:keep-alive 一次TCP连接重复使用
- cookie
- Host 域名地址
- User-Agent 浏览器信息
- Content-type application/json
- 自定义header
Response 服务器返回客户端的
- Content-type application/json
- Content-length 返回数据的大小
- Content-Encoding 返回数据的压缩算法
- Set-Cookie
Http缓存
js css img会被缓存
强制缓存
- cache-control 服务器设置缓存时间
- cache-control中的 max-age 设置最大缓存时间
- no-cache 不用强制缓存，由服务器做处理
- no-store 不用强制缓存，也不用服务器缓存
协商缓存
- 服务器端缓存策略
- 服务端判断客户端资源，是否和服务端一样
- 一致返回304，否则返回200和最新资源
刷新操作对缓存的影响
- 正常操作强制和协商缓存都有效
- 手动刷新 F5或者右击菜单强制缓存失效，协商缓存有效
- ctrl+f5 强制缓存和协商缓存都失效

抓包工具

fiddler

页面加载过程

资源形式
- html代码、媒体文件、js、css
加载过程
- DNS解析：域名->ip
- 浏览器根据ip地址向服务器发起http请求
- 服务器处理http请求，并返回给浏览器
渲染过程
- 根据HTMl生成DOM Tree
- 根据css生成CSSOM
- DOM和CSSOM整个成Render Tree
- 根据Render Tree渲染页面
- 遇到script标签就暂停渲染，优先加载并执行JS代码，完成再继续
- 直至把Render Tree渲染完成

性能优化

原则
- 多使用内存、缓存
- 减少CPU计算、减少网络加载耗时
- 空间换时间
让加载更快
- 减少资源体积：压缩代码
- 减少访问次数：合并代码，SSR服务器渲染，缓存
- 使用更快的网络：CDN
让渲染更快
- css放head，JS放body
- 尽早的执行JS
- 懒加载(图片懒加载，上滑加载更多)
- 对DOM进行查询进行缓存
- 频繁操作DOM合并到一起插入DOM结构
- 节流throttle 防抖debounce

防抖debounce

使用keyup监听change事件时，会频繁的触发change事件，防抖：在用户输入结束或者暂停时才会触发change事件

function debounce(fn,delay=500){
   let timer = null
   return function(){
       if(timer){
          //这里写return是节流函数
          //return
          clearTimeout(timer)
       }
       timer = setTimeout(()=>{
          fn.apply(this,arguments)
          timer = null
       },delay)
   }
}
input.addEventListener('keyup',debounce(()=>{
   console.log(value)
},600))

节流 throttle
- 拖拽一个元素时，直接使用drag事件，会频繁触发，节流：无论拖拽多块，都会每隔100ms触发一次
安全
- 常见的web前端攻击方式有哪些
  - XSS跨站请求攻击
    - 博客里写script脚本，获取用户信息
    - 防止：使用<和>来替换<>
  - XSRF跨站请求伪造
    - 我要买id为100的东西，把付款链接发给你，你打开后自动购买

学习笔记

Css

1. 盒模型宽度计算

2. margin纵向重叠

3. margin负值问题

4. BFC理解和应用

4. float布局

5. 手写clear fix

6. flex布局

7. 居中

8. line-height继承问题

8. CSS响应式

JS

1. 类型

2. typeof 运算符

3. 深拷贝

4. 类型转换

5. 原型和原型链

5. 作用域和闭包

6. 异步和单线程

7. Web API

DOM性能

9. 事件

10. ajax

同源策略 协议、域名、端口 图片、css、js无视跨域

cookie最多4K，每次会发送到服务端

http

http headers

requset 客户端发给服务器

Response 服务器返回客户端的

Http缓存

抓包工具

页面加载过程

性能优化

你可能感兴趣的:(学习笔记)

同源策略协议、域名、端口图片、css、js无视跨域