发表于   |  

变量的值类型

变量可能包含两种不同数据类型的值：基本类型值（简单的 数据段）和引用类型值（可能由多个值构成的对象）

变量的存储

  • 基本类型值在内存中占据固定大小空间，因此被保存在栈区；
  • 引用类型值是对象，引用类型的存储需要内存的栈区和堆区共同完成，栈区内存保存变量标识符和指向堆内存中该对象的指针，这个指针指向堆内存中的相应对象

栈：由操作系统自动分配释放
堆： 一般由程序员分配释放， 若程序员不释放，程序结束时可能由OS回收

变量的访问

五种基本数据类型是按值访问的，可以操作保存在变量中的实际的值 引用类型值 是保存在内存中 的对象，JS不允许直接访问内存中的位置，操作对象时实际上是在操作对象的引用而不是实际的对象，所以引用类型的值是按引用访问的（注意在为对象添加属性时操作的是实际的对象），当访问时，我们需要先从栈中读取内存地址，然后再顺藤摸瓜地找到保存在堆内存中的值

变量的复制

从一个变量num1向另一个变量num2复制 基本类型值；复制的是num1的值的一个副本，复制后这两个变量中的值是完全独立的 从一个变量向另一个变量复制引用类型的值

1
2
3
4
var obj1 = new Object(); 
var obj2 = obj1;
obj1.age = 18;
console.log(obj2.age); // 输出18

通过上面两个小节应该已经了解引用类型值是怎么存储的，现在用上面的代码简单解释下
对象Object是被保存在堆中，obj1被保存在栈中，obj1存储的内容是一个指针，指向堆中的实际对象Object，也就是说obj1存储的值是实际对象Object的地址，所以这样实现了按引用访问。
从变量obj1向另一个变量obj2复制 引用类型值时，复制的是obj1的值，由上所述可知是指向实际对象Object的指针，所以赋值后，obj2存储的值也就是指向实际对象Object的指针。而实际对象Object只有一个，所以obj1、obj2都指向它，也就是obj1、obj2引用同一个对象Object
所以会出现改变obj1会影响obj2的现象

传递参数
ECMAScript中所有的函数的参数 都是 按值传递，即使是引用类型值的传递也是按值传递

  • 传递基本类型值时，被传递的值会被复制给一个局部变量（即命名参数或者arguments中的一个元素）
  • 传递引用类型值时，由复变量的复制这一节已经知道，该值是一个指针，然后将其复制给一个局部变量（即命名参数或者arguments中的一个元素），这个局部变量再根据这个地址去按引用访问对象，因此这个局部变量的变化会反映在函数的外部。而不是因为它是按引用传递才导致局部变量的变化会反映在函数的外部。

发表于   |  

脚本的下载与执行

我们知道无论 JavaScript 代码是内嵌形式还是在外链文件形式中，页面的下载和渲染都必须停下来等待脚本执行完成，即会出现页面阻塞（页面渲染和用户交互完全被阻塞），然后再继续解析和渲染页面。这是因为脚本可能会改变页面，这意味着它们对出现在脚本后面的页面的内容会造成影响，比如说JavaScript可能会向某个标签添加内容、可能会创建新的元素、可能会移除某个元素等都会对页面内容造成影响。

而在脚本的执行过程中，用户只能等待，执行过程耗时越久，浏览器等待响应用户输入的时间就越长。

脚本位置的影响

<script> 标签可以放在 HTML 文档的<head>或<body>中，并允许出现多次。在 <head> 中加载外链的 JavaScript会导致严重的性能问题。
上面说到当浏览器解析到 <script> 标签时，浏览器会停止解析其后的内容，而优先下载脚本文件，并执行其中的代码，这意味着，如果 styles.css 样式文件放在<script>的后面，则styles.css 样式文件和<body>标签都无法被加载，由于<body>标签无法被加载，那么页面自然就无法渲染了,因此这将导致在该 JavaScript 代码完全执行完之前，页面都是一片空白，用户体验非常不好，一般我看到长时间的空白页面，我都非常想直接关闭它

注：如果在<head>中有多个JavaScript文件，则它们是并行下载的，不需要等到一个下载执行完才开始下载下一个。但是，虽然如此，只要有脚本在下载在执行就会阻止页面渲染及其他文件的下载

还有一点要注意，CSS 本来是可以并行下载的，但是当 CSS 后面跟着 JS 的时候，该 CSS 就会出现阻塞后面资源下载的情况。因为JS 代码在执行前，浏览器必须保证在此 JS 执行之前的所有 css（无论外链还是内嵌）都已下载和解析完成。这是 CSS 阻塞后续 JS 执行的根本原因。

因此会推荐将所有<script>标签尽可能放到<body>标签的底部，以尽量减少对整个页面下载的影响，此时虽然一个脚本会阻塞另一个脚本，但是用户体验比上面的好很多，因为用户看到了大部分内容，而不是空白

