1.    什么是 DOMContentLoaded.打开 Chrome DevTools,切到 Network 面板,重新加载网页,得到如下截图: 标记 1 指向的蓝线以及标记 2 指向的蓝色字 “DOMContentLoaded:1.29s” 均表示 DOMContentLoaded 这个事件触发的时间,只不过表现形式不同而已.     什么是 DOMContentLoaded 我们先来思考一个问题,如何衡量一个网页的加载速度? 有人说可以用网页加载完全的时间来衡量.我觉得这没有问题,但不够…

对大多数 Web 应用来说,页面性能直接影响着流量.这是一个经常为我们所忽视的事实.用户长时间的等待流失的不仅仅是跳出率.转化率,还有对产品的耐心和信赖.很多时候我们没有意识到性能问题,那是因为平常开发使用的都是高效的设备和网络.而到了真实世界中却会发现,实际用户的网络环境会更加复杂,而如果使用的是移动设备的话,有限的计算能力也会拖慢代码的解析执行,这些都会影响页面的渲染效率. Web 应用的加载速度很大程度上取决于资源的大小,下面是 Youtube 桌面端页面通过 PageSpeed Insi…

问:类继承和原型继承不是同一回事儿吗,只是风格选择而已? 答:不是! 类继承和原型继承不论从本质上还是从语法上来说,都是两个截然不同的概念. 二者之间有着区分彼此的本质性特征.要完全看懂本文,你必须牢牢记住以下几点: 类继承中,实例继承自模版(类),并且创建子类关系.换言之,你不能像使用实例一样使用类.实例由类创建出来,并且能调用类的方法,但是你不能直接在类上调用本身的方法.你必须创建一个实例,然后在实例上应用那些方法. 原型继承中,实例继承自其他的实例.它们使用的是原型委托(将实例的原型对象指…

JSX的背后 这个过程一般在前端会称为“转译”,但其实“汇编”将是一个更精确的术语. React开发人员敦促你在编写组件时使用一种称为JSX的语法,混合了HTML和JavaScript.但浏览器对JSX及其语法毫无头绪,浏览器只能理解纯碎的JavaScript,所以JSX必须转换成JavaScript.这里是一个div的JSX代码,它有一个class name和一些内容: <div className='cn'>  Content!</div> 以上的代码,被转换成“正经”的Jav…

pushState/replaceState/popstate 解析 HTML5提供了对history栈中内容的操作.通过history.pushState/replaceState实现添加地址到history栈中. pushState/replaceState() 方法 pushState() 需要三个参数: 一个状态对象, 一个标题 (目前被忽略), 和 (可选的) 一个URL. 让我们来解释下这三个参数详细内容: 状态对象 — 状态对象state是一个JavaScript对象,通过push…

ECMAScript 新特性与标准提案 一:ES 模块 第一个要介绍的 ES 模块,由于历史上 JavaScript 没有提供模块系统,在远古时期我们常用多个 script 标签将代码进行人工隔离.但得益于浏览器和 Node.js 对于 ES 标准的讨论统一,现在我们可以在浏览器中直接书写 ES 模块语法.比如我们新建一个 lib.mjs 文件在其中导出一个函数,那么在 main.mjs 中我便可以直接导入使用它. // lib.mjsexport const repeat = (string)…

随着多终端.多平台.多业务形态.多技术选型等各方面的发展,前后端的数据交互,日益复杂. 同一份数据,可能以多种不同的形态和结构,在多种场景下被消费. 在理想情况下,这些复杂性可以全部由后端承担.前端只管从后端接口里,拿到已然整合完善的数据. 然而,不管是因为后端的领域模型,还是因为微服务架构.作为前端,我们感受到的是,后端提供的接口,越发不够前端友好.我们必须自行组合多个后端接口,才能获取到完整的数据结构. 面向领域模型的后端需求,跟面向页面呈现的前端需求,出现了不可调和的矛盾. 这种背景下,本…

简要的说,webview能够在移动应用中开辟出一个窗口,在里面显示html页面,css以及js代码也可以被解析执行,它使用的是我们熟悉的webkit内核.android和ios都有相应的API,所以写一份代码在多个平台运行的能力就是以webview为基础的. 在页面滚动的时候可以通过计算,动态remove节点,保证用户能看到的地方是有内容的,其他滚动卷去的部分就直接remove掉,等滚动回来的时候再加回来.这样保证页面上的节点不会太多,性能自然提升.我没有尝试这种方案,其中的注意事项也不好说.不…

DOM 的全称是 Document Object Model (文档对象模型) 响应式 UI const ThinkerWithHat = ({ hat }) => (  <div>    <Hat type={hat} />    <Thinker />  </div>); 注意,你只需定义你想要的 (戴帽子的思想者),并“连接”上数据 (“type = {hat}”) .当数据发生变化时 (用户选择一顶帽子),UI 会自动更新.…

组件 第一步是将 UI 分解成多个组件.例如,我们可以这样来拆分房子: 现在来编码! House:  <div>    <Roof />     // 房顶    <Wall />     // 墙    <Window />   // 窗    <Door />     // 门  </div> 等一下,怎么看起来这么像 HTML ?没错!React 的部分代码看上去就是非常像 HTML ,其实就是这样设计的,这是为了让 Web 设…