- 博客(15)
- 收藏
- 关注
原创 web缓存
为什么要缓存一般针对静态资源如CSS,JS,图片等使用缓存,原因如下:请求更快:通过将内容缓存在本地浏览器或距离最近的缓存服务器(如CDN),在不影响网站交互的前提下可以大大加快网站加载速度。节省带宽:对于已缓存的文件,可以减少请求带宽甚至无需请求网络。降低服务器压力:在大量用户并发请求的情况下,服务器的性能受到限制,此时将一些静态资源放置在网络的多个节点,可以起到均衡负载的作用,降低服务器的
2017-08-25 16:40:09 248
原创 webpack之 code splitting
一、code splitting的意义web项目越来越重时,打包产生的输出文件越来越大,因为所有的模块都是打包到这个一个文件中,很明显会影响到页面加载的速度。code splitting是指将页面分块打包,按需加载。二、切割点选择require.ensurerequire.ensure(dependencies,callback),回调中异步加载require.ensure(["module-a",
2017-07-31 16:35:16 372
原创 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 1824 2
原创 WebSocket
websocket简介 WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端原理 在实现websocket连线过程中,需要通过浏览器发出websocket连线请求,然后服务器发出回应,这个过程通常称为“握手” 。在 WebSocket API,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务
2017-07-25 20:03:00 325
原创 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 338
原创 前段模块化开发——AMD规范
CommonJScommonJS用于服务端node.js的模块化定义模块 根据CommonJS规范,一个单独的文件就是一个模块。每一个模块都是一个单独的作用域,也就是说,在该模块内部定义的变量,无法被其他模块读取,除非定义为global对象的属性模块输出: 模块只有一个出口,module.exports对象,我们需要把模块希望输出的内容放入该对象加载模块: 加载模块使用require方法
2017-07-20 14:40:53 316
原创 CSS规范中的BFC
一、什么是BFC1.Formatting context:页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及其他元素的关系和相互作用。2.Box:css布局的基本单位。元素的类型和display属性决定了这个box的类型。不同类型的box,会参与不同的Formatting Context(决定如何渲染文档)。 block-level box:display属性是block、
2017-07-14 19:45:11 292
原创 外边距折叠
1.概念外边距折叠,指的是毗邻的两个或多个外边距 (margin) 会合并成一个外边距毗邻:1.两个或多个外边距没有被非空内容、padding、border或clear分隔开。2.margin都处于普通流中,即非浮动,非定位、非浮动元素。在没有被分隔开的情况下,一个元素的margin-top会和它普通流中的第一个元素的margin-top相邻;只有在一个元素的height:auto的情况下,marg
2017-07-14 12:39:29 244
原创 各种居中的css实现
一、文本居中 文本的水平居中text-align:center; 文本的垂直居中设置行高即可line-height:20px;二、行内元素的居中vertival-align是相对兄弟的行高来定位,所有加一个空的兄弟使得高度等于父盒子 #box{ width: 800px; height: 800px; border: 1px solid re
2017-07-14 12:20:06 242
原创 正则匹配: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 395
原创 利用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 327
原创 很急很关键!!!关键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 224
原创 弹性布局display:flex
1.flex-direction:设置伸缩项目的排列方式,即主轴的方向row 设置从左到右排列 row-reverse 设置从右到左排列 column 设置从上到下排列 column-reverse 设置从下到上排列2.justify-content:调整主轴方向上的对齐方式,对于弹性盒子内元素flex-start 伸缩项目以起始点靠齐 flex-end
2017-07-13 13:49:00 473
原创 父级盒子无高度,子盒子浮动,高度自适应
利用浮动实现三列布局,中间宽度自适应 #box{ border: 1px solid red; } #left{ width: 120px; height: 300px; float:left; background-color: grey; } #main{ hei
2017-07-13 11:45:50 2715
原创 三栏布局方法
1. 浮动法,左列左浮动,右列右浮动,插入主体。中间内容#main必须要在最后加入,#main占一行会影响后面的浮动元素 html,body{ margin: 0; height: 100%; } #left{ width: 120px; float: left; height: 100%;
2017-07-13 11:36:50 211
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人