通常如果JavaScript文件有多个的话，应该通过离线的打包工具或者一些实时的在线服务来实现多个文件合并成一个，这样只需要引用一个<script>标签，就可以减少性能消耗
这是因为浏览器在解析 HTML 页面的过程中每遇到一个<script>标签，都会因执行脚本而导致一定的延时，所以最小化延迟时间将会明显改善页面的总体性能。而对于外链 JavaScript 文件而言，考虑到 HTTP 请求会带来额外的性能开销，因此下载单个 100Kb 的文件将比下载 5 个 20Kb 的文件更快。所以减少页面中外链脚本的数量将会改善性能。

实现无阻塞的脚本

Web 应用的功能越丰富，所需要的 JavaScript 代码就越多，尽管下载单个较大的 JavaScript 文件只产生一次 HTTP 请求，却会锁死浏览器的一大段时间。为避免这种情况，需要通过一些特定的技术向页面中逐步加载 JavaScript 文件，这样做在某种程度上来说不会阻塞浏览器

发表于   |  

从最初的静态页面仿写开始，到后面添加注册登录功能，陆陆续续的在笔记里面写了很多东西，今天把它放到网上去了，于是想把这些笔记整理一下顺便在总结复习一下。加深印象，毕竟通过它也学到不少东西。

CSS部分

WebFont制作icon

好的吧，在写这个之前，做小图标都是用精灵图片，好麻烦的，当我发现另存为下来的图片文件夹下没有这些小图标的时候，准备F12把图标弄下来，却发现这是什么鬼，乱码啊不是图片啊也不是背景啊。于是就去Google，然后就发现原来这个是WebFont，之前知道有WebFont这个东西，但是没怎么用过，原来可以用图标字体来实现icon，而且网上有很多资源，既然是仿写天猫那就选阿里巴巴矢量库啊，用了之后发现真的好方便啊。

z-index的秘密

这个页面的头部和Banner部分的层级关系比较多，开始写的时候写着写着发现层级关系不对，而且我加大z-index，减小z-index的值之后它的表现都让我挺失望的，摸不着头脑的感觉，深入了解了之后才知道原来是我不懂它，它并不是一个简单的css属性，人家是有背景有靠山的。为此我还专门写了一篇文章以表纪念我想更了解z-index

阅读全文 »

发表于   |  

今天在了解BFC的相关知识时，看到了视觉格式化模型这个内容，似乎以前没有怎么见过，于是去查了下W3C规范，一查就把自己搞晕了，一下块框，一下块级框，还有块容器框，粗略的看了一遍真是没太理解，于是决定仔细的将它琢磨一下。

首先我们来回顾一下框模型，也就是常说的盒子模型，CSS框模型描述了为文档树中的元素而生成的矩形框。这些框会按照视觉格式化模型来排列显示。典型的框模型如下图所示：

阅读全文 »

发表于   |  
回顾一下BFC

BFC是Block Formatting Context的缩写，译为块级格式上下文。如果你对块级框，块框，行级框，行框等概念不了解可以先去看看框模型与视觉格式化模型

  • BFC其实就是块级框的布局规则，相当于CSS页面布局的地基，并非什么神奇的概念，大家习以为常的一些东西其实最终的解释是可以归于BFC的。
  • 创建了BFC的元素规定了内部的块级框如何布局，并且使该框在页面上形成一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然
    阅读全文 »

发表于   |  

z-index是一个很常用的css属性，最初认为它的使用非常简单：positioned elements（除了static）设置z-index，z-index大的堆叠在z-index小的元素之上。在后面的学习与练习中便发现它并不是那么简单，于是去查阅了相关的资料，现在整理分享一波~

阅读全文 »

发表于   |  

圣杯布局（经典三列布局）

布局要求：
1、三列布局，中间宽度自适应，两边定宽；
2、中间栏要在浏览器中优先展示渲染；（所以html中中间栏写在左右栏前面)
3、允许任意列的高度最高；
4、要求只用一个额外的DIV标签；
5、要求用最简单的CSS、最少的HACK语句；

阅读全文 »

发表于   |  

margin负值的原理

1.负边距在普通文档流中的作用和效果

那些没有脱离文档流的元素（指非浮动元素、非绝对定位、非固定定位的元素等），其在页面中的位置是随着文档流的变化而变化的。

阅读全文 »

发表于   |  

简介

The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable.
关键词metadata，中文名叫元数据，是用于描述数据的数据。它不会显示在页面上，但是机器却可以识别。
meta标签常用于定义页面的说明，关键字，最后修改日期，和其它的元数据。这些元数据将服务于浏览器（如何布局或重载页面），搜索引擎和其它网络服务。

阅读全文 »

发表于   |  

水平居中

  • 块中的文字或图片水平居中 ：
    text-align 会对块元素(或者display:block的元素）中的所有内联内容水平居中，可以继承，它里面所有的文字或者图片，都会相对于最靠近自己的块状父元素来实现居中。但对块状子元素是没用的，不能实现块状子元素在块状父元素中整体居中。该属性只能在块元素上设置，在内联元素上不起作用。（IE6，7对块状也有效）

    阅读全文 »