性能知识点题

1.在浏览器中输入 URL 并回车后都发生了什么？

分析 https://www.baidu.com

• url:统一资源定位符
• https:传输协议
• www:服务器
• baidu.com:域名

a.解析 url，获取 ip 地址（通过域名获取 ip 地址，是存储在 DNS 域名系统） b.建立 TCP 连接（三次握手） c.传输数据，渲染页面(html,css,js) d.断开链接（四次挥手）

2.浏览器的渲染流程

1、html 生成 dom 树(Dom Tree) 2、css 生成样式结构体 3、由 Dom Tree 和样式结构体 构成 呈现树（Render Tree） 4、在 呈现树（Render Tree） 计算节点信息通过 UI 引擎 渲染绘制页面

3.css 的加载会造成哪些阻塞？

1、会造成 dom 渲染的阻塞，因为 dom 渲染是通过 dom tree 和 css 结构体一起构建的 2、不会造成 dom tree 构建阻塞，因为 dom tree 的渲染是通过 html 生成的 3、会阻塞 js 的执行：如果不阻塞 js 的执行，会造成不可控的结果 ，css 的渲染是通过 GUI 线程， 和 js 引擎是互斥的 ，并且 js 引擎一定是在 GUI 线程后面执行。

4.前端如何一次性渲染十万条数据页面不卡顿？

1、分页 => 10w/200 2、文档碎片：文档碎片就是虚拟的 dom,dom 元素加载多少个子元素就会被渲染多少次，通过文档碎片将子元素添加到缓存创建虚拟 dom 然后一次性将子元素渲染到 dom 元素上，减少了 dom 元素的渲染次数 3、requsetAnimationFrame:结合文档碎片进行 dom 元素渲染 4、虚拟滚动:根据视口的高度计算展示在屏幕上的数据数再根据滚动去加载不同的数据，也是类似分页的功能。

5.DNS 的查找过程

1、浏览器缓存：首先搜索浏览器的自身 DNS 缓存（缓存时间比较短，大概只有一分钟，且只能容纳 1000 条数据），看自身的缓存中是否有域名的对应条目，而且没有过期，如果没有过期解析到此结束。 2、系统缓存：如果浏览器自身缓存里没有找到对应的条目，那么浏览器会搜索自身操作系统的 DNS 缓存，如果找到没有过期，那么就会停止搜索解析到此结束。 3、路由缓存：如果系统也没有搜索到，就会向路由器发送查询请求。 4、ISP（互联网服务提供商）DNS 缓存，如果系统也没有搜索到，就会向路由器发送查询请求。

6.回流和重绘

1、改变 dom 元素的大小，位置，删除和增加会引起回流 2、只改变 dom 元素的颜色边框等样式会引起重绘。