2017年10月_cicistream

原创完整渲染过程——从URL到页面

当用户输入一串URL（统一资源定位符）到完整的页面渲染出来，到底经历了什么呢~下面我来描述一下整个过程。先列出他的大致流程：浏览器根据请求的URL交给DNS域名解析，找到真实的IP，向服务器发起请求；服务器交给后台处理完后返回数据，浏览器接受文件（HTML/CSS/JS/图像等）；浏览器对加载到的数据进行解析，建立起相应的内部结构；载入解析到的资源文件，渲染页面，完成。我们主要分为两部分...

2017-10-06 10:52:17 4804

原创 JS——正则详解

文章内容摘自阮一峰大大—RegExp对象，总结一下方便自己记忆： 1.正则匹配规则字面量字符串 /dog/ 匹配 ‘dog’ 元字符: 点字符（.）匹配除回车（\r）、换行(\n) 、行分隔符（\u2028）和段分隔符（\u2029）以外的所有字符。位置字符（^ / $） ^/$ 表示字符串开始/结束的位置选择符（|）表示或关系，即cat|dog表示匹配cat或dog。选择符会

2017-10-03 20:19:25 5690 7

我的项目中有一个swiper插件，在vue实例created(生命周期相关)函数中，先用ajax异步加载数据，再初始化swiper轮播插件时，遇到了一个问题，由于动态数据加载导致了swiper初始化后会滑动到最后一个item。我当时的解决方法是用setTimeout()来延迟初始化，之后在学习es6的时候，我发现更好的解决办法是使用promise.then.但是，没有最后只有更好，promise.t

2017-10-27 16:55:53 2102

原创 JS——事件绑定与处理总结（上）

JavaScript与HTML之间的交互是通过事件实现的。事件是指文档或浏览器窗口发生的一些特定的交互瞬间，可以用监听器（或处理程序）来预定事件，以便在事件发生时执行相应的代码。——摘自《高程》　　理解事件是实现良好交互的必要条件，本文旨在系统地总结事件相关知识。 (上)主要内容：理解事件流使用事件处理程序 1.理解事件流　　事件流描述的是从页面中接收事件的顺序。　　首先你应该

2017-10-14 20:44:45 470

原创移动端布局单位

