sensyup-CSDN博客

转载浅析前端页面渲染机制

浅析前端页面渲染机制转载 2017年04月02日 15:39:09757作为一个前端开发，最常见的运行环境应该是浏览器吧，为了更好的通过浏览器把优秀的产品带给用户，也为了更好的发展自己的前端职业之路，有必要了解从我们在浏览器地址栏输入网址到看到页面这期间浏览器是如何进行工作的,进而了解如何更好的优化实践，本篇主要围绕这两点展开阐述。前端页面渲染机制可

2017-10-19 22:47:07 293

转载前端性能优化----yahoo前端性能团队总结的35条黄金定律

从yahoo 新学到的：网页内容减少http请求次数80%的响应时间花在下载网页内容(images, stylesheets, javascripts, scripts, flash等)。减少请求次数是缩短响应时间的关键！可以通过简化页面设计来减少请求次数，但页面内容较多可以采用以下技巧。1. 捆绑文件: 现在有很多现成的库可以帮你将多个脚本文件捆

2017-09-24 19:15:47 311

转载 img图片造成间隙问题

* 解决img标签上下出现的间隙：图片文字等内联元素，它默认对齐方式都是和它的父级的 baseline 去进行对齐的，但是对齐的是 baseline，撑开高度的却是元素整体的高度（bottom line），这样肯定就会造成一定的间隙：*1. display属性设置为：block；2. vertical-align设置为 middle；3. 设置浮动；4. 父元素把文字大

2017-09-10 10:12:26 396

转载脱离文档流分析

来源：　　http://www.cnblogs.com/shenfangfang/p/5278528.html先来了解一下block元素和inline元素在文档流中的排列方式。　　block元素通常被现实为独立的一块，独占一行，多个block元素会各自新起一行，默认block元素宽度自动填满其父元素宽度。block元素可以设置width、height、margin、padding属

2017-09-08 15:17:05 412

转载理解HTTP协议

HTTP协议，超文本传输协议HYPER TEXT TRANSFER PROTOCOL的缩写，用于从万维网服务器传输超文本到本地浏览器的协议。它基于TCP/IP通信协议来传输数据(HTML文件，图片，查询结果等）HTTP协议属于应用层。它允许传输任意类型的数据对象，正在传输的类型由CONTENT-TYPE标记。1.HTTP协议是一种无连接协议：指的是每次连接只处理一个请求，服

2017-09-06 18:41:07 233

转载跨域问题详解

1.什么叫跨域？根本来说，不同协议、域名、端口都是不同的域，详细情况如下：URL 说明是否允许通信http://www.a.com/a.jshttp://ww

2017-09-06 14:06:05 244

转载理解JS中的call、apply、bind方法

理解JS中的call、apply、bind方法(*****************************************************************)在JavaScript中，call、apply和bind是Function对象自带的三个方法，这三个方法的主要作用是改变函数中的this指向。call、apply、bind方法的共同点和区别：

2017-08-31 16:59:42 187

转载【转自阮一峰老师】React Router中IndexRoute组件的用法

IndexRoute 组件下面的例子，你会不会觉得有一点问题？Router> Route>Router>上面代码中，访问根路径/，不会加载任何子组件。也就是说，App组件的this.props.children，这时是undefined。因此，通常会采用{this.props.children || }这样的写法。这时，Hom

2017-08-31 16:38:09 11409

转载 link和@import有什么区别？

页面中使用CSS的方式主要有3种：行内添加定义style属性值，页面头部内嵌调用和外面链接调用，其中外面引用有两种：link和@import。外部引用CSS两种方式link和@import的方式分别是：XML/HTML代码 XML/HTML代码 @import url("CSS文件"); 两者都是外部引用CSS的方式，但是存在一定的区别：

2017-08-29 17:22:24 423

转载 z-index怎么用

定义和用法zIndex 属性设置元素的堆叠顺序。该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。提示和注释注释：元素可拥有负的 z-index 属性值。注释：Z-index 仅能在定位元素上奏效。备注：当你定义的CSS中有position属性值为absolute、re

2017-08-28 11:40:48 573

原创 LESS CSS学习

LESS的存在主要用于解决CSS的问题，包括不方便维护扩展、不利于复用等，因为CSS是一门非程序式语言，没有变量、函数、作用域等概念，而LESS在CSS语法的基础上，引入了变量、运算以及函数等功能，简化了CSS的编写，降低了维护成本。LESS可以直接在客户端使用，也可以在服务器端使用，但是更推荐将LESS编译生成静态CSS文件，在HTML文档中应用。首先下载LESS.JS文件（http:

2017-08-24 13:53:53 250

转载 CANVAS绘制虚线和圆点虚线

绘制虚线在MDN上，我查到一个叫CanvasRenderingContext2D.setLineDash()的API。官方介绍：CanvasRenderingContext2D.setLineDash() 是 Canvas 2D API 设置虚线样式的方法。使用方式很简单：ctx.setLineDash(segments);其接受一个参数segments，这个参数

2017-08-09 14:53:28 2592

原创 canvas中save和store函数的用法

save方法用于临时保存画布坐标系统的状态restore方法可以用来恢复save之后设置的状态其实就像SAVE-LOAD一样，举个例子，我们先SAVE坐标系的位置，然后把画布坐标原点更换之后，在新的坐标系下画了一个图形，再然后我们想要恢复原来的坐标系，这时就要LOAD,也就是RESTORE，就可以实现恢复SAVE时的坐标系的位置的目的。可以像这样使用：Paint p

2017-08-09 14:39:43 1371

原创 ES5中的继承

ES中只支持实现继承，且其继承是通过原型链来实现的。基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。让一个原型对象等于另一个类型的实例。原型链有个严重的问题，就是包含引用类型值的原型，属性会被所有实例共享。还有一个问题是无法向超类的构造函数传参。比如：function SuperType(){this.colors=["blue","red"];}fun

2017-07-21 22:49:39 1004

原创创建对象的方法

1.工厂模式function createPerson(age,name){var ob=new Object();ob.name=name;ob.age=age;return ob;}缺点：无法解决对象识别问题2.构造函数模式function Person(name,age){this.name=name;this.age=age;}与工厂模式

2017-07-21 19:02:33 200

原创讲讲Js中的函数

函数实例实际上是对象！每个函数都是FUNCTION类型的实例，与其他引用类型一样具有属性和方法，因此函数名实际上就是一个指向函数对象的指针，并不与函数绑定。1.函数声明的两种方法：1）函数声明式function sum(num1,num2){}2)函数表达式var sum=function(num1,num2){}；其实还可以使用Function构造函数，不过一般不用。

