- 博客(35)
- 收藏
- 关注
RSS订阅转载 HTML - 标准模式 vs. 怪异模式
前言在实现html和css标准化之前，各个浏览器对html和css的解析各有不同，甚至是同一个浏览器的不同版本渲染方式也不同（比如：IE6&IE7）。在W3C指定标准之后，浏览器既要按照标准去实现HTML和CSS的支持，又要保证能够兼容以前的非标准的旧网页，于是就有了现在所说的标准模式和兼容模式。浏览器如何确定渲染模式在编写HTML文档时，一般都会在文档的开头（htm...
2019-09-25 09:29:00
114
转载 首页白屏解决与优化方案
当前很多无线页面都使用前端模板进行数据渲染，那么在糟糕的网速情况下，一进去页面，看到的不是白屏就是 loading，这成为白屏问题。此问题发生的原因基本可以归结为网速跟静态资源1、css文件加载需要一些时间，在加载的过程中页面是空白的。 解决：可以考虑将css代码前置和内联。2、首屏无实际的数据内容，等待异步加载数据再渲染页面导致白屏。 解决：在首屏直接同步渲染html，后续的滚屏...
2019-09-19 09:25:00
1286
转载 CSS - 浅析css预处理器
为什么要预处理器css层叠样式表是一门标记语言，并不是编程语言，因此不可以自定义变量，不可以引用等，它不具备任何语法支持，它主要缺陷如下：语法不够强大，比如：无法嵌套书写，导致模块化开发中需要书写很多重复的选择器；没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护这就导致了我们在工作中无端增加了许多工作量。为了解决这个问题，前端开发人...
2019-09-18 09:54:00
250
转载 js - 超大整数相加
js 和任何一门语言一样，对其数值的范围有限制。Number.MAX_VALUE // 1.7976931348623157e+308Number.MAX_SAFE_INTEGER // 9007199254740991Number.MIN_VALUE // 5e-324Number.MIN_SAFE_INTEGER // -9007199254740991如果我们想要对一...
2019-09-16 17:02:00
373
转载 js - Object常用属性(一)
Object.defineProperty && Object.definePropertiesECMAS-262第5版在定义只有内部采用的特性时，提供了描述了属性特征的几种属性。ECMAScript对象中目前存在的属性描述符主要有两种，数据描述符(数据属性)和存取描述符(访问器属性)，数据描述符是一个拥有可写或不可写值的属性。存取描述符是由一对 getter-set...
2019-09-15 23:06:00
176
转载 js - 深浅拷贝
深/浅拷贝的定义浅拷贝创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址 ，所以如果其中一个对象改变了这个地址，就会影响到另一个对象。深拷贝将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象,且修改新对象不会影响原对象深拷贝的实现乞丐版在不使用第...
2019-09-15 14:42:00
125
转载 JS - 变量和类型
导读变量和类型是学习JavaScript最先接触到的东西，先看下面几个问题：JavaScript中的变量在内存中的具体存储形式是什么？0.1+0.2为什么不等于0.3?发生小数计算错误的具体原因是什么？Symbol的特点，以及实际应用场景是什么？[] == ![]、[undefined] == false为什么等于true?代码中何时会发生隐式类型转换？转换的规则是什么？如...
2019-09-14 20:21:00
100
转载 移动端适配 - 原理篇
移动端适配，是我们在开发中经常会遇到的，这里面可能会遇到非常多的问题：1px问题UI图完美适配方案iPhoneX适配方案横屏适配高清屏图片模糊问题...上面这些问题可能我们在开发中已经知道如何解决，但是问题产生的原理，以及解决方案的原理可能会模糊不清。在解决这些问题的过程中，我们往往会遇到非常多的概念：像素、分辨率、PPI、DPI、DP、DIP、DPR、视口等等。本文...
2019-09-13 21:38:00
629
转载 js - 实现数组去重
方法一：创建一个新的临时数组来保存数组中已有的元素Array.prototype.unique = function(){ let uniqueArr = []; for(let i = 0; i < this.length; i++){ //如果当前数组的第i个元素已经保存进了临时数组，那么跳过 i...
2019-09-12 21:33:00
77
转载 js - 获取字符串出现最多的字符和次数
方法一： /** * @param {String}str 只接受字符串类型 * @return{JSON} key:出现最多字符， value:出现次数; 数组类型不是String类型，则返回空对象 **/ function getMax(str){ let hash = {}; let num =...
2019-09-12 16:12:00
523
转载 CSS - 神奇的BFC
一、什么是BFC？BFC（Block Formatting Context）Box: CSS布局的基本单位Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。 不同类型的 Box， 会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内...
2019-09-07 00:18:00
82
转载 JS - 常用的循环迭代
一、for loopfor (let i = 0; i < products.length; i++) { console.log(products[i]);}支持循环中断，可以用break中断二、forEach()循环forEach()是Array.prototype上的方法，可以使用它对数组进行循环遍历，forEach中传入要执行的回调函数，函数有三个参数。第一个...
2019-09-06 10:46:00
200
转载 JS - 遍历对象属性
栗子：var obj = { "name": "Poly", "career": "it"}Object.defineProperty(obj, "age", { value:"forever 18", enumerable:false });Object.prototype.protoPer1 = function(){console.log("proto");}...
2019-09-05 11:05:00
92
转载 vue组件间的通信方式
一、props/$emit父组件通过props的方式向子组件传递数据，而通过$emit子组件可以向父组件通信。1. 父组件向子组件传值prop只可以从上一级组件传递到下一级组件（父子组件），即所谓的单向数据流。而且prop只读，不可被修改，所有修改都会失效并警告。栗子一：子组件article.vue如何获取父组件section.vue的数据articles:['红楼梦', '西...
2019-09-04 18:57:00
112
转载 Web安全的三个攻防姿势
我们最常见的Web安全攻击有以下几种1.XSS 跨站脚本攻击2.CSRF 跨站请求伪造3.clickjacking 点击劫持/UI-覆盖攻击4.SQL注入XSS跨站脚本攻击（Cross Site Scripting）恶意攻击者往Web页面里插入恶意Script代码，当用户浏览该页之时，嵌入其中Web里面的Script代码会被执行，从而达到恶意攻击用户的目的。分类1....
2019-08-16 08:51:00
92
转载 图片懒加载
一、定义当打开一个有很多图片的页面时，先只加载页面上看到的图片，等滚动到页面下面时，再加载所需的图片。这就是图片懒加载。二、作用防止页面一次性向服务器发送大量请求，页面卡顿崩溃；缓解浏览器的压力，增强用户体验。三、实现方式1､设置图片src属性为同一张图片，同时自定义一个data-src属性来存储图片的真实地址2､ 页面初始化显示的时候或者浏览器发生滚动的时候判断图片是否在视...
2019-08-15 09:50:00
107
转载 CSS3自适应布局单位 —— vw,vh
1. 什么是视口？在桌面端，视口指的是在桌面端，指的是浏览器的可视区域；而在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）。2. 视口单位vw，vh视口单位中的“视口”，桌面端指的是浏览器的可视区域(不包括工具栏和按钮的网页浏览器)；移动端指的就是Viewport中的Layou...
2019-08-10 15:57:00
184
转载 CSS知识点
1、未知宽高的元素实现水平垂直居中方法一：flexbox布局优点：方便缺点：兼容性不好,IE支持很差<style>.parent4{ display: flex; justify-content: center; align-items: center; width: 300px; height:300px; ...
2019-08-10 10:23:00
72
转载 前端优化之DNS预解析
DNS预解析的目的在网页体验中我们常会遇到这种情况，即在调用百度联盟、谷歌联盟以及当前网页所在域名外的域名文件时会遇到请求延时非常严重的情况。那么有没有方法去解决这种请求严重延时的现象呢？DNS预解析一般来说，在前端优化中与 DNS 有关的有两点： 1）是减少DNS的请求次数，2）是进行DNS预获取——DNS Prefetch 。DNS与域名解析DNS（Domain Name ...
2019-08-07 08:27:00
91
转载 Vue面试经常会被问到的面试题
一、对于MVVM的理解MVVM 是 Model-View-ViewModel 的缩写。Model代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。View 代表视图模型，它负责将数据模型转化成UI 展现出来。View 层不负责处理状态，View 层做的是 数据绑定的声明、 指令的声明、 事件绑定的声明。ViewModel监听数据的改变和控制视图行为、处理用户交互，...
2019-08-06 12:53:00
234
转载 前端模块化：CommonJS,AMD,CMD,import/export
模块化的开发方式可以提高代码复用率，方便进行代码的管理。通常一个文件就是一个模块，有自己的作用域，只向外暴露特定的变量和函数。目前流行的js模块化规范有CommonJS、AMD、CMD（前三者是ES5中提供的）以及ES6的模块系统import/export。CommonJSNode.js是commonJS规范的主要实践者，它有四个重要的环境变量为模块化的实现提供支持：module、e...
2019-08-06 10:06:00
112
转载 小白眼中的网页渲染
从用户输入URL到浏览器呈现页面经过了哪些过程？1、用户输入URL，浏览器获取URL2、浏览器进行DNS解析（如果输入的是IP地址，此步骤省略）浏览器根据地址去本身缓存中查找dns解析记录，如果有，则直接返回IP地址，否则浏览器会查找操作系统中（hosts文件）是否有该域名的dns解析记录，如果有则返回。如果浏览器缓存和操作系统hosts中均无该域名的dns解析记录，或者已经...
2019-08-05 11:11:00
69
转载 【面试篇】原生JS（上）
互联网寒冬之际，各大公司都缩减了HC，甚至是采取了“裁员”措施，在这样的大环境之下，想要获得一份更好的工作，必然需要付出更多的努力。一年前，也许你搞清楚闭包，this，原型链，就能获得认可。但是现在，很显然是不行了。本文梳理出了一些面试中有一定难度的高频原生JS问题，部分知识点可能你之前从未关注过，或者看到了，却没有仔细研究，但是它们却非常重要。1. 基本类型有哪几种？null 是对...
2019-08-05 11:10:00
109
转载 js数组/字符串操作中的: split，slice，splice
slice splice split 这三个真的更容易混淆针对字符串的操作：split，slice1. split -- 把一个字符串分割成字符串数组语法：string.split(separator,howmany)separator 必需。字符串或正则表达式，从该参数指定的地方分割 string。howmany 可选。该参数可指定返回的数组的最大长度。注：如果把空字符串...
2019-08-05 11:09:00
125
转载 JS异步执行机制
前言JS异步执行机制具有非常重要的地位，尤其体现在回调函数和事件等方面。异步加载也叫非阻塞模式加载同步或非同步，表明着是否需要将整个流程按顺序地完成阻塞或非阻塞，意味着你调用的函数会不会立刻告诉你结果javascript的单线程和异步js是单线程语言（能提高效率。作为浏览器脚本语言，js的主要用途是与用户互动，操作DOM。而这也就决定它只能为单线程，否则会带来很复杂的同...
2019-08-05 11:08:00
161
转载 JS进(线)程，微(宏)任务，同(异)步总结
前言“JavaScript 是单线程、异步、非阻塞、解释型脚本语言。”浏览器进程进程:浏览器一个页面就是新的一个进程,进程是CPU资源分配的最小单位（系统会给它分配内存）;Browser进程 (http通信)第三方插件进程GPU进程(加速,3D渲染,一次)Renderer进程(新开页面渲染进程)Render进程（浏览器渲染进程）线程:线程包含在每个进程内,线程是C...
2019-08-05 11:06:00
82
转载 谜之This
前言this关键字是JavaScript中最复杂的机制之一，是一个特别的关键字，被自动定义在所有函数的作用域中，如何准确判断this指向的是什么？This是什么？this 就是一个指针，指向调用函数的对象。this的绑定规则: 1. 默认绑定 2. 隐式绑定 3. 硬绑定 4. new绑定1. 默认绑定默认绑定，在不能应用其它绑定规则时使用的默认规则，通常是独立函数调...
2019-08-05 11:05:00
77
转载 谜之闭包
我所认识的作用域链https://juejin.im/post/59535cf66fb9a06bc06a37c6什么是闭包（Closure）闭包就是有权访问另一个函数作用域中的变量的函数为什么需要闭包局部变量无法共享和长久的保存，而全局变量可能造成变量污染，所以我们希望有一种机制既可以长久的保存变量又不会造成全局污染。产生一个闭包创建闭包最常见的方式：在一个函数内部创建另一...
2019-08-05 11:04:00
51
转载 虚拟DOM（Virtual DOM）
什么是Virtual DOM？Virtual DOM是对DOM的抽象,本质上是JavaScript对象（也就是通过JavaScript语言来描述一段HTML代码）,这个对象就是更加轻量级的对DOM的描述.虚拟DOM首次产生是React框架最先提出和使用的，其卓越的性能很快得到广大开发者的认可，继React之后vue2.0也在其核心引入了虚拟DOM的概念。在没有虚拟DOM的时候，我们在...
2019-08-05 11:02:00
130
转载 ES6箭头函数与普通函数的区别
箭头函数：let fun = () => { console.log('lala');}普通函数function fun() { console.log('lalla');}箭头函数相当于匿名函数，并且简化了函数定义。箭头函数有两种格式，一种只包含一个表达式，连{ ... }和return都省略掉了。还有一种可以包含多条语句，这时候就不能省略{ ... ...
2019-08-05 10:54:00
99
转载 HTML中 select 与datalist的异同
比较：异同点selectdatalist多选可以不可以缺失值可以不可以查找不可以可以增添选项不可以可以datalist，标签定义选项列表，通常与input元素配合使用该元素，datalist元素的内容不会直接显示在网页上，只是会在用户输入时作为候选项<form>选择：<input type='te...
2019-08-05 10:53:00
619
转载 备战前端面试
1. js的typeof返回哪些数据类型？答案：js有哪几种数据类型：object（复杂类型）number function boolean undefined string symbol(ES6)（基本类型）其中typeof isNaN //Function2. 面向对象编程与面向过程编程的区别答案：面向对象和面向过程是两种不同的编程思想。面向过程就是分析出解决问题...
2019-08-05 10:44:00
198
转载 javascript获取数组中的最大值/最小值
1. 使用Math的静态方法max/minMath.max()函数返回给定的一组数中的最大值。它的语法：Math.max(value1[, value2, ...])使用此方法，需要注意，如果没有参数的话，则返回-Infinity。如果有任一参数无法被转换成数值，则返回NaN1.1 结合ES6的扩展运算符...使用扩展运算符，可以将数组形式转换为逗号参数的形式。Math.ma...
2019-08-05 10:33:00
946
转载 (...)ES6三点扩展运算符
扩展运算符(...)将一个数组转为用逗号分隔的参数序列作用：1）将一个数组，变为参数序列let add = (x, y) => x + y;let numbers = [3, 45];console.log(add(...numbers))//482）使用扩展运算符展开数组代替apply方法，将数组转为函数的参数//ES5取数组最大值console.log(...
2019-08-05 10:26:00
61
转载 CSS3-弹性布局（flex）
一、前言Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。它即可以应用于容器中，也可以应用于行内元素。Flex布局，可以简便、完整、响应式地实现各种页面布局。[只有横向伸缩，没有纵向伸缩的，但是可以纵向排版]二、flex简介采用Flex布局的元素...
2019-08-05 10:21:00
75
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人