公司网站界面如何设计,wordpress renderview,如何进行简单的网页设计,品牌传播推广方案Web前端技术由 html、css 和 javascript 三大部分构成#xff0c;是一个庞大而复杂的技术体系#xff0c;其复杂程度不低于任何一门后端语言。而我们在学习它的时候往往是先从某一个点切入#xff0c;然后不断地接触和学习新的知识点#xff0c;因此对于初学者很难理清楚整…Web前端技术由 html、css 和 javascript 三大部分构成是一个庞大而复杂的技术体系其复杂程度不低于任何一门后端语言。而我们在学习它的时候往往是先从某一个点切入然后不断地接触和学习新的知识点因此对于初学者很难理清楚整个体系的脉络结构。本文将对Web前端知识体系进行简单的梳理对应的每个知识点点到为止不作详细介绍。目的是帮助大家审查自己的知识结构是否完善如有遗漏或不正确的地方希望共勉。 一、JAVASCRIPT 篇
0、基础语法
Javascript 基础语法包括变量声明、数据类型、函数、控制语句、内置对象等。
在ES5 中变量声明有两种方式分别是 var 和 function var 用于声明普通的变量接收任意类型function用于声明函数。另外ES6 新增了 let、const、import 和 class 等四个命令分别用以声明 普通变量、静态变量、模块 和 类 。
JS数据类型共有六种分别是 String、Number、Boolean、Null、Undefined 和 Object 等 另外ES6新增了 Symbol 类型。其中Object 是引用类型其他的都是原始类型(Primitive Type)。
原始类型也称为基本类型或简单类型因为其占据空间固定是简单的数据段为了便于提升变量查询速度将其存储在栈(stack)中(按值访问)。为了便于操作这类数据ECMAScript 提供了 3 个基本包装类型Boolean、Number 和 String 。基本包装类型是一种特殊的引用类型每当读取一个基本类型值的时候JS内部就会创建一个对应的包装对象从而可以调用一些方法来操作这些数据。
引用类型由于其值的大小会改变所以不能将其存放在栈中否则会降低变量查询速度因此其存储在堆(heap)中存储在变量处的值是一个指针指向存储对象的内存处(按址访问)对于引用类型的值可以为其添加属性和方法也可以改变和删除其属性和方法但基本类型不可以添加属性和方法。
Javascript 可以通过 typeof 来判断原始数据类型但不能判断引用类型要知道引用类型的具体类型需要通过 Object 原型上的 toString 方法来判断
JS中的函数存在着三种角色普通函数、构造函数、对象方法。同一个函数调用方式不同函数的作用不一样所扮演的角色也不一样。直接调用时就是普通函数通过new创建对象时就是构造函数通过对象调用时就是方法。
JS常用的内置对象有window、Date、Array、JSON、RegExp 等window是浏览器在执行脚本时创建的一个全局对象主要描述浏览器窗口相关的属性和状态这个后面会讲到Date 和 Array 使用场景最多JSON主要用于对象的序列化和反序列化还有一个作用就是实现对象的深拷贝。RegExp 即正则表达式是处理字符串的利器。
1、函数原型链
JS是一种基于对象的语言但在ES6 之前是不支持继承的为了具备继承的能力Javascript 在函数对象上建立了原型对象 prototype并以函数对象为主线从上至下在JS内部构建了一条原型链。原型链把一个个独立的对象联系在一起Object 则是所有对象的祖宗 任何对象所建立的原型链最终都指向了Object并以 Object 终结。
简单来说就是建立了变量查找机制当访问一个对象的属性时先查找对象本身是否存在如果不存在就去该对象所在的原型连上去找直到 Object 对象为止如果都没有找到该属性才会返回 undefined。因此我们可以通过原型链来实现继承机制。
2、函数作用域
函数作用域就是变量在声明它们的函数体以及这个函数体嵌套的任意函数体内都是有定义的。通俗来讲就是在一个函数里有些变量可以访问有些不可以访问。那些能访问的变量所形成的范围就是这个函数的作用域。
在 JavaScript 中没有块级作用域只有函数作用域也就是说 if、while、for 语句不会形成独立的作用域。但有一个特殊情况即 with 语句和 catch 语句会形成临时作用域语句执行结束后该作用域就会被释放。
3、this 指针
this 指针存在于函数中用以标识函数运行时所处的上下文。函数的类型不同this 指向规则也不一样对于普通函数this 始终指向全局对象window对于构造函数this则指向新创建的对象对于方法this指向调用该方法的对象。另外Function对象也提供了call、apply 和 bind 等方法来改变函数的 this 指向其中call 和 apply 主动执行函数bind一般在事件回调中使用而 call 和 apply 的区别只是参数的传递方式不同。
如果往深的去理解无论什么函数this 是否被改变 本质上this 均指向触发函数运行时的那个对象。而在函数运行时this 的值是不能被改变的。
4、new 操作符
函数的创建有三种方式即 显式声明、匿名定义 和 new Function() 。前面提到JS 中的函数即可以是函数也可以是方法还可以是构造函数。
当使用new来创建对象时该函数就是构造函数JS 将新对象的原型链指向了构造函数的原型对象于是就在新对象和函数对象之间建立了一条原型链通过新对象可以访问到函数对象原型 prototype 中的方法和属性。
5、闭包
闭包不是一个孤立的概念需要从函数作用域的角度来理解。
每个函数都有自己的作用域如果在一个函数里定义了另一个函数那么对应的就有两个作用域这两个作用域就会形成一个链条俗称作用域链。本质上讲作用域链是一个自上而下的链表 链表的最顶端是内部函数作用域链表的最底端是全局作用域。内部函数有权访问整个作用域链上的变量。正常情况下每当一个函数执行完毕对应的作用域就会从该链表上移除然后销毁。
但如果函数 A 把函数 B 作为返回值返回时情况又不一样。
首先函数 A 返回的是函数 B 的引用也就是说B 可能会在其他地方被调用。上面提到函数 B 的定义是位于函数 A 内部因此 A 和 B 会形成一条作用域链函数 B 有可能会读取 A 中的变量 。为了保证函数 B 能够在其他地方正确执行函数 B 所在的这条作用域链就不能被破坏。所以即使函数 A 执行返回后A 的作用域也不能释放需要一直保存在内存中以确保函数 B 能够正常读取里面的变量。函数 B 具有永久访问 A 作用域的特权确切说函数 B 就是闭包 。
6、单线程与事件循环
Javascript 是单线程语言。在浏览器中当JS代码被加载时浏览器会为其分配一个主线程来执行任务主线程会在栈中创建一个全局执行环境 全局作用域。每当有一个函数进入执行流时就会形成一个对应的执行环境函数作用域并将该执行环境压入栈中。每当一个函数执行完毕以后对应的执行环境就会从栈中弹出然后被销毁。这就是执行环境栈执行环境栈的作用就是保证所有的函数能按照正确的顺序被执行。
但在浏览器中有一些任务是非常耗时的比如 ajax请求、定时器、事件等。为了保证主线程任务不受影响Javascript 内部维护了一个任务队列 当这些耗时任务结束时Ajax 请求返回、定时器超时、事件被触发就将对应的回调函数插入队列中进行等待。这些任务的执行时机并不确定只有当所有同步任务执行完毕后执行环境栈被清空栈底的全局执行环境会一直存在直到进程退出以后然后再从任务队列中依次读取回调函数并将其压入执行环境栈中。于是主线程开始执行新的同步任务执行完毕后再从栈中弹出栈被清空。
主线程从任务队列中读取任务是不断循环的每当栈被清空后主线程就会从任务队列中读取新的任务并执行如果没有新的任务就会一直等待直到有新的任务。JavaScript 的这种执行机制就叫做任务循环。因为每个任务都由一个事件所触发所以也叫事件循环。
7、异步通信 Ajax技术
Ajax是浏览器专门用来和服务器进行交互的异步通讯技术其核心对象是 XMLHttpRequest通过该对象可以创建一个 Ajax 请求。Ajax 请求是一个耗时的异步操作当请求发出以后Ajax 提供了两个状态位来描述请求在不同阶段的状态这两个状态位分别是 readyState 和 status readyState 通过 5个状态码来描述一个请求的 5 个阶段
0 - 请求未发送初始化阶段1 - 请求发送中服务器还未收到请求2 - 请求发送成功服务器已收到请求3 - 服务器处理完成开始响应请求传输数据4 - 客户端收到请求并完成了数据下载生成了响应对象
status 用于描述服务端对请求处理的情况200 表示正确响应了请求404 表示服务器找不到资源500 代表服务器内部异常等等。
Ajax 对象还可以设置一个 timeout 值代表超时时间。切记timeout 只会影响 readyState而不会影响 status因为超时只会中断数据传输但不会影响服务器的处理结果。 如果 timeout 设置的不合理就会导致响应码 status 是 200但 response里却没有数据这种情况就是服务器正确响应了请求但数据的下载被超时中断了。
为了保证用户信息的安全浏览器引入了同源策略对脚本请求做了限制不允许 Ajax 跨域请求服务器 只允许请求和当前地址同域的服务器资源。但不限制 HTML 标签发送跨域请求比如 script、img、a 标签等因此可以利用标签跨域能力来实现跨域请求这就是 JSONP 能够跨域的原理。
JSONP 虽然可以解决跨域问题但只能发送 GET 请求并且没有有效的错误捕获机制 。为了解决这个问题W3C 在 XMLHttpRequest Level2 中提出了 CORS 规范即 跨域资源共享。它不是一个新的 API而是一个标准规范 。当浏览器发现该请求需要跨域时就会自动在头信息中添加一个 Origin 字段用以说明本次请求来自哪个源。服务器根据这个值决定是否同意这次请求。
随着移动端的快速发展Web 技术的应用场景正在变得越来越复杂关注点分离原则在系统设计层面就显得越来越重要而 XMLHttpRequest 是 Ajax 最古老的一个接口因而不太符合现代化的系统设计理念。因此浏览器提供了一个新的 Ajax 接口即 FetchFetch 是基于 ES6 的 Promise 思想设计的更符合关注点分离原则。
8、模块化
历史上Javascript 规范一直没有模块module体系即无法将一个大程序拆分成互相依赖的小文件再用简单的方法拼装起来。在 ES6 之前为了实现 JS 模块化编程社区制定了一些模块加载方案最主要有 CMD 和 AMD 两种分别以 commonjs 和 requirejs 为代表。ES6 在语言标准的层面上实现了模块化编程其设计思想是尽量静态化使得编译时就能确定模块的依赖关系即编译时加载而 CMD 和 AMD 是在运行时确定依赖关系即运行时加载。
9、Node.js
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境它的运行不依赖于浏览器作为宿主环境而是和服务端程序一样可以独立的运行这使得JS编程第一次从客户端被带到了服务端Node.js 在服务端的优势是它采用单线程和异步I/O模型实现了一个高并发、高性能的运行时环境。相比传统的多线程模型Node.js 实现简单并且可以减少资源开销。
10、ES6
ES6 是 ECMAScript 6.0 的简写即 Javascript 语言的下一代标准已经在 2015年6月正式发布了它的目标是让JS能够方便的开发企业级大型应用程序因此ES6的一些规范正在逐渐向Java、C# 等后端语言标准靠近。ES6 规范中比较重大的变化有以下几个方面
新增 let、const 命令 来声明变量和var 相比let 声明的变量不存在变量提升问题但没有改变JS弱类型的特点依然可以接受任意类型变量的声明const 声明的变量不允许在后续逻辑中改变提高了JS语法的严谨性。新增解构赋值、rest语法、箭头函数等这些都是为了让代码看起来更简洁而包装的语法糖。新增模块化机制这是 JavaScript 走向规范比较重要的一步让前端更方便的实现工程化。新增类和继承的概念配合模块化JavaScript 也可以实现高复用、高扩展的系统架构。新增模板字符串功能高效简洁结束拼接字符串的时代。新增 Promise 机制解决异步回调多层嵌套的问题。
二、CSS 篇
1、CSS选择器
CSS选择器即通过某种规则来匹配相应的标签并为其设置CSS样式常用的有类选择器、标签选择器、ID选择器、后代选择器、群组选择器、伪类选择器(before/after)、兄弟选择器( ~)、属性选择器等等。
2、CSS Reset
HTML 标签在不设置任何样式的情况下也会有一个默认的CSS样式而不同内核浏览器对于这个默认值的设置则不尽相同这样可能会导致同一套代码在不同浏览器上的显示效果不一致而出现兼容性问题。因此在初始化时需要对常用标签的样式进行初始化使其默认样式统一这就是CSS Reset 即CSS样式重置比如*{margin:0,padding:0} 就是最简单CSS Reset
3、盒子布局
盒子模型是CSS比较重要的一个概念也是CSS 布局的基石。 常见的盒子模型有块级盒子(block)和行内盒子(inline-block)与盒子相关的几个属性有margin、border、padding和content 等这些属性的作用是设置盒子与盒子之间的关系以及盒子与内容之间的关系。其中只有普通文档流中块级盒子的垂直外边距才会发生合并而行内盒子、浮动盒子或绝对定位之间的外边距不会合并。另外box-sizing 属性的设置会影响盒子width和height的计算。
4、浮动布局
设置元素的 float 属性值为 left 或 right就能使该元素脱离普通文档流向左或向右浮动。一般在做宫格布局时会用到如果子元素全部设置为浮动则父元素是塌陷的这时就需要清除浮动清除浮动的方法也很多常用的方法是在元素末尾加空元素设置clear:both 更高级一点的就给父容器设置before/after来模拟一个空元素还可以直接设置overflow属性为auto/hidden来清除浮动。除浮动可以实现宫格布局行内盒子(inline-block)和table也可以实现同样的效果。
5、定位布局
设置元素的position属性值为 relative/absolute/fixed就可以使该元素脱离文档流并以某种参照坐标进行偏移。其中releave 是相对定位它以自己原来的位置进行偏移偏移后原来的空间不会被其他元素占用absolute 是绝对定位它以离自己最近的定位父容器作为参照进行偏移为了对某个元素进行定位常用的方式就是设置父容器的poistion:relative因为相对定位元素在不设置 top 和 left 值时不会对元素位置产生影响fixed 即固定定位它则以浏览器窗口为参照物PC网页底部悬停的banner一般都可以通过fixed定位来实现但fixed属性在移动端有兼容性问题因此不推荐使用可替代的方案是绝对定位 内部滚动。
6、弹性布局
弹性布局即Flex布局定义了flex的容器一个可伸缩容器首先容器本身会根据容器中的元素动态设置自身大小然后当Flex容器被应用一个大小时width和height将会自动调整容器中的元素适应新大小。Flex容器也可以设置伸缩比例和固定宽度还可以设置容器中元素的排列方向横向和纵向和是否支持元素的自动换行。有了这个神器做页面布局的可以方便很多了。注意设为Flex布局以后子元素的float、clear和vertical-align 属性将失效。
7、CSS3 动画
CSS3中规范引入了两种动画分别是 transition 和 animationtransition 可以让元素的CSS属性值的变化在一段时间内平滑的过渡形成动画效果为了使元素的变换更加丰富多彩CSS3还引入了transfrom 属性它可以通过对元素进行 平移(translate)、旋转(rotate)、放大缩小(scale)、倾斜(skew) 等操作来实现2D和3D变换效果。transiton 还有一个结束事件 transitionEnd该事件是在CSS完成过渡后触发如果过渡在完成之前被移除则不会触发transitionEnd 。
animation 需要设置一个keyframes来定义元素以哪种形式进行变换 然后再通过动画函数让这种变换平滑的进行从而达到动画效果动画可以被设置为永久循环演示。设置 animation-play-state:paused 可以暂停动画设置 animation-fill-mode:forwards 可以让动画完成后定格在最后一帧。另外还可以通过JS监听animation的开始、结束和重复播放时的状态分别对应三个事件即 animationStart、animationEnd、animationIteration 。注意当播放次数设置为1时不会触发 animationIteration 。
和 transition相比animation 设置动画效果更灵活更丰富还有一个区别是transition 只能通过主动改变元素的css值才能触发动画效果而animation一旦被应用就开始执行动画。另外HTML5 还新增了一个动画API即 requestAnimationFrame它通过JS来调用并按照屏幕的绘制频率来改变元素的CSS属性从而达到动画效果e
8、BFC
BFC是页面上的一个隔离的独立容器容器里面的子元素不会影响到外面元素。比如内部滚动就是一个BFC当一个父容器的overflow-y设置为auto时并且子容器的长度大于父容器时就会出现内部滚动无论内部的元素怎么滚动都不会影响父容器以外的布局这个父容器的渲染区域就叫BFC。满足下列条件之一就可触发BFC
根元素即HTML元素float的值不为noneoverflow的值不为visibledisplay的值为inline-block、table-cell、table-captionposition的值为absolute或fixed
9、SpriteIconfontfont-face
对于大型站点为了减少http请求的次数一般会将常用的小图标排到一个大图中页面加载时只需请求一次网络 然后在css中通过设置background-position来控制显示所需要的小图标这就是Sprite图。
Iconfont即字体图标就是将常用的图标转化为字体资源存在文件中通过在CSS中引用该字体文件然后可以直接用控制字体的css属性来设置图标的样式字体图标的好处是节省网络请求、其大小不受屏幕分辨率的影响并且可以任意修改图标的颜色。
font-face是CSS3中的一个模块通过font-face可以定义一种全新的字体然后就可以通过css属性font-family来使用这个字体了即使操作系统没有安装这种字体网页上也会正常显示出来。
10、CSS Hack
早期不同内核浏览器对CSS属性的解析存在着差异导致显示效果不一致比如 margin 属性在ie6中显示的距离会比其他浏览器中显示的距离宽2倍也就是说margin-left:20px;在ie6中距左侧元素的实际显示距离是40px而在非ie6的浏览器上显示正常。因此如果要想让所有浏览器中都显示是20px的宽度就需要在CSS样式中加入一些特殊的符号让不同的浏览器识别不同的符号以达到应用不同的CSS样式的目的这种方式就是css hack 对于ie6中的margin应用hack就会变成这样.el {margin-left:20px;_margin-left:10px}
兼容各大浏览器的 css hack 如下 三、HTML 篇
1、BOM
BOM 是 Browser Object Model 的缩写即浏览器对象模型当一个浏览器页面初始化时会在内存创建一个全局的对象用以描述当前窗口的属性和状态这个全局对象被称为浏览器对象模型即BOM。BOM的核心对象就是windowwindow 对象也是BOM的顶级对象其中包含了浏览器的 6个核心模块
document - 即文档对象渲染引擎在解析HTML代码时会为每一个元素生成对应的DOM对象由于元素之间有层级关系因此整个HTML代码解析完以后会生成一个由不同节点组成的树形结构俗称DOM树document 用于描述DOM树的状态和属性并提供了很多操作DOM的API。frames - HTML 子框架即在浏览器里嵌入另一个窗口父框架和子框架拥有独立的作用域和上下文。history - 以栈(FIFO)的形式保存着页面被访问的历史记录页面前进即入栈页面返回即出栈。location - 提供了当前窗口中加载的文档相关信息以及一些导航功能。navigator - 用来描述浏览器本身包括浏览器的名称、版本、语言、系统平台、用户特性字符串等信息。screen - 提供了浏览器显示屏幕的相关属性比如显示屏幕的宽度和高度可用宽度和高度。
2、DOM 系统
DOM 是 Document Object Model 的缩写即 文档对象模型是所有浏览器公共遵守的标准DOM 将HTML和XML文档映射成一个由不同节点组成的树型结构俗称DOM树。其核心对象是document用于描述DOM树的状态和属性并提供对应的DOM操作API。随着历史的发展DOM 被划分为1级、2级、3级共3个级别
1级DOM - 在1998年10月份成为W3C的提议由DOM核心与DOM HTML两个模块组成。DOM核心能映射以XML为基础的文档结构允许获取和操作文档的任意部分。DOM HTML通过添加HTML专用的对象与函数对DOM核心进行了扩展。2级DOM - 鉴于1级DOM仅以映射文档结构为目标DOM 2级面向更为宽广。通过对原有DOM的扩展2级DOM通过对象接口增加了对鼠标和用户界面事件DHTML长期支持鼠标与用户界面事件、范围、遍历重复执行DOM文档和层叠样式表CSS的支持。同时也对DOM 1的核心进行了扩展从而可支持XML命名空间。3级DOM - 通过引入统一方式载入和保存文档和文档验证方法对DOM进行进一步扩展DOM3包含一个名为“DOM载入与保存”的新模块DOM核心扩展后可支持XML1.0的所有内容包括XML Infoset、 XPath、和XML Base。
浏览器对不同级别DOM的支持情况如下所示 从图中可以看出移动端常用的 webkit 内核浏览器目前只支持 DOM2而不支持 DOM3 。
3、事件系统
事件是用户与页面交互的基础到目前为止DOM事件从PC端的 鼠标事件(mouse) 发展到了 移动端的 触摸事件(touch) 和 手势事件(guesture)touch事件描述了手指在屏幕操作的每一个细节guesture 则是描述多手指操作时更为复杂的情况总结如下
第一根手指放下触发 touchstart除此之外什么都不会发生手指滑动时触发touchmove第二根手指放下触发 gesturestart 触发第二根手指的 touchstart 立即触发 gesturechange 任意手指移动持续触发 gesturechange第二根手指弹起时触发 gestureend以后将不会再触发 gesturechange 触发第二根手指的 touchend 触发touchstart (多根手指在屏幕上提起一根会刷新一次全局touch) 弹起第一根手指触发 touchend DOM2.0 模型将事件处理流程分为三个阶段即事件捕获阶段、事件处理阶段、事件冒泡阶段如图所示 事件捕获当用户触发点击事件后顶层对象document 就会发出一个事件流从最外层的DOM节点向目标元素节点传递最终到达目标元素。事件处理当到达目标元素之后执行目标元素绑定的处理函数。如果没有绑定监听函数则不做任何处理。事件冒泡事件流从目标元素开始向最外层DOM节点传递途中如果有节点绑定了事件处理函数这些函数就会被执行。
利用事件冒泡原理可以实现 事件委托所谓事件委托就是在父元素上添加事件监听器用以监听和处理子元素的事件避免重复为子元素绑定相同的事件。当目标元素的事件被触发以后这个事件就从目标元素开始向最外层元素传递最终冒泡到父元素上父元素再通过event.target 获取到这个目标元素这样做的好处是父元素只需绑定一个事件监听就可以对所有子元素的事件进行处理了从而减少了不必要的事件绑定对页面性能有一定的提升。
4、HTML解析过程
浏览器加载 html 文件以后渲染引擎会从上往下一步步来解析HTML标签大致过程如下
用户输入网址浏览器向服务器发出请求服务器返回html文件渲染引擎开始解析 html 标签并将标签转化为DOM节点生成 DOM树如果head 标签中引用了外部css文件则发出css文件请求服务器返回该文件该过程会阻塞后面的解析如果引用了外部 js 文件则发出 js 文件请求服务器返回后立即执行该脚本这个过程也会阻塞html的解析引擎开始解析 body 里面的内容如果标签里引用了css 样式就需要解析刚才下载好的css文件然后用css来设置标签的样式属性并生成渲染树如果 body 中的 img 标签引用了图片资源则立即向服务器发出请求此时引擎不会等待图片下载完毕而是继续解析后面的标签服务器返回图片文件由于图片需要占用一定的空间会影响到后面元素的排版因此引擎需要重新渲染这部分内容如果此时 js 脚本中运行了 style.displaynone布局被改变引擎也需要重新渲染这部分代码直到 html 结束标签为止页面解析完毕。
5、重绘与回流
当渲染树中的一部分(或全部)因为元素的规模尺寸布局隐藏等改变而需要重新构建。这就称为回流。比如上面的img文件加载完成后就会引起回流每个页面至少需要一次回流就是在页面第一次加载的时候。
当渲染树中的一些元素需要更新属性而这些属性只是影响元素的外观风格而不会影响布局的比如 background-color。则就叫称为重绘。
从上面可以看出回流必将引起重绘而重绘不一定会引起回流。会引起重绘和回流的操作如下
添加、删除元素(回流 重绘)隐藏元素display:none(回流 重绘)visibility:hidden(只重绘不回流)移动元素比如改变top,left的值或者移动元素到另外一个父元素中。(重绘 回流)对style的操作(对不同的属性操作影响不一样)还有一种是用户的操作比如改变浏览器大小改变浏览器的字体大小等(回流 重绘)
另外transform 操作不会引起重绘和回流是一种高效率的渲染。这是因为transform属于合成属性对合成属性进行transition/animation 动画时将会创建一个合成层这使得动画元素在一个独立的层中进行渲染当元素的内容没有发生改变就没必要进行重绘浏览器会通过重新复合来创建动画帧。
6、本地存储
本地存储最原始的方式就是 cookie,cookie 是存放在本地浏览器的一段文本数据以键值对的形式保存可以设置过期时间。 但是 cookie 不适合大量数据的存储因为每请求一次页面cookie 都会发送给服务器这使得 cookie 速度很慢而且效率也不高。因此cookie的大小被限制为4k左右(不同浏览器可能不同,分HOST)如下所示
Firefox和Safari允许cookie多达4097个字节包括名(name)、值(value) 和 等号。Opera允许cookie多达4096个字节包括名(name)、值(value) 和 等号。Internet Explorer允许cookie多达4095个字节包括名(name)、值(value) 和 等号。
在所有浏览器中任何cookie大小超过限制都被忽略且永远不会被设置。
html5 提供了两种在客户端存储数据的新方法localStorage 和 sessionStorage, 它们都是以key/value 的形式来存储数据前者是永久存储后者的存储期限仅限于浏览器会话(session)即当浏览器窗口关闭后sessionStorage中的数据被清除。
localStorage的存储空间大约5M左右(不同浏览器可能不同分 HOST)这个相当于一个5M大小的前端数据库相比于cookie可以节约带宽但localStorage在浏览器隐私模式下是不可读取的当存储数据超过了localStorage 的存储空间后会抛出异常。
此外H5还提供了逆天的websql和 indexedDB允许前端以关系型数据库的方式来存储本地数据相对来说这个功能目前应用的场景比较少此处不作介绍。
7、浏览器缓存机制
浏览器缓存机制是指通过 HTTP 协议头里的 Cache-Control (或 Expires) 和 Last-Modified (或 Etag) 等字段来控制文件缓存的机制。
Cache-Control 用于控制文件在本地缓存有效时长。最常见的比如服务器回包Cache-Control:max-age600 表示文件在本地应该缓存且有效时长是600秒 (从发出请求算起)。在接下来600秒内如果有请求这个资源浏览器不会发出 HTTP 请求而是直接使用本地缓存的文件。
Last-Modified 是标识文件在服务器上的最新更新时间。下次请求时如果文件缓存过期浏览器通过 If-Modified-Since 字段带上这个时间发送给服务器由服务器比较时间戳来判断文件是否有修改。如果没有修改服务器返回304告诉浏览器继续使用缓存如果有修改则返回200同时返回最新的文件。
Cache-Control 通常与 Last-Modified 一起使用。一个用于控制缓存有效时间一个在缓存失效后向服务查询是否有更新。
Cache-Control 还有一个同功能的字段Expires。Expires 的值一个绝对的时间点如Expires: Thu, 10 Nov 2015 08:45:11 GMT表示在这个时间点之前缓存都是有效的。
Expires 是 HTTP1.0 标准中的字段Cache-Control 是 HTTP1.1 标准中新加的字段功能一样都是控制缓存的有效时间。当这两个字段同时出现时Cache-Control 是高优化级的。
Etag 也是和 Last-Modified 一样对文件进行标识的字段。不同的是Etag 的取值是一个对文件进行标识的特征字串。在向服务器查询文件是否有更新时浏览器通过 If-None-Match 字段把特征字串发送给服务器由服务器和文件最新特征字串进行匹配来判断文件是否有更新。没有更新回包304有更新回包200。Etag 和 Last-Modified 可根据需求使用一个或两个同时使用。两个同时使用时只要满足基中一个条件就认为文件没有更新。
另外有两种特殊的情况
手动刷新页面(F5)浏览器会直接认为缓存已经过期(可能缓存还没有过期)在请求中加上字段Cache-Control:max-age0发包向服务器查询是否有文件是否有更新。强制刷新页面(Ctrl F5)浏览器会直接忽略本地的缓存(有缓存也会认为本地没有缓存)在请求中加上字段Cache-Control:no-cache (或 Pragma:no-cache)发包向服务重新拉取文件。 8、History
用户访问网页的历史记录通常会被保存在一个类似于栈的对象中即 history 对象点击返回就出栈跳下一页就入栈。 它提供了以下方法来操作页面的前进和后退
window.history.back( ) 返回到上一个页面window.history.forward( ) 进入到下一个页面window.history.go( [delta] ) 跳转到指定页面
HTML5 对History Api 进行了增强新增了两个Api 和一个事件分别是pushState、replaceState 和 onpopstate
pushState是往history对象里添加一个新的历史记录即压栈。replaceState 是替换history对象中的当前历史记录。
当点击浏览器后退按钮或 js调用history.back 都会触发 onpopstate 事件。
与其类似的还有一个事件onhashchangeonhashchange是老 API浏览器支持度高本来是用来监听hash变化的但可以被利用来做客户端前进和后退事件的监听而onpopstate 是专门用来监听浏览器前进后退的不仅可以支持 hash非 hash 的同源 url 也支持。
9、HTML5离线缓存
HTML5离线缓存又叫Application Cache是从浏览器的缓存中分出来的一块缓存区如果要在这个缓存中保存数据可以使用一个描述文件manifest file列出要下载和缓存的资源。
manifest 文件是简单的文本文件它告知浏览器被缓存的内容以及不缓存的内容。manifest 文件可分为三个部分
CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存NETWORK - 在此标题下列出的文件需要与服务器的连接且不会被缓存FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面比如 404 页面
离线缓存为应用带来三个优势
离线浏览 - 用户可在应用离线时使用它们速度 - 已缓存资源加载得更快减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
10、Web语义化与SEO
Web语义化是指使用语义恰当的标签使页面有良好的结构页面元素有含义能够让人和搜索引擎都容易理解。
SEO是指在了解搜索引擎自然排名机制的基础之上对网站进行内部及外部的调整优化改进网站在搜索引擎中关键词的自然排名获得更多的展现量吸引更多目标客户点击访问网站从而达到互联网营销及品牌建设的目标。
搜索引擎通过爬虫技术获取的页面就是由一堆 html 标签组成的代码人可以通过可视化的方式来判断页面上哪些内容是重点而机器做不到。 但搜索引擎会根据标签的含义来判断内容的权重因此在合适的位置使用恰当的标签使整个页面的语义明确结构清晰搜索引擎才能正确识别页面中的重要内容并予以较高的权值。比如h1~h6这几个标签在SEO中的权值非常高用它们作页面的标题就是一个简单的SEO优化。 学习前端的同学们欢迎加入前端学习交流群
前端学习交流QQ群461593224
