古兰精

2021年5月11日

摘要：在上篇文章中我们从技术演变的角度介绍了 PWA，这是一套集合了多种技术的理念，让浏览器渐进式适应设备端。今天我们要站在开发者和项目角度来聊聊 WebComponent，同样它也是一套技术的组合，能提供给开发者组件化开发的能力。那什么是组件化呢？其实组件化并没有一个明确的定义，不过这里我们可以使用阅读全文

posted @ 2021-05-11 19:01 古兰精阅读(753) 评论(0) 推荐(0)

浏览器工作原理：渐进式网页应用PWA解决了 Web 应用的哪些问题

摘要：在专栏开篇词中，我们提到过浏览器的三大进化路线：第一个是应用程序 Web 化；第二个是 Web 应用移动化；第三个是 Web 操作系统化；其中，第二个 Web 应用移动化是 Google 梦寐以求而又一直在发力的一件事，不过对于移动设备来说，前有本地 APP，后有移动小程序，想要浏览器切入到阅读全文

posted @ 2021-05-11 10:11 古兰精阅读(335) 评论(0) 推荐(0)

2021年5月10日

浏览器工作原理：浅析浏览器中的页面 - 虚拟DOM与实际DOM有何不同

摘要：虚拟 DOM 是非常火的技术，两大著名前端框架 React 和 Vue 都使用了虚拟 DOM，所以我觉得非常有必要结合浏览器的工作机制对虚拟 DOM 进行一次分析。当然了，React 和 Vue 框架本身所蕴含的知识点非常多，而且也不是我们专栏的重点，所以在这里我们还是把重心聚焦在虚拟 DOM 上。阅读全文

posted @ 2021-05-10 18:37 古兰精阅读(414) 评论(0) 推荐(0)

浏览器工作原理：浅析浏览器中的页面 - 页面性能 - 如何系统的优化页面

摘要：在前面几篇文章中，我们分析了页面加载和 DOM 生成，讨论了 JavaScript 和 CSS 是如何影响到 DOM 生成的，还结合渲染流水线来讲解了分层和合成机制，同时在这些文章里面，我们还穿插说明了很多优化页面性能的最佳实践策略。通过这些知识点的学习，相信你已经知道渲染引擎是怎么绘制出帧的，不过阅读全文

posted @ 2021-05-10 15:36 古兰精阅读(613) 评论(0) 推荐(0)

浏览器工作原理：浅析浏览器中的页面 - 分层与合成机制 - CSS动画为什么比javascript高效

摘要：在前面的文章中我们分析了 CSS 和 JavaScript 是如何影响到 DOM 树生成的，今天我们继续沿着渲染流水线向下分析，来聊聊 DOM 树之后所发生的事情。在前面的文章《浏览器工作原理：浅析浏览器渲染进程 - HTML、CSS和JavaScript是如何变成页面的？（下）》中，我们介绍过阅读全文

posted @ 2021-05-10 14:33 古兰精阅读(1015) 评论(0) 推荐(1)

浏览器工作原理：浅析浏览器中的页面 - 渲染流水线 - CSS如何影响首次加载时的白屏时间

摘要：在上篇文章中我们详细介绍了 DOM 的生成过程，并结合具体例子分析了 JavaScript 是如何阻塞 DOM 生成的。那本文我们就继续深入聊聊渲染流水线中的 CSS。因为 CSS 是页面中非常重要的资源，它决定了页面最终显示出来的效果，并影响着用户对整个网站的第一体验。所以，搞清楚浏览器中的 CS 阅读全文

posted @ 2021-05-10 12:27 古兰精阅读(272) 评论(0) 推荐(0)

2021年5月8日

浏览器工作原理：浅析浏览器中的页面 - DOM树 - JS是如何影响DOM树构建的

摘要：在浏览器中的页面： 21 | Chrome开发者工具：利用网络面板做性能分析中，我们通过开发者工具中的网络面板，介绍了网络请求过程的几种性能指标以及对页面加载的影响。而在渲染流水线中，后面的步骤都直接或者间接地依赖于 DOM 结构，所以本文我们就继续沿着网络数据流路径来介绍 DOM 树是怎么生成的阅读全文

posted @ 2021-05-08 17:48 古兰精阅读(608) 评论(0) 推荐(0)

解决uniapp的websocket连接在web和安卓正常，iOS连接不上的问题

摘要：承接上篇（解决sockjs、stomp在uni-app端使用的坑）第3个问题：在安卓app上是可以正常建立链接的，但是在ios app上却不行。虽然不行，但还是需要解决。起初查百度，很多人说是nginx配置，或ssl证书问题，但是我试了，iOS还是不生效。那么web连接和安卓连接都没问题，那么说明阅读全文

posted @ 2021-05-08 12:10 古兰精阅读(8405) 评论(4) 推荐(0)

2021年5月7日

浏览器工作原理：浅析页面循环系统 - async/await原理解析 - 使用同步的方式写异步代码

摘要：在 Promise 原理解析中，我们介绍了怎么使用 Promise 来实现回调操作，使用 Promise 能很好地解决回调地狱的问题，但是这种方式充满了 Promise 的 then() 方法，如果处理流程比较复杂的话，那么整段代码将充斥着 then，语义化不明显，代码不能很好地表示执行流程。比如阅读全文

posted @ 2021-05-07 18:12 古兰精阅读(811) 评论(0) 推荐(0)

浏览器工作原理：浅析页面循环系统 - Promise原理解析

摘要：在上一篇文章中我们聊到了微任务是如何工作的，并介绍了 MutationObserver 是如何利用微任务来权衡性能和效率的。今天我们就接着来聊聊微任务的另外一个应用 Promise，DOM/BOM API 中新加入的 API 大多数都是建立在 Promise 上的，而且新的前端框架也使用了大量的 P 阅读全文

posted @ 2021-05-07 12:05 古兰精阅读(329) 评论(0) 推荐(0)

公告