本文主要是介绍Web API等,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
attr 和 prop
- property:修改对象属性,不会体现到html结构中
- attribute:修改html属性,会改变html结构
- 都有可能引起DOM重新渲染,最好用property
一次插入多个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接口;增加验证,例如密码,指纹等
纯函数
- 不改变原数组(没有副作用),返回一个新数组
- 非纯函数: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等的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!