gigi就是我-CSDN博客

原创使用timeline分析动画性能

在使用动画的时候，在PC上看往往察觉不到太明显的卡顿，但在移动端中却会出现明显的卡顿，这是就要使用硬件加速来提升动画性能，具体可以看CSS动画的性能优化。这篇文章主要写的是如何通过chrome的timeline来观察到动画性能的提升。timeline面板可以用来录制页面运行的某一时间段，由此分析性能。 timeline面板主要包含以下几块：Controls：一些选项，以及开始和停止记录的按钮O

2017-08-23 21:40:09 1483

原创知识点：CSS实现一个图案

也是面试中遇到的，要实现这样一个图形：其实就是使用一个宽高为0的边框实现这个图案，然后再旋转45度。<div id="box"> <div></div></div>#box{ width:100px; height:100px; border-radius:50px; overflow:hidden;}#box>div{ width:0; height:0;

2017-08-23 16:28:39 425

原创知识点：阻止scroll事件

面试的时候被问道怎么取消一个事件的默认行为，当然是用event.preventDefault()了。但是怎么屏蔽页面的滚动？这里event.preventDefault()不起作用，原因就是scroll事件属于UI事件，而UI事件一般是不能够取消默认行为的。UI事件包括：load、unloadaborterrorselectresizescroll为这类事件绑定事件处理函数，只会在

2017-08-23 16:12:52 10523 2

原创 setTimeout与setInterval

基本概念与用法就忽略了。主要是使用这两个定时器可能出现的问题：this由setTimeout与setInterval调用的代码运行在与所在函数完全分离的执行环境上。这会导致，这些代码中包含的 this 关键字在非严格模式会指向 window (或全局)对象，严格模式下为 undefined，这和所期望的this的值是不一样的。在ES6中可以使用箭头函数来绑定外层this；要么就是用bind进行硬

2017-08-22 23:01:10 288

原创什么是前端路由

传统的路由指的是：当用户访问一个url时，对应的服务器会接收这个请求，然后解析url中的路径，从而执行对应的处理逻辑。这样就完成了一次路由分发。而前端路由是不涉及服务器的，是前端利用hash或者HTML5的history API来实现的，一般用于不同内容的展示和切换。其实前端路由要做的就是两点：在页面不刷新的情况下实现url的变化捕捉url的变化，根据url更改页面内容hashhash是url

2017-08-20 19:50:55 3058

原创正则表达式实战

参考文章 JS正则表达式完整教程（略长）正则相关的那些方法检查是否有匹配项regexp.test(str)：返回true或falsestr.search(regexp)：匹配成功则返回第一个匹配项的索引，否则返回-1返回所有匹配项regexp.exec(str) 这个方法一般只用于获取第一个匹配结果或者获得捕获组。若想匹配多个结果需要多次调用exec方法，下一次查找将从last

2017-08-19 11:43:02 440

原创你不知道的js【上卷】随看随记

第二章词法作用域作用域逐级查找的规则，会产生“遮蔽效应”，也就是内部的标识符遮蔽了外部的标识符。但是通过window.a可以访问那些被同名变量所遮蔽的全局变量。但非全局的变量如果被遮蔽了，无论如何都无法被访问到。词法作用域的意义在于，无论函数在哪里被调用，无论如何被调用，它的词法作用域都只由函数被声明时所处的位置决定。词法作用域查找只会查找一级标识符。比如a,b,c这种。

2017-08-18 17:50:00 639

原创浏览器的 16ms 渲染帧

渲染帧是指浏览器一次完整绘制过程，帧之间的时间间隔是DOM视图更新的最小间隔。由于主流的屏幕刷新率都在60hz，因此渲染一帧的事件就必须控制在16.7ms内才能保证不掉帧。也就是说每一次渲染都要在 16.7ms 内页面才够流畅不会有卡顿感。这段时间内浏览器需要完成如下事情：js执行：脚本造成了需要重绘的改动，比如增删 DOM、请求动画等样式计算layoutpaint：各层分别进行绘制（

2017-08-18 09:44:11 2768

原创兼容性问题总结

以便面试被问到的时候什么都说不出来…… 不过现在已经不是之前需要关注ie6那些怪异兼容性问题的时代了，ie最多支持到8。除了ie8的兼容性问题外，还有一些移动端的兼容问题。面试中被问到的话，最好结合自己实际的经验说一下，什么情况下遇到的，怎么处理的，而不是背书。使用reset来使所有浏览器初始样式相同针对ie8兼容性视图当初IE8发布时，相对于IE6/7已经做出了非常大的改进，但是很多老站

