技术型
文章平均质量分 81
保持初心
这个作者很懒,什么都没留下…
展开
-
浏览器缓存机制
一,什么是浏览器缓存机制?浏览器缓存机制说的就是HTTP缓存机制,其机制是根据HTTP请求报文中的缓存规则确定的。所以要想搞清楚HTTP缓存机制首先要弄清楚缓存机制的缓存规则是什么。二,什么是浏览器缓存规则?有经验的前端同学都知道浏览器缓存,浏览器缓存分为强缓存和协商缓存。1,什么是强缓存?看下面这张图该请求中Size为memory cache和disk cache的请求走的都是强缓存路线,什么情况下浏览器会走强缓存路线呢?浏览器第一次请求时,服务器返回给浏览器的报文中有Ca原创 2020-07-30 12:05:29 · 300 阅读 · 0 评论 -
HTTP缓存原理一探究竟
为了提高网站的访问速度,我们经常会在web服务器端进行缓存设置,常用的缓存设置方式是强缓存、协商缓存,那么两者有什么区别呢?一,强缓存cache-control:max-age:缓存有效期public:客户端和代理服务器都可以缓存资源private:只允许客户端缓存资源immutable:永不过期no-cache:资源不进行强缓存,走策略缓存no-store:客户端...........................原创 2020-04-08 12:08:27 · 229 阅读 · 0 评论 -
RESTful和GraphQL的比较
对于前后端分离的项目,后端通常把数据接口定义成RESTful API或者GraphQL,那么两者有什么不同呢?一,RESTful API:RESTful API常见的请求方式有get:查询数据;post:添加数据;put:更新数据;delete:删除数据不足:扩展性不足一个接口有可能因为需求变更而变的越来越臃肿,比如获得用户信息的接口/user/userid,刚开始可能只...原创 2020-02-24 16:23:53 · 1629 阅读 · 0 评论 -
CSS盒模型与box-sizing详解
对于刚入门的前端小伙伴,对box-sizing、css盒子模型可能会有疑惑,今天我带领大家彻底搞清楚这两个东东。要想搞清楚box-sizing和CSS盒子模型,首先要理解这两者各有什么作用。box-sizing:允许您以特定方式定义匹配某个区域的特定元素(官方)。官方定义中有两个关键词‘特定方式’、‘特定元素’,什么特定方式呢?其实就是box-sizing对应的两个属性值,border...原创 2020-02-24 15:54:13 · 377 阅读 · 0 评论 -
使用nginx处理静态资源请求,动态内容交给Node.js进行处理
由于项目后台使用的是node,然而node不适合对静态资源的处理,因为他的异步处理(事件轮询)机制,所以更擅长的是密集I/O型的应用,所以我就有了一个想法,使用nginx来做反向代理,当请求的是静态资源的时候,直接由nginx(监听80端口)自己处理并返回,其他非静态资源请求转发至node(8080端口),由node来处理。下面是我的nginx配置文档,nginx安装请自行百度,大把资料啦~...转载 2020-01-02 10:39:15 · 350 阅读 · 0 评论 -
浅谈web标准
2)XML(EXtensible Markup language)可扩展标记语言 3)XHTML(EXtensible Hyper Text Markup Language)可扩展超文本标记语言 表现标准: 1)目前推荐使用W3C于1998年5月12日推荐的CSS2 行为标准: 1)文档对象模型(DOM) DOM可以说是浏览器、平台、语言的接口 2)ECMAScript ECMAScript是ECMA制定的标准脚2014-08-10 12:07:11 · 81 阅读 · 0 评论 -
简单功能强大的jQuery图片剪裁插件Image Cropper
件cropper,cropper是一款使用简单且功能强大的图片剪裁jQuery插件。该图片剪裁插件支持图片放大缩小,支持鼠标滚轮操作,支持图片旋转,支持触摸屏设备,支持canvas,并且支持跨浏览器使用。jquery实例教程:图片剪裁插件Image Cropper使用方法引入必要的js和css核心文件123构建html,可以将图片或canvas直接包裹到一个块级元素中123 初始化插件,可以使用$.fn.cropper方法来初原创 2016-10-29 15:55:36 · 177 阅读 · 0 评论 -
chrome的timeline的问题?
立TCP连接等时间等Request sent 请求第一个字节发出前到最后一个字节发出后的时间,也就是上传时间Waiting 请求发出后,到收到响应的第一个字节所花费的时间(Time To First Byte)Content Download 收到响应的第一个字节,到接受完最后一个字节的时间,就是下载时间原创 2016-05-06 17:35:16 · 82 阅读 · 0 评论 -
ES6 数组Array.of、Array.from
,false,'hello')和var arr=Array.of(4,false,'hello')没有任何区别但是如果参数是这样var arr=new Array(4)则返回的是一个长度是4的空数组而var arr=Array.of(4)返回的是含有元素4的数组不同之处:可以看到当new Array时,如果传入的是唯一的一个数字,如果只是用来定义数组的长度没有问题,如果定义的是数组的元素,则可以用Array.of代替2,原创 2019-05-06 11:41:22 · 292 阅读 · 0 评论 -
JavaScript基础
复杂数据类型包括:Object1.3,如何区分JavaScript中的数据类型呢?由于JavaScript是松散类型的,因此需要一种方式来检测给定变量的数据类型,typeof就是JavaScript提供的检测数据类型的操作符。 var data=100typeof data ==="number"var data="hello JavaScript";typeof data==='string' //truevar data=tr原创 2019-03-23 21:23:06 · 134 阅读 · 0 评论 -
vue声明周期
原创 2019-02-25 21:51:36 · 105 阅读 · 0 评论 -
Vue生命周期 VS React生命周期
orcomponentWillMountrendercomponentDidMount shouldComponentUpdatecomponentWillUpdaterendercomponentDidUpdate 如图: 二者对比文章搜集:React.js与Vue.js:流行框架的比较https://baijiahao.baidu.com/s?id=1608099200125495014&wfr=spid原创 2019-01-29 11:12:28 · 218 阅读 · 0 评论 -
JavaScript 对象属性
能否把属性修改为访问器属性,该属性默认值是true。2,Enumerable定义了能否通过for...in遍历对象属性,该属性默认值时true。3,Writable定义了能否修改对象的属性4,Value定义了属性的数据值,默认为undefined 创建一个对象:var school={name:"北大"};我们要修改属性默认的特性,必须使用ECMAScript5的Object.defineproperty方法。 操作1:修改conf原创 2019-01-23 10:57:32 · 131 阅读 · 0 评论 -
JavaScript闭包
的变量,反之则不行。2,作用域链当函数第一次执行的时候,会创建一个执行环境及相应的作用域链,并把作用域链赋值给一个特殊的内部属性Scope。Scope里面既包含当前环境的活动对象又包含父作用域里面的活动对象,活动对象有this,arguments和其它命名参数构成,在浏览器中最顶层作用域中的this对象是window。 正常情况下一个函数执行完成里面的活动对象会被垃圾回收机制自动回收,有一种情况例外,就是今天我们要说的闭包。 什么叫闭包?闭包是指有权访问另一个函数作用域中变量的函原创 2019-01-17 12:02:15 · 107 阅读 · 0 评论 -
浏览器中进程与线程
览器主进程只有一个,作用有:负责浏览器界面显示,用户交互(前进、后退,关闭等)负责各个页面的管理,如创建和销毁其它进程将Render进程中得到的内存中的bitmap,绘制到用户界面上网络资源的管理,如下载2,GPU进程用于3d绘制等,如为dom元素添加css3样式-webkit-transform:translateZ(0),将使浏览器的渲染从cup转向gpu,开启gpu加速。3,浏览器渲染进程(Render进程)也被称为浏览器内核。浏览器渲染进程的主要作用是页面渲染2019-01-05 18:06:11 · 222 阅读 · 0 评论 -
Css3之Flex弹性盒子布局
一,基本概念:采用Flex布局的元素,称为Flex容器(flex container),所有Flex容器子元素自动成为Flex容器成员,也可以称作Flex项目(flex item)。下面是结构示意图:从上图可以看到Flex容器有两条轴,分别是水平方向主轴(main axis)和垂直方向交叉轴(cross axis)。main start | main end:主轴开始|结束位置cross start | cross end:交叉轴开始|结束位置main siz原创 2018-12-30 15:42:13 · 475 阅读 · 0 评论 -
linux下建立git仓库
原创 2018-12-28 14:51:05 · 120 阅读 · 0 评论 -
Express中异常处理
原创 2018-12-26 17:36:57 · 1846 阅读 · 0 评论 -
字符编码的发展历史
概括一番。一个字节:最初一个字节的标准是混乱的,出现过4位、6位、7位的一字节标准,最终由于历史原因和物理存储需求(8位是2的3次方,方便物理存储),所以采用了8位为一个字节的标准。ASCII:定下了8位为一个字节后,那么一个字节可以表示的状态就有256种(2^8),对应0-255号。接下来就需要考虑8位如何表示一个字符了,ASCII码顾名思义(American Standard Code for Information Interchange)就是美国的信息交换标准码,因此只需要表示出英文字母和少原创 2018-09-08 09:52:18 · 498 阅读 · 0 评论 -
nodejs中间件之body-parser
原创 2018-09-02 21:48:39 · 441 阅读 · 0 评论 -
Express中如何使用async/await
async/await语法的。所以只要你安装的是Node.js新版本,在Express程序里面是可以直接使用async/await方法的。 参考下面实例: const express = require('express');const app = express();const fs = require('fs');function readFileAsync(filepath) { return new Promise(function (resolve, rejec原创 2018-12-26 15:31:26 · 650 阅读 · 0 评论 -
浏览器中进程与线程
一,首先使用快捷键Shift+Esc打开浏览器Chrome任务管理器,看到如下图界面:可以看到浏览器默认有三个进程:1,浏览器主进程(Browser进程)浏览器主进程只有一个,作用有:负责浏览器界面显示,用户交互(前进、后退,关闭等) 负责各个页面的管理,如创建和销毁其它进程 将Render进程中得到的内存中的bitmap,绘制到用户界面上 网络资源的管理,如下载2,G...原创 2019-01-05 18:01:38 · 800 阅读 · 0 评论 -
如何减少reflow
浏览器为了重新渲染部分或整个页面,重新计算页面元素位置和几何结构(geometries)的进程叫做 reflow。有多种用户操作和 DHTML 变化可能会触发 reflow:1.调整浏览器窗口的大小2.用 javascript 计算样式(computed styles)3.在 DOM 中创建删除元素4.改变元素的 class但是并非所有 javascript 控制的样式都触...原创 2015-05-05 15:42:58 · 373 阅读 · 0 评论 -
HTML5 respond.js 解决IE6~8的响应式布局问题
响应式布局,理想状态是,对PC/移动各种终端进行响应。媒体查询的支持程度是IE9+以及其他现代的浏览器,但是IE8在市场当中仍然占据了比较大量的市场份额,使我们不得不进行IE低端浏览器的考虑。 那么如何在IE6~8浏览器中兼容响应式布局呢?这里我们需要借助这样一个文件:respond.js。文件下载地址:https://github.com/scottjehl/Respond。 ...原创 2017-05-22 10:26:10 · 89 阅读 · 0 评论 -
html5shiv.js和respond.min.js
html5shiv:解决ie9以下浏览器对HTML5新增标签的不识别,并导致CSS不起作用的问题。respond.min:让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。由于IE6/IE7/IE8还有很大一部分用户,为了让网站浏览者都能正常的访问Html5网站,故这两种方案还是需要的,下面是两个解决方法的cdn地址写法:复制代...原创 2017-05-22 10:30:32 · 128 阅读 · 0 评论 -
content = "IE=edge,chrome=1" 详解
content = "IE=edge,chrome=1" 详解< meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" />这是个是IE8的专用标记,用来指定IE8浏览器去模拟某个特定版本的IE浏览器的渲染方式(比如人见人烦的IE6),以此来解决部分兼容问题,例如模拟IE7的具体方式如下:< meta ...原创 2017-05-22 10:32:04 · 137 阅读 · 0 评论 -
单页面应用优缺点分析
单页Web应用优缺点一、定义单页 Web 应用 (single-page application 简称为 SPA) 是一种特殊的 Web 应用。它将所有的活动局限于一个Web页面中,仅在该Web页面初始化时加载相应的HTML、JavaScript 和 CSS。一旦页面加载完成了,SPA不会因为用户的操作而进行页面的重新加载或跳转。取而代之的是利用 JavaScript 动态的变换HTML的...2017-02-14 18:07:42 · 305 阅读 · 0 评论 -
jQuery的deferred对象详解
今天介绍jQuery1.5.0版本引入的一个新功能--Deferred.一,什么是Deferred对象?开发网站中经常有一些耗时操作,这些耗时操作既有异步操作(ajax读取服务器数据),也有同步操作(遍历一些大型数组),通常这些操作不能马上得到结果,我们这时候就会用回调函数(callback),原来jQuery对回调函数方面的功能比较弱,于是有了Deferred。所以说Deferred是jQu...2018-02-02 15:38:33 · 97 阅读 · 0 评论 -
JavaScript-异步编程
由于js是单线程的,对于一些耗时操作通常采用异步执行的方式。常用异步执行方式:1,回调函数假如顺序执行下面两个函数,其中fn1是比较耗时的操作。fn1(){};fn2(){}; 这是可以考虑把fn2作为fn1的回调函数执行fn1(callback){ setTimeout(function(){ //fn1任务 callback()...2018-03-05 10:29:32 · 84 阅读 · 0 评论 -
Node.js中require加载文件原理
nodejs中require函数原理详解 例子:当前脚本文件home/project/about/index.js里面执行require('x') 分析其查找顺序:1,如果x是内置模块 (比如:require("http")) 从node系统模块查找2,如果x不是内置文件 1) 首先确定x的路径可能是下面这些路径,依次查找这些路径/ho...原创 2018-03-14 14:11:15 · 321 阅读 · 0 评论 -
CDN服务器
什么是CDN服务器?CDN全称Content Delivery Network,即内容分发网络,通过在现有的Internet中增加一层新的网络架构,使用户可以就近访问网络中的资源,从而提高用户访问网站的响应速度。工作流程就是:当用户访问已经加入CDN服务的网站时,首先通过DNS重定向技术确定最接近用户的最佳CDN节点,同时将用户的请求指向该节点。当用户的请求到达指定节点时,CDN的服务...原创 2016-01-12 11:45:18 · 140 阅读 · 0 评论 -
前端性能优化
1. 请减少HTTP请求 基本原理: 在浏览器(客户端)和服务器发生通信时,就已经消耗了大量的时间,尤其是在网络情况比较糟糕的时候,这个问题尤其的突出。 一个正常HTTP请求的流程简述:如在浏览器中输入"www.xxxxxx.com"并按下回车,浏览器再与这个URL指向的服务器建立连接,然后浏览器才能向服务器发送请求信息,服务器在接受到请求的信息后再返回相应...原创 2015-05-05 16:16:52 · 81 阅读 · 0 评论 -
常用CSS书写技巧和CSS HACK技巧
常用CSS书写技巧和CSS HACK技巧不同的浏览器,比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。这...原创 2015-05-05 16:34:10 · 177 阅读 · 0 评论 -
前端各种面试题
前端攻略系列(二) - 前端各种面试题2012-01-31 23:12 by 聂微东, 33810 阅读, 72 评论, 收藏, 编辑 幸运且光荣的被老大安排了一个任务 - “去整理些前端面试题”。年前确实不是招人的好时候,所以我们前端团队经过了超负荷的运转,终于坚持过了春节。春节以后就开始招人啦,这套题考察的目标就是基础基础再基础,嘿嘿。 事先声明:这些题目的来源:面...原创 2015-05-05 16:36:28 · 545 阅读 · 0 评论 -
JavaScript存在多线程吗
最近看到这样一个面试题,js有多线程吗,毫无疑问js本身只能单线程运行,因此并不支持多线程,下面我们就来分析一下:首先在浏览器中至少会有三个线程:js引擎线程(处理js)、gui渲染线程(页面渲染)、浏览器时间触发线程(控制交互)因为js可以操作dom元素,进而会影响到gui的渲染结果,因此js引擎线程与gui渲染线程是互斥的,也就是说当js引擎线程处于工作状态时,gui渲染线程是冻结的。...原创 2015-06-04 21:07:16 · 655 阅读 · 0 评论 -
Node.js原理介绍
1,Node.js介绍Node.js是一个基于Chrome V8引擎的JavaScript运行环境。由于Node.js使用了一个事件驱动、非阻塞式I\O的模型,所以其轻量又高效。2,Node.js组成这里重点介绍,nodejs组成部分:v8 engine, libuv, builtin modules, native modules以及其他辅助服务。v8 engine(Ja...2015-06-09 11:36:51 · 146 阅读 · 0 评论 -
几种常用的css三角形
html: ...原创 2016-05-30 19:56:42 · 89 阅读 · 0 评论 -
CommonJS AMD CMD UMD区别
CommonJSCommonJs 是服务器端模块的规范,Node.js采用了这个规范。根据CommonJS规范,一个单独的文件就是一个模块。加载模块使用require方法,该方法读取一个文件并执行,最后返回文件内部的exports对象。例如:// foobar.js//私有变量var test = 123;//公有方法function foo...原创 2016-06-14 16:39:54 · 151 阅读 · 0 评论 -
常见浏览器内核
一、Trident内核代表产品Internet Explorer,又称其为IE内核。Trident(又称为MSHTML),是微软开发的一种排版引擎。使用Trident渲染引擎的浏览器包括:IE、傲游、世界之窗浏览器、Avant、腾讯TT、Netscape 8、NetCaptor、Sleipnir、GOSURF、GreenBrowser和KKman等。二、Gecko内核代表作品Mozilla...2016-11-21 08:53:58 · 96 阅读 · 0 评论 -
JavaScript预编译
js预编译:如下实例:function a(a,b,c){ console.log(a); var a=123; function a(){} console.log(a); var b=function(){}; console.log(b); function c(){} console.log(c);}a(1,2,3);...原创 2018-06-01 10:07:39 · 149 阅读 · 0 评论