2017-07-20 16:48:49 195

原创执行环境及作用域

执行环境定义了变量或函数有权访问的其他数据，决定了他们各自的行为，每个执行环境都有一个与之关联的变量对象。环境中定义的所有变量和函数都保存在这个对象中。全局执行环境是最外围的一个执行环境，在WEB浏览器中，window对象就是全局执行环境。某个环境中的代码都执行完之后就会被销毁，全局执行环境直到应用程序退出后才会被销毁。每个函数都有自己的执行环境，机制和其他语言比较相似，执行的时候把它所在

2017-07-18 22:10:05 270

原创 JS基础知识点梳理

1.数据类型ECMAScript有五种简单（基本）数据类型，分别是UNDEFINED,NULL,BOOLEAN,NUMBER,STRING，还有一种复杂数据类型OBJECT。对象可以理解成一组数据和功能的集合。可以通过new Object()方法来创建。JS不支持自己创建数据类型。鉴于数据类型是松散型的，我们用typeof来请确定变量的类型。其中NULL会返回OBJECT，可以把NULL理

2017-07-18 19:34:49 885

原创跨域技术之WEB SOCKET

WEB SOCKET的目标是在一个单独的、持久的连接上提供全双工，双向通信，在JS中创建WEB SOCKET之后，会有一个HTTP请求发送到浏览器以发起连接，服务器响应后，建立的连接就会使用HTTP升级变为WEB SOCKET协议（原来是HTTP协议）此时未加密协议的连接是WS://，加密的是WSS：// 原来是HTTP://和HTTPS：//这种自定义协议的好处是，可以发送非常少的数据

2017-07-17 20:37:07 2530

原创简单聊聊CANVAS画图

CANVAS画图的基本操作非常简单，就是填充和描边，填充是fill,描边是stoke,其实很好理解，我们正常在纸上画图，也无非就是描个边填个色。画图之前先要得到2D上下文，用getContext("2d")方法，要想用3D上下文就传3D，不过目前好像还没有实现3D上下文。balabalavar drawing=document.getElementById("drawing");v

2017-07-16 16:59:17 551

原创事件委托很简单

