| 实用

前端小技巧总结篇

html header里的小秘密

  • <meta http-equiv="X-UA-Compatible" content="IE=7,9,10,11">这条配置是让IE走7、9、10、11渲染

  • <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">这条配置是让IE走最高级的Edge去渲染，如果有Chrome浏览器就用Chrome

  • <meta name="renderer" content="webkit">这一条配置是让双核浏览器优先用webkit渲染

  • <link rel="dns-prefetch" href="//pcsdata.baidu.com">头部的这一条就是DNS与解析，可以提升网站性能

  • <meta name="keywords" content="酒店,机票,火车票,汽车票,旅行,旅游,攻略">和<meta name="description" content="艺龙旅行网是中国领先的在线旅行服务提供商，纳斯达克上市公司(NASDAQ: LONG)。提供全球57万家酒店预订服务，2015年艺龙用户入住了4000万以上的间夜。低价有房保障，到店无房赔付。">都是做SEO的

CSS盒模型

  • 描述： 盒模型由margin、border、padding和content组成

标准盒模型

  • 差异：标准盒模型的宽度（width）和高度（height）只由content决定，不包括border和padding

IE下的盒模型

  • 差异：IE盒模型的宽度（width）和高度（height）由content + padding + border共同决定

在css中如何设置盒模型

  • 使用box-sizing属性，当值为content-box时为标准盒模型，当值为border-box时为IE盒模型

js获取盒模型对应的宽高

  • 通过dom.style.width/height只能获取内联样式（无法获取在header中style标签内定义的样式和通过link标签引用的样式）

  • 通过dom.currentStyle.width/height可以获取及时在浏览器上渲染出来的宽高，没有了第一个方法的限制，但是弊端就是只有IE支持

  • window.getComputedStyle(dom).width/height可以兼容Chrome和Firefox

  • dom.getBoundingClientRect().width/height也是及时渲染完之后获取的宽高，是根据浏览器视窗左顶点去计算的

BFC（块级格式化上下文）

渲染规则

  • BFC元素垂直方向的边距发生重叠

  • BFC元素的区域不会和浮动元素的box重叠

  • BFC在页面上是独立的，与外面的元素互不影响

  • 计算BFC的高度的时候，浮动元素也会参与计算

创建BFC

  • float 不为 none

  • position的值不是relative或static

  • display属性table、table-cell

  • overflow为auto、hidden

BFC作用

  • 解决边距重叠

  • 清除浮动

DOM事件

DOM事件级别

  • DOM0

    • dom.onclick = function(){}

  • DOM2

    • 标准：dom.addEventListener('click', function(){}, false/true)
    • IE：dom.attachEvent('onclick', function(){})

  • DOM3

    • 增加了鼠标事件、键盘事件

DOM事件模型

  • 捕获：从上往下

  • 冒泡：从下往上

DOM事件流

  • 捕获

    • 第一个接收到的对象是window
    • 第二个是document
    • 第三个才是html标签
    • 第四个就是body标签
    • …逐层到目标对象

  • 目标阶段

  • 冒泡

    • 从目标元素到window

Event对象

  • event.preventDefault阻止默认事件
  • event.stopPropagation阻止冒泡
  • event.target事件代理常常使用
  • 自定义事件通过new Event()来生成一个事件

  • CustomEvent:除了可以指定事件名，后面还可以跟一个对象，增加自定义参数

    • 1
      2
      3
      4
      5
      obj.addEventListener("cat", function(e) { process(e.detail) })

      // 创建并分发事件
      var event = new CustomEvent("cat", {"detail":{"hazcheeseburger":true}})
      obj.dispatchEvent(event)

http 协议类

http 协议的主要特点

  • 简单快速
  • 灵活
  • 无连接
  • 无状态

http 报文的组成部分

  • 请求报文

    • 请求行（http方法、资源地址、http协议及版本）
    • 请求头（要什么类型的内容）
    • 空行（告诉服务端，下一个不是请求头了）
    • 请求体

  • 响应报文

    • 状态行（http协议及版本、状态码及状态）
    • 响应头
    • 空行
    • 响应体

http 方法

  • GET
  • POST
  • DELETE
  • PUT
  • HEAD

post 和 get 的区别

  • GET请求在浏览器回退的时候是无害的，而POST会再次提交请求
  • GET产生的地址可以被浏览器收藏而POST不可以
  • GET请求会被浏览器主动缓存，而POST不会，除非手动设置
  • GET请求的参数会被完整保留在浏览器的历史记录里，而POST中的参数不会被保留
  • GET请求在URL中传送的参数是有长度限制的，而POST没有限制

http 状态码

  • 200 ok: 客户端请求成功
  • 206 partial content: 客户端发送了一个带有Range头的GET请求，服务器完成了它（视频或音频文件）
  • 301 moved permanently: 所有请求的页面已经转移至新的url
  • 302 found: 所请求的页面已经临时转移至新的url
  • 304 not modified: 服务器告诉客户端已经存在缓存了，可以直接从缓存里取
  • 400 bad request: 客户端请求有语法错误
  • 401 unauthorized: 未授权
  • 403 forbidden: 资源禁止被访问
  • 404 not found: 请求资源不存在
  • 500 internal server error: 服务器错误
  • 503 server unavailable: 服务器过载或宕机

