初漾的博客

转载 webpack 前端构建性能优化策略小结

作者：今日头条技术博客techblog.toutiao.com/2017/02/28/webpack/

原创 js的模块化机制

ES6模块加载机制与CommonJS模块完全不同。CommonJS模块输出的是一个值的拷贝，而ES6模块输出的是值的引用。ES6模块的运行机制与CommonJS不一样，它遇到模块加载命令import时不会去执行模块，只会生成一个动态的只读引用。等到真的需要用到时，再到模块中取值。也就是说，原始值变了，输入值也会跟着变。因此，ES6模块是动态引用，并且不会缓存值，模块里面的变量绑定其所在的模块。

原创 :before和::before的区别

都表示伪类对象，写法是等效的，都是用来设置对象前的内容。:before是css2中的写法，::before是css3中的写法伪类要配合content一起使用，不会出现在DOM中，也不能用js操作。现在推荐使用双冒号，单冒号在新css版本中已经被摒弃。但要兼容旧IE那还是用单冒号吧

原创 触发浏览器重绘的操作?

1.获取元素的offsetHeight属性let rf = el.offsetHeight; // 主动触发浏览器重绘

原创 面试常见的Js编程题

1.字符串逆序输出http://www.toutiao.com/i6423722807942709761/

原创 vue.js使用注意事项

