当前位置:首页 > 精彩博文
时间:2019-04-03 作者:wengjq 阅读原文
之前看到 vue 文档出现这个单向数据流,就觉得有点纳闷,我擦,vue不是双向绑定的么,出现这个是什么鬼,看了文档里也说了两种情况修改 props 的处理方案。还是有点疑惑。所以有了这篇文章。 从v-model开始讲起 1、v-model 用在 input 元素上 v-model在使用的时候很像双向绑定的(实际上也是。。。),但是……
时间:2019-04-03 作者:wengjq 阅读原文
1、为什么要继承数组 我们可以定义“数组子类”作为创建从原生数组对象(在其原型链中具有 Array.prototype)继承的对象的过程,并遵循与原生数组相似(或相同)的行为。 关于类似于原生数组的行为非常重要,我们后面会看到。 拥有数组的“子类”可以被认为能够创建一个数组对象,而不是直接从 Array 继承的对象,而是从另一个对象继……
时间:2019-04-03 作者:wengjq 阅读原文
参考原文:https://auth0.com/blog/four-types-of-leaks-in-your-javascript-code-and-how-to-get-rid-of-them/ 在本文中,我们将探讨客户端JavaScript代码中常见的内存泄漏类型。 我们还将学习如何使用Chrome开发工具找到它们。 1……
时间:2019-04-03 作者:wengjq 阅读原文
1、浏览器渲染原理 在讲DOM操作的最佳性能实践之前,先介绍下浏览器的基本渲染原理。浏览器渲染展示网页的主流程大致可以用下图表示: (图:WebKit 主流程) 分为以下四个步骤: 解析HTML(HTML Parser) 构建DOM树(DOM Tree) 渲染树构建(Render Tree) 绘制渲染树(Paintin……
时间:2019-04-03 作者:wengjq 阅读原文
概念 能力检测,又可以称为特性检测,它的目标是识别浏览器的能力,它的基本模式如下: if (object.property) { // 使用 object.property } 例子 在浏览器中可以采用 JavaScript 检测是否支持 WebP ,对支持 WebP 的用户输出 WebP 图片,否则输出其他格式的图片……
时间:2019-04-03 作者:wengjq 阅读原文
1、背景 两个月前做横幅特效的需求的时候,产品体验玻璃水滴的两种特效会导致网站整体变卡,之前没查出原因,就先下架了。最近潜心研究了下谷歌的工具,于是,把之前的两种特效特意拿出来研究下,把卡的问题解决,并上线,毕竟这两种特效还是不错的! 2、网页为什么会卡 网页卡常见原因:DOM操作频繁,频繁触发回流,循环耗时等。当然,大多数小问题导致……
时间:2019-04-03 作者:wengjq 阅读原文
开发产品功能的时候ui往往会给出虚线边框的效果图,于是乎,我们往往第一时间想到的是用css里的border,可是border里一般就提供两种效果,dashed或者dotted,ui这时就不满意了,说虚线太密了。废话不多说,下面直接给解决方案(参考css揭秘): div { padding: 1em; border:……
时间:2019-04-03 作者:wengjq 阅读原文
1、已知宽高元素的水平垂直居中 绝对定位与负边距实现。利用绝对定位,将元素的top和left属性都设为50%,再利用margin边距,将元素回拉它本身高宽的一半,实现垂直居中。代码如下: #container { position:relative; } #div { position:absolute;……
时间:2019-04-03 作者:wengjq 阅读原文
无论是开发复杂的业务还是写有很多兼容情况的代码都免不了复杂的 if else if 代码,但是有时 if else if 写的多有可能就变成一堆乱麻,可读性越来越差,有没有更好的方式来组织代码呢?下面已一个 js 判断类型的例子来演示 hook 到底如何使用。 // 当然这里只是示例,为什么不转成小写,因为其他场景不是那么刚刚好。。。……
时间:2019-04-03 作者:wengjq 阅读原文
1、同源策略 同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。 一个源的定义:如果协议,端口(如果指定了一个)和主机对于两个页面是相同的,则两个页面具有相同的源。 下表给出了相对 http://store.company.com/dir/page.html 同源检测的示例: URL 结果 原因 http://st……
时间:2019-04-03 作者:wengjq 阅读原文
1、javaScript的变量类型 (1)基本类型: 5种基本数据类型Undefined、Null、Boolean、Number 和 String,变量是直接按值存放的,存放在栈内存中的简单数据段,可以直接访问。 (2)引用类型: 存放在堆内存中的对象,变量保存的是一个指针,这个指针指向另一个位置。当需要访问引用类型(如对象,数组等)……
时间:2019-04-03 作者:wengjq 阅读原文
JavaScript 中所有的函数默认都有一个名为 prototype(原型)的公有并且不可枚举的属性,这个属性是一个指针,它会指向一个对象。 function Foo () { } Foo.prototype; //{ } 而这个对象通常被称为Foo的原型对象,用 FooPrototype(自己假想的)表示。 Foo.protot……
时间:2019-04-03 作者:wengjq 阅读原文
相信大家都有看过这样的一道 javascript 的笔试题,具体如下: var length = 10; function fn () { console.log(this.length); } var obj = { length: 5, method: function (fn) { fn();……
时间:2019-04-03 作者:wengjq 阅读原文
如何让秒杀、活动倒计时更“精确” 1、背景 前端页面倒计时功能在很多场景中会用到,如 mobi 手机端的欢迎页倒计时、商城功能的秒杀活动等,这些功能往往对时间的精确更高,下面会分享下常见的坑点及如何解决。 2、现有实现存在的问题 用现有 mobi 手机端欢迎页倒计时为例,以下是功能截图。 代码如下: var second = 10……
时间:2019-04-01 作者:浪里行舟 阅读原文
前言 浏览器的内核是指支持浏览器运行的最核心的程序,分为两个部分的,一是渲染引擎,另一个是JS引擎。渲染引擎在不同的浏览器中也不是都相同的。比如在 Firefox 中叫做 Gecko,在 Chrome 和 Safari 中都是基于 WebKit 开发的。本文我们主要介绍关于 WebKit 的这部分渲染引擎内容以及几个相关的问题。 如需……
时间:2019-04-01 作者:浪里行舟 阅读原文
一、前言 缓存可以说是性能优化中简单高效的一种优化方式了。一个优秀的缓存策略可以缩短网页请求资源的距离,减少延迟,并且由于缓存文件可以重复利用,还可以减少带宽,降低网络负荷。 对于一个数据请求来说,可以分为发起网络请求、后端处理、浏览器响应三个步骤。浏览器缓存可以帮助我们在第一和第三步骤中优化性能。比如说直接使用缓存而不发起请求,或者……
时间:2019-04-01 作者:浪里行舟 阅读原文
前言 打开浏览器从输入网址到网页呈现在大家面前,背后到底发生了什么?经历怎么样的一个过程?先给大家来张总体流程图,具体步骤请看下文分解! 总体来说分为以下几个过程: DNS 解析:将域名解析成 IP 地址 TCP 连接:TCP 三次握手 发送 HTTP 请求 服务器处理请求并返回 HTTP 报文 浏览器解析渲染页面 断开连接:TCP……
时间:2019-04-01 作者:浪里行舟 阅读原文
前言 在JavaScript发展初期就是为了实现简单的页面交互逻辑,寥寥数语即可;如今CPU、浏览器性能得到了极大的提升,很多页面逻辑迁移到了客户端(表单验证等),随着web2.0时代的到来,Ajax技术得到广泛应用,jQuery等前端库层出不穷,前端代码日益膨胀,此时在JS方面就会考虑使用模块化规范去管理。 本文内容主要有理解模块化……
时间:2019-04-01 作者:浪里行舟 阅读原文
一、JavaScript有几种类型的值? Javascript有两种数据类型,分别是基本数据类型和引用数据类型。其中基本数据类型包括Undefined、Null、Boolean、Number、String、Symbol (ES6新增,表示独一无二的值),而引用数据类型统称为Object对象,主要包括对象、数组和函数。接下来我们分别看……
时间:2019-04-01 作者:浪里行舟 阅读原文
前言 JavaScript是一门动态语言,所谓的动态语言可以暂时理解为在语言中的一切内容都是不确定的。比如一个变量,这一时刻是个整型,下一时刻可能会变成字符串了。虽然变量的数据类型是不确定的,但是各种运算符对数据类型是有要求的。如果运算符发现,运算子的类型与预期不符,就会自动转换类型。 本文主要介绍数据类型强制转换和自动转换,自动转换……
公益性全栈资源网站,鸣谢默默付出的博主、工程师、架构师们。
网站内容来源技术大牛的辛勤结晶。
81For 技术网站 Copyright ©2019 备案号:津ICP备19001147号-2