2017-08-17 20:46:37 333

原创 web安全学习笔记

XSS 跨站脚本攻击，指攻击者在网页中嵌入恶意脚本，当用户浏览此网页时脚本就会执行，从而达到攻击者的目的，比如获取cookie、导航到恶意网站等。分类反射型XSS将用户输入的存在XSS攻击的数据，发送给后台，后台并未对数据进行存储，也未经过任何过滤和转义，直接返回给客户端被浏览器渲染。就可能导致XSS攻击；假设站点http://www.test.com/xss/refl

2017-08-17 11:06:15 2214 2

原创浏览器结构

User Interface用户界面：包括地址栏、前进/后退按钮、书签菜单等Browser Engine浏览器引擎：在用户界面和呈现引擎之间传送指令Rendering Engine呈现引擎（渲染引擎）：负责显示请求的内容。如果请求的内容是 HTML，它就负责解析 HTML 和 CSS 内容，并将解析后的内容显示在屏幕上。Networking网络：用于网络调用，比如 HTTP 请求JavaSc

2017-08-17 09:35:23 662

原创 less-loader、css-loader、style-loader

webpack中与样式相关的几个loader：less-loader：将less编译为csscss-loader：css-loader会遍历 CSS 文件，找到其中的@import与url（），当作css依赖的模块并处理它们。style-loader：将css代码插入到页面的style中

2017-08-14 17:05:45 1634

原创 window.getComputedStyle

window.getComputedStyle(元素，伪类)用于获得元素最终使用的css属性值，返回一个实时的 CSSStyleDeclaration，只读。var dom = document.getElementById("test"), style = window.getComputedStyle(dom);getComputedStyle与style的区别：getComputed

2017-08-14 16:39:54 422

原创 js：发布订阅模式

