01 2021 档案
摘要：什么是深度优先和广度优先 其实简单来说 深度优先就是自上而下的遍历搜索 广度优先则是逐层遍历, 如下图所示 1.深度优先 2.广度优先 两者的区别 对于算法来说 无非就是时间换空间 空间换时间 深度优先不需要记住所有的节点, 所以占用空间小, 而广度优先需要先记录所有的节点占用空间大 深度优先有回溯
阅读全文
摘要：前言 JS作为面向对象的弱类型语言，继承也是其非常强大的特性之一。那么如何在JS中实现继承呢？让我们拭目以待。 ES5继承 JS继承的实现方式 既然要实现继承，那么首先我们得有一个父类，代码如下： function Animal (name) { // 属性 this.name = name ||
阅读全文
摘要：CSS3 硬件加速又叫做 GPU 加速，是利用 GPU 进行渲染，减少 CPU 操作的一种优化方案。由于 GPU 中的 transform 等 CSS 属性不会触发 repaint，所以能大大提高网页的性能。 动画与帧 浏览器中动画也是由一帧一帧的图片组成的。我们首先看一下，浏览器每一帧都做了什么。
阅读全文
摘要：本文主要内容 什么是对象 创建对象的几种方式 使用构造函数创建 字面量创建 工厂模式 构造模式 原型模式 原型 组合使用构造函数模式和原型模式 什么是对象 直接上《JavaScript高级教程》的截图 创建对象 1.使用构造函数创建 var obj = new Object(); 2.字面量创建 v
阅读全文
摘要：原型 我（个人）不喜欢的，就是讲原型时上来就拿类做比较的，所以我不会这样讲。不过我的确讲过构造器函数，在这方面和类多多少少有共通之处。我的建议是：忘掉类。有很多观点认为“类”学的泛滥是面向对象的过度发展，是一种悲哀，以至于有太多的开发者几乎把面向对象和类划上了等号。在学习原型之前，我请你先记住并品味
阅读全文
摘要：在JavaScript里面，字面量包括：字符串字面量(string literal )、数组字面量(array literal)和对象字面量(object literal)，另外还有函数字面量(function literal)。 1. 字符串字面量（String Literal）是指双引号引住的一
阅读全文
摘要：什么是设计模式？ 设计模式是对软件设计开发过程中反复出现的某类问题的通用解决方案。设计模式更多的是指导思想和方法论，而不是现成的代码，当然每种设计模式都有每种语言中的具体实现方式。学习设计模式更多的是理解各种模式的内在思想和解决的问题，毕竟这是前人无数经验总结成的最佳实践，而代码实现则是对加深理解的
阅读全文
摘要：有时候一个一个元素要绑定多个事件，其实是分开写 先看这个例子，我们预期它先执行alert1，然后是alert2，但事实上是没有alert1，因为覆盖了 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>绑定多个
阅读全文
摘要：使用CDN会极大地简化网站的系统维护工作量，网站维护人员只需将网站内容注入CDN的系统，通过CDN部署在各个物理位置的服务器进行全网分发，就可以实现跨运营商、跨地域的用户覆盖。由于CDN将内容推送到网络边缘，大量的用户访问被分散在网络边缘，不再构成网站出口、互联互通点的资源挤占，也不再需要跨越长距离
阅读全文
摘要：跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。 广义的跨域： 1.) 资源跳转： A链接、重定向、表单提交2.) 资源嵌入： <link>、<script>、<img>、<frame>等dom标签，还有样式中background:url()、@font-face()等文件
阅读全文
摘要：前言 数组是 JS 中使用频率仅次于对象的数据结构，官方提供了众多的 API，今天我们来谈谈如何扁平化（flatten）数组。 顾名思义，扁平化就是将嵌套的数组变成一维数组的过程。 通常有几种方法可以实现扁平化： 迭代递归法 曲线救国法 我们将以一个例子贯穿整篇文章： var array = [[1
阅读全文
摘要：console.log 不服预期 有些时候在使用·console.log() 打印对象的时候，打印出来的值不符合预期。这是为什么呢？ 有一种说法是：console.log() 是一个异步的方法，浏览器在处理的时候对于这种读取 i/o 的操作一般会放到比较靠后的位置去处理。所以有些时候打印出来的值不符
阅读全文
摘要：数组扁平化 所谓数组扁平化就是将数组中并不规则的多维数组去除维度，使之变为一维数组。 let newArray = arr.flat(depth) flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。 其中，depth指定要提取嵌套数组的结
阅读全文
摘要：webpack是一个模块打包器（module bundler），提供了一个核心，核心提供了很多开箱即用的功能，同时它可以用loader和plugin来扩展。webpack本身结构精巧，基于tapable的插件架构，扩展性强，众多的loader或者plugin让webpack显得很复杂。webpack
阅读全文
摘要：一、为什么要使用路由懒加载 为给客户更好的客户体验，首屏组件加载速度更快一些，解决白屏问题。 二、定义 懒加载简单来说就是延迟加载或按需加载，即在需要的时候的时候进行加载。 三、使用 常用的懒加载方式有两种：即使用vue异步组件 和 ES中的import（及require.ensure） 1、未用懒
阅读全文
摘要：移动端300ms延迟原因 2007 年初。苹果公司在发布首款 iPhone 前夕，遇到一个问题：当时的网站都是为大屏幕设备所设计的。于是苹果的工程师们做了一些约定，应对 iPhone 这种小屏幕浏览桌面端站点的问题。 双击缩放(double tap to zoom)，这也是会有上述 300 毫秒延迟
阅读全文
摘要：最近，WebAssembly 在 JavaScript 圈非常的火！人们都在谈论它多么多么快，怎样怎样改变 Web 开发领域。但是没有人讲他到底为什么那么快。在这篇文章里，我将会帮你了解 WebAssembly 到底为什么那么快。 第一，我们需要知道它到底是什么！WebAssembly 是一种可以使
阅读全文
摘要：最近，需要对业务上的一些性能做一些优化，比如降低首屏时间、减少核心按钮可操作时间等的一些操作；在这之前，需要建立的就是数据监控的准线，也就是说一开始的页面首屏数据是怎样的，优化之后的数据是怎样，需要有一个对比效果。此时，performance 这个API就非常合适了。 window.onload =
阅读全文
摘要：应用缓存：是项目本身的缓存，比如一个js对象缓存的数据，或者状态管理机制如vuex和redux等进行应用数据存储，它们在页面刷新就会丢失。 离线缓存：应用在离线情况下也能快速访问的缓存资源，这里主要讲serviceWorker，大多数浏览器已经支持serviceWorker提供离线缓存。 本地缓存：
阅读全文
摘要：(function() { if(!window.localStorage) { console.log('当前浏览器不支持localStorage!') } var test = '0123456789'; var add = function(num) { num += num; if(num.
阅读全文
摘要：一、背景 文章2017 前端大事件和趋势回顾，2018 何去何从？中提到了2017年前端值得关注的十大事件，其中就提到了PWA。 大家都知道Native app体验确实很好，下载到手机上之后入口也方便。它也有一些缺点: 开发成本高(ios和安卓) 软件上线需要审核 版本更新需要将新版本上传到不同的应
阅读全文
