前端
前端系列
风翻火焰
tel:13552106430
eMail:chern1992@163.com
展开
-
js实现xml转化成字符串和字符串转xml
碰到一个需求,从前端读取xml并在前端解析成string,显示到html中(不上传,客户需要看到上传的xml是否正确再上传,因此只能前端转换)1.xml文件转XMLDocumentfunction createXml(str){ if(document.all) { var xmlDom=new ActiveXObject("Microsoft.XMLDOM") xmlDom.loadXML(str) return xmlDom ...原创 2020-10-23 20:15:41 · 4135 阅读 · 2 评论 -
React进阶之高阶组件
前言本文代码浅显易懂,思想深入实用。此属于react进阶用法,如果你还不了解react,建议从文档开始看起。我们都知道高阶函数是什么, 高阶组件其实是差不多的用法,只不过传入的参数变成了react组件,并返回一个新的组件.A higher-order component is a function that takes a component and returns a new component.形如:const EnhancedComponent = higherOrder原创 2020-10-20 09:27:04 · 385 阅读 · 0 评论 -
form编码方式application/x-www-form-urlencoded和multipart/form-data的区别
form元素有个enctype属性,可以指定数据编码方式,有如下三种:1. application/x-www-form-urlencoded: 表单数据编码为键值对,&分隔2. multipart/form-data: 表单数据编码为一条消息,每个控件对应消息的一部分3. text/plain: 表单数据以纯文本形式进行编码详细说明:form的enctype的编码方式,常用有两种:application/x-www-form-urlencoded和multipart/for原创 2020-10-13 16:31:47 · 1427 阅读 · 0 评论 -
浏览器的工作原理:新式网络浏览器幕后揭秘
简介网络浏览器很可能是使用最广的软件。在这篇入门文章中,我将会介绍它们的幕后工作原理。我们会了解到,从您在地址栏输入google.com直到您在浏览器屏幕上看到 Google 首页的整个过程中都发生了些什么。目录简介 我们要讨论的浏览器 浏览器的主要功能 浏览器的高层结构 呈现引擎 呈现引擎 主流程 主流程示例 解析和 DOM 树构建 解析 - 综述 语法 解析器和词法分析器的组合 翻译 解析示例 词汇和语法的正式定义 解..转载 2020-07-07 22:35:23 · 208 阅读 · 0 评论 -
5 分钟撸一个前端性能监控工具
为什么监控用(上)户(帝)说,这个页面怎么这么慢,还有没有人管了?!简单而言,有三点原因:关注性能是工程师的本性 + 本分; 页面性能对用户体验而言十分关键。每次重构对页面性能的提升,仅靠工程师开发设备的测试数据是没有说服力的,需要有大量的真实数据用于验证; 资源挂了、加载出现异常,不能总靠用户投诉才后知后觉,需要主动报警。一次性能重构,在千兆网速和万元设备的条件下,页面加载时间的提升可能只有 0.1%,但是这样的数(土)据(豪)不具备代表性。网络环境、硬件设备千差万别,对于中低端设转载 2020-07-06 22:49:39 · 861 阅读 · 0 评论 -
HTTP协议头部与Keep-Alive模式详解
1、什么是Keep-Alive模式?我们知道HTTP协议采用“请求-应答”模式,当使用普通模式,即非KeepAlive模式时,每个请求/应答客户和服务器都要新建一个连接,完成 之后立即断开连接(HTTP协议为无连接的协议);当使用Keep-Alive模式(又称持久连接、连接重用)时,Keep-Alive功能使客户端到服 务器端的连接持续有效,当出现对服务器的后继请求时,Keep-Alive功能避免了建立或者重新建立连接。http 1.0中默认是关闭的,需要在http头加入"Connection:转载 2020-07-05 22:37:41 · 253 阅读 · 0 评论 -
关于浏览器缓存你知道多少
在前端开发中,我们在提到性能优化的时候总会提到一点:合理设置缓存。我们该如何从这方面入手来考虑提高网站性能呢?前言我们都知道 HTML5 引入了应用程序缓存,可以在没有网络的情况下进行访问,同时,HTML5 还引入了 storage 本地存储。这些都属于应用缓存。本篇文章主要内容是和浏览器缓存相关的,也可以说是 HTTP 缓存。什么是浏览器缓存MDN 上是这样解释浏览器缓存的:A browser cache holds all documents downloaded via.转载 2020-07-05 22:35:12 · 901 阅读 · 0 评论 -
前端基础篇之HTTP协议
HTTP协议作为前端开发的重要基础知识,却是很多非计算机专业出身的码农的软肋。笔者通过《图解http》一书系统的学习了HTTP协议的基础内容,并旁征博引,试图用更加简练的语言着重描述出HTTP协议需要掌握的重点内容,帮助不爱看书的同学节省时间。小纲老师HTTP协议简介 HTTP版本 HTTP报文 Web服务器 HTTPS Web安全防范 小结HTTP协议简介《图解HTTP》一文中这样描述HTTP在网络中的地位:Web使用一种名为HTTP(HyperText Transfe转载 2020-07-07 22:40:26 · 868 阅读 · 0 评论 -
浅说虚拟列表的实现原理
在列表数据的展示优化一文中,提到了对于列表形态的数据展示的按需渲染。这种方式是指根据容器元素的高度以及列表项元素的高度来显示长列表数据中的某一个部分,而不是去完整地渲染长列表,以提高无限滚动的性能。而按需显示方案的实现就是本文标题中说的虚拟列表。虚拟列表的实现有多种方案,本文以react-virtual-list组件为基础进行分析什么是虚拟列表?在正文之前,先对虚拟列表做个简单的定义。根据上文,虚拟列表是按需显示思路的一种实现,即虚拟列表是一种根据滚动容器元素的可视区域来渲染长列...转载 2020-07-05 22:24:50 · 1152 阅读 · 0 评论 -
深度精读:浏览器渲染原理 - [8000字图文并茂]
在我们面试过程中,面试官经常会问到这么一个问题,那就是从在浏览器地址栏中输入URL到页面显示,浏览器到底发生了什么?这个问题看起来是老生常谈,但是这个问题回答的好坏,确实可以很好的反映出面试者知识的广度和深度。本文从浏览器角度来告诉你,URL后输入后按回车,浏览器内部究竟发生了什么,读完本文后,你将了解到: 浏览器内有哪些进程,这些进程都有些什么作用 浏览器地址输入URL后,内部的进程、线程都做了哪些事 我们与浏览器交互时,内部进程是怎么处理这些交互事件的 原文地址欢迎s.转载 2020-07-01 21:53:20 · 270 阅读 · 0 评论 -
【React深入】从Mixin到HOC再到Hook(原创)
导读前端发展速度非常之快,页面和组件变得越来越复杂,如何更好的实现 状态逻辑复用一直都是应用程序中重要的一部分,这直接关系着应用程序的质量以及维护的难易程度。本文介绍了 React采用的三种实现 状态逻辑复用的技术,并分析了他们的实现原理、使用方法、实际应用以及如何选择使用他们。本文略长,下面是本文的思维导图,您可以从头开始阅读,也可以选择感兴趣的部分阅读:Mixin设计模式Mixin(混入)是一种通过扩展收集功能的方式,它本质上是将一个对象的属性拷贝到另一个对象上面去,不过你可转载 2020-06-30 23:40:02 · 434 阅读 · 0 评论 -
【React深入】React事件机制
关于React事件的疑问1.为什么要手动绑定 this 2. React事件和原生事件有什么区别 3. React事件和原生事件的执行顺序,可以混用吗 4. React事件如何解决跨浏览器兼容 5.什么是合成事件 下面是我阅读过源码后,将所有的执行流程总结出来的流程图,不会贴代码,如果你想阅读代码看看具体是如何实现的,可以根据流程图去源码里寻找。事件注册 组件装载 / 更新。 通过lastProps、nextProps判断是否新增、删除..转载 2020-06-30 23:31:20 · 270 阅读 · 0 评论 -
JavaScript深入之执行上下文栈和变量对象
JS是单线程的语言,执行顺序肯定是顺序执行,但是JS 引擎并不是一行一行地分析和执行程序,而是一段一段地分析执行,会先进行编译阶段然后才是执行阶段。翠花,上代码例子一:变量提升foo; // undefinedvar foo = function () { console.log('foo1');}foo(); // foo1,foo赋值var foo = function () { console.log('foo2');}foo(); // foo2,转载 2020-06-15 22:40:59 · 124 阅读 · 0 评论 -
理解JavaScript 中的执行上下文和执行栈
理解JavaScript 中的执行上下文和执行栈执行上下文是当前 JavaScript 代码被解析和执行时所在环境的抽象概念。#执行上下文的类型执行上下文总共有三种类型 全局执行上下文:只有一个,浏览器中的全局对象就是 window 对象,this指向这个全局对象。 函数执行上下文:存在无数个,只有在函数被调用的时候才会被创建,每次调用函数都会创建一个新的执行上下文。 Eval 函数执行上下文: 指的是运行在eval函数中的代码,很少用而且不建议使用。 #执行...转载 2020-06-15 22:31:46 · 139 阅读 · 0 评论