var EventUtil = (function(){ var events = {}; function bind(e,handler){ if(!events[e]){ events[e] = []; } events[e].push(handler); }; function trigg

2017-08-13 21:14:15 420

原创使用apply实现bind方法

Function.prototype.bind = function(context){ //保存this，也就是调用bind的那个函数 var self = this; var args = [].slice.call(arguments,1); return function(){ //将第一次的参数与此次传入的参数合并，调用self函数

2017-08-13 20:03:35 1018

原创弄清楚作用域、执行上下文、变量对象、作用域链

作用域：规定了如何查找变量，也就是确定当前执行代码对变量的访问权限。 JavaScript 采用词法作用域，也就是静态作用域，在定义时就确定了作用域。执行上下文：是全局或函数的执行环境，js引擎使用执行上下文栈来管理执行上下文。初始化的时候首先就会向执行上下文栈压入一个全局执行上下文当执行到函数时，就将函数的执行上下文压入栈中。函数执行完毕后就会将函数的执行上下文从栈中弹出。每个执行上下文都

2017-08-13 19:35:48 563

原创 js的静态作用域

作用域规定了如何查找变量，也就是确定代码对变量的访问权限。js采用的是词法作用域，也就是静态作用域，是在定义阶段就决定好了的，而不是在执行阶段才决定的。var value = 1;function foo() { console.log(value);}function bar() { var value = 2; foo();}bar();由于是静态作用域，因此在bar

2017-08-13 15:11:11 480

原创 js学习笔记：柯里化

柯里化是指将使用多个参数的函数转换成一系列使用一个参数的函数的技术。柯里化的用途主要是参数复用，例如：function add(a, b) { return a + b;}add(1,2) //3在柯里化之后或许可以这样使用：var addCurry = curry(add);addCurry(1)(2); //3或许针对这种简单的将两个数相加的场景，柯里化显得有点多余。但是如果我

2017-08-13 14:44:07 8710 3

原创实现jQuery.each方法

参考JavaScript专题之jQuery通用遍历方法each的实现 $.each是一个通用的迭代函数，可以用来迭代数组与对象。$.each(arr,function(index,value){ ……})$.each(obj,function(prop,value){ ……})$.each()函数和 $(selector).each()是不一样的，那个是专门用来遍历一个jQue

2017-08-12 21:25:54 541

原创 js数组扁平化

参考自JavaScript专题之数组扁平化数组的扁平化，就是将一个嵌套多层的数组 array (嵌套可以是任何层数)转换为只有一层的数组。var arr = [1, [2, [3, 4]]];//扁平化之后：[1,2,3,4];递归循环数组元素，如果还是一个数组，就递归调用该方法function flatten(arr){ var res = []; for(var i

2017-08-12 21:00:59 10888

原创 js中求数组的最大值与最小值

主要是利用Math.max（）与Math.min（）方法，这里统一以求最大值为例：最原始的方法，循环：function max(arr){ var max = arr[0]; for(var i=1;i<arr.length;i++){ max = Math.max(max,arr[i]); } return max;}reduce 也是遍历

2017-08-12 20:30:07 1736

原创模块化之间的比较

CommonJS是nodejs使用的模块化规范，一个单独的文件就是一个模块，加载模块使用require方法同步加载，该方法读取一个文件并执行，最后返回文件内部的exports对象。//example.jsexports.message = "hi";exports.say = function (){ console.log("hello");};var exam

2017-08-12 13:24:47 479

原创前端工程化

前端工程化是根据具体的业务特点，将前端的开发流程、技术、工具、经验等规范化、标准化。它的目的是最大程度地提高前端工程师的开发效率。模块化js模块化在ES6之前，JavaScript一直没有模块系统，这对开发大型复杂的前端工程造成了巨大的障碍。对此社区制定了一些模块加载方案，如CommonJS、AMD和CMD等。现在ES6已经在语言层面上规定了模块系统，完全可以取代现有的CommonJS

2017-08-11 17:38:21 1151

原创 flexbox布局实例

等高布局之前我们实现等高布局的方式通常是使用非常大的padding-bottom与负的margin-bottom，而使用flex也能轻松实现。由于align-items属性的默认值是stretch，也就是子项目会默认伸展来填满容器。因此当我们设置了容器的height，或者某一子项目的height撑开了容器，那么所有子项目默认都会stretch成容器的高度，从而实现等高。n栏布局(grid布局)一

2017-08-10 19:06:35 2491

原创 display: none;与visibility: hidden;的区别

都能使元素不可见，区别：display：none会让元素在渲染树中消失，不占用任何空间； visibility: hidden;则保留元素占据的空间，也依旧在渲染树中。display：none是非继承属性，但由于元素在渲染树中消失因此子孙节点也会一并消失，通过修改子孙节点的属性也无法显示。 visibility: hidden;是继承属性，子孙节点消失是由于继承了hidden值，那么只要设置

2017-08-09 21:47:45 1111 1

原创有关http的那些事

http1.1与http1.0的区别缓存处理http1.0主要借助Expires、if-modified-since来进行缓存的判断。 http1.1中新增了Etag与if-none-match字段。带宽优化及网络连接http1.1在请求头中引入了range字段，允许只请求资源的某一部分，返回码是206长连接http1.1支持长连接，即在一个tcp连接上传送多个htt

2017-08-09 21:01:53 265

原创前端性能优化大总结

减少HTTP请求合并脚本与样式文件使用雪碧图图像使用data url图片被转换成base64编码的字符串形式，内嵌于CSS或HTML中，而不必单独请求。<img src="data:image/gif;base64,R0lGODlhMwAxAIAAAAAAAP///yH5BAAAAAAALAAAAAAzADEAAAK8jI+pBr0PowytzotTtbm/DTqQ6C3hGXElcraA9jI

2017-08-08 16:11:50 450

原创浏览器的同源策略

同源的定义相同的协议、端口和域名：比如针对http://store.company.com/dir/page.html： - http://store.company.com/dir2/other.html 同源 - http://store.company.com/dir/inner/another.html 同源 - https://store.company.com/secu

2017-08-07 14:45:47 349

原创 Sass学习笔记

Sass 是对 CSS 的扩展，让 CSS 语言更强大、优雅。它允许你使用变量、嵌套规则、 mixins、导入等众多功能，并且完全兼容 CSS 语法。可以通过命令行的方式编译Sass：sass input.scss output.css还可以命令 Sass 监视文件的改动并更新 CSS ：sass --watch input.scss:output.css但一般就会使用gulp、webpack

2017-08-07 14:21:50 338

原创 ES6学习笔记：数组

创建数组在ES5之前，创建数组主要存在两种方式：Array构造器和数组字面量，但这两种方式都需要将数组的项分别列出。为了使数组创建更容易，ES6添加了以下两种新方法Array.of()ES6 为数组新增创建方法的目的之一，是帮助开发者在使用 Array 构造器时避开 JS 语言的一个怪异点。调用 new Array() 构造器时：如果使用多个参数（无论是否为数值类型）来调用，这些参数会成为

2017-08-07 10:47:12 363

原创 js函数式编程

函数式编程是一种编程范式，就是一些编程的原则。常见的编程范式有命令式编程、逻辑式编程等等。在函数式编程的世界中，函数是一等公民。函数式编程的主要好处是没有副作用：即不依赖外部的状态也不修改外部的状态，函数调用的结果不依赖调用的时间和位置，这样写的代码容易进行推理，不容易出错。这使得单元测试和调试都更容易。纯函数纯函数：相同的输入总是输出相同的结果，它的执行不依赖于系统的状态等其他外部

2017-08-06 21:25:00 331

原创 js解析url查询参数

var path = 'www.u.com/home?id=2&type=0&dtype=-1';function parseUrl(url){ var result = []; var query = url.split("?")[1]; var queryArr = query.split("&"); queryArr.forEach(function(item)

2017-08-06 12:56:56 8373

原创服务器渲染与客户端渲染

服务器渲染（后端渲染）浏览器发送请求到服务器端，服务器端处理请求并处理好数据，然后生成html文件，并返回给浏览器。传统的jsp、php都是属于服务器渲染。后端渲染的优势：首屏性能好，不需要先下载一堆 js 和 css 后才能看到页面有利于SEO后端渲染的劣势：不能实现部分更新。即使只有一部分变动，也需要后端重新渲染整个页面并发回给浏览器。客户端渲染（前端渲染）服务器端处理请求后将数据

2017-08-05 22:47:19 1076

原创如何实现js的map和filter函数

总结自如何实现JavaScript的Map和Filter函数？这篇文章一步一步地从一个普通的for循环开始抽象出map与filter函数，我这里直接写了结果。js中数组的两个方法：map和filter，前者返回一个对每一项进行函数调用的结果组成的数组，后者则返回那些调用函数结果为true的项。自定义map：function map(arr,func){ var newArr = [

2017-08-05 22:28:28 1947

原创 ES6学习笔记：类

ES5中的仿类结构function PersonType(name){ this.name = name;}PersonType.prototype.sayName = function(){ console.log(this.name);}let person = new PersonType("Nicholas");person.sayName(); /

2017-08-05 21:52:27 3740

原创 js及jQuery中的各种宽高

参考： JavaScript及jQuery中的各种宽高属性图解js中的宽高属性windowscreen对象window.screen包含有关用户屏幕的信息：window.screen.width：整个屏幕的宽度比如我现在的显示屏宽度即使2560window.screen.height：整个屏幕的高度window.screen.availWidth：可使用部分的宽度window.s

2017-08-04 11:48:10 345

记录自视频What the heck is the event loop anyway? – Philip Robertsjs是一个单线程语言，只有一个调用栈（call stack），在同一时间只能做一件事情。one thread == one call stack == one thing at a time当调用一个函数的时候，我们把这个函数的执行上下文push到调用栈中，当函数执行完毕再将它

2017-08-04 09:41:34 3107

原创 ES6学习笔记：迭代器与生成器

许多编程语言都将迭代数据的方式从使用 for 循环转变到使用迭代器对象。for循环需要初始化变量以便追踪集合内的位置迭代器则以编程方式返回集合中的下一项，能使操作集合变得简单。普通的迭代方式：var colors = ["red", "green", "blue"];for (var i = 0, len = colors.length; i < len; i++) { console

2017-08-03 16:05:03 581

原创 ES6学习笔记：解构

对象解构let node = { type: "Identifier", name: "foo"}我们想从这个对象中提取数据，需要一项项地去解析：let type = node.type;let name = node.name;但是使用解构就可以使用更简单的语法提取数据：let {type,name} = node;console.log(type);

2017-08-02 21:50:39 1570

原创 ES6学习笔记：对象

对象分类ES6 规范明确定义了对象的每种类别：普通对象：拥有js对象所有默认的内部行为奇异对象：其内部行为在某些方面有别于默认行为标准对象：如Array、Date等。标准对象可以是普通的，也可以是奇异的内置对象：由js运行环境提供的对象。所有的标准对象都是内置对象。对象字面量ES6用几种方式扩展了对象字面量：属性值简写在以前，对象字面量是键值对的集合，属性值在初始化的时候可能会有重复：fun

2017-08-02 17:59:10 911

空空如也

js中window.open之前的事件是什么？

js如何实现点击链接激活已打开页面？