事件委托的存在是为了解决“事件处理程序过多”的问题的。事件委托利用事件冒泡，指定一个事件处理程序来管理某一类型的所有事件，一般是在高层次的DOM节点添加处理程序，来处理底层次节点的事件。比如： var list=document.getElementById("link");list.addEventListener("click",function(even

2017-07-16 13:59:01 257

原创前端事件处理的四种方法

事件就是用户或浏览器自身执行的某种动作，比如CLICK，LOAD，MOUSEOVER等等，响应事件的函数就是事件处理函数。1.事件处理可以直接在HTML级别写，这样就可以调用在页面其他地方定义的脚本，当然也可以直接在ONCLICK后面写函数。事件处理程序的代码在执行时，有权访问全局作用域的任何代码。这种方式下，首先会创建一个封装着元素属性值的函数，这个函数中有个局部变量EVENT，就是

2017-07-16 12:58:16 2637

原创 REACT-REDUX用法详解

建议学习顺序：FLUX->REDUX->REACT-REDUX，否则可能理解本文有困难。REACT-REDUX是REDUX官方的与REACT绑定的REDUX版本，用于辅助在REACT中使用REDUX。REACT-REDUX的API包括REACT COMPONENT(PROVIDER)和一个CONNECT（高阶方法）分别介绍一下：1.PROVIDER，它是STORE的提供者，我们把原

2017-07-12 11:16:30 708

转载 object.assign函数用法

Object.assign() 方法用于将所有可枚举的属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。语法EDITObject.assign(target, ...sources)参数target目标对象。sources(多个)源对象。返回值目标对象。描述EDIT如果目标对象中的属性具有相同的键，则属性将被源中的属性覆盖。后来

2017-07-11 20:18:14 4312

原创漫谈REDUX

要想了解REDUX，还是需要先了解FLUX，建议看我的上篇文章《漫谈FLUX》。首先说一下，REDUX和REACT并没有什么联系，不管用什么框架，都可以用REDUX作为一种状态管理器，它是JAVASCRIPT的状态容器，提供可预测的状态管理。那什么是状态呢？状态其实可以理解成动态的数据，但凡会不断变化的数据，我认为都可以理解成状态。当一个应用变得复杂时候，它的状态就很难管理，一

2017-07-11 15:22:31 210

原创漫谈FLUX

为什么需要FLUX？react的核心是组件，严格意义上说react主要负责VIEW层的东西，当应用复杂程度高的时候，它的state会变得十分复杂，这个时候我们需要一个工具解决除了VIEW层之外的东西，所以我们需要FLUX。什么是FLUX？FLUX是FACEBOOK提出的一套前端应用架构模式，核心概念是单向数据流。注意它不是一个具体的框架，它有很多实现，比如REDUX，这些才是框架。

2017-07-10 15:07:12 240

原创如何在webpack中引入jquery和bootstrap

今天写代码的时候，想使用bootstrap的样式，我首先用npm install bootstrap，然后在首页中引入import '../node_modules/bootstrap/dist/css/bootstrap.min.css';但是发现这样是不行的，会报错找不到这个MODULE，查资料得知我需要安装css-loader和style-loader，用于把css转换成文件。能够把

2017-07-05 20:21:04 3114

原创 es6 箭头函数总结

之前看阮一峰大神的ES6入门，觉得箭头函数是个好东西，今天用的时候遇到了一点问题，总结一下。首先是参数部分：ES6箭头函数，没有参数的时候这样写()=>x;等同于 function(){return x;}有参数的时候就在括号里传(param1,param2...)如果只有一个参数，可以省略括号，写成 x=>x 等同于function(X){return x;}还

2017-07-04 20:05:44 3064

原创 js中map函数的用法

一直对MAP的用法不甚了了，故此总结一下。array1.map(callbackfn[, thisArg]) 可以看到，官方定义中，map除了一个ARRAY数组外，还需要两个参数，第一个是回调函数，第二个是绑定的this的。回调函数即对array中的每个值执行的函数，callback函数的参数是酱婶儿的：function callbackfn(value, index, array

2017-07-04 15:25:39 9669

原创 React实战——一起来做个记事本吧！

参考react全栈这本书的内容，一起来做个记事本吧！开发步骤遵循THINKING IN REACT开发方式（参考文献：http://www.cnblogs.com/sohobloo/p/5387598.html）1.我们首先需要设计一个原型图，一个记事本工具，需求大概是记事列表、记事浏览、编辑、删除等功能，所以原型图需要列表和浏览的窗口，还有编辑和删除的按钮就可以了。具体原型图可以

2017-07-04 14:31:08 793

原创 React学习杂记

1.render应该是一个纯函数，它的意义在于每次给定相同的输入，应该返回相同的输出，不应该有修改state或者交互的行为，这些交互行为交给逻辑来做。2.组件应该遵循最小化STATE原则，即尽可能让大部分的组件是无状态的，这样做是为了降低复杂度，这些无状态的组件唯一需要关心的就是渲染数据，他们的外层加一个有STATE的组件就可以了，这个外层组件处理事件和逻辑，修改STATE。而这些无状态的子组

2017-07-04 13:29:20 174

原创 npm shrinkwrap的用途

在学习WEBPACK整合开发的过程中，看到别人的项目里有个NPM-SHRINKWRAP.JSON的配置文件，打开后发现里面主要是一些包的版本配置信息。那么，在已经有了PACKAGE.JSON的DEPENDENCIES字段配置依赖关系的情况下，为什么还需要SHINKWRAP呢？查阅后发现，这是由于以下两点原因：1.npm 建议使用 semver 的应用程序版本，但这也完全依赖第三方包遵守

2017-07-03 14:39:18 1184

sensyup的博客