移动端设备种类繁多，需要适配多种情况的响应式布局来保证美观的页面实现，先来解释容易弄混的多个名词。 PPI 单位英寸像素数DPR 设备像素比：设备像素 / CSS像素(某一方向上)DPI Dpi（每平方英寸像素数目）：图像细节程度的度量建议看一下知识小科普！像素英寸与DPI的那些事儿单位：　　 - em em是相对长度单位。相对于当前对象内文本的font-size(即父元素

2017-10-06 20:31:42 1735

原创如何更快地构建与渲染

在上一篇中，我详细描述了浏览器渲染的过程，那么，如何来提升渲染效率，使页面更快的加载完成呢。我将这些方法分为几部分分别介绍。CSS部分1. 媒体类型和媒体查询　　将CSS分割为片段，对于不同的浏览器，不同的终端，不同的阅读模式，应用不同的CSS样式表。如果将这些内容写到统一个文件中，浏览器需要下载并解析他们。所以我们应该将这些内容通过对link元素的media属性来指定：<head> <link

2017-10-06 18:13:14 499

原创基本包装类型

为了便于操作基本类型，ECMAScript提供了三个特殊的引用类型：Boolean、Number、String。他们存在的意义是什么呢

2017-10-05 12:17:33 469 1

原创菜鸟系列——forEach、map、for...in、for...of

作为一个前端菜鸟，有好多容易弄混的名词我想把搞清楚的一一记录下来，帮助记忆 forEach、map、for...in、for...of 这四个方法都是可以遍历数组或类数组的，很容易就懵了，必须总结一下他们的使用对象和区别，加以区分。首先，map()和forEach()是Array自带的方法，Map对象也有forEach()方法，而for...in和for...of是对数组/类数组元素进行for

2017-10-03 20:19:38 1075

原创操作系统部分（持续更新中）

1.进程与线程进程是CPU资源分配的最小单位，是具有一定独立功能的程序。　　线程是CPU调度的最小单位，基本上不拥有系统资源。　　一个进程可以包含1+个线程。　　进程与线程之间关系的简单解释：http://www.ruanyifeng.com/blog/2013/04/processes_and_threads.html 2.几个基本概念临界区，互斥量，信号量，事件这些概念解释了线程间

2017-10-03 20:19:30 396

原创笔试总结（HTTP(S)/虚拟内存/xhr）

同花顺的笔试完虐我这种渣渣，没有选择填空，只有问答和编程题，且大部分C++/JAVA,完全懵逼，陌陌的算法题60分，也懵到题目都搞不清楚完美世界的比较均衡，选择很基础，编程题也不难，只是我的编译一直不通过很伤下面总结一下不太清楚的知识点 1.虚拟内存虚拟内存是计算机系统内存管理的一种技术。它使得应用程序认为它拥有连续的可用的内存（一个连续完整的地址空间），而实际上，它通常是被分隔成多个物理

2017-10-03 20:19:27 538

原创 JS Test（44道）总结

题目来自javascript-puzzlers 1.reduce 没有设置初始值的空数组使用reduce方法会抛出错误 reduce的callback函数有四个参数，preValue，curValue，curValue-index，array，如果没有设定初始值，reduce开始时第一个值为preValue，第二个为curValue 2.map&parseInt map默认参数有两个

2017-10-03 20:19:19 350

原创 8月第四周

8.24 zoom：1 的作用 http://blog.csdn.net/u010313768/article/details/47067593 根据这篇文章我又沿着问题链了解了很多关于清除浮动和IE的知识关于清除浮动，严格来说是闭合浮动，可以参考下文来了解： http://www.iyunlu.com/view/css-xhtml/55.html 这篇文章详细描述了清除浮动的七种方法，这些方法

2017-10-03 20:19:17 518

原创 8月第三周

8.18 will-change 属性 The will-change CSS property provides a way for authors to hint browsers about the kind of changes to be expected on an element, so that the browser can set up appropriate optimi

2017-10-03 20:19:14 332

原创 8月第二周

8.7 vue-cli vue-router 用法总结：包含默认路由的地址写法，父子路由的嵌套，redirect重定向的使用，exact属性 8.8 vue练习解惑在methods中设置函数来修改class时，v-for渲染的动态数据组成的DOM节点不能被获取到但是在mounted中，所有的DOM挂在和渲染都已完成，此时在该钩子函数中进行任何DOM操作都不会有问题。 vertical-al

2017-10-03 20:19:11 473

原创 8月第一周

7.31 -1- 原生JS的轮播用惯了swiper，今天练习一下原生JS的轮播写法 -2- Flex 的兼容性今天遇到了display:-webkit-box，搜索了一下发现是旧版的display:flex 通常适应旧手机版本时会使用display:box来表示flexbox 通过这个延伸出思考，mobile端和PC端的主要差异，目前根据我的实际开发经验可以了解到三点： Mobile端re

2017-10-03 20:19:08 448

原创 7月第三周

7.20 vue中index的使用可以通过data中每个数组都有的一个参数（如isHide）来传递v-for内的参数，利用被选中项该参数值的唯一性（比如其他都为0，被选中为1），遍历后得到被选中值的index :nth-child(x)的用法 x可以为整数，也可以为用n表示的表达式，还可以是even/odd x为表达式时，n=0,1,2...正整数如n+4表示大于等于4的正整数，-n+4

2017-10-03 20:19:06 212

原创 7月第二周

7.10Webview模式初识mui.fire()自定义事件dev.dcloud.net.cn/mui/event/7.11flexbox 弹性布局语法篇：www.ruanyifeng.com/blog/2015/07/flex-grammar.html实用篇：www.ruanyifeng.com/blog/2015/07/flex-examples.html详细的标准：www.w3.org/ht

2017-10-03 20:19:03 227

原创 7月第一周

7.5mui框架：init()和plusReady()7.6text-overflow:ellipsis 超出省略text-overflow:ellipsis 一般与overflow : hidden;连用结合-webkit-line-clamp可以限定文字最小行数，超出即用省略号替换注意：-webkit-line-clamp一定要与display: -webkit-box以及-webkit-bo

2017-10-03 20:19:00 191

原创 7月第四周

7.24 CSS3 属性之 transform & translation transform: transform属性 translation: transition 属性是一个简写属性，用于设置四个过渡属性： transition-property transition-duration transition-timing-function transition-delay JQuer

2017-10-03 20:18:57 203

cicistream