高石石石-CSDN博客

原创 web缓存

为什么要缓存一般针对静态资源如CSS,JS,图片等使用缓存，原因如下：请求更快：通过将内容缓存在本地浏览器或距离最近的缓存服务器（如CDN），在不影响网站交互的前提下可以大大加快网站加载速度。节省带宽：对于已缓存的文件，可以减少请求带宽甚至无需请求网络。降低服务器压力：在大量用户并发请求的情况下，服务器的性能受到限制，此时将一些静态资源放置在网络的多个节点，可以起到均衡负载的作用，降低服务器的

2017-08-25 16:40:09 245

一、code splitting的意义web项目越来越重时，打包产生的输出文件越来越大，因为所有的模块都是打包到这个一个文件中，很明显会影响到页面加载的速度。code splitting是指将页面分块打包，按需加载。二、切割点选择require.ensurerequire.ensure（dependencies，callback），回调中异步加载require.ensure(["module-a",

2017-07-31 16:35:16 366

原创 webpack之entry

一般情况下使用webpack对于entry属性只是设置一个路径+文件名//输入当前路径下的app.js文件，输出到output文件夹下output-file.jsmodule.exports = { //路径path.join(__dirname, '/app.js') entry: './app.js', output: { path: './output

2017-07-27 15:42:30 1818 2

原创 WebSocket

websocket简介 WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端原理在实现websocket连线过程中，需要通过浏览器发出websocket连线请求，然后服务器发出回应，这个过程通常称为“握手” 。在 WebSocket API，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务

2017-07-25 20:03:00 316

原创 http请求方法与状态码

一、http方法HTTP/1.1协议共定义了八种请求方法 1. get ：向特定资源发送请求，获得资源 2. post ：传输实体主体，修改服务器上到资源 3. put ：传输文件，没有验证机制不安全 4. head ：获得报文首部，用于确认URI的有效性及资源更新的日期时间 5. delete ：删除文件，与PUT方法相反，按URI删除指定资源 6. options ：查询

2017-07-25 15:41:32 330

原创前段模块化开发——AMD规范

CommonJScommonJS用于服务端node.js的模块化定义模块根据CommonJS规范，一个单独的文件就是一个模块。每一个模块都是一个单独的作用域，也就是说，在该模块内部定义的变量，无法被其他模块读取，除非定义为global对象的属性模块输出：模块只有一个出口，module.exports对象，我们需要把模块希望输出的内容放入该对象加载模块：加载模块使用require方法

2017-07-20 14:40:53 309

原创 CSS规范中的BFC

一、什么是BFC1.Formatting context:页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及其他元素的关系和相互作用。2.Box：css布局的基本单位。元素的类型和display属性决定了这个box的类型。不同类型的box，会参与不同的Formatting Context（决定如何渲染文档）。　　block-level box：display属性是block、

2017-07-14 19:45:11 285

原创外边距折叠

1.概念外边距折叠，指的是毗邻的两个或多个外边距 (margin) 会合并成一个外边距毗邻：1.两个或多个外边距没有被非空内容、padding、border或clear分隔开。2.margin都处于普通流中，即非浮动，非定位、非浮动元素。在没有被分隔开的情况下，一个元素的margin-top会和它普通流中的第一个元素的margin-top相邻；只有在一个元素的height：auto的情况下，marg

2017-07-14 12:39:29 230

原创各种居中的css实现

一、文本居中　　文本的水平居中text-align:center;　　文本的垂直居中设置行高即可line-height：20px;二、行内元素的居中vertival-align是相对兄弟的行高来定位，所有加一个空的兄弟使得高度等于父盒子 #box{ width: 800px; height: 800px; border: 1px solid re

2017-07-14 12:20:06 236

原创正则匹配：match与exec

1.match是字符串的方法，exec是正则对象实例的方法var s='我的世界1234567abcdefg';var result=s.match(/\d/);console.log(result);//返回一个数组，数组长度为1，包含匹配到的项，另外还有index和input属性var s='我的世界1234567abcdefg';var result=/\d/.exec(s);cons

2017-07-13 14:45:17 388

原创利用Object.prototype.toString.call(obj)判断数据类型

1.typeof判断数据类型typeof可以用来判断基本数据类型，对于Array、Error、RegExp、Number、Function只能判断为object2.使用Object.prototype.toString.call(obj)判断数据类型var a=new Number(12);var toString=Object.prototype.toString;console.log(to

2017-07-13 14:40:54 321

原创很急很关键！！！关键javascript中的类型转换

js是一门弱类型的语言，类型转换不可避免一、显式类型转换1.toString()方法js的内置对象都重写了这个方法，用来返回字符串（Object.prototype.toString.call(obj)判断数据类型）var num=10;num.toString();//'10'//toString函数接受参数表示返回字符串按什么进制var num=10;num.toString(2);//'

2017-07-13 14:37:25 217

原创弹性布局display:flex

1.flex-direction：设置伸缩项目的排列方式，即主轴的方向row 设置从左到右排列 row-reverse 设置从右到左排列 column 设置从上到下排列 column-reverse 设置从下到上排列2.justify-content：调整主轴方向上的对齐方式，对于弹性盒子内元素flex-start 伸缩项目以起始点靠齐 flex-end

2017-07-13 13:49:00 464

原创父级盒子无高度，子盒子浮动，高度自适应

利用浮动实现三列布局，中间宽度自适应 #box{ border: 1px solid red; } #left{ width: 120px; height: 300px; float:left; background-color: grey; } #main{ hei

2017-07-13 11:45:50 2708

原创三栏布局方法

1. 浮动法，左列左浮动，右列右浮动，插入主体。中间内容#main必须要在最后加入，#main占一行会影响后面的浮动元素 html,body{ margin: 0; height: 100%; } #left{ width: 120px; float: left; height: 100%;

2017-07-13 11:36:50 201

gaolee1993的博客