Web API等

2022-04-09 21:34:54 阅读：122 来源： 互联网

标签：function Web const 函数 DOM timer API document

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

标签：function,Web,const,函数,DOM,timer,API,document
来源： https://www.cnblogs.com/19BigData/p/16123669.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9