打开tinyjpg.com或tinypng.com上传一张图片，通过Chrome DevTools分析Network发现其请求接口是web/shrink。...在事件钩子中通过webpack提供的API处理资源(可引入第三方模块扩展功能) 通过webpack提供的方法返回该资源 传给每个Plugin的Compiler和Compilation都是同一个引用，若修改它们身上的属性会影响后面的...从Webpack Compiler Hooks API文档中可发现，emit正是这个Plugin所需的事件钩子。emit在「生成资源到输出目录前执行」，此刻可获取所有图片文件的数据和输出路径。...webpack提供的API处理资源 通过compilation.assets获取全部打包文件的对象，筛选出jpg和png，使用map()将单个图片数据映射为this.compressImg(file)，...compressImg(assets, path) { ... } downloadImg(url) { ... } uploadImg(file) { ... } }; 通过webpack提供的方法返回该资源
当从客户端请求流中读取到数据时会触发data事件，当读取完客户端请求流中的数据时触发end事件。...：${result}`); }); // 结束本次请求 response.end(); } // 结束本次请求 response.end...，Node将数据直接发送到操作系统内核缓存区中，然后从该内核缓存区中取出数据发送给请求方；如果网速很慢或者数据量很大，Node通常会将数据缓存在内存中，在对方可以接受数据的情况下将内存中的数据通过操作系统内核缓存区发送给请求方...每次需要通过调用response.end()来结束响应。 ? 响应超时会触发timeout事件；response.end()方法调用之前，如果连接中断，会触发close事件。...注意：http.get()方法只能使用Get方式请求数据，且无需调用req.end()方法，Node.js会自动调用。
存量用户运营”用户端小程序“需要达到的指标： 首屏时间不超过 2.5 秒。 setData 的数据量不超过 100kb。 所有网络请求都在 1 秒内返回结果。 组件滑动、长列表滚动无卡顿感。...在此阶段，主包内的所有页面 JS 文件及其依赖文件都会被自动执行。 在页面注册过程中，基础库会调用页面 JS 文件的 Page 构造器方法，来记录页面的基础信息（包括初始数据、方法等）。 4....影响白屏的两个因素： 网络资源加载时间。 渲染时间。 方案1：启用本地缓存。 将请求接口中获取到的数据存储在storage里面，部分数据不需要每次发送http请求获取。 方案2：跳转页面时预拉取。...从逻辑层到视图层的初始数据通信。 视图层根据逻辑层的数据，结合 WXML 片段构建出节点树（包括节点属性、事件绑定等信息），最终与 WXSS 结合完成页面渲染。...组件节点支持附加自定义数据 dataset，当用户事件被触发时，视图层会把事件 target 和 dataset 数据传输给逻辑层。
前端性能监控指标 前端性能统计的数据大致有以下几个： 白屏时间：从打开网站到有内容渲染出来的时间节点； 首屏时间：首屏内容渲染完毕的时间节点； 用户可操作时间节点：domready触发节点； 总下载时间...2.1.3 可操作时间 用户可操作的时间节点即dom ready触发的时间，使用jquery可以通过$(document).ready()获取此数据，如果不使用jQuery可以参考这里通过原生方法实现dom...和unloadEventEnd：如果前一个文档和请求的文档是同一个域的，则unloadEventStart和unloadEventEnd分别代表浏览器unload前一个文档的开始和结束时间节点。...：html文档完全解析完毕的时间节点； loadEventStart和loadEventEnd分别代表onload事件触发和结束的时间节点 2.2.2 计算性能指标 可以使用Navigation.timing...这里我们只介绍performance.getEntries方法，它可以获取页面中每个静态资源的请求，如下： ?
请求主体（其他参数） 其中需要注意的点：浏览器只能发送 GET、POST 方法，而打开网页使用的是 GET 方法 2....② 预解析（pre-parsing） 预解析做的事情是提前加载资源，减少处理时间，它会识别一些会请求资源的属性，比如img标签的src属性，并将这个请求加到请求队列中。...所有我们知道： CSS 会阻塞 JS 执行 JS 会阻塞后面的 DOM 解析 为了避免这种情况，应该以下原则： CSS 资源排在 JavaScript 资源前面 JS 放在 HTML 最底部，也就是 <...执行 JS 线程 虽然 JS 是单线程的，但实际上参与工作的线程一共有四个： 其中三个只是协助，只有 JS 引擎线程是真正执行的 其中三个只是协助，只有 JS 引擎线程是真正执行的 JS 引擎线程：也叫...JS 内核，负责解析执行 JS 脚本程序的主线程，例如 V8 引擎事件触发线程：属于浏览器内核线程，主要用于控制事件，例如鼠标、键盘等，当事件被触发时，就会把事件的处理函数推进事件队列，等待 JS 引擎线程执行定时器触发线程
请求主体（其他参数） 其中需要注意的点： 浏览器只能发送 GET、POST 方法，而打开网页使用的是 GET 方法 2....预解析（pre-parsing） 预解析做的事情是提前加载资源，减少处理时间，它会识别一些会请求资源的属性，比如img标签的src属性，并将这个请求加到请求队列中。 3....所有我们知道： CSS 会阻塞 JS 执行 JS 会阻塞后面的 DOM 解析 为了避免这种情况，应该以下原则： CSS 资源排在 JavaScript 资源前面 JS 放在 HTML 最底部，也就是 <...虽然 JS 是单线程的，但实际上参与工作的线程一共有四个： 其中三个只是协助，只有 JS 引擎线程是真正执行的 JS 引擎线程：也叫 JS 内核，负责解析执行 JS 脚本程序的主线程，例如 V8 引擎...事件触发线程：属于浏览器内核线程，主要用于控制事件，例如鼠标、键盘等，当事件被触发时，就会把事件的处理函数推进事件队列，等待 JS 引擎线程执行 定时器触发线程：主要控制setInterval和setTimeout
职责还是负责与用户的交互，考虑性能、资源方面的优化，全栈是每个前端程序员的梦想。 14：js 基本数据类型 光知道基本数据，如果能扩展，就更好了，比如引用数据类型和非引用数据类型，就是常说的堆和栈。...、Python 等，找到对应的请求处理; 7、处理结束回馈报头，此处如果浏览器访问过，缓存上有对应资源，会与服务器最后修改时间对比，一致则返回304; 8、浏览器开始下载html文档(响应报头，状态码200...简洁版： 浏览器根据请求的URL交给DNS域名解析，找到真实IP，向服务器发起请求； 服务器交给后台处理完成后返回数据，浏览器接收文件（HTML、JS、CSS、图象等）； 浏览器对加载到的资源（HTML...、JS、CSS等）进行语法解析，建立相应的内部数据结构（如HTML的DOM）； 载入解析到的资源文件，渲染页面，完成。...Range请求头字段，在当前请求资源范围内没有range指示值，请求也不包含If-Range请求头字段 417——服务器不满足请求Expect头字段指定的期望值，如果是代理服务器，可能是下一级服务器不能满足请求长
请求主体（其他参数） 其中需要注意的点： 浏览器只能发送 GET、POST 方法，而打开网页使用的是 GET 方法 2....② 预解析（pre-parsing） 预解析做的事情是提前加载资源，减少处理时间，它会识别一些会请求资源的属性，比如img标签的src属性，并将这个请求加到请求队列中。...所有我们知道： CSS 会阻塞 JS 执行 JS 会阻塞后面的 DOM 解析 为了避免这种情况，应该以下原则： CSS 资源排在 JavaScript 资源前面 JS 放在 HTML 最底部，也就是 <...虽然 JS 是单线程的，但实际上参与工作的线程一共有四个： “其中三个只是协助，只有 JS 引擎线程是真正执行的 ” JS 引擎线程：也叫 JS 内核，负责解析执行 JS 脚本程序的主线程，例如 V8...引擎 事件触发线程：属于浏览器内核线程，主要用于控制事件，例如鼠标、键盘等，当事件被触发时，就会把事件的处理函数推进事件队列，等待 JS 引擎线程执行 定时器触发线程：主要控制setInterval和setTimeout
请求主体（其他参数） 其中需要注意的点： 浏览器只能发送 GET、POST 方法，而打开网页使用的是 GET 方法 2....② 预解析（pre-parsing） 预解析做的事情是提前加载资源，减少处理时间，它会识别一些会请求资源的属性，比如img标签的src属性，并将这个请求加到请求队列中。...所有我们知道： CSS 会阻塞 JS 执行 JS 会阻塞后面的 DOM 解析 为了避免这种情况，应该以下原则： CSS 资源排在 JavaScript 资源前面 JS 放在 HTML 最底部，也就是 <...执行 JS 线程 虽然 JS 是单线程的，但实际上参与工作的线程一共有四个： “其中三个只是协助，只有 JS 引擎线程是真正执行的 ” JS 引擎线程：也叫 JS 内核，负责解析执行 JS 脚本程序的主线程...，例如 V8 引擎 事件触发线程：属于浏览器内核线程，主要用于控制事件，例如鼠标、键盘等，当事件被触发时，就会把事件的处理函数推进事件队列，等待 JS 引擎线程执行 定时器触发线程：主要控制setInterval
目前 chrome 还是没有这项功能的，Edge 打开位置：控制台打开状态 => Esc打开抽屉 => ···选择 3D 视图面板 DOM 断点 可以监听到 DOM 节点的变更(子节点变动/属性变更/元素移除...对于上图来说就是55ms 第一行的时间代表了所有项目：例如解析 dns，建立连接，等待服务器返回数据，传输数据等 第二行的时间是 总时间 - 数据传输的时间 从上面的分析中我们看到 从客户端请求到服务器处理结束准备返回数据花了...HTTP1.0/1.1 协议限定单个域名的请求并发量是 6 个，即 Finish 是所有请求（不只是 XHR 请求，还包括 DOC，img，js，css 等资源的请求）在并发量为 6 的限制下完成的时间...回过来看下问题原因： 页面请求完新数据后直接 pageNum 自增，然后直接就用于是否结束的判断了，有点不够严谨，不如直接比对当前的列表长度与接口返回的数据总数来判断: ?...DOM 节点进行截图时，可能需要使用其他工具操作好久，使用控制台可以直接选中想要截图的节点，打开 Command 菜单并且使用 节点截图 就可以了 截取特定节点： Screenshot Capture
下页面都会请求 业务应用内基础资源（base-css、base-js），routeA路由下子页面都会请求 页面级资源（page-css、page-js），routeA路由下的页面C才需要，同是routeA...如果是子页面资源的请求，则使用精简后的模板，其中去除了跨业务共用资源引用，这些资源只需首屏加载即可。...内联脚本 我们子页面依赖的 scripts资源中还存在内联脚本的情况，同样存在与模板相似的问题。且内联脚本中的 js代码各种字符都可能存在，一味的转义处理不当可能就会造成数据或执行错误。...但由于我们的部分页面为了提高首屏打开速度，会将一些依赖的全局数据塞到一个内联脚本中作为 window变量进行初始化，而 import-html-entry内部使用了正则表达式进行 style、 link...RouteMonitor在跳转前会调用该钩子，如果其返回false，则通过 window.location.href打开该链接不走单页模式。
另外相对于线程，进程之间是不共享资源和地址空间的，所以不会存在太多的安全问题，而由于多个线程共享着相同的地址空间和资源，所以会存在线程之间有可能会恶意修改或者获取非授权数据等复杂的安全问题。...这些事件可以是当前执行的代码块如定时任务、也可来自浏览器内核的其他线程如鼠标点击、AJAX异步请求等，但由于JS的单线程关系所有这些事件都得排队等待JS引擎处理。 5....异步http请求线程 在XMLHttpRequest在连接后是通过浏览器新开一个线程请求，将检测到状态变更时，如果设置有回调函数，异步线程就产生状态变更事件放到JS引擎的处理队列中等待处理。 2....渲染过程 2.1 渲染流程 用户请求的HTML文本(text/html)通过浏览器的网络层到达渲染引擎后，渲染工作开始。每次通常渲染不会超过8K的数据块，其中基础的渲染流程图： ?...在绘制(painting)阶段，渲染引擎会遍历Render树，并调用renderer的 paint() 方法，将renderer的内容显示在屏幕上。绘制工作是使用UI后端组件完成的。 5.
requestStart 代表浏览器发起请求的时间节点，请求的方式可以是服务器，缓存，本地资源。...domComplete Html文档完全解析完成的时间节点为什么使用Image对象.gif文件上报防止跨域 只要能上报数据，无论是请求GIF文件还是请求其他普通文件(JS)或者是请求接口，服务器端其实并不关心具体的上报方式...但是图片的src属性并不会跨域，并且同样可以发起请求防止阻塞页面加载，影响用户体验 通常，创建资源节点后只有将对象注入到浏览器DOM树后，浏览器才会实际发送资源请求。...反复操作DOM不仅会引发性能问题，而且载入js/css资源还会阻塞页面渲染，影响用户体验。 但是图片请求例外。...构造图片打点不仅不用插入DOM，只要在js中new出Image对象就能发起请求，而且还没有阻塞问题，在没有js的浏览器环境中也能通过img标签正常打点，这是其他类型的资源请求所做不到的相比PNG/JPG
JS基本的数据类型和引用类型 基本数据类型：number、string、null、undefined、boolean、symbol -- 栈 引用数据类型：object、array、function -...- 堆 两种数据类型存储位置不同 原始数据类型是直接存储在栈(stack)中的简单数据段，占据空间小、大小固定，属于被频繁使用数据； 引用数据类型存储在堆(heap)中的对象，占据空间大、大小不固定，如果存储在栈中...Range请求头字段，在当前请求资源范围内没有range指示值，请求也不包含If-Range请求头字段 417——服务器不满足请求Expect头字段指定的期望值，如果是代理服务器，可能是下一级服务器不能满足请求长...，DOM书和渲染树的区别 浏览器渲染过程： 解析HTML构建DOM，并行请求css、image、js css文件下载完成，开始构建CSSOM（CSS树） CSSOM构建结束后，和DOM一起生成Render...该DOM上的事件如果被触发，会执行两次（执行次数等于绑定次数） 如果该DOM是目标元素，则按事件绑定顺序执行，不区分冒泡/捕获 如果该DOM是处于事件流中的非目标元素，则先执行捕获，后执行冒泡 13.
---- WebWorker ❝JavaScript 环境实际上是运行在操作系统(OS)中的「虚拟环境」 ❞ 在浏览器中每打开一个页面，就会分配一个它「自己的环境」:即每个页面都有自己的内存、事件循环、...拦截 fetch 事件 ❝服务工作线程「最重要」的一个特性就是「拦截网络请求」 ❞ 服务工作线程作用域中的「网络请求会注册为 fetch 事件」。...让服务工作线程能够决定如何处理 fetch 事件的方法是 event.respondWith()。该方法接收Promise，该Promise会解决为一个 Response 对象。...，先去缓存里面取将取数据，如果没有的话，再向服务器发起请求 CDN 通过在网络各处放置节点服务器，构造一个「智能虚拟网络」。...❞ 如果不处理检索到的数据，也不将其存储在系统中，则可以直接请求资源。为此，可以使用JSONP或跨来源资源共享(CORS)进行数据获取。
引擎线程 事件触发线程 定时触发线程 异步http请求线程 渲染进程的各个线程之间关系及配合 之前写的一篇帖子 「硬核JS」一次搞懂JS运行机制 - 传送门 里有介绍到，下面我们还是重新来一遍吧，花不了多长时间...，导致页面渲染加载阻塞(就是加载慢) 例如浏览器渲染的时候遇到``标签，就会停止GUI的渲染，然后js引擎线程开始工作，执行里面的js代码，等js执行完毕，js引擎线程停止工作，GUI继续渲染下面的内容...，也可来自浏览器内核的其他线程，如鼠标点击、AJAX异步请求等)，会走事件触发线程将对应的事件添加到对应的线程中(比如定时器操作，便把定时器事件添加到定时器线程)，等异步事件有了结果，便把他们的回调操作添加到事件队列...在连接后是通过浏览器新开一个线程请求 将检测到状态变更时，如果设置有回调函数，异步线程就产生状态变更事件，将这个回调再放入事件队列中再由JavaScript引擎执行 简单说就是当执行到一个http异步请求时...，就把异步请求事件添加到异步请求线程，等收到响应 (准确来说应该是http状态变化)，再把回调函数添加到事件队列，等待js引擎线程来执行 了解了上面这些基础后，接下来我们开始进入今天的正题，输入URL拿到资源之后
解析过程 获取请求文档的内容后，呈现引擎将开始解析 HTML 文档，并将各标记逐个转化成“内容树”上的 DOM 节点。 解析外部 CSS以及style元素中的样式数据形成呈现树。...初始状态是数据状态。遇到字符 字符，接收到将会进入“标记打开状态”。...展示层将框架创建工作委托FrameConstructor，由该构造器解析样式并创建frame。 WebKit：解析样式和创建呈现器的过程称为“附加”。每个 DOM 节点都有一个“attach”方法。...所有的呈现器都有一个“layout”或者“reflow”方法，每一个呈现器都会调用其需要进行布局的子代的 layout 方法。任何有可能改变元素位置或大小的样式都会触发这个Layout事件。...所以此时虽然对后台有请求但不解码 文档解析完毕，document.readyState = 'interactive' 此时带有defer的js开始按顺序执行 DOMContentLoaded触发，程序从同步脚本执行转化为事件驱动阶段
-end，当前网页 DOMContentLoaded 事件触发结束的时间，网页内部所有资源加载完毕，包括 JS 执行完毕 4、文档解析相关 domLoading 当前网页 开始解析 DOM 结构的时间...计算相关节点 上面我们介绍了这么多属性，那我们到底要怎么使用他们去得到我们想要的数据呢？...5performance.getEntries() 这也是一个方法，返回一个数组 浏览器在获取网页时，网页中的每一个资源都会发起一个 http 请求，包括图片，JS，CSS 文件等 而 这个方法则会捕捉到这些所有的请求信息...你看其中也包含了和 performance.timing 一样 密密麻麻各种节点的时间信息，包括发起请求，连接时间等等 我们主要看看其中五个属性 name，资源的名称 startTime，开始加载资源的时间...一般值 是 resource，像是 css 文件，js 脚本，img，http 请求 ，他们的资源类型都是 resource ?
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
