- 博客(89)
- 收藏
- 关注
RSS订阅
原创 如何区分浏览器发起的是基于http/1.x还是http/2的请求？
前言 随着2015年http2.0被推出以来，主流的现代浏览器大多都开始慢慢去实现这个协议，那么如果查看自己的浏览器是否支持发送http2.0的请求，或者如何查看浏览器发送的请求是基于哪一个版本的呢？本篇以chrome浏览器和firefox浏览器举例chrome浏览器 按f12打开浏览器的开发者工具，点击页面上方的Network选项，然后右键点击Statu...
2019-08-19 11:38:10
11161
4
原创 canvas学习
开始canvas介绍 <canvas>是HTML5新增的元素，兼容性：IE9+、Firefox 1.5+、Safari 2+、Opera 9+、Chrome、iOS 版 Safari 以及 Android 版 WebKit 都在某种程度上支持<canvas>。canvas除了具备基本绘图能力的 2D 上下文，<canvas>还有一个WebG...
2019-08-13 10:02:07
139
转载 浏览器的工作原理：新式网络浏览器幕后揭秘
序言这是一篇全面介绍 WebKit 和 Gecko 内部操作的入门文章，是以色列开发人员塔利·加希尔大量研究的成果。在过去的几年中，她查阅了所有公开发布的关于浏览器内部机制的数据（请参见资源），并花了很多时间来研读网络浏览器的源代码。她写道：在 IE 占据 90% 市场份额的年代，我们除了把浏览器当成一个“黑箱”，什么也做不了。但是现在，开放源代码的浏览器拥有了过半的市场份额，因此，是时候...
2019-07-30 11:32:03
244
原创 Object.assign 属于浅拷贝还是深拷贝
Object.assign 可以把源对象拷贝到目标对象中去，如下let man = { key: { age: '123' } }let women = Object.assign({}, m)console.log(women)运行结果：{ key: { age: '123' } }那Object.assign深拷贝还是浅拷贝呢?答案是第一级属性深拷贝，第一级以下的级别属性浅...
2019-06-18 09:53:33
2641
2
原创 clientX、offsetX、layerX、screenX、pageX、x的区别
代码如下：<!Doctype><html><head> <title>HTML DOM Event 对象</title> <style> .div1 { position: relative; width: 100px; height: 100px; background: blac...
2019-04-08 10:22:31
912
翻译 防抖函数与节流函数
应用场景实际工作中，我们经常性的会通过监听某些事件完成对应的需求，比如：通过监听 scroll 事件，检测滚动位置，根据滚动位置显示返回顶部按钮 通过监听 resize 事件，对某些自适应页面调整DOM的渲染（通过CSS实现的自适应不再此范围内） 通过监听 keyup 事件，监听文字输入并调用接口进行模糊匹配常规实现，以监听 scroll 事件为例我们先来看一下scroll事件的...
2019-04-03 12:51:53
130
原创 手把手教你用webpack+vue+typeScript搭建项目(非vue-cli篇)
第一步新建一个文件夹，命名为ts进入ts文件夹，在当前目录打开命令行第二步执行npm init初始化项目第三步配置package.json文件，安装项目所需要的依赖这里需要注意一个问题，这三个包的版本都会对整个项目是否能启动有很大的影响，在命令行执行npm install 安装依赖。第四步创建webpack.config.js 内容如下var ...
2019-01-14 11:31:28
1765
原创 使用vue+iview构建项目遇到的问题总结（一）
使用vue+iview构建项目遇到的问题总结（一）1.Select组件点击无响应问题Select组件放在栅栏组件Col里，发现点不动，原因：Select组件最终会被解析为一个span+i+ul+li的原生dom,如果和Select组件所处组件Col位列同级的右兄弟组件Col没有给一个宽度span，则会影响Select组件的点击事件。2.Table组件渲染表头提示you may ...
2018-08-30 16:25:26
3223
2
原创 如何用css实现网页footer的效果
实现footer这个问题比较常见，基本上每个公司都会有自己的页脚来声明版权，来提供一些商务合作，或者说是联系方式，加入我们等。。 我之前也没有仔细思考过这个问题，以为就是在footer css当中设置一下bottom: 0 就可以了，但是今天亲自实践了才发现，有以下几种情况： （1）如果footer所在的div没有父级div，footer的定位为absol...
2017-02-22 12:08:06
3311
原创 如何解决TypeError: d3.scale is undefined
如何解决TypeError: d3.scale is undefined
2017-02-20 14:08:52
3492
1
原创 linux 用webpack新建一个项目
1.安装node:sudo apt-get install -gnode推荐用node.js版本管理神器n:sudonpm install -g n安装node最新版：n latest稳定版：n stable查看已安装版本：n删除指定版本：n rm 0.1.1安装某个版本：n 6.0.02.安装webpack:sudo npm ins...
2016-12-09 12:47:00
2473
原创 Node Sass could not find a binding for your current environment: Linux 64-bit with Node.js 6.x
在linux上启动程序遇到了下面的问题：ERROR in Missing binding /home/linux-haow/文档/seeker/client/node_modules/node-sass/vendor/linux-x64-48/binding.node[1] Node Sass could not find a binding for your current environ...
2016-12-07 09:59:58
14583
1
原创 关于对常见的几种排序的理解。
排序这个东西是我们经常要用到的，下面谈一谈我对排序的理解。（1）插入排序:插入排序是指先将元素的第一个数当做一个有序的表，然后把第二个元素与第一个元素之间进行比较，插入最开始有序表中，从第二个元素开始，每一个元素都与前面的有序表比较，并加入这个有序表。最后得到一个完全有序的序列。 因为在比较过程中，如果待插入的元素如果与有序表中的某个元素相比，是相等的。那么这个元素就插入在...
2016-09-13 18:44:53
490
转载 webpack与vite
总结：vite启动的时候不需要分析各个模块之间的依赖关系、不需要打包编译。（vite遵循的是ES Modlues模块规范来执行代码，不需要打包编译成es5模块即可在浏览器运行。webpack：分析各个模块之间的依赖=>然后进行编译打=>打包后的代码在本地服务器渲染。随着模块增多，打包的体积变大，造成热更新速度变慢。vite开箱即用，更加简单，基于浏览器esm，使得hmr更加优秀，达到极速的效果；vite是基于esbulid预构建依赖，esbulid是采用go语言编写的，go语言是纳秒级别的。
2024-02-19 12:55:01
39
转载 CSS Modules和Styled Components
前言由于 React的JSX语法，能在React中使用样式的方式有很多，本文主要介绍在React中经常使用CSS样式的五种方法：//1行内样式// 2声明样式// 3引入样式// 4 CSS Modules模块化// 5 Styled-component1 行内样式行内样式是一种最基本的写法，也就是我们最开始学HTML时写的内联样式那样，在项目中可能会比较少用到在JSX中的用法：class App extends React.Component { // ...
2022-05-19 11:03:33
612
原创 多语言方案
多语言方案背景多语言(i18n)支持 是企业项目走向国际化的必经之路，也是前端工程师最佳实践的内容之一实现1.定义全局多语言状态，以中文、英语为例const contextValue = { lang, setLang,}switch (lang) { case 'zh-CN': return zhCN; case 'en-US': return enUS; default: return zhCN;}2.添加多语言配置文件，映射中英文
2022-04-24 15:20:40
1214
原创 svg使用方式
1.直接使用，无需任何配置，和框架2.将svg文件复制到项目，结合webpack配置使用{ test: /\.svg$/, use: ['@svgr/webpack'],}import IconIronMan from './Iron Man.svg';<IconIronMan className="arco-icon" style={{ fontSize: '50px' }} />3.使用阿里 iconfont 上面的 svg,和框架无关（1）..
2022-04-08 11:44:38
1235
转载 前端性能优化 24 条建议
性能优化是把双刃剑，有好的一面也有坏的一面。好的一面就是能提升网站性能，坏的一面就是配置麻烦，或者要遵守的规则太多。并且某些性能优化规则并不适用所有场景，需要谨慎使用，请读者带着批判性的眼光来阅读本文。本文相关的优化建议的引用资料出处均会在建议后面给出，或者放在文末。1. 减少 HTTP 请求一个完整的 HTTP 请求需要经历 DNS 查找，TCP 握手，浏览器发出 HTTP 请求，服务器接收请求，服务器处理请求并发回响应，浏览器接收响应等过程。接下来看一个具体的例子帮助理解 HTTP ：
2022-01-21 14:46:19
341
转载 什么是IOC(控制反转)、DI(依赖注入)
原文地址（摘要了部分内容）：https://blog.csdn.net/qq_22654611/article/details/52606960/学习过Spring框架的人一定都会听过Spring的IoC(控制反转) 、DI(依赖注入)这两个概念，对于初学Spring的人来说，总觉得IoC 、DI这两个概念是模糊不清的，是很难理解的，今天和大家分享网上的一些技术大牛们对Spring框架的IOC...
2019-09-27 14:59:30
204
原创 nest.js、egg.js、midway，express、koa的区别
前言 随着nest.js框架逐渐火起来，对于没有接触过nest的小伙伴可能会疑惑nest是什么？在你了解了nest.js是什么的前提下，你可能会疑惑nest.js与传统的koa、express有什么区别？针对这两个问题，结合了网上的一些文章，做一个简单的总结。 nest是什么？ nest的定义是一个渐进式的Node.js框...
2019-09-27 10:22:18
18619
转载 css加载会造成阻塞吗？
终于考试完了，今天突然想起来前阵子找实习的时候，今日头条面试官问我，js执行会阻塞DOM树的解析和渲染，那么css加载会阻塞DOM树的解析和渲染吗？所以，接下来我就来对css加载对DOM树的解析和渲染做一个测试。为了完成本次测试，先来科普一下，如何利用chrome来设置下载速度打开chrome控制台(按下F12),可以看到下图，重点在我画红圈的地方 点击我画红圈的地方(No thrott...
2019-07-31 09:29:59
328
转载 JS获取子节点、父节点和兄弟节点的方法实例总结
本文实例讲述了JS获取子节点、父节点和兄弟节点的方法。分享给大家供大家参考，具体如下：一、js获取子节点的方式1. 通过获取dom方式直接获取子节点其中test的父标签id的值，div为标签的名字。getElementsByTagName是一个方法。返回的是一个数组。在访问的时候要按数组的形式访问。? 1 var a = document.getEl...
2019-07-27 17:40:15
274
转载 用9种办法解决 JS 闭包经典面试题之 for 循环取 i
原文地址：https://segmentfault.com/a/1190000003818163 正确的说,应该是指一个闭包域,每当声明了一个函数,它就产生了一个闭包域(可以解释为每个函数都有自己的函数栈),每个闭包域(Function 对象)都有一个 function scope(不是属性),function scope内默认有个名为 Globe 的全局引用(有了这个引用,就可以直接调用 ...
2019-07-23 11:31:42
194
转载 VUE单页应用首屏加载速度优化方案
单页应用会随着项目越大，导致首屏加载速度很慢！！！以下给出在下知道的几种优化方案使用CDN资源,减小服务器带宽压力 路由懒加载 将一些静态js css放到其他地方（如OSS），减小服务器压力 按需加载三方资源，如iview,建议按需引入iview中的组件 使用nginx开启gzip减小网络传输的流量大小 若首屏为登录页，可以做成多入口，登录页单独分离为一个入口 使用uglifyjs...
2019-07-04 10:56:41
3068
转载 js让一个包含对象的数组去重
方法一：一个数组中的每一项都是对象，现在需要将这个对象中id相同的只保留一个，即根据id去重，通过以上方法可实现var person = [ { id: 0, name: "小明" }, { id: 1, name: "小张" }, { id: 2, name: "小李" }, { id: 3, name: "小孙" }, { id: 1, nam...
2019-06-16 09:37:01
1016
翻译 浏览器的重绘与重排
1.简述重排的概念浏览器下载完页面中的所有组件（HTML、JavaScript、CSS、图片）之后会解析生成两个内部数据结构（DOM树和渲染树），DOM树表示页面结构，渲染树表示DOM节点如何显示。重排是DOM元素的几何属性变化，DOM树的结构变化，渲染树需要重新计算。浏览器重绘(redraw)和重排(reflow) 。2.简述重绘的概念重绘是一个元素外观的改变所触发的浏览器行为，例如改变vi...
2019-06-12 21:13:57
714
翻译 完美解决HTML中footer保持在页面底部问题
很多人认为页面页脚部分不就是用footer主义化标签包起来嘛，然而不然；如果你足够细心的话就会发现当我们页面中主体内容不够多的时候会发生这样的情况：导致这一问题的原因是页面内容太少，无法将内容区域撑开，从而在 footer 下面留下一大块空白；但是我们又希望footer能在窗口最底端。今天给大家介绍两种方法来完美解决这个问题：方法一：footer高度固定+绝对定位思路：footer的...
2019-05-20 14:28:40
2876
原创 react项目打包后点击index.html页面出现空白
在打包之前,在package.json中private下(位置任意)添加"homepage": "./"这样在你点击index.html时候路径没有问题不会报错,但是页面可能还是空白的然后将项目中的引用路由时候的BrowserRouter改为HashRouter,所有用到的地方都要改然后执行yarn build 或者 npm run build再点开index.html就不会报错...
2019-05-20 09:43:30
10979
2
转载 JS中的“use strict” 严格模式
1、介绍严格模式2、严格模式影响范围变量： var、delete、变量关键字 对象：只读属性、对象字面量属性重复申明 函数：参数重名、arguments对象、申明 其他：this、eval、关键字...严格模式ECMAScript 5 引入严格模式('strict mode')概念。通过严格模式，在函数内部选择进行较为严格的全局或局部的错误条件检测，使用严格模式的好处是...
2019-05-09 11:21:07
444
转载 [react] react15、react16生命周期对比
一、react15生命周期react15生命周期 初始状态 点击“挂载Child Component”按钮后 从右边的console中可以看出Child组件首次挂载的时候，依次触发了Child组件的constructor, componentWillMount, render, componentDidMount。 3.点击“修改Ch...
2019-05-07 11:24:07
1453
转载 Vue和React的视图更新机制对比
Vue和React的其中一个最重要的区别是它们对于数据更新的管理方式不同，Vue基本上是一套基于getter/setter实现的依赖收集/依赖更新的订阅式机制，而React则是通过显式的触发函数调用来更新数据，比如setState。相比来说Vue的实现方式更细粒度一些， 通过依赖收集，Vue是能够知道一些数据的更新导致了哪些地方需要重新计算的，通过这种机制，Vue能够优雅地实现计算属性、watch...
2019-05-07 10:28:58
3235
转载 JS中的块级作用域，var、let、const三者的区别
首先，ECMAScript和JavaScript关系：ECMAScript是一个国际通过的标准化脚本语言。JavaScript由ECMAScript和DOM、BOM三者组成。可以简单理解为：ECMAScript是JavaScript的语言规范，JavaScript是ECMAScript的实现和扩展。1. 块作用域{ }JS中作用域有：全局作用域、函数作用域。没有块作用域的概...
2019-05-06 11:23:28
126
转载 javascript "==" 原理
Java代码S中有一个基本概念就是：JavaScript中undefined==null但undefined!==nullundefined与null转换成布尔值都是false如果按照常规想法，比如下面的代码Java代码vara=1; alert(Boolean(a));//返回true //那么下面的代码也应该返回tr...
2019-05-05 15:11:37
228
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人