什么是持久链接

  • http协议1.0版本不支持kepp-alive模式，每次连接之后都会断开
  • http协议1.1版本开始支持kepp-alive模式，，使客户端到服务器的链接持续有效，当对服务器出现后续请求的时候，避免了建联或重新建联

什么是管线化

  • 在持久连接的情况下

    • 常规消息传递请求1 -> 响应1 -> 请求2 -> 响应2 -> 请求3 -> 响应3

    • 管线化会将请求打包一次请发出，并且服务端也将响应打包一次发出，类似请求1 -> 请求2 -> 请求3 -> 响应1 -> 响应2 -> 响应3

  • 管线化机制通过持久连接完成，仅http/1.1支持此技术

  • 只有GET和HEAD请求可以进行管线化，而POST则有所限制

  • 初次建联的时候不应启动管线化，因为服务器可能不支持

  • 管线化不会影响响应到达的顺序

原型链

  • 创建对象有几种方法

    • var obj = { a: 'xxx' }
    • var obj = new Object({a: 'xxx'})
    • var M = function (){ this.a = 'xxx' }; var m3 = new M()
    • var obj = Object.create({a: 'xxx'})

  • ES5继承

    • call、apply构造函数实现继承: 通过将子元素的上下文绑定到父元素上，缺点无法继承父元素的原型链

      1
      2
      3
      4
      5
      6
      7
      8
      function Parent() {
        this.name = 'xxx'
      }

      function Child() {
        Parent.call(this) // Parent.apply(this)
        this.type = 'child'
      }

    • 原型链实现继承: 可以继承父元素的原型链，缺点如果父元素同时实例化了两个对象，一个对象修改了父元素的属性，另一个也会被修改

      1
      2
      3
      4
      5
      6
      7
      8
      function Parent() {
        this.name = 'xxx'
      }

      function Child() {
        this.type = 'child'
      }
      Child.prototype = new Parent()

    • 通过组合方式实现继承: 既不会被影响，又继承原型链，缺点：父类被实例化了两次

      1
      2
      3
      4
      5
      6
      7
      8
      9
      function Parent() {
        this.name = 'xxx'
      }
      function Child() {
        Parent.call(this)
        this.type = 'child'
      }
      Child.prototype = new Parent // 根源
      var s3 = new Child()

    • 组合继承优化1: 既不会被影响，又继承原型链且父元素只被实例化一次，缺点：无法区别实例化对象是被父类直接实例化还是被子类实例化，因为Child.constructor被父类替换掉了

      1
      2
      3
      4
      5
      6
      7
      8
      9
      function Parent() {
        this.name = 'xxx'
      }
      function Child() {
        Parent.call(this)
        this.type = 'child'
      }
      Child.prototype = Parent.prototype // 根源
      var s3 = new Child()

    • 组合继承优化2: 实现了父类和子类原型对象的隔离，且保留了子类本身

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      function Parent() {
        this.name = 'xxx'
      }
      function Child() {
        Parent.call(this)
        this.type = 'child'
      }
      Child.prototype = Object.create(Parent.prototype)
      Child.prototype.constructor = Child
      var s3 = new Child()

通信类

  • 同源策略及限制

    • 协议
    • 域名
    • 端口

    以上三个是同源策略中的源，有一个不同就不是同源，这是安全保护机制，同时我们不能获取不同源的

    • cookie、localstorage、和indexDB
    • DOM
    • Ajax无法发送

  • 前后端如何通信

    • ajax（同源）
    • web socket（不受同源限制）
    • CORS（既支持同源也支持不同源）

  • 如何创建Ajax

    • XMLHttpRequest对象的工作流程
    • 兼容性处理
      • 高级浏览器支持XMLHttpRequest
      • IE不支持，IE的对象是ActiveXObject
    • 事件的触发条件
    • 事件的触发顺序

  • 跨域通信的几种方式

    • jsonp

      • 动态的向头部添加script标签
      • script标签请求的地址添加一个callback方法
      • 并且把这个方法注入到全局window对象中
      • 后台返回的时候会去调用这个方法，我们通过这个方法接收收到数据
      • 最后一定在用完之后在全局干掉这个方法

    • hash

      • 前面内嵌一个iframe，通过iframe做跨域
      • 改变iframe的src的哈希值来监听数据变化

    • postmessage（H5标准）

      • B窗口向A窗口发送消息window.postMessage('data','*') *号表示源，如果不写源，只写*号表示所有源
      • A窗口window.addEventListener('message', function (oEvent){console.log(oEvent.origin);console.log(oEvent.data)}, false)

    • websocket

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      var wx = new WebSocket('ws://xxxxxx.org') // wss 是加密
      wx.onopen = function (evt){
        console.log('connect open...')
        wx.send('Hello WS!')
      }

      wx.onmessage = function(evt){
        console.log('received' + evt.data)
        ws.close()
      }

      wx.onclose = function(evt){
        console.log('connect close...')
      }

    • cors

      1
      2
      3
      4
      5
      6
      fetch('http://xxxxx.com/xxxx', {
        method: 'GET',
        headers: {
          mode: 'cors'
        }
      })
      • 为什么cors支持跨域呢？因为浏览器会判断你的请求是否跨域了，如果跨域它会给你加一个origin的请求头，服务端配置了这个请求头就可以访问了

