bala001 - 博客园

浏览器中的页面： 28 | WebComponent：像搭积木一样构建Web应用

摘要：前言：该篇说明：请见说明 —— 浏览器工作原理与实践目录在上一篇文章中我们从技术演变的角度介绍了 PWA，这是一套集合了多种技术的理念，让浏览器渐进式适应设备端。今天我们要站在开发者和项目角度来聊聊 WebComponent，同样它也是一套技术的组合，能提供给开发者组件化开发的能力。那什么是阅读全文

posted @ 2021-05-06 16:35 bala001 阅读(357) 评论(0) 推荐(0)

浏览器中的页面： 27 | 渐进式网页应用（PWA）：它究竟解决了 Web 应用的哪些问题？

摘要：前言：该篇说明：请见说明 —— 浏览器工作原理与实践目录在专栏开篇词中，我们提到过浏览器的三大进化路线：第一个是应用程序 Web 化；第二个是 Web 应用移动化；第三个是 Web 操作系统化；其中，第二个 Web 应用移动化是 Google 梦寐以求而又一直在发力的一件事，不过对于移阅读全文

posted @ 2021-03-27 17:33 bala001 阅读(433) 评论(0) 推荐(0)

浏览器中的页面： 26 | 虚拟DOM：虚拟DOM和实际DOM有何不同？

摘要：前言：该篇说明：请见说明 —— 浏览器工作原理与实践目录虚拟 DOM 是最近非常火的技术，两大著名前端框架 React 和 Vue 都使用了虚拟 DOM，所以我觉得非常有必要结合浏览器的工作机制对虚拟 DOM 进行一次分析。当然了，React 和 Vue 框架本身所蕴含的知识点非常多，而且也不阅读全文

posted @ 2021-03-01 16:54 bala001 阅读(471) 评论(0) 推荐(0)

for...in 和 for...of 的区别

摘要： for...in 遍历对象的可枚举属性列表（包括 [[Prototype]] 链）。注意： 1. 遍历对象是无法直接获取属性值的，需要手动获取属性值 => 因为遍历的是对象中的所有可枚举属性。 2. for...in 最好只应用在对象上 => 遍历数组，有时会产生出人意料的结果。因为枚举属性可能不阅读全文

posted @ 2021-02-26 16:56 bala001 阅读(145) 评论(0) 推荐(0)

浏览器中的页面： 25 | 页面性能：如何系统地优化页面？

摘要：前言：该篇说明：请见说明 —— 浏览器工作原理与实践目录在前面几篇文章中，我们分析了页面加载和 DOM 生成，讨论了 JavaScript 和 CSS 是如何影响到 DOM 生成的，还结合渲染流水线来讲解了分层和合成机制，同时在这些文章里面，我们还穿插说明了很多优化页面性能的最佳实践策略。通过阅读全文

posted @ 2020-12-03 17:05 bala001 阅读(586) 评论(0) 推荐(0)

浏览器中的页面：24 | 分层和合成机制：为什么 CSS 动画比 JavaScript 高效？

摘要：前言：该篇说明：请见说明 —— 浏览器工作原理与实践目录在上一篇文章中我们分析了 CSS 和 JavaScript 是如何影响到 DOM 树生成的，今天我们继续沿着渲染流水线向下分析，来聊聊 DOM 树之后所发生的事情。在前面《05 | 渲染流程(上)：HTML、CSS 和 JavaScri 阅读全文

posted @ 2020-09-29 16:38 bala001 阅读(985) 评论(0) 推荐(1)

浏览器中的页面： 23 | 渲染流水线：CSS如何影响首次加载时的白屏时间？

摘要：前言：该篇说明：请见说明 —— 浏览器工作原理与实践目录在上一篇文章中我们详细介绍了 DOM 的生成过程，并结合具体例子分析了 JavaScript 是如何阻塞 DOM 生成的。那本文我们就继续深入聊聊渲染流水线中的 CSS。因为 CSS 是页面中非常重要的资源，它决定了页面最终显示出来的效果阅读全文

posted @ 2020-09-26 18:03 bala001 阅读(483) 评论(0) 推荐(0)

浏览器中的页面：22 | DOM树：JavaScript是如何影响DOM树构建的？

摘要：前言：该篇说明：请见说明 —— 浏览器工作原理与实践目录在上一篇文章中，我们通过开发者工具中的网络面板，介绍了网络请求过程的几种性能指标以及对页面加载的影响。而在渲染流水线中，后面的步骤都直接或者间接地依赖于 DOM 结构，所以本文我们就继续沿着网络数据流路径来介绍 DOM 树是怎么生成的。阅读全文

posted @ 2020-08-01 10:04 bala001 阅读(619) 评论(0) 推荐(0)

浏览器中的页面： 21 | Chrome开发者工具：利用网络面板做性能分析

摘要：前言：该篇说明：请见说明 —— 浏览器工作原理与实践目录浏览器中的页面循环系统”模块我们已经介绍完了，循环系统是页面的基础，理解了循环系统能让我们从本质上更好地理解页面的工作方式，加深我们对一些前端概念的理解。接下来我们就要进入新的模块了，也就是“浏览器中的页面”模块，正如专栏简介中所言，页阅读全文

posted @ 2020-08-01 09:37 bala001 阅读(866) 评论(0) 推荐(0)

Vue - SSR 服务端渲染学习笔记

摘要： 1、Vue 中可以进行分包，webpack 也可以使用 prerender-spa-plugin 轻松地添加预渲染，为什么还需要使用SSR？ Vue-Route 路由方式只有两种，一种是 hash，一种是 history，但是本身还是 spa模式，整个项目还是只当成只有一个页面，这对于浏览器爬虫来阅读全文

posted @ 2020-07-27 09:59 bala001 阅读(54) 评论(0) 推荐(0)