Java教程

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等的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!