Web API等

本文主要是介绍Web API等，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

attr 和 prop

• property：修改对象属性，不会体现到html结构中
• attribute：修改html属性，会改变html结构
• 都有可能引起DOM重新渲染，最好用property

一次插入多个DOM节点，考虑性能

• 对DOM查询做缓存
• 将频繁操作改为一次性操作

const list = document.getElementById('list')

// 先创建一个文档片段，此时还没有插入到DOM结构中
const frag = document.createDocumentFragment()

for (var i = 0; i < 10; i++) {
    const li = document.createElement('li')
    li.innerHTML = `list item ${i}`
    frag.appendChild(li)
}
// 都完成之后，再统一插入到DOM结构中
list.appendChild(frag)

编写一个通用事件的监听函数

function bindEvent(elem, type, fn) {
elem.addEventListener(type, fn)
}

const btn = document.getElementById('btn')
bindEvent(btn, 'click', event => {
alert(event.target)	//获取触发的元素
event.preventDefault()	//阻止默认行为
})

无限下拉的图片列表，如何监听每个图片的点击

• 事件代理

同源、跨域

• 同源：协议、域名、端口必须一致
• 加载图片，css，js可无视同源策略
• img可用于统计埋点，可使用第三方统计服务
• link，script可使用CDN，一般都是外域
• script可实现JSONP

cookie、session

• cookie的缺点：
  • cookie是用来与服务端通信的，只是借用过来存储
  • 存储大小最大不能超过4kb
  • http请求时要发送到服务器端，增加请求数据量
  • 只能用document.cookie = '...'修改，只能覆盖，不能追加，太过简陋

http缓存机制

• 强制缓存：response headers中cache-control：max-age、no-cache、no-store
• 协商缓存：服务器判断客户端资源是否和服务端一样，一样则返回304，不一样则返回200
  • 资源标识：
    • last-modified：资源最后修改的事件
    • etag：资源的唯一标识，一个字符串
    • 优先使用etag，last-modified只能精确到秒级

从输入url到渲染出页面的整个过程

• DNS解析 -> 浏览器根据ip地址向服务器发起http请求 -> 服务器处理请求，并返回给浏览器 -> 根据HTML代码生成DOM Tree，根据CSS代码生成CSSOM -> DOM Tree和CSSOM整合形成Render Tree -> 根据Render Tree渲染页面 -> 遇到script则暂停渲染，优先加载并执行JS代码，完成再继续

window.onload和DOMContentLoaded

window.addEventListener('load', function() {
    // 页面全部资源加载完才会执行
})
document.addEventListener('DOMContentLoaded', function() {
    // DOM渲染完即可执行，此时图片、视频可能还没有加载完
})

防抖

• 只触发最后一次

const input = document.getElementById('input')
let timer = null
input.addEventListener('keyup', function() {
if(timer) {
clearTimeout(timer)
}
timer = setTimeout(() => {
console.log(input.value)
timer = null
}, 500)
})

节流

• 保持一定频率触发

const div = document.getElementById('div')
let timer = null
div.addEventListener('drag', function(e) {
    if(timer) {
        return
    }
    timer = setTimeout(() => {
        console.log(e.offsetX, e.offsetY)
        timer = null
    }, 500)
})

xss

• 预防：替换特殊字符如<变为& lt; >变为& gt;

csrf

• 预防：使用post接口；增加验证，例如密码，指纹等

纯函数

• 不改变原数组（没有副作用），返回一个新数组
  • concat、map、filter、slice
• 非纯函数：push、pop、shift、unshift、forEach、some、every、reduce...

函数声明和函数表达式的区别

• 函数声明：function fn()
• 函数表达式：const fn = function() {...}
• 函数声明会在代码执行前预加载(类似于变量提升)，而函数表达式不会

项目优化

• 减少HTTP请求数
• 减少DNS查询
• 使用CDN
• 避免重定向
• 图片懒加载
• 减少DOM元素数量
• 减少DOM操作
• 使用外部JS和CSS
• 压缩JS，CSS，字体，图片等
• 优化CSS精灵图
• 使用iconfont
• 多域名，分发划分内容到不同域名
• 尽量减少iframe使用
• 避免图片SRC为空
• 把样式表放在link中
• 把JS放在页面底部

jS垃圾回收

• 标记清除：当声明变量的时候，垃圾回收器将该变量进行了标记，该变量离开环境的时候，再度标记，随之进行删除
• 引用计数：这种方式容易引起内存泄漏，存在于低版本浏览器

补充题

let i
for (i = 0; i<=3; i++) {
    setTimeout(function() {
        console.log(i)	//4
    }, 0) 
}

let a = 100
function test() {
alert(a)	//100
a= 10
alert(a)	//10
}
test()
alert(a)	//10

这篇关于Web API等的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！