一、当页面使用滚动组件时，在移动端触发点击事件，需单独设置 this.meunScroll = new Bscroll(this.$els.menuWrapper, { click: true});其中Bscroll页面引入的滚动组件但导致pc端和移动端点击不一致，pc端触发两次点击事件，通过以下设置保持一致。addCart(event) {

原创 金山面试题

1.基础都差不多，相对别人的优势？2.校园网系统的开发流程？3.闭包4.引用传递和值传递的区别？5.jquery的原理，选择器的原理？

原创 模板字符串

模板字符串用反引号·标识，在其中引入变量，需将变量名写在${}中。注意：所有的空格和缩进都会被保留在输出中。

转载 css中盒子模型的理解

参考http://blog.csdn.net/lxcao/article/details/52620453

原创 CSS中样式技巧

1.当元素使用display: inline-block时，注意设置font-size:0，使得他们间隙为0

原创 vue中$nextTick()作用

vue更新数据是异步的

原创 元素居中的方式

1.块级元素中文字需水平对其时可以设置padding,左右距离相同。

转载 面试题：移动端1px边框的样式

由于移动端不同设备的dpr不同，所以1px边框的设计如下border-1px($color) position: relative &::after dispaly:block position:absolute left: 0 bottom:0 width:100% border-bottom:1px solid $co

原创 css选择符的使用

尽量使用class选择符，不选用标签选择符，因为当有多层标签或级联时，查找性能相对较差。

转载 Vue.js 中 v-if 和 v-show 有什么区别？

转自：http://blog.csdn.net/liuzhuan_1986/article/details/52259802简单来说，v-if 的初始化较快，但切换代价高；v-show 初始化慢，但切换成本低。具体解释如下：v-show 渲染页面结构后，通过 "display:none" 控制元素状态。所以初始化时间较长。v-if 是懒计算，如果条件为false，它什么也不

转载 vue.js中created方法作用

这是它的一个生命周期钩子函数，就是一个vue实例被生成后调用这个函数。一个vue实例被生成后还要绑定到某个html元素上，之后还要进行编译，然后再插入到document中。每一个阶段都会有一个钩子函数，方便开发者在不同阶段处理不同逻辑。一般可以在created函数中调用ajax获取页面初始化所需的数据。实例生命周期每个 Vue 实例在被创建之前都要经过一系列的初始化过程

转载 get和post的使用场景

GET和POST两种方法都是将数据送到服务器。HTTP标准包含这两种方法是为了达到不同的目的。POST用于创建资源，资源的内容会被编入HTTP请示的内容中。例如，处理订货表单、在数据库中加入新数据行等。当请求无副作用时（如进行搜索），便可使用GET方法；当请求有副作用时（如添加数据行），则用POST方法。一个比较实际的问题是：GET方法可能会产生很长的URL，或许会超过某些浏览器与服务器对

原创 阿里面试

1.进程和线程的区别2.看过jquery的源码吗？说下jquery中选择器是怎么实现的？3.js是解释性语言还是编译型语言4.说下你相对于别人的优势和不足5.你没有展现的亮点6.你做过的项目中，挑一个详细的说7.用过java框架吗？8.对java的了解在哪个层面？9.参加过什么比赛和项目吗？10.说下前端技术，你比较擅长哪个？11.聊聊你看过的框架中对源码的

转载 两列自适应布局

转自：https://segmentfault.com/a/1190000004424442#articleHeader5

转载 http和缓存有关的状态码

200 OK (from cache)  是浏览器没有跟服务器确认，直接用了浏览器缓存；而 304 Not Modified 是浏览器和服务器多确认了一次缓存有效性，再用的缓存。200(from cache) 是速度最快的,因为不需要访问远程服务器,直接使用本地缓存.304 的过程是, 先请求服务器, 然后服务器告诉我们这个资源没变, 浏览器再使用本地缓存.

转载 事件DOMContentLoaded和load的区别

他们的区别是，触发的时机不一样，先触发DOMContentLoaded事件，后触发load事件。DOM文档加载的步骤为解析HTML结构。加载外部脚本和样式表文件。解析并执行脚本代码。DOM树构建完成。//DOMContentLoaded加载图片等外部文件。页面加载完毕。//load在第4步，会触发DOMContentLoaded事件。在第6步，触发load事件。用原生j

转载 link和@import的区别及联系

转载 js延迟加载的方式

其中，defer的特点：1浏览器重新开启了一个线程2它只适用于外部脚本3会在DOMContentLoaded之前执行，其中，async的特点：0异步下载脚本1HTML5的新标签下载之后立即执行2只适用于外部脚本3不能保证顺序，因此脚本之间有依赖关系莫用4会在window.onload之前执行，不能保证在DOMContentLoad

转载 浏览器怎么加载页面的？

参考：http://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&mid=2651552072&idx=2&sn=c3d09301b6b80fe5f58ee3213fc3cde3&chksm=8025ae89b752279f922c58365ffe396d072a55e4c4caa33f677d1e43f124ac9ae6a0021b6dc6&mpshare=

转载 如何实现缓存机制？

从200缓存，到cache到etag再到www.cnblogs.com/vajoy/p/5341664.html

原创 元素水平垂直居中的几种方法

1.设置父盒子为弹性布局 Title html,body{ height: 100%; } body{ display: flex; justify-content: center; align-items: center; }

转载 vue1和vue2的区别

待定

原创 两列或三列自适应布局

一、三列布局左中右三栏布局，左右两栏宽度固定（要想不固定将宽度值改为百分值即可），中间栏宽度自适应。左右两栏的宽度为200像素。第一种：双飞翼布局（内部添加了一个盒子：innner，少了定位）思路：盒子顺序：中间（宽度：100%），左边（宽度：200），右边（宽度：250）CSS样式：设置float:left。左盒子：margin-left: 负100%,右盒子：margin-

转载 js中的基本类型和引用类型

js的基本类型有哪些？引用类型有哪些？ 基本类型：Number,String,Boolean,Null,undefined。 引用类型：Object,Array,Date,RegExp,Functionnull和undefined的区别。 参考：http://www.ruanyifeng.com/blog/2014/03/undefined-vs-null.html 一、相

转载 理解Web路由

参考：http://mp.weixin.qq.com/s?__biz=MjM5MTA1MjAxMQ==&mid=2651225284&idx=1&sn=a842847bc3d11a9f3d3a74d4e3105543&chksm=bd49a5408a3e2c5688585074f2c18bc85e5b47b4e77580e301628a1bafe0e8b40d160ff34c3c&mpshare=

转载 数组去重的方法总结

现在要求去重下面这个数组[1, 2, 3, 3, 3, '0', '1', '2', '测试', '重复', '重复', NaN, NaN, false, false];方法一：ES6 Set()var arr=[1, 2, 3, 3, 3, '0', '1', '2', '测试', '重复', '重复', NaN, NaN, false, false];arr=[...new Set(

转载 Promise相关

参考：http://www.jianshu.com/p/fe5f173276bd一、 Promise对象有三种状态，他们分别是：pending: 进行中，表示还没有得到结果resolved(Fulfilled): 已完成，表示得到了我们想要的结果，可以继续往下执行rejected: 已失败，也表示得到结果，但是由于结果并非我们所愿，因此拒绝执行这三种状态不受外界影响，而且状态只

转载 面试系列五

转自：https://www.nowcoder.com/discuss/25090?type=2&order=0&pos=58&page=1

转载 面试系列（四）

转自：https://www.nowcoder.com/discuss/26410?type=2&order=0&pos=46&page=1

转载 腾讯面试（三）

作者：zpnaruto1链接：https://www.nowcoder.com/discuss/26552?type=2&order=0&pos=44&page=1来源：牛客网一面(45分钟)： 首先，问我是对HTML+CSS感兴趣还是js，我说js，面试官就只问js了。 1.  readyState的几个值分别代表什么状态，当readyState为3的时候把网线拔了会怎样

转载 腾讯，阿里面试（二）

写在前面结果？决定实习的公司：腾讯CDG拿到实习offer的公司：腾讯CDG、阿里巴巴蚂蚁金服、欢聚时代YY、中国平安未通过或者主动放弃或者石沉大海的公司：百度、网易、百度、京东、华为、360、美团等等等等等等无数间。统计来来去去自己投的公司有21、22间左右，最终也能拿到4个offer其中包含自己理想的offer也是算比较幸运了！直接进入正题（就分享几件比较大的公司的面经

转载 腾讯，阿里等面试题（一）

作者：亚古兽链接：https://www.nowcoder.com/discuss/25389?type=2&order=0&pos=23&page=1来源：牛客网本人本科大三，投的是web前端。从开学决定投简历找工作到现在，大大小小的面试笔试经历了许多遍，遇到的面试官总共不下20个。期间各种挂，各种疲惫，焦急之余刷刷牛客看看面经。最后终于收获了心水的鹅场offer。现在将这个历程

原创 美图面试题

1.vue.js用过没2.平时都去哪些技术网站？3.说一下http协议  8个方法，http状态码，请求头有哪些，请求体和请求内容。4.node.js 写过什么东西5.关注的UI设计网站（禅意花园）6.参与过开源项目吗，自己写过什么开源项目 7.关注的最新的web前端技术   css变量8.ps切图会使用吗？9.用canvas写过什么图像方面东西？10.

原创 常用的排序算法

1.冒泡排序（时间复杂度：O(n^2)）冒泡排序算法的运作如下：（从后往前）比较相邻的元素。如果第一个比第二个大，就交换他们两个。对每一对相邻元素作同样的工作，从开始第一对到结尾的最后一对。在这一点，最后的元素应该会是最大的数。针对所有的元素重复以上的步骤，除了最后一个。持续每次对越来越少的元素重复上面的步骤，直到没有任何一对数字需要比较。var arr=[];for(v

原创 canvas手势解锁思路

参考：http://web.jobbole.com/90970/基本要求是这样的：将密码保存到 localStorage 里，开始的时候会从本地读取密码，如果没有就让用户设置密码，密码最少为五位数，少于五位要提示错误。需要对第一次输入的密码进行验证，两次一样才能保持，然后是验证密码，能够对用户输入的密码进行验证。具体思路如下：新建画布，指定宽度，每行排列3个圆，计算圆的半径，根