- 博客(143)
- 收藏
- 关注
RSS订阅
原创 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
4276
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
424
原创 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
1505
转载 前端基础篇之HTTP协议
HTTP协议作为前端开发的重要基础知识，却是很多非计算机专业出身的码农的软肋。笔者通过《图解http》一书系统的学习了HTTP协议的基础内容，并旁征博引，试图用更加简练的语言着重描述出HTTP协议需要掌握的重点内容，帮助不爱看书的同学节省时间。小纲老师HTTP协议简介 HTTP版本 HTTP报文 Web服务器 HTTPS Web安全防范 小结HTTP协议简介《图解HTTP》一文中这样描述HTTP在网络中的地位：Web使用一种名为HTTP（HyperText Transfe
2020-07-07 22:40:26
905
转载 浏览器的工作原理：新式网络浏览器幕后揭秘
简介网络浏览器很可能是使用最广的软件。在这篇入门文章中，我将会介绍它们的幕后工作原理。我们会了解到，从您在地址栏输入google.com直到您在浏览器屏幕上看到 Google 首页的整个过程中都发生了些什么。目录简介 我们要讨论的浏览器 浏览器的主要功能 浏览器的高层结构 呈现引擎 呈现引擎 主流程 主流程示例 解析和 DOM 树构建 解析 - 综述 语法 解析器和词法分析器的组合 翻译 解析示例 词汇和语法的正式定义 解..
2020-07-07 22:35:23
223
转载 九种跨域方式实现原理（完整版）
前言前后端数据交互经常会碰到请求跨域，什么是跨域，以及有哪几种跨域方式，这是本文要探讨的内容。本文完整的源代码请猛戳github博客，纸上得来终觉浅，建议大家动手敲敲代码。一、什么是跨域？1.什么是同源策略及其限制内容？同源策略是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSRF等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。同源策略限制内容有：Cookie、Loca..
2020-07-07 22:32:58
239
转载 一篇文章构建你的 NodeJS 知识体系
说明比较好的 markdown 的查看方式是直接用 VSCode 打开大纲，这样整个脉络一目了然，后续补充知识点也很快定位到相应的位置：这个 markdown 文件已经丢到 Github，有更新会直接推这里：github.com/ringcrl/nod…博客上也会记录一些好玩的东西：www.chenng.cn/archives/安装# 使用 nvm 安装https://github.com/creationix/nvm#install-script # ...
2020-07-07 22:31:15
951
转载 面试篇】寒冬求职之你必须要懂的Web安全
随着互联网的发展，各种Web应用变得越来越复杂，满足了用户的各种需求的同时，各种网络安全问题也接踵而至。作为前端工程师的我们也逃不开这个问题，今天一起看一看Web前端有哪些安全问题以及我们如何去检测和防范这些问题。非前端的攻击本文不会讨论(如SQL注入，DDOS攻击等)，毕竟后端也非本人擅长的领域。QQ邮箱、新浪微博、YouTube、WordPress 和 百度 等知名网站都曾遭遇攻击，如果你从未有过安全方面的问题，不是因为你所开发的网站很安全，更大的可能是你的网站的流量非常低或者没有攻击的价值。.
2020-07-07 22:28:25
508
转载 前端笔试&面试爬坑系列---算法
终于来了，算法相关的。 其实个人理解，前端岗位对于算法的要求与其他IT岗位相比，是低得多的。 但是小白我经历了如蚂蚁金服、网易这样的大厂教做人之后，还是觉得，对于一些基本算法、思想的掌握还是必须的。 然后，就把自己遇到的、学到的算法相关的再总结一下，方便自己随时备战面试。系列传送门：1.VK的秋招前端奇遇记(一)2.VK的秋招前端奇遇记(二)3.VK的秋招前端奇遇记(三)4.VK的秋招前端奇遇记(四)5.番外篇：前端面试&笔试算法 Algorithm排序JS本身数组的
2020-07-06 23:30:28
534
1
转载 JS中的算法与数据结构——链表(Linked-list)
链表(Linked-list)前面我们讨论了如何使用栈、队列进行存数数据，他们其实都是列表的一种，底层存储的数据的数据结构都是数组。但是数组不总是最佳的数据结构，因为，在很多编程语言中，数组的长度都是固定的，如果数组已被数据填满，再要加入新的元素是非常困难的。而且，对于数组的删除和添加操作，通常需要将数组中的其他元素向前或者向后平移，这些操作也是十分繁琐的。然而，JS中数组却不存在上述问题，主要是因为他们被实现了成了对象，但是与其他语言相比（比如C或Java），那么它的效率会低很多。这时候，
2020-07-06 23:29:06
219
原创 导航流程：从输入URL到页面展示，这中间发生了什么？
从输入URL到页面加载发生了什么最近在进行前端面试方面的一些准备，看了网上许多相关的文章，发现有一个问题始终绕不开: 在浏览器中输入URL到整个页面显示在用户面前时这个过程中到底发生了什么。仔细思考这个问题，发现确实很深，这个过程涉及到的东西很多。这个问题的回答真的能够很好的考验一个web工程师的水平，于是我自问自答一番。总体来说分为以下几个过程:DNS解析 TCP连接 发送HTTP请求 服务器处理请求并返回HTTP报文 浏览器解析渲染页面 连接结束具体过程DNS解析DNS
2020-07-06 23:14:14
285
转载 关于 cdn、回源等问题一网打尽
复盘日常问题板的时候，看到了曾经听到后端同学讨论的回源的问题。一直以来对 cdn 相关的知识一知半解，借此机会彻底梳理一下。文章目录：访问 cdn 资源和不通过 cdn 访问的过程有什么不同 回源是什么意思？ 除了静态资源，API 是否可以缓存？ 资源的过期如何判定？cdn 是如何更新数据的？ 几个专业术语访问 cdn 资源和不通过 cdn 访问的过程有什么不同一般的过程我们都知道了，不再赘述。下面我们来看看访问 cdn 的过程。1.首先访问本地的 DNS ，如果没有命中，.
2020-07-06 23:02:57
2326
转载 五分钟了解CDN
一、什么是CDN？CDN全称Content Delivery Network，即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络，CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。其目的是使用户可就近取得所需内容，解决 Internet网络拥挤的状况，提高用户访问网站的响应速度。
2020-07-06 23:02:06
272
转载 TCP协议详解
前言小到基于应用层做网络开发，大到生活中无处不在的网络。我们在享受这个便利的时候，没有人会关心它如此牢固的底层基石是如何搭建的。而这些基石中很重要的一环就是tcp协议。翻看一下“三次握手”和“四次挥手”，本以为这就是tcp了，其实不然。它仅仅解决了连接和关闭的问题，传输的问题才是tcp协议更重要，更难，更复杂的问题。回头看tcp协议的原理，会发现它为了承诺上层数据传输的“可靠”，不知要应对多少网络中复杂多变的情况。简单直白列举一下：怎么保证数据都是可靠呢？---连接确认！关闭确认！收到数据确认！各种
2020-07-06 23:01:21
1112
转载 通俗大白话来理解TCP协议的三次握手和四次分手
最近在恶补计算机网络方面的知识，之前对于TCP的三次握手和四次分手也是模模糊糊，对于其中的细节更是浑然不知，最近看了很多这方面的知识，也在系统的学习计算机网络，加深自己的CS功底，就把看过的一些比较好的东西和自己的一些理解二次加工组织一下然后交流分享，一起学习进步，对了这个面试好像经常问到。原文收录在我的 GitHub博客 (https://github.com/jawil/blog) ，喜欢的可以关注最新动态，大家一起多交流学习，共同进步，以学习者的身份写博客，记录点滴。通俗理解:但是为.
2020-07-06 22:57:00
180
转载 前端优化: DNS预解析提升页面速度
在网页体验中我们常会遇到这种情况，即在调用百度联盟、谷歌联盟以及当前网页所在域名外的域名文件时会遇到请求延时非常严重的情况。那么有没有方法去解决这种请求严重延时的现象呢？一般来说这种延时的原因不会是对方网站带宽或者负载的原因，那么到底是什么导致了这种情况呢。湛蓝试着进行推测，假设是DNS的问题，因为DNS解析速度很可能是造成资源延时的最大原因。于是湛蓝在页面header中添加了以下代码（用以DNS预解析）：<meta http-equiv="x-dns-prefetch-control.
2020-07-06 22:52:34
1061
转载 DNS解析
用户在浏览器的地址栏中敲入了网站的网址 ，会发生哪些事情呢？用户在浏览器的地址栏中敲入了网站的网址 浏览器查找域名的IP地址 找到ip地址后，浏览器给web服务器发送一个HTTP请求 服务器“处理”请求 服务器发回一个HTML响应 浏览器开始显示HTML大概就是这样的过程，下面我们来仔细的分析下浏览器是如何查找到域名对应的ip地址的。DNS域名解析过程 当用户在浏览器中输入ke.qq.com并按下回车键后： 第1步，查找浏览器缓存。 浏览器会检查缓存中有没有这个域名对
2020-07-06 22:51:43
256
转载 5 分钟撸一个前端性能监控工具
为什么监控用（上）户（帝）说，这个页面怎么这么慢，还有没有人管了？！简单而言，有三点原因：关注性能是工程师的本性 + 本分； 页面性能对用户体验而言十分关键。每次重构对页面性能的提升，仅靠工程师开发设备的测试数据是没有说服力的，需要有大量的真实数据用于验证； 资源挂了、加载出现异常，不能总靠用户投诉才后知后觉，需要主动报警。一次性能重构，在千兆网速和万元设备的条件下，页面加载时间的提升可能只有 0.1%，但是这样的数（土）据（豪）不具备代表性。网络环境、硬件设备千差万别，对于中低端设
2020-07-06 22:49:39
900
转载 HTTP2基本概念学习笔记
作为一个对 HTTP1.x 进行了加强、补充和完善的更好的协议，值得我们好好的去了解它，然后使用它做出更美妙的事情。1 过去和现在HTTP1.1 自从1997年发布1999年最后一次修改以来，我们已经使用 HTTP1.x 相当长一段时间了，但是随着近十年互联网的爆炸式发展，当时协议规定的某些特性，已经无法满足现代网络的需求了。HTTP1.x 有以下几点致命缺陷：（以浏览器至服务器为例）协议规定客户端对同一域的并发连接最多只能2个（浏览器实现一般是2~8个），但是现代网页...
2020-07-05 22:41:56
324
转载 九个问题从入门到熟悉HTTPS
Q1: 什么是 HTTPS？BS: HTTPS 是安全的 HTTPHTTP 协议中的内容都是明文传输，HTTPS 的目的是将这些内容加密，确保信息传输安全。最后一个字母 S 指的是 SSL/TLS 协议，它位于 HTTP 协议与 TCP/IP 协议中间。Q2: 你说的信息传输安全是什么意思BS: 信息传输的安全有三个方面:客户端和服务器直接的通信只有自己能看懂，即使第三方拿到数据也看不懂这些信息的真实含义。 第三方虽然看不懂数据，但可以 XJB 改，因此客户端和服务器必须有能力判断数据
2020-07-05 22:40:47
144
转载 深入理解HTTPS工作原理
前言近几年，互联网发生着翻天覆地的变化，尤其是我们一直习以为常的HTTP协议，在逐渐的被HTTPS协议所取代，在浏览器、搜索引擎、CA机构、大型互联网企业的共同促进下，互联网迎来了“HTTPS加密时代”，HTTPS将在未来的几年内全面取代HTTP成为传输协议的主流。读完本文，希望你能明白：HTTP通信存在什么问题 HTTPS如何改进HTTP存在那些问题 HTTPS工作原理是什么想阅读更多优质文章请猛戳GitHub博客,一年五十篇优质文章等着你！一、什么是HTTPSHTTPS是在HT
2020-07-05 22:39:12
864
转载 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
277
转载 关于浏览器缓存你知道多少
在前端开发中，我们在提到性能优化的时候总会提到一点：合理设置缓存。我们该如何从这方面入手来考虑提高网站性能呢？前言我们都知道 HTML5 引入了应用程序缓存，可以在没有网络的情况下进行访问，同时，HTML5 还引入了 storage 本地存储。这些都属于应用缓存。本篇文章主要内容是和浏览器缓存相关的，也可以说是 HTTP 缓存。什么是浏览器缓存MDN 上是这样解释浏览器缓存的：A browser cache holds all documents downloaded via.
2020-07-05 22:35:12
1221
转载 浅说虚拟列表的实现原理
在列表数据的展示优化一文中，提到了对于列表形态的数据展示的按需渲染。这种方式是指根据容器元素的高度以及列表项元素的高度来显示长列表数据中的某一个部分，而不是去完整地渲染长列表，以提高无限滚动的性能。而按需显示方案的实现就是本文标题中说的虚拟列表。虚拟列表的实现有多种方案，本文以react-virtual-list组件为基础进行分析什么是虚拟列表？在正文之前，先对虚拟列表做个简单的定义。根据上文，虚拟列表是按需显示思路的一种实现，即虚拟列表是一种根据滚动容器元素的可视区域来渲染长列...
2020-07-05 22:24:50
1269
原创 解决npm install时Unexpected end of JSON input while parsing near 问题
问题描述：Unexpected end of JSON input while parsing near '…"解决办法：（1）npm install --registry=https://registry.npm.taobao.org --loglevel=silly（2） npm cache clean --force（3） npm install
2020-07-04 22:42:24
1316
转载 2019年前端性能优化清单 — 下篇
目录HTTP/2 52. 迁移到HTTPS，然后打开HTTP / 2 53. 正确部署HTTP / 2 54. 您的服务器和 CDN 是否支持 HTTP / 2 55. 是否启用了 OCSP stapling 56. 是否采用 IPv6 57. 是否正在使用 HPACK 压缩 测试和监测 58. 确保服务器上的安全性是防攻击的 59. 您是否优化了审计和调试工作流程 60. 您是否在代理浏览器和传统浏览器中测试过 61. 您是否测试了辅助功能 62. 您是
2020-07-02 22:45:17
238
转载 2019年前端性能优化清单 — 中篇
目录资源优化 17. 使用 Brotli 或 Zopfli 进行纯文本压缩 18. 使用响应式图像和 WebP 19. 图像是否已恰当优化 20. 视频是否已恰当优化 21. Web 字体是否已恰当优化 构建优化 22. 分清轻重缓急 23. 考虑使用 cutting-the-mustard 技术 24. 解析 JavaScript 是昂贵的，所以保持小 25. 使用无用代码移除（Tree-shaking） ，作用域提升（Scope hoisting）和代码分割（
2020-07-02 22:43:58
533
转载 2019年前端性能优化清单
由于全文篇幅太长，无法将所有内容一次性发布完，所以计划分成上、中、下三个篇章。上篇包括（ 计划和度量、制定现实的目标 和 定义环境 ），中篇包括（ 资源优化、构建优化 和 交付优化 ），下篇包括（ HTTP / 2、测试和监测 和 速效方案 ）。原文链接地址：Front-End Performance Checklist 2019原文作者：Vitaly Friedman译者：单车 runner 这是一篇有关年度前端性能优化的文章，包含了创建快速体验所需的所有知识，自2016年以来每年更新一次。
2020-07-02 22:42:32
396
转载 Webpack 大法之 Code Splitting
今天，大家要学习的内容是Webpack 大法中的Code Splitting。Code Splitting 是什么以及为什么在以前，为了减少 HTTP 请求，通常地，我们都会把所有的代码都打包成一个单独的 JS 文件。但是，如果这个 JS 文件体积很大的话，那就得不偿失了。这时，我们不妨把所有代码分成一块一块，需要某块代码的时候再去加载它；还可以利用浏览器的缓存，下次用到它的话，直接从缓存中读取。很显然，这种做法可以加快我们网页的加载速度，美滋滋！所以说，Code Splitting...
2020-07-02 22:40:56
714
转载 通过Scope Hoisting优化Webpack输出
Scope Hoisting 可以让 Webpack 打包出来的代码文件更小、运行的更快， 它又译作 "作用域提升"，是在 Webpack3 中新推出的功能。 单从名字上看不出 Scope Hoisting 到底做了什么，下面来详细介绍它。认识 Scope Hoisting让我们先来看看在没有 Scope Hoisting 之前 Webpack 的打包方式。假如现在有两个文件分别是util.js:export default 'Hello,Webpack';和入口文件main.j..
2020-07-02 22:39:27
249
1
转载 Tree-Shaking性能优化实践 - 原理篇
一. 什么是Tree-shaking先来看一下Tree-shaking原始的本意上图形象的解释了Tree-shaking 的本意，本文所说的前端中的tree-shaking可以理解为通过工具"摇"我们的JS文件，将其中用不到的代码"摇"掉，是一个性能优化的范畴。具体来说，在 webpack 项目中，有一个入口文件，相当于一棵树的主干，入口文件有很多依赖的模块，相当于树枝。实际情况中，虽然依赖了某个模块，但其实只使用其中的某些功能。通过 tree-shaking，将没有使用的模块摇掉，这样来.
2020-07-02 22:38:29
1724
2
转载 加速Webpack-缩小文件搜索范围
Webpack 启动后会从配置的 Entry 出发，解析出文件中的导入语句，再递归的解析。 在遇到导入语句时 Webpack 会做两件事情：根据导入语句去寻找对应的要导入的文件。例如require('react')导入语句对应的文件是./node_modules/react/react.js，require('./util')对应的文件是./util.js。 根据找到的要导入文件的后缀，使用配置中的 Loader 去处理文件。例如使用 ES6 开发的 JavaScript文件需要使用 bab...
2020-07-02 22:33:09
261
转载 多进程并行压缩代码
多进程/多实例：并行压缩使用parallel-uglify-plugin插件 uglifyjs-webpack-plugin开启 parallel 参数 terser-webpack-plugin开启 parallel 参数：推荐使用使用 parallel-uglify-plugin 插件在通过 new ParallelUglifyPlugin() 实列化时，支持以下参数配置： test: 使用正则去匹配哪些文件需要被 ParallelUglifyPlugin 压缩，默认是...
2020-07-02 22:30:35
844
转载 Webpack优化——将你的构建效率提速翻倍
随着构建体系不断完善、构建体验不断优化，webpack 已经逐渐成为了前端构建体系的一大霸主，对于工作中的真正意义上的前端工程项目，webpack 已经成为了我们前端构建技术选型的不二选择，包括 create-react-app 以及 vue-cli 等等业内常见的脚手架工具的构建体系，也都是基于 webpack 进行了上层封装。但随着业务代码不断增加，项目深度不断延伸，我们的构建时长也会因此不断增加。渐渐的，总会有人抛出这样的结论：webpack 构建太慢了、太“重”了。就以笔者本次近期为团队优化的项目为
2020-07-02 22:27:34
942
1
原创 前端工程师需要了解的 Babel 知识
本文写于2019 年，如有不对之处欢迎指出。Babel对于前端开发者来说应该是很熟悉了，日常开发中基本上是离不开它的。已经 9102年了，我们已经能够熟练地使用es2015+的语法。但是对于浏览器来说，可能和它们还不够熟悉，我们得让浏览器理解它们，这就需要Babel。当然，仅仅是Babel是不够的，还需要polyfill等等等等，这里就先不说了。这篇文章是一个Babel的入门文章，希望能够用浅显易懂的语言让不懂Babel的人不再恐惧。What：什么是Babel...
2020-07-02 22:13:47
330
转载 移动混合开发中的 JSBridge
【导读】关于 JSBridge，绝大多数同学最早遇到的是微信的 WeiXinJSBridge（现在被封装成 JSSDK），各种 Web 页面可以通过 Bridge 调用微信提供的一些原生功能，为用户提供相关的功能。其实，JSBridge 很早就出现在软件开发中，在一些桌面软件中很早就运用了这样的形式，多用在通知、产品详情、广告等模块中，然后这些模块中，使用的是 Web UI，而相关按钮点击后，调用的是 Native 功能。现在移动端盛行，不管是 Hybrid 应用，还是 React-Native 都离不开
2020-07-01 22:26:18
625
转载 JSBridge 介绍及实现原理
JSBridge 介绍JSBridge是一座用JavaScript搭建起来的桥，一端是web，一端是native。我们搭建这座桥的目的也很简单，让native可以调用web的js代码，让web可以 “调用” 原生的代码。实现原理Android实现：我们来想想如何实现上面的功能。难点有这么几个：1、如何创建一个webview？如何在webview中加载网页？2、web如何调用android？对于第一点，不是本文的重点，你可以参考这个链接来自行解决。 对于第二点，我们继续分析。 w
2020-07-01 22:23:52
6988
转载 编写一个简单的JavaScript模板引擎
随着Nodejs的流行，JavaScript在前端和后端都开始流行起来。有许多成熟的JavaScript模板引擎，例如Swig，既可以用在后端，又可以用在前端。不过很多时候，前端模板仅仅需要简单地创建一个HTML片段，用Swig这种全功能模板有点大材小用。我们来尝试自己编写一个简单的前端模板引擎，实际上并不复杂。在编写前端模板引擎代码之前，我们应该想好如何来调用它，即这个模板引擎的接口应该是什么样的。我们希望这样调用它：// 创建一个模板引擎:var tpl = new Template('
2020-07-01 22:21:45
488
1
转载 React 源码剖析系列 － 生命周期的管理艺术
前言React 的主要思想是通过构建可复用组件来构建用户界面。所谓组件其实就是有限状态机，通过状态渲染对应的界面，且每个组件都有自己的生命周期，它规定了组件的状态和方法需要在哪个阶段进行改变和执行。有限状态机（FSM），表示有限个状态以及在这些状态之间的转移和动作等行为的模型。一般通过状态、事件、转换和动作来描述有限状态机，下面是描述组合锁状态机的模型图，包括5个状态、5个状态自转换、6个状态间转换和1个复位 RESET 转换到状态 S1。状态机，能够记住目前所处的状态，根据当前的状态可以做出相应.
2020-07-01 22:16:40
145
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人