安全类

  • csrf

    • 基本概念和缩写
      • 中文名：跨站请求伪造

    • 攻击原理(两个因素)

      • 改用是合法用户，之前登陆过
      • 网站A的那个接口本身也存在漏洞
    • 防御措施
      • token验证
        • 访问接口携带token信息
      • referer验证
        • 页面来源验证，验证是否是我的站点的来源
      • 隐藏令牌
        • 把令牌隐藏在header头中，不要放在链接上
  • xss
    • 中文名：跨域脚本攻击
    • 攻击类型：
      • 反射型
      • 存储型
    • 防御措施
      • 编码
        • 对用户的输入进行html entity编码
      • 过滤（重要）
        • 移除用户上传DOM属性，如onerror、onclick、onmousedown等
        • 移除用户上传的style节点、script节点、iframe节点等
      • 校正
        • 避免直接对HTML entity解码
        • 使用DOM parse转换，校正不配对的DOM标签

渲染机制

  • DOCTYPE及作用

    • DTD（文档类型定义）：是一系列语法规则，用来定义XML或者(X)HTML的文件类型。浏览器会使用它来判断文档类型，决定使用何种协议来解析，以及切换浏览器模式。
    • DOCTYPE是用来声明文档类型和DTD规范的。主要用途是文件合法性验证。如果文件代码不合法，浏览器解析可能会出错。
    • 常见的DOCTYPE
      • HTML5： <!DOCTYPE html>
      • HTML4.0.1 Strict：严格模式（包括所有HTML元素和属性，但不包括展示性和弃用的元素）
      • HTML4.0.1 Transitional（包括所有HTML元素和属性，但包括展示性和弃用的元素）

  • 浏览器渲染过程

    • 首先通过HTML parse解析HTML代码为DOM tree
    • CSS通过CSS parse解析为CSSOM tree
    • 把DOM tree和CSSOM tree结合attach之后生成render tree
    • 浏览器根据render tree去绘制

  • 重排reflow

    • 每个元素都有自己的盒模型，浏览器根据各式各样的计算出该元素位置等结果，将其放到计算出的位置上，这个过程称为重排
    • 触发重排
      • 增加、删除、修改DOM节点会导致Reflow或Repaint
      • 移动DOM位置，如动画效果
      • 修改CSS样式
      • Resize窗口可能会
      • 修改网页默认字体

  • 重绘repaint

    • 当各种盒子的位置、大小以及其他属性，例如字体、颜色等都确定下来之后，浏览器把这些元素按照各自的特性绘制一遍，于是页面的内容出现了，这个过程称之为重绘
      • 触发重绘
        • DOM修改
        • CSS修改

JS运行机制

  • 单线程： 一个时间只能做一件事情
  • 任务队列：同步任务和异步任务
  • event-loop：时间轮询

页面性能

  • 提升页面性能的方法
    • 资源压缩合并，减少http请求
    • 非核心代码异步加载
      • 异步加载的方式
        • 动态脚本(用document.createElement生成一个script标签，最后把这个标签加载到文档里)
        • defer()
        • async
      • 异步加载的区别
        • defer：是在HTML解析完之后才会执行，如果是多个，按照加载的顺序依次执行
        • async：是在加载完成之后立即执行，如果是多个，执行顺序和加载顺序无关
    • 利用浏览器缓存
      • 缓存分类
        • 强缓存：
          • expires:
          • cache-control
        • 协商缓存
          • last-modified
          • etag
    • 使用CDN
    • 预解析DNS
      • <meta http-equiv="x-dns-prefetch-control" content="on">在高级浏览器内，a标签的url默认开启DNS预解析，但是https开头的网站，默认是关闭的，这个语句就是要求浏览器打开对a标签的url进行默认的DNS预解析
      • <link rel="dns-prefetch" href="xxx">

错误监控

  • 前端错误分类
    • 及时运行错误：代码错误
    • 资源加载错误
  • 错误的捕获方式
    • 及时运行错误捕获方式
      • try catch
      • window.onerror
    • 资源加载错误
      • object.onerror(像img标签和script标签支持onerror)，不会向上冒泡
      • performance.getEntries()
      • Error事件捕获（不执行冒泡，但执行捕获）
    • 跨域的js文件捕获错误
      • 普通的跨域的js文件有错，只能拿到Script Error，所以要在script里添加crossorigin属性
      • 设置js资源响应头Access-Control-Allow-Origin: *
  • 上报错误的基本原理
    • 利用ajax上报（一般不使用）
    • 利用image对象上报(new Image()).src="xxxxxx"
ESC