基础知识整理

2018-03-14  本文已影响0人  jiangzj

HTML部分

HTML5

1、html语义化：section、nav...
2、本地储存
3、多媒体：video、audio

HTML语义化

localStorage、sessionStorage、cookies、indexDB 的区别

localStorage：没有过期时间，大小为10Mb左右，受同源策略限制，可以用于跨页面数据交互、session；
sessionStorage：与localStorage类似，区别在于关闭浏览器会消失；
indexDB：可储存的数据较多，且采用对象来保存数据；
cookies:
1. 服务器发送给浏览器，并保存在浏览器的一块数据，会在下一次请求是带上；
2. 受同源策略限制；
3. 可以设置过期时间 Expires 或有效期 Max-Age；
4. 可以设置路径 Path；
5. 大小为 4KB;

FormData 表单对象

var data = new FormData(formElement)
data.append("name", "bill")
data.append("userfile", fileInputElement.files[0])
xhr.send(data)

File API 预览图片使用

File.lastModified // 最后修改时间
File.lastModifiedDate // 最后修改时间的 Date 对象
File.name // File 引用文件的名字
File.size // 文件大小
File.path // path 或者 Url
File.type // 文件扩展类型

CSS部分

px、rem、em 的区别

position

Javascript

值类型与引用类型

// 判断基本类型
typeof a
// 判断引用类型
Array.isArray(a)
Object.prototype.toString.call(a)

call、apply、bind 的区别

var log = console.log.bind(console, "test");
var log = console.log.call(console, arg1, arg2)
var log = console.log.apply(console, [arg1, arg2])
log("hey") // test hey

原型链

// 组合继承（常用）
// 用 构造函数 来出现实例属性的继承
// 用 原型 来实现原型属性和函数的继承
    var SuperType = function (name) {
        this.name = name
        this.colors = ["red", "yellow"]
    }
    SuperType.prototype.sayName = function () {
        alert(this.name)
    }
    var Subtype = function (name, age) {
        // 通过工厂函数来继承 属性
        SuperType.call(this, name)
        this.age = age
    }
    // 通过原型的实例来继承 方法
    Subtype.prototype = new SuperType()
    Subtype.prototype.constructor = Subtype
    Subtype.prototype.sayAge = function () {
        alert(this.age)
    }

// 寄生组合式继承（最佳实践）
    function object(o){
        function F(){}
        F.prototype = o;
        return new F();
    }
    var inheritPrototype = function (subType, superType) {
        // 继承 超类型的原型 的属性
        var prototype = object(superType.prototype)
        prototype.constructor = subType
        subType.prototype = prototype
    }
    var SuperType = function (name) {
        this.name = name
        this.colors = ["red", "yellow"]
    }
    // 超类型的原型只有 方法
    SuperType.prototype.sayName = function () {
        alert(this.name)
    }
    var Subtype = function (name, age) {
        // 先获取一份属于自己的 超类型 的属性
        SuperType.call(this, name)
        this.age = age
    }
    inheritPrototype(Subtype, SuperType)
    Subtype.prototype.sayAge = function () {
        alert(this.age)
    }
    var a = new Subtype("bill")

事件捕获、事件冒泡、事件委托

闭包

    const configuredEnvironment = (() => {
        let env = null
        const f = () => {
            if (env === null) {
                // 得到用于加载模板的目录
                const p = path.join(__dirname, 'templates')
                // nunjucks 会从这个目录中读取模板, 调用 render 方法加载模板并且返回
                env = nunjucks.configure(p)
                return env
            } else {
                return env
            }
        }
        return f
    })()

深拷贝

    var deepClone = function(x) {
        var newX
        if (Array.isArray(x)) {
            newX = []
            for (var i = 0; i < x.length; i++) {
                var item = deepClone(x[i])
                newX.push(item)
            }
        } else if (typeof(x) === "object") {
            newX = {}
            for (var i in x) {
                var item = deepClone(x[i])
                newX[i] = item
            }
        } else {
            newX = x
        }
        return newX
    }
    var arr = [[1,2,3],{a:1,b:2},55]
    var newArr = deepClone(arr)

    var deepCloneFromJson = function(a) {
        var x = JSON.stringify(a)
        var b = JSON.parse(x)
        return b
    }

AJAX

var ajax = function(method, path, data, responseCallback) {
    var r = new XMLHttpRequest()
    // 设置请求方法和请求地址
    r.open(method, path, true)
    // 设置发送的数据的格式
    r.setRequestHeader('Content-Type', 'application/json')
    // 注册响应函数
    r.onreadystatechange = function() {
        if(r.readyState === 4) {
            responseCallback(r)
        }
    }
    // 发送请求
    r.send(data)
}
// 0 代理被创建，但并未 open()
// 1 已经调用 open()
// 2 已经调用 send()  并且头部和状态已经获得了
// 3 正在传输
// 4 传输完成

HTTP

缓存机制

一般将缓存保存在代理服务器或客户端本地

    - 强制缓存：
        response
            Cache-Control：max-age=31536000
            Expires：Fri, 30 Oct 1998 14:19:41（http 1.0 的字段，现在基本可以忽略
        之后所有的请求，只要在365天之内的请求，都从缓存里面返回
    - 对比缓存：
        Last-Modified/If-Modified-Since
            response
                Last-Modified：Thu, 03 Jul 2012 00:00:00 GMT
            request
                If-Modified-Since: Thu, 03 Jul 2012 00:00:00 GMT
            请求的时候会对比修改的时间，判断请求的资源最后修改时间是否一致，如果一致，则从缓存里获取
        Etag/If-None-Match
            response
                Etag：“xxxxx”
            request
                If-None-Match: “xxxxx”
            请求的时候会对比请求资源的标记信息是否一致，如果一致，则从缓存里获取
            该组合的判断权重比 Last-Modified/If-Modified-Since 高

HTTPS

跨域

网络安全

重绘、重排

前端优化

输入url到渲染页面

一、浏览器查找域名对应的 IP 地址；
  1. DNS查询：浏览器缓存》系统缓存》路由器缓存》IPS服务器缓存》根域名服务器缓存》顶级域名服务器缓存》主域名服务器缓存
  2. DNS负载均衡：通常由多台服务器来分别处理来自四面八方的请求，DNS可以返回一个合适的机器的IP给用户，例如可以根据每台机器的负载量，该机器离用户地理位置的距离等等，这种过程就是DNS负载均衡，又叫做DNS重定向
二、浏览器根据 IP 地址与服务器建立 socket 连接；
  1. 三次握手
  2. http 和 https
三、浏览器与服务器通信：浏览器请求，服务器处理请求；
四、浏览器渲染页面；
  1. 解析HTML文件构建DOM树
  2. 解析CSS文件
  3. 合并成渲染树
  4. 布局渲染树并将其绘制到屏幕上
  5. 浏览器在解析过程中，如果遇到请求外部资源时，如图像、iconfont等，浏览器将异步下载该资源，不会堵塞页面渲染
  6. 遇到JS文件，HTML文档会挂起渲染过程，因为JS有可能修改DOM结构
五、浏览器与服务器断开连接。
  1. 四次挥手

react.js

上一篇下一篇

猜你喜欢

热点阅读