21 | Chrome开发者工具：利用网络面板做性能分析 页面是浏览器的核心，浏览器中的所有功能都是服务于页面的，Chrome开发者工具又是调试页面的核心工具。 网络面板 控制器 开始或停止抓包 全局搜索 禁止从cache中加载资源 模拟网络 过滤器 抓图信息：Capture screenshots 详细列表：重点内容 下载信息概要 DOMContentLoaded:页面已经构建好DOM，所需要的HTML、CSS和JS文件都已经下载完成 Load:浏览器已经加载了所有的资源(图片、样式表等) 详
1. 请减少HTTP请求 基本原理： 在浏览器(客户端)和服务器发生通信时，就已经消耗了大量的时间，尤其是在网络情况比较糟糕的时候，这个问题尤其的突出。 一个正常HTTP请求的流程简述：如在浏览器中输入"www.xxxxxx.com"并按下回车，浏览器再与这个URL指向的服务器建立连接，然后浏览器才能向服务器发送请求信息，服务器在接受到请求的信息后再返回相应的信息，浏览器接收到来自服务器的应答信息后，对这些数据解释执行。 而当我们请求的网页文件中有很多图片、CSS、JS甚至音乐等信息时，将
在浏览器(客户端)和服务器发生通信时，就已经消耗了大量的时间，尤其是在网络情况比较糟糕的时候，这个问题尤其的突出。
node类型是DOMLevel 1中定义的，除了ie浏览器所有的浏览器都可以访问这个类型，在js中，所有的节点类型都继承node类型。
DOM 是 W3C（万维网联盟）的标准。 DOM 定义了访问 HTML 和 XML 文档的标准： “W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。” W3C DOM 标准被分为 3 个不同的部分： 核心 DOM - 针对任何结构化文档的标准模型 XML DOM - 针对 XML 文档的标准模型 HTML DOM - 针对 HTML 文档的标准模型 HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。 换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。
本文主要介绍一下什么是reflow,repaint, 怎样避免它们造成的不良影响, 怎么通过工具查看分析它们. 一.首先对浏览器渲染引擎下网页呈现过程简要说一下: 浏览器的渲染引擎开始解析html构建成DOM树，DOM树是以document对象为根节点，包含所有的html标签， 包括display： none隐藏的，也包括js动态添加的元素。 解析html的同时， 将css文件或者样式元素中的样式解析成CSS Rule Tree，解析时会去掉浏览器不能识别的样式。 根据DOM树和CSSOM来构造Ren
页面渲染 1.在渲染层，宿主环境会把WXML可以先转成JS对象，然后再渲染出真正的Dom树。 2.在逻辑层发生数据变更的时候，需要通过宿主环境提供的setData方法把数据从逻辑层传递到渲染层 3.对比前后差异，把差异应用在原来的Dom树上，渲染出正确的UI界面
简单地说，断点调试是指自己在程序的某一行设置一个断点，调试时，程序运行到这一行就会停住，然后你可以一步一步往下调试，调试过程中可以看各个变量当前的值，出错的话，调试到出错的代码行即显示错误，停下。
data-* 全局属性 是一类被称为自定义数据属性的属性，它赋予我们在所有 HTML 元素上嵌入自定义数据属性的能力，并可以通过脚本(一般指JavaScript) 与 HTML 之间进行专有数据的交换。
Ajax 即” Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。
JSON作为目前Web主流的数据交换格式，是每个IT技术人员都必须要了解的一种数据交换格式。尤其是在Ajax和REST技术的大行其道的当今，JSON无疑成为了数据交换格式的首选！
现代互联网应用大都由运行在服务器的后端程序和运行在各种终端设备的前端程序共同构成。
今天，我们继续「前端面试」的知识点。我们来谈谈关于「浏览器」的相关知识点和具体的算法。
浏览器要将URL解析为IP地址，解析域名就要用到DNS协议，首先主机会查询DNS的缓存，如果没有就给本地DNS发送查询请求。DNS查询分为两种方式，一种是递归查询，一种是迭代查询。如果是迭代查询，本地的DNS服务器，向根域名服务器发送查询请求，根域名服务器告知该域名的一级域名服务器，然后本地服务器给该一级域名服务器发送查询请求，然后依次类推直到查询到该域名的IP地址。DNS服务器是基于UDP的，因此会用到UDP协议。
前端优化是一个大的课题，需要花好多时间才能理解，之前对前端优化陆陆续续有一些了解。所以这次从渲染优化，打包优化，代码优化做了一个系统的总结，并且引申出了几个需要关注的问题，文章可能有点长，大家一定要看到最后。最后写作不易，希望觉得还可以的话，帮忙点赞一波，提前感谢了。当然如果有写不好的地方，也请指出来，我会积极改进，共同成长。
全局刷新: 使用form,href等发起的请求是全局刷新.用户发起请求,视图改变了,跳转视图,使用新的数据添加到页面
在聊渲染更新之前，我们不能忽视的一个概念是——React是JavaScript代码。
最初，js-framework-benchmark 这个项目，如同名称含义，仅是评测 js 生态的框架性能的。后来，作者增加了 Rust 实现的 WebAssembly 库和框架，如 wasm-bindgen、stdweb、yew，以及 seed 等的评测。
9、 XMLHttpRequest对象在IE和Firefox中创建方式有没有不同。
前言 随着公有云产品的快速发展，产品线越来越多，功能越来越丰富。但在业务发展的同时，原有的前后端一体的开发模式与架构已经呈现出捉襟见肘的状况。为了能够更好地服务客户，提高产品交付效率，公有云产品组进行了前后端分离工作的探索与实践。在过去的几个月，已经成功实现多个产品的前后端分离交付，一方面提高了产品开发效率，另一方面，也更加明确了前后端开发工程师的职责，使得前后端开发工程师能够更专注于自身领域的技能提升。在本文中，我们主要介绍为什么要做前后端分离以及如何做前后端分离，具体的技术实践我们将在下一篇中介绍。
上一篇面的【腾讯一面】过了，接着第二天就开始二面了，后面基本上从简单的基础算法问的比较多，还有vue，typescript等等。
由于小程序的开发起来比较原始复杂且繁琐，跟我们主流的开发方式差距很大，所以为了提高我们开发小程序的效率，市面上出现过很多的小程序的框架：mpvue，Taro，uni-app 等等，这些框架或多或少地将我们带到现代化的开发方式中来，他们可以让你使用 React 或者 Vue 来开发小程序。今天就分享一个如何利用 Vue 3.0 来构建一个小程序的框架。
CSS对于呈现页面至关重要 - 在找到，下载和解析所有CSS之前，浏览器不会开始呈现 - 因此我们必须尽可能快地将其加载到用户的设备上。 关键路径上的任何延迟都会影响我们的“开始渲染”并让用户看到空白屏幕。
和一些前端框架打过交道，想起来这也是技术选型中经常面对的内容。我把我的经验、思考、感受，甚至是吐槽，记录在这里，有些零散，并且更多的是个人的感悟。而且由于技术所限，可能部分内容不够深入，或者不甚客观。当然，网上有很多分析对比，视角可能更为全面和系统。如果你在技术选型，或者在考虑要学习使用哪一款 MVC／MVP／MVVM 框架的时候，此文能够给你有价值的信息，就更棒了。如果你觉得我哪些部分说得不正确，或者需要补充，也烦请告知。
网站前端的用户体验，决定了用户是否想要继续使用网站以及网站的其他功能，网站的用户体验佳，可留住更多的用户。除此之外，前端优化得好，还可以为企业节约成本。那么我们应该如何对我们前端的页面进行性能优化呢？
本来呢，最近在规划一篇关于浏览器的文章，但是在做文章架构梳理和相关资料查询的时候，发现「浏览器在渲染页面」的过程中，也别有洞天。索性，就单独将其作为一篇文章来写。
设计模式就是经过前人无数次的实践总结出的，设计过程中可以反复使用的、可以解决特定问题的设计方法。 单例(饱汉模式、饥汉模式) 1、构造方法私有化，让出了自己类中能创建外其他地方都不能创建 2、在自己的类中创建一个单实例（饱汉模式是一出来就创建创建单实例，而饥汉模式需要的时候才创建） 3、提供一个方法获取该实例对象(创建时需要进行方法同步) 工厂模式:Spring IOC就是使用了工厂模式. 对象的创建交给一个工厂去创建。 代理模式:Spring AOP就是使用的动态代理。
大家都知道，JavaScript是单线程的，也就是说，所有的任务只能在一个线程上完成，一次只能做一件事。前面的任务如果没有完成，后面就只能等着。所以，HTML5就提出了web Worker标准，表示JavaScript允许有多个线程，但是子线程完全受主线程的控制，并且子线程不能操作DOM，只有主线程可以操作DOM。所以 Web Worker 的最佳使用场景是执行一些开销较大的数据处理或计算任务，接下来我们就来具体的了解一下这个东西吧~
Javascript 框架以及 HTML 和 CSS 已成为每个现代软件项目前端开发的重要组成部分。2020 年将会是为你的 Web 项目选择正确的 javascript 框架的又一个年头。
1. 定义介绍 1.1 XML定义 扩展标记语言 (Extensible Markup Language, XML) ，用于标记电子文件使其具有结构性的标记语言，可以用来标记数据、定义数据类型，是一种允许用户对自己的标记语言进行定义的源语言。 XML使用DTD(document type definition)文档类型定义来组织数据;格式统一，跨平台和语言，早已成为业界公认的标准。 XML是标准通用标记语言 (SGML) 的子集，非常适合 Web 传输。XML 提供统一的方法来描述和交换独立于应
js是一种基于对象和事件驱动的并具有相对安全性的客户端脚本语言。也是一种广泛用于web客户端开发的脚本语言，常用来给html网页添加动态功能，如响应用户的各种操作。想了解更多加群1075083208主要的目的是为了解决服务器端语言遗留的速度问题，为客户提供更流畅的浏览效果。
xml是extensible markup language可扩展标记语言 是另外一种带格式标准的标记语言 可以用来 以文件形式共享 和 处理数据 它定义了一组规则，用以以人类可读和机器可读的格式对文档进行编码 他非常适合万维网传输 提供统一方法来表述和交换独立于应用程序或供应商的结构化数据
作为前端开发，我们平常跟浏览器打交道的时间也是最多的。在前端面试中，一个较为经典的问题：在浏览器地址中输入url地址，敲回车，发生了什么？浏览器究竟做了什么？相信很多人脑海里都会出现个大概的轮廓，可是一到细化具体的过程就答不上来。那么，作为前端开发者，应该从哪些方面延伸来回答这个问题呢？
如期而至，我独立开发的 JavaScript 框架 Strve.js 迎来了一个大版本5.6.2。此次版本距离上次大版本发布已经接近半年之多，为什么这么长时间没有发布新的大版本呢？主要是研究 Strve.js 如何支持单文件组件，使代码智能提示、代码格式化方面更加友好。之前也发布了 Strve SFC，但是由于其语法规则的繁琐以及是在运行时编译的种种原因，我果断放弃了这个方案的继续研究。而这次的版本5.6.2成功解决了代码智能提示、代码格式化方面友好的问题，另外还增加了很多锦上添花的特性，这些都归功于我们这次版本成功支持JSX语法。熟悉React的朋友知道，JSX语法非常灵活。 而 Strve.js 一大特性也就是灵活操作代码块，这里的代码块我们可以理解成函数，而JSX语法在一定场景下也恰恰满足了我们这种需求。
我叫王小闰（花名，圈里人都叫我土哥），非科班出身，野生前端从业者，在小公司打杂三年后，意外地拿到了美团的offer，成功跳槽到了美团外卖事业部。
jQuery 是一个 JavaScript 库，jQuery 极大地简化了 JavaScript 编程，我们常用jQuery来处理Dom\事件\动画\AJAX
UTF8 是(UNICODE八位交换格式）的简称，UNICODE是国际标准，也是ISO标准10646的等价标准。
最近把博客从 Typecho 搬到了 Next.js + Vercel 驱动、Notion 为 CMS 的架构（使用 nobelium 搭建），其中评论区转到了 cusdis 作为后端。原博客有文章 112 篇，评论总量大约 1.2k 条，文章迁移手动操作还行，但评论数据的迁移经历了一些小坎坷，断断续续花了两个周末才弄完，也写一写其中踩过的坑，还有一些小小的心得。
entry与output，顾名思义，就是打包的入口与输出，其实之前我们已经接触了这两个参数，下面详细介绍一下这两个参数的配置。
前言：调试技巧，在任何一项技术研发中都可谓是必不可少的技能。掌握各种调试技巧，必定能在工作中起到事半功倍的效果。譬如，快速定位问题、降低故障概率、帮助分析逻辑错误等等。而在互联网前端开发越来越重要的今天，如何在前端开发中降低开发成本，提升工作效率，掌握前端开发调试技巧尤为重要。 本文将一一讲解各种前端JS调试技巧，也许你已经熟练掌握，那让我们一起来温习，也许有你没见过的方法，不妨一起来学习，也许你尚不知如何调试，赶紧趁此机会填补空白。 骨灰级调试大师Alert 那还是互联网刚刚起步的时代，网页前端还主要以内
原理： 在window这个全局对象下面，挂载属性，那么全局都可以拿到这个属性的值，原则上一个js文件作为一个模块，就是一个IIFE函数
前言 我叫王小闰（花名），非科班出身，野生前端从业者，在小公司打杂三年后，意外地拿到了美团的offer，成功跳槽到了美团外卖事业部。 接下来，正文从这儿开始～ 3年前，我高中毕业，进了编程培训班，后来自修课程，学的是计算机科学与技术专业，之后顺利拿到了北航的学历证书。 培训班毕业出来之后，我来到了杭州。在杭州这个充满电商气息的地方，每个人都对自己的未来充满了希望，《猎场》里的郑秋冬如此，我也一样。 虽然我的家庭条件不是很差，但我还是希望通过自己的努力，实现当初的梦想，出任CTO，甚至财务自由。 来到杭州，我
作者｜樱桃小丸子儿 原文｜http://www.jianshu.com/p/2f7eb1ad7174 很早之前就在看web前端面试题，一直想总结一个比较全面又详细的面试题库，现在总结了一些，分享给大家，以后还会持续更新，有些题目有多种答案，本文只给出其中一种，哪里有问题的欢迎指出。 Html&CSS 1、谈谈你对web标准的理解 web标准的理解 2、列举html中至少三个实体 &、 、<、>、®、© 详细请看w3schoolHTML实体符号参考手册 w3schoolH
let是局部变量（在他所在的代码块可用），const是常量，var是全局变量（前两个是ES6的，因为前面两个更加严谨，var被抛弃（貌似））
这里也是在考察变量提升，关键在于第一个fn2()，这时fn2仍是一个undefined的变量，所以会报错fn2不是一个函数。
分别从HTML、CSS、JavaScript、综合四个方面总结，后续持续更新 ---- HTML部分 ---- Doctype的作用？ 文档声明，不存在或格式不正确会导致文档以兼容模式呈现 标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行 兼容模式页面以宽松的向后兼容的方式显示 HTML5不基于SGML，因此不需要对DTD进行引用 行内、块级、 空(void)元素 行内：a b span img input select strong 块级：div ul ol li dl dt dd h
通常是如下图使用，在提供的 container 里渲染一个 React 元素，并返回对该组件的引用（或者针对无状态组件返回 null）。本文主要是将ReactDOM.render的执行流程在后续文章中会对创建更新的细节进行分析，文中的源代码部分为了方便阅读将__DEV__部分的代码移除掉了。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
实时音视频
