前端学习第八周-jQuery，BOM浏览器对象模型，Window浏览器窗口，url的编码解码

---

前言

本周主要敲了一些案例

---

一、 jQuery

1.什么意思：

简化DOM操作的函数工具库

2.为什么jQuery会出现？

1.原生api语法不够完善
2.api的兼容性较差

3.jQuery为什么现在不再使用？

1.原生api已经比较成熟
2.现在开发对浏览器的兼容性要求更低
3.现在开发的开发模式不再看重DOM操作，主要数据驱动视图

jQuery对象和DOM对象互不共用

jQuery核心特性：
对元素选择的封装
对获取元素进行隐式迭代
链式调用

二、BOM浏览器对象模型

常用：

window ->浏览器窗口
screen ->屏幕（主要用于移动端，监听方向）
history ->浏览历史记录
navigator(领航员) ->浏览器信息
Location ->地址栏

Document ->DOM->太多太重要所以被拎出去

△浏览器页面加载：

-正常情况：
从上到下解析HTML代码，边解析边加载
如果遇到script，暂停解析html，下载js，执行js
js执行结束，继续解析html

-遇到script标签的’defer’
从上到下解析HTML代码，边解析边加载
如果遇到script，继续解析html，并同时下载js
js下载结束，不立即执行，等待页面html解析结束，执行js

-async ->无法保证执行顺序
从上到下解析HTML代码，边解析边加载
如果遇到script，继续解析html，并同时下载js
js下载结束，立即执行js,html暂停解析，直到js执行结束

△浏览器页面渲染：

解析阶段：解析html，形成DOM树（不需要等待html代码从请求中全部获取）
解析阶段：解析css，形成CSSOM树
合成阶段：DOM+CSSOM ->render树（渲染树） //浏览器内部所做的事情
计算阶段：根据渲染树计算页面的布局显示
绘制阶段：将计算后的结果绘制到屏幕上

js控制修改页面

修改了影响布局的东西（宽高大小）：浏览器需要重新执行计算（重排，回流，重流）和绘制（重绘）步骤
修改不影响布局的样式（文字背景颜色）：浏览器需要重新执行绘制步骤

尽量减少重排，以优化性能：
1.避免逐项更改样式。最好一次性更改style属性，或者将样式列表定义为class并一次性更改class属性。
2.避免循环操作DOM。创建一个documentFragment或div，在它上面应用所有DOM操作，最后再把它添加到window.document。
也可以在一个display:none的元素上进行操作，最终把它显示出来。因为display:none上的DOM操作不会引发重排和重绘。
3.避免循环读取offsetLeft等属性。在循环之前把它们存起来。
4.绝对定位具有复杂动画的元素。绝对定位使它脱离文档刘，否则会引起父元素及后续元素大量的重排。
使用CSS3的transition也可以获得不错的性能。示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。

word-break:break-all;//强制换行
typeList.sort(() => Math.random() - .5); // 数组乱序
Math.floor(Math.random() * (max - min + 1) + min); //随机数；

大量数据：（性能优化）

• 分时加载：10000 -> 100
• 分页
• 虚拟列表：

Window浏览器窗口

全局对象->自己定义的方法属性
顶层对象->浏览器提供的方法属性
//自己定义的方法会覆盖掉系统自带的方法属性，如果想要再次生效，需要加上window.自己定义的属性
let,const定义的变量依然是全局对象的属性，但是不在window，在script对象
窗口控制：
● open
● close
● moveTo ->到什么情况
● moveBy ->做一定的操作
● resizeTo
● resizeBy
● △scrollTo
● △scrollBy
方法
getSelection():获取当前选中内容位置，以及光标所在位置信息//qq里面@人员

//setInterval 在页面切换至后台之后也会继续执行

△requestAnimataionFrame(fn) 告诉浏览器一个动画正在进行中，请求浏览器为下一个动画帧重新绘制窗口
目的：执行复杂动画操作
执行时机：在页面进行重绘之前进行执行
//切换页面后，页面不执行

requestIdLeCallback(fn) 启用在浏览器空闲期间对其任务调度
setImmediate(fn) 在浏览器完成其他繁重任务后执行一个函数

属性

devicePixelRatio 是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。
scrollTop
scrollLeft

事件

scroll
resize
screen:获取屏幕相关信息
orientation 屏幕方向
-type
partrait-priary 竖屏
landscape-primary 横屏
-onchange
监听屏幕方向

navigator:浏览器相关信息
geoLocation:地理位置
userAgent:浏览器标志字符串
history:浏览记录
back回退
forward前进
go跳转
pushState
replaceState

location:地址
ancestorOrigins:记录你的网页是否被嵌入了其他页面

属性：描述地址url的构成
● href：完整地址 location.href=newUrl; =>location.assign(newUrl);
● protocal:网络请求协议 http/https
● hostname:域名/ip(在网络中，利用ip寻址，如果使用域名，需要使用DNS服务先转换为ip，才能查询东西)
● port:端口号
● host:hostname+port 访问服务的具体位置
● origin:访问源，origin相同，为同源访问，不同为非同源访问（浏览器有限制）
● pathname:访问路径 ->用于服务判断用户的具体访问目的
● search:搜索字符串/查询参数，?key=value&key1=value1&key2=value2 ->解析search为对象，方便使用
● hash:hash字符串，#string ->用途：单页内容切换；锚点跳转
url=protocal+hastname+port+pathname+search?+hash?
方法：控制地址栏的行为
● reLoad 重载页面（刷新页面）
● assign 打开新页面（以前页面进入历史记录）
● replace 打开新页面（以前页面直接被替换），不产生历史记录

url的编码解码

encodeURI 编码
decodeURI 解码
encodeURICompoent 完全解码
decodeURIComponent 完全解码
转换键值对
法一

法二

法三

如果存在多个相同的属性

总结

。。