邢台建设企业网站,影视文化网站建设,网站建设吉金手指排名13,wordpress 显示文章标题这里写目录标题 页面性能测试工具测试指标 前端页面性能常见的问题前端页面性能优化常见策略及方案dns优化------预解析域名#xff08;异步进行#xff09;http请求优化减少请求次数同时多开持久连接 前面面试url从输入到确认搜索发生了什么js介绍new一个对象的过程#xf… 这里写目录标题 页面性能测试工具测试指标 前端页面性能常见的问题前端页面性能优化常见策略及方案dns优化------预解析域名异步进行http请求优化减少请求次数同时多开持久连接 前面面试url从输入到确认搜索发生了什么js介绍new一个对象的过程示例代码如下介绍一下this默认绑定隐式绑定显式绑定 介绍一下promiseclass继承的原理diff算法事件循环旧说法先执行微任务W3c新规范任务队列做了细分调用栈Call Stack事件队列 Task Queue 页面性能测试工具
lighthouse ----- Google内置
测试指标 webPageTest ----- 在线测试工具 可以选择服务器节点 Google ------ devTools
前端页面性能常见的问题
前端页面性能优化常见策略及方案
dns优化------预解析域名异步进行 http请求优化
减少请求次数
同时多开持久连接
Chrome支持同域名六个 多域名访问增加并行链接
http1.1默认就是长连接Connectionkeep-alive 请求头加入 Connection: close http1.1设置获取资源后断开连接 http1.1新增管道机制客户端可以同时发送多个请求并发请求响应不是并发串行 http2 没有响应串行限制
http2 多工 HTTP/2复用TCP连接,在-个连接里客户端和浏览器都可以同时发送多个请求或回应而且不用按照 顺序一-对应,这样就避免了队头堵塞。 这样双向的、实时的通信就叫做多工(Multiplexing)
前面面试
url从输入到确认搜索发生了什么
(1) 浏览器接收到URL 到网络请求线程的开启。 (2) 一个完整的HTTP请求并的发出。dns、tcp (3)服务器接收到请求并转到具体的处理后台。 (4)前后台之间的HTTP交互和涉及的缓存机制。 (5)浏览器接收到数据包后的关键渲染路径。 (6) JS引擎的解析过程.
1.用户输入URL会使用浏览器默认搜索引擎加上搜索内容合成url如果是域名会加上协议如https合成完整的url。
2.网络进程接收到url后先查找有没有缓存。有缓存直接返回缓存的资源。 没有缓存。进入真正的网络请求。
3.首先获取域名的IP系统会首先自动从hosts文件中寻找域名对应的 IP 地址一旦找到和服务器建立TCP连接如果没有找到则系统会将网址提交 DNS 域名解析服务器进行 IP 地址的解析。
4.利用IP地址和服务器建立TCP连接3次握手
5.建立连接后浏览器构建数据包包含请求行请求头请求正文并把该域名相关Cookie等数据附加到请求头然后向服务器发送请求消息。
6.服务器接收到消息后根据请求信息构建响应数据包括响应行响应头响应正文然后发送回网络进程。
7.数据传输完成TCP四次挥手断开连接。如果浏览器或者服务器在HTTP头部加上如下信息TCP就一直保持连接。保持TCP连接可以省下下次需要建立连接的时间提示资源加载速度Connection:Keep-Alive 。
8.网络进程将获取到的数据包进行解析根据响应头中的Content-type来判断响应数据的类型如果是字节流类型就将该请求交给下载管理器该导航流程结束不再进行如果是text/html类型就通知浏览器进程获取到文档准备渲染。
浏览器进程获取到通知之后。新建一个渲染进程。
渲染进程对文档进行页面解析和子资源加载。解析html生成DOM树解析CSSOM树。合并生成render tree 将每个节点的具体绘制方式转化到屏幕上的实际像素。
js介绍new一个对象的过程示例代码如下
function ClassA(){this.name 123
}
var p new ClassA();1、 创建空对象 var obj {}; 2、 设置新对象obj的constructor属性为构造函数的名称设置新对象obj的__proto__属性指向构造函数的prototype对象 obj.proto ClassA.prototype; 3、 使用新对象调用函数函数中的this被指向新实例对象 ClassA.call(obj); //通过 call()obj能够使用属于另一个对象的方法。 4、 将初始化完毕的obj返回赋给变量p
介绍一下this
默认绑定
默认绑定的字面意思就是不满足其他的绑定方式而执行的绑定规则。默认绑定会把this绑定到全局对象是一个危险的操作文章后面会说为什么 看代码
function foo(){var num2;this.numconsole.log(this.num)}var num0;foo()//1在foo方法的代码块中操作的是window.num
隐式绑定
函数被调用的位置有上下文或者是该函数的引用地址是不是被某个对象的属性引用并通过对象的属性直接运行该函数。如果出现上述的情况就会触发this的隐式绑定this就会被绑定成当前对象 看代码
function foo(){console.log(this.name)
}
var bar{name:shiny,foo:foo
}
bar.foo()//shiny显式绑定
call、apply绑定
介绍一下promise
class继承的原理
diff算法
事件循环
首先JavaScript是一门单线程的语言意味着同一时间内只能做一件事但是这并不意味着单线程就是阻塞而实现单线程非阻塞的方法就是事件循环。 JavaScript中的任务分为同步任务和异步任务 同步任务立即执行的任务同步任务一般会直接进入到主线程中执行 异步任务异步执行的任务比如ajax网络请求setTimeout定时函数等。异步任务进入任务队列。
旧说法先执行微任务
I/O、定时器、事件绑定、ajax等都是宏任务 Promise的then、catch、finally和process的nextTick都是微任务
W3c新规范任务队列做了细分
分为微队列、延时队列、交互队列等先执行微队列的任务依次是交互、延时。
调用栈Call Stack
是一种后进先出的数据结构。当一个脚本执行的时候js引擎会解析这段代码并将其中的同步代码按照执行顺序加入调用栈中然后从头开始执行。
事件队列 Task Queue
js引擎遇到一个异步事件后并不会一直等待其返回结果而是会将这个事件挂起(其他模块进行处理)继续执行执行栈中的其他任务。当一个异步事件返回结果后js会将这个事件加入到事件队列。
Google浏览器是多进程的
