众所周知，Vue项目采用了数据双向绑定和虚拟DOM基础，在数据驱动代替DOM频繁渲染已经算是非常高效了，对开发者而言已经非常优化了，那为什么还会有Vue性能优化这一说呢？
因为目前Vue 2.x使用了webpack等第三方打包构建工具，并且支持其他第三方的插件，我们在项目中使用这些工具时可能不同的操作在运行或打包效率上会有不同的效果，下面就来详细说明优化的方向。
1 v-if 和 v-show 的使用
v-if 为false的时候不会渲染DOM到视图，为true的时候才会渲染到视图；
v-show 不管初始条件是什么，元素总是会渲染到视图，只是简单地基于 CSS 的 display 属性进行切换。
最佳实践：频繁切换显示隐藏的元素采用v-show，很少改变使用v-if
2 computed 和 watch 区分使用
computed： 是计算属性，依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed的值；
watch： 更多的是「观察」的作用，类似于某些数据的监听回调 ，每当监听的数据变化时都会执行回调进行后续操作；
最佳实践：当我们需要进行数值计算，并且依赖于其它数据时，应该使用 computed，因为可以利用 computed 的缓存特性，避免每次获取值时，都要重新计算；当我们需要在数据变化时执行异步或开销较大的操作时，应该使用 watch，使用 watch 选项允许我们执行异步操作 ( 访问一个 API )，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。
3 v-for 遍历必须为 item 添加 key，且避免同时使用 v-if
现在不加key一般会报错的，添加key可以方便 Vue内部机制精准找到该条列表数据。当更新时，新的状态值和旧的状态值对比，较快地定位到 diff
v-for比 v-if 优先级高，如果每一次都需要遍历整个数组，将会影响速度，尤其是当之需要渲染很小一部分的时候，必要情况下应该替换成 computed属性。
4 纯显示长列表性能优化
对于只用来展示用的数据，不需要做vue做数据劫持，只需要冻结这个对象即可：
export default { data () { return { users: [] } }, created () { axios.get('/api/users').then((res)=>{ this.users = Object.freeze(res.data.users) }) } }
5 事件的销毁
Vue 组件销毁时，会自动清理它与其它实例的连接，解绑它的全部指令及事件监听器，但是仅限于组件本身的事件。 如果在 js 内使用 addEventListene 等方式是不会自动销毁的，我们需要在组件销毁时手动移除这些事件的监听，以免造成内存泄露，如：
created() { addEventListener('click', this.click, false) }, beforeDestroy() { removeEventListener('click', this.click, false) }
6 图片资源懒加载
使用vue-lazyload插件：
安装
npm install vue-lazyload --save-dev
1
man.js 引用
import VueLazyload from 'vue-lazyload' Vue.use(VueLazyload) // 或自定义 Vue.use(VueLazyload, { preLoad: 1.3, error: 'dist/error.png', loading: 'dist/loading.gif', attempt: 1 })
修改img标签
<img v-lazy="/static/img/1.png">
1
7 路由懒加载
Vue 是单页面应用，可能会有很多的路由引入 ，这样使用 webpcak 打包后的文件很大，当进入首页时，加载的资源过多，页面会出现白屏的情况，不利于用户体验。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应的组件，这样就更加高效了。这样会大大提高首屏显示的速度，但是可能其他的页面的速度就会降下来。
const Foo = () => import('./Foo.vue') const router = new VueRouter({ routes: [ { path: '/foo', component: Foo } ] })
8 第三方插件按需引入
我们在使用第三方库的时候，最好是按需引入而不是全局引入，因为第三方库的插件比较多全部引入会打包比较慢，如Element UI、Ant Design of Vue等UI库：
按需引入
import Vue from 'vue'; import { DatePicker } from 'ant-design-vue'; Vue.use(DatePicker);
1
2
3
全局引入
import Antd from 'ant-design-vue'; Vue.use(Antd);
1
2
9 优化无限列表性能
如果你是在渲染带无限滚动加载的列表时，那么需要采用 窗口化 的技术来优化性能，只需要渲染少部分区域的内容，减少重新渲染组件和创建 dom 节点的时间。 你可以参考以下开源项目 vue-virtual-scroll-list 和 vue-virtual-scroller来优化这种无限列表的场景的。
大家自己去Github看使用说明吧。
10 服务端渲染 SSR or 预渲染
一般单页应用是在浏览器端完成页面渲染的，数据是发请求从后台拿过来的；而服务器端渲染SSR是页面元素的结构(HTML)是在服务器端就已经构建好的，直接把整个页面返回到客户端的。
那SSR有什么优缺点呢：
更好的SEO：网络爬虫可以直接爬取页面信息利于被搜索引擎收录，而ajax异步请求的内容不会被收录，所以通过SSR渲染的完整的页面信息更利于SEO；
支持的钩子函数只支持 beforCreate 和 created，服务器需要处于Node Server环境；
需要更高的服务器配置：因为它包含了数据处理和页面渲染，所以服务器开支变大
如果对首屏加载速度要求比较高或对SEO有要求的可以采用SSR渲染。
转自：csdn论坛
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
正如Redux一样，当你不知道是否需要Vuex那就是不需要。不要因为想用Vuex而使用它。
用过Vue的人都知道，Vuex是Vue的一个全局状态管理模块，它的作用是多个组件共享状态及数据，当某个组件将全局状态修改时，在绑定了该状态的另一个组件也将响应。实际上可以将Vue理解为一个function，在Vue的作用域中有一个数据代理，在每个Vue的实例中都能对其读和写
我们都知道Vue的数据驱动原理是用Object.defineProperty()进行数据代理，在setter中对数据绑定的view进行异步响应（vue3.0则是使用proxy）
通过查看Vuex源码可知Vuex的核心原理就是在Vue的beforeCreate钩子前混入（mixin）Vuex，并在init中将$store属性注册到Vue中
为了使案例更具体，我这还是简单使用脚手架搭了个项目（可参考另一篇文章），虽然只有两个组件，但是能清晰的理解其用法，我的src目录如下，除了最基础的App.vue和main.js外只有两个组件和一个store
先说明一下两个组件的作用，第一个组件是输入框，在里面输入字符，在二个组件div中显示，就是这么简单
首先我们使用常规方式(EventBus)实现一下，这里只需要在mainjs中创建一个vue实例，然后注册在vue中就可以通过事件emit和on来进行组件通信
main.js
import Vue
from 'vue'
import App
from './App'
Vue.prototype.$eventBus = new Vue()
new Vue({
el: '#app',
components: {App},
template: '<App/>'
})
<template>
<div>
{{
val
}}
</div>
</template>
<script>
export default {
name: "divComp",
data () {
return {
val: ''
}
},
mounted () {
this.$eventBus.$on('changeVal', (e) => {//监听输入事件通过eventBus传递信息
this.val = e
})
}
}
</script>
<style
scoped>
</style>
如果到这一步，你仍然感觉难度不大，那么恭喜你，Vuex的使用已经掌握了一大半了
下面，我们来说说actions，在说actions之前，我们先回顾一下mutations，mutations中注册了一些事件，在组件中通过emit对事件进行触发，达到处理异步且解耦的效果，然而官方并不推荐我们直接对store进行操作
官方对actions的说明是：Action 类似于 mutation，不同在于1.Action 提交的是 mutation，而不是直接变更状态。2.Action 可以包含任意异步操作。
也就是说，我们要把组件中的emit操作放到actions中，而在组件中通过某些方式来触发actions中的函数间接调用emit，此时，为了让action更直观，我们添加一个清除输入框字符的方法，当点击清除按钮时清除state.val
在输入框组件中将value绑定到state上
<template>
<input type="text" @input="inputHandler" :value="this.$store.state.val" />
</template>
<script>
export default {
name: "inputComp",
methods: {
inputHandler(e) {
this.$store.dispatch("actionVal", e.target.value);
},
},
};
</script>
<style
scoped>
</style>
在另一个显示数据的组件中新增删除按钮并绑定删除事件，通过dispatch告知store并通过emit操作state
<template>
<div>
<button @click="clickHandler">清除</button>
<span>{{ this.$store.state.val + this.$store.getters.getValueLength }}</span>
</div>
</template>
<script>
export default {
name: "divComp",
methods: {
clickHandler(){
this.$store.dispatch('actionClearVal')
}
},
};
</script>
<style
scoped>
</style>
最后在store中新建删除的actions和mutations
import Vue
from "vue";
import Vuex
from "vuex";
Vue.use(Vuex);
const state = {
val: ''
}
const mutations = {
changeVal(state, _val) {
state.val = _val
},
clearVal(state, _val) {
state.val = ''
}
}
const actions = {
actionVal(state, _val) {
state.commit('changeVal', _val)
},
actionClearVal(state) {
state.commit('clearVal')
}
}
const getters = {
getValueLength(state) {
return `长度：${state.val.length}`
}
}
export default new Vuex.Store({
state,
mutations,
actions,
getters
})
最终效果如下：
到这里为止，Vuex的基本用法就介绍完毕了。
然而除此之外，Vuex官方还提供了辅助函数（mapState,mapMutations,mapGetters,mapActions）和Modules（store的子模块，当有许多全局状态时，我们为了避免代码臃肿，就可以将各个store分割成模块）方便我们书写
下面我们用辅助函数重新实现一下上述功能
输入框：
<template>
<input type="text" @input="inputHandler" :value="value" />
</template>
<script>
import { mapState, mapMutations } from "vuex";
export default {
name: "inputComp",
computed: {
...mapState({ value: "val" }),
},
methods: {
...mapMutations({ sendParams: "changeVal" }), // sendParams用来传递参数,先把sendParams注册到mutations上，输入时触发sendParams
inputHandler(e) {
this.sendParams(e.target.value);
},
},
};
</script>
<style
scoped>
</style>
显示框：
<template>
<div>
<button @click="clickHandler">清除</button>
<span>{{ value + valueLength }}</span>
</div>
</template>
<script>
import { mapState, mapGetters, mapActions } from "vuex";
export default {
name: "divComp",
computed: {
...mapState({ value: "val" }),
...mapGetters({ valueLength: "getValueLength" }),
},
methods: {
...mapActions({ clickHandler: "actionClearVal" }),
},
};
</script>
<style
scoped>
</style>
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
大屏可视化界面设计可谓是当今行业、企业发展的见证，生动直观地再现了行业、企业的全貌。不仅作为展示，方便了解、监督；同时可以作为一个有效的管理平台，带来效益。大屏界面面向范围广，协同性好，易于被采用。下面几个大屏的界面设计，沉稳的背景上，加上亮色作为点缀和强调。既不失其风格，又富有灵动性。
接下来为大家分享精美的大屏 UI设计案例：
蓝蓝设计(北京兰亭妙微科技有限公司）是一家专注而深入的UI设计公司，公司对UI设计的追求一向很高，致力于为卓越的国内外企业提供卓越的手机 ui设计、软件界面设计、网站设计，用户研究、交互设计等服务。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
更多精彩文章：
大数据可视化界面设计赏析（一）
大数据可视化界面设计赏析（二）
大数据可视化界面设计赏析（五）
文章目录
一.函数防抖
二、函数节流
1.时间戳实现
2.定时器实现
3.用节流优化防抖(定时器+时间戳)
三、总结
四、例子
一.函数防抖
当持续触发事件时，并不执行事件处理函数，一定时间段内没有再触发事件，事件处理函数才会执行一次；如果设定的时间到来之前，又一次触发了事件，就重新开始延时。
function debounce(fn, delay) {
// 定时器
let timer = null
// 将debounce处理结果当作函数返回
return function () {
// 保留调用时的this上下文
let context = this
// 保留调用时传入的参数
let args = arguments
// 每次事件被触发时，都去清除之前的旧定时器
if(timer) {
clearTimeout(timer)
}
// 设立新定时器
timer = setTimeout(function () {
fn.apply(context, args)
}, delay)
}
}
当持续触发事件时，保证一定时间段内只调用一次事件处理函数。
3.用节流优化防抖(定时器+时间戳)
防抖的问题在于如果用户的操作十分频繁——他每次都不等 设置的 delay 时间结束就进行下一次操作，于是每次都为该用户重新生成定时器，回调函数被延迟了不计其数次。 频繁的延迟会导致用户迟迟得不到响应，用户同样会产生“这个页面卡死了”的观感。
用节流来优化，保证在一定时间段内会调用一次事件处理函数。
function throttle(fn, delay) {
// last为上一次触发回调的时间, timer是定时器
let last = 0, timer = null
// 将throttle处理结果当作函数返回
return function () {
// 保留调用时的this上下文
let context = this
// 保留调用时传入的参数
let args = arguments
// 记录本次触发回调的时间
let now = +new Date()
// +是一元操作符，利用js隐式转换将其他类型变为数字类型
// 判断上次触发的时间和本次触发的时间差是否小于时间间隔的阈值
if (now - last < delay) {
// 如果时间间隔小于我们设定的时间间隔阈值，则为本次触发操作设立一个新的定时器
clearTimeout(timer)
timer = setTimeout(function () {
last = now
fn.apply(context, args)
}, delay)
} else {
// 如果时间间隔超出了我们设定的时间间隔阈值，那就不等了，无论如何要反馈给用户一次响应
last = now
fn.apply(context, args)
}
}
}
三、总结
函数防抖：将几次操作合并为一此操作进行。原理是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发。
函数节流：使得一定时间内只触发一次函数。原理是通过判断是否到达一定时间来触发函数。
区别： 函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。
场景：比如在页面的无限加载场景下，我们需要用户在滚动页面时，每隔一段时间发一次 Ajax 请求，而不是在用户停下滚动页面操作时才去请求数据。这样的场景，就适合用节流技术来实现。
转自：csdn
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
异常包括的主要关键字有try{}catch（）{}finally{} throw和throws五个关键字 。
下面我们来细说一下这五个关键字分别有什么用。
try catch关键字 这两个关键字是连用的
1.如果try块中的语句正常执行完毕，不会发生异常则catch块中的语句都将会被忽略。
2.如果try语句块在执行中遇到异常。并且这个异常与catch中声明的异常类型相匹配，那么在try块中其余剩下的代码都将被忽略。
3.如果try语句块在执行过程中遇到异常，而抛出的异常在catch块中没有被声明，那么程序立刻退出。
finally关键字这个关键字中的代码总能被执行（怎么我都要执行 ）
1.只要try中所有语句正常执行完毕，那么finally块就会被执行。
2.如果try语句块在执行过程中碰到异常，无论这种异常能否被catch块捕获到，都将执行finally块中的代码。
注：try—catch—finally结构中try块是必需的catch和finally块为可选，但两者至少须出现其中之一。
如果catch中存在return，finally也会执行只不过执行的顺序有一定差异 ，先执行catch里的代码块，之后执行finally里的代码块，最后执行return语句。
throw关键字抛出异常
throws关键字声明捕捉异常
那么throw和throws有什么区别呢
1.作用不同：throw用于在程序中抛出异常；throws用于声明在该方法内抛出异常。
2.使用的位置不同：throw位于方法体内部，可以作为单独语句使用；throws必须跟在方法参数列表的后面，不能单独使用。
3.内容不同：throw抛出一个异常对象，而且只能有一个；throws后面跟异常类，而且可以跟多个异常类。
知道了这五个关键字的用法下面我们来说一下几个常用的异常代码：
1.ArithmeticException 试图除以0。
2.NullpointerException 当程序访问一个空对象的成员变量或方法，访问一个空数组的成员时发生。
3.ClassCastException 发生多态后，吐过强制转换的并不是父类的子类时发生。编译的时候可以通过，以为编译的时候并不会检查类型转换的问题。
4.ArraylndwxOutOfBoundsException 访问的元素下标超过数组长度
5.NumberFormatException 数字格式异常。
6.Exception 一般的异常都包括。
转自：csdn
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
ES6中的let和const和解构赋值
什么是ES6?
ES6， 全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版。
为什么要使用ES6?
每一次标准的诞生都意味着语言的完善，功能的加强。js语言本身也有一些令人不满的地方
1.变量提升特性增加了程序运行的不可预测性 。
变量提升可以简单看以下代码了解下:
console.log(a);
var a=1;
//console.log(a)会输出undefined
这段代码也可以这样表示
var a;
console.log(a);
a=10;
//依旧输出undefined
这就是变量提升!
2.语法过于松散，实现相同的功能，不同的人可以会写出不同的代码，阅读性较低。
所以：ES6 ,目标是使JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。我们没有理由不去学习ES6。
let关键字
ES6中新增的用于声明变量的关键字。主要是替代var。
特征：1.let声明的变量只在所处的块级有效，具有块级作用域！ 在ES6之前JS只有全局作用域和局部作用域。
块级作用域：通俗来讲就是在一对大括号中产生的作用域，块级作用域中的变量只能在大括号中访问，在大括号外面是访问不到的。
可以看以下代码：
if(true){
let a=10;
console.log(a);//输出10
}
console.log(a);//报错提示a没有定义
{
let b=10;
console.log(b);//输出10
}
console.log(b);//报错提示b没有定义
if(true){
let c=20;
console.log(c)//输出20
if(true){
let d=30;
console.log(c)//输出 20
}
console.log(d);//报错d没有定义
}
在for循环中也起到作用，根据不同的需求选择let和var！
例如：
for(var i=0;i<10;i++){}
console.log(i) //输出10
for(let j=0;j<10;j++){}
console.log(j) //报错 j没有定义
好处：在业务逻辑比较复杂的时候，可以放在内层变量覆盖外层变量！
2.存在let 一开始就会形成封闭的作用域 使用let命名声明变量前 ，变量不可用，必须先声明后使用，不存在变量提升
例如:
if(true){
console.log(temp);//报错
let temp=1;
}`
3.let 不允许重复声明 在一个作用域内。
例如：
if(true){
let temp;
console.log(temp);//报错Identifier 'temp' has already been declared
let temp=1;
}
if(true){
var temp=10;
let temp=5;
console.log(temp);//报错 错误和上面一致
}
但是不在一个作用域内可以 例如：
{
let x=10;
console.log(x);//输出10
}
{
let x=5;
console.log(5);//输出5
}
const关键字
const一般用来声明常量，声明一个只读的常量。
特征：1.一旦声明其值不能改变必须立即初始化
例如：
const a; //这样什声明会直接报错！！！
1
这样声明没有初始化会直接报错！
2.对于对象：存的不是对象的本身， 而是对象的引用， 引用地址 ，地址不变， 对象可拓展！
例如：
const foo={y:10};
foo.x=100;
console.log(foo.x);//输出100
1
2
3
对象可以扩展
但是对象不能改变
例如：foo={n:1000}; 会报错！
作用域：
var v1=100;
function f1(){
console.log(v1,v2); //undefined no defined
var v1=110;
let v2=200;
function f2(){
let v3=300;
console.log(v1,v2,v3);//110 200 300
}
f2();
console.log(v1,v2,v3);// 110 200 no defined
}
f1();
console.log(v1,v2,v3);// 100 no defined no defined
可以向外面作用域找 不可以向里面作用域找 内层变量可能会覆盖外层变量
let和var的本质区别：浏览器的顶层对象为window Node的为global，var定义的变量会关联到顶层对象中，let和const不会！
例如：
var a =100;
console.log(window.a); // 100
let b=100;
console.log(window.b); //undefined
1
2
3
4
如何选择const和let:数据需要变化用let 数据不需要变化用const
解构赋值：ES6中允许从数组中提值，按照对应位置，对变量赋值，对象也可以实现解构！
例如：
{
let a,b,c;
[a,b]=[1,2];
console.log(a,b,c); //输出 1 2 undefined
}
{
let a,b,c;
[a,b,...c]=[1,2,3,4,5,6];
console.log(a);//输出1
console.log(b);//输出2
console.log(c);//输出[3,4,5,6]
}
{
let a,b,c;
[a,b,c=3]=[1,2];
console.log(a,b,c);//输出1 2 3
}
{
let a,b;
[a,b]=[1,2];
[a,b]=[b,a]
console.log(a,b);//输出 2 1
}
{
let a,b;
({a,b}={a:1,b:2})
console.log(a,b);//输出 1 2
}
{
function fun(){
return [1,2,3,4,5,6]
};
let a,b;
[a,,,,b]=fun();
console.log(a,b);//输出1 5
}
{
let o={p:42,q:true};
let {p,q}=o;
console.log(p,q);//输出 42 true
}
{
let {a=10,b=5}={a:3};
console.log(a,b);//输出 3 5
}
{
let metaData={
title:'abc',
test:[{
title:'test',
desc:'description'
}]
}
let {title:esTitle,test:[{title:cnTitle}]}=metaData;
console.log(esTitle,cnTitle);//输出abc test
}
解构赋值表达式右边的部分表示解构的源；解构表达式左边的部分表示解构的目标，如果左右两边对比成功就返回右边的值，如果没有对比成功就会undefined返回原来的值
除此之外还可以返回一些函数和方法
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
大屏可视化界面设计可谓是当今行业、企业发展的见证，生动直观地再现了行业、企业的全貌。不仅作为展示，方便了解、监督；同时可以作为一个有效的管理平台，带来效益。大屏界面面向范围广，协同性好，易于被采用。下面几个大屏的界面设计，沉稳的背景上，加上亮色作为点缀和强调。既不失其风格，又富有灵动性。
接下来为大家分享精美的大屏 UI设计案例：
蓝蓝设计(北京兰亭妙微科技有限公司）是一家专注而深入的UI设计公司，公司对UI设计的追求一向很高，致力于为卓越的国内外企业提供卓越的手机 ui设计、软件界面设计、网站设计，用户研究、交互设计等服务。
（图片均来源于网络）
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
更多精彩文章：
大数据可视化界面设计赏析（一）
大数据可视化界面设计赏析（二）
大数据可视化界面设计赏析（五）
零基础如何快速入「]前端?这个问题往往是没有基础会遇到的，想要快速入「门前端开发，简单来说就是要把基础的知识点掌握熟练，然后由浅入深的去学习，在这里根据我过来的经验，为大家简单介绍一下零基础如何快速入门前端。
举个可能不太恰当的例子:前端就好比如盖房子，html就充当 了房子结构这部分，也是房子的基础。css呢， 就好比咱们房子的装修,墙面什么颜色，什么风格，什么地板等等，这些给房子改变风格,样式的就是css。而Java呢，就好比这个房子的功能，房子需要制冷吧，需要暖气吧，也需要上下水吧。这些功能性的就相当于是Java。
一、前端工具（dreamwear/sublime/Photoshop/SVN等）
二、零基础入门（HTML，CSS）
1、前端开发概况、代码入门
页面基本结构、文档声明、编码声明、css语法、style属性、link和style标签、id属性、基本样式、Border 、Background、 Font、盒模型、文本设置等等。
2、常用标签集合
header、article、aside、section、footer、nav、h1-h6、p、ul、ol、li、img、dl、dt、dd…绝对路径、相对路径、标签语义化、标签嵌套规范、SEO…
3、常用选择器&标签类型划分
d、class、类型选择、包含选择、群组选择、通配符、选择器优先级、标签样式初始化订制方案、超链接及伪类划分、标签类型划分及特性、inline、inline-block、block…
4、浮动进阶
浮动的作用、浮动的特性、文档流、浮动的各种问题、clear、BFC(块级格式化上下文)、触发BFC的条件、Haslayout、Haslayout的触发条件…
5、定位
relative相对定位、Absolute绝对定位、Absolute绝对定位、Fixed 固定定位、inherit 继承、static静态定位、默认值、zIndex层级问题、margin负值、透明度…
6、表格和表单
表格标签、表格样式重置、单元格合并、表单元素、表单相关的属性操作、表单默认样式初始…
7、兼容性问题处理
兼容性问题总结、浮动在IE6，7下的各种问题、表单在低版本IE的问题、处理低版本IE对新增标签的支持、CssHack、条件注释语句、PNG问题、透明度的问题、固定定位在IE低版本的处理方式…
8、整站进阶
样式规划、favicon、Css Sprite、Data URI、隐藏元素、测试工具使用、滑动门、等高布局、三列布局、未知宽高图片在容器内水平垂直居中、文本水平垂直居中、多行文本水平垂直居中…
9、css3入门
transition、属性选择器、nth-of-type、nth-child、backgroundSize、box-sizing、圆角，盒模型阴影、文字阴影、rgba、表单高级、H5表单新增属性、E:not(s)、E:target、E::selection、
10、移动端布局
测试环境Emulation、viewport、window.devicePixelRatio、物理分辨率、Media Queries、rem、window.screen、移动端布局相关问题、window.deviceorientationevent、横竖屏判断…
11、Animation和Transform
浏览器前缀、keyFrames、Animation调用、播放次数设置、动画偶数次调用顺序、Animation的问题、无缝滚动、动画播放|暂停、rotate旋转、deg、skew斜切、scale缩放、translate位移、transform-origin、transform的执行顺序问题…
12、Bootstrap前端开发框架
Html语法规范、CSS语法规范、Less 和 Sass 中的嵌套、class 命名、选择器、Normalize.css、栅格系统、排版、代码、响应式工具…
另外关于零基础如何快速入门前端的问题，项目实战这一点很重要，一定要学以致用，我的建议是，只有在实战项目中多加练习才能真正的掌握这门技术！
转自：csdn； 作者：hugo233
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
大屏可视化界面设计可谓是当今行业、企业发展的见证，生动直观地再现了行业、企业的全貌。不仅作为展示，方便了解、监督；同时可以作为一个有效的管理平台，带来效益。大屏界面面向范围广，协同性好，易于被采用。下面几个大屏的界面设计，沉稳的背景上，加上亮色作为点缀和强调。既不失其风格，又富有灵动性。
接下来为大家分享精美的大屏 UI设计案例：
蓝蓝设计(北京兰亭妙微科技有限公司）是一家专注而深入的UI设计公司，公司对UI设计的追求一向很高，致力于为卓越的国内外企业提供卓越的手机 ui设计、软件界面设计、网站设计，用户研究、交互设计等服务。
（图片均来源于网络）
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
更多精彩文章：
大数据可视化界面设计赏析（一）
大数据可视化界面设计赏析（二）
大数据可视化界面设计赏析（五）
!DOCTYPE html
功能是：告知浏览以哪个版本来解析HTML的元素
注：必须放在第一行
DOCTYPE 文档声明定义
document 文档
type 类型
charset
utf-8
字符编码集
告诉浏览器用哪一个版本来解析文本（包括标点符号，文字）
viewport
视口（可视窗口）
title
标签页标题
HTML元素的组成部分
元素：起始标记、内容和结束标记
某些元素的起始标记内有属性
属性：属性名和属性值
例如:
<a href="/classroom/17">班级</a>
1
起始标记：
结束标记：
内容：班级
属性：href="/classroom/17"
属性名：href
属性值："/classroom/17"
空元素
类似img元素
<img src="" alt="">
1
没有元素内容和结束标记，称之为：空元素、自闭合元素
乱序铭文
功能：批量生成文本
书写格式：lorem数量（单词个数）
p标签
p标签不能包含（嵌套）p标签，也不能包含标题、div，语义化标签
解析
将我们写出的代码，转换成计算机可以看懂的语言
渲染
再将解析好的语言，通过浏览器渲染展示出来，给用户看。
HTML
是用于定义文档的结构内容（标题、图片等）
HTML英文全称：Hyper Text Markup Language
中文全称：超文本标记语言
CSS
用于定义HTML文档的样式（外观）
CSS英文全称：Cascading Style Sheets
中文全称：层叠样式表
语义化结构
header 页面的头部或者某个区域的头部，一个页面可以使用多个header元素
nav 表示导航栏
article 代表文档、页面或其他可独立部分，常用于定义一篇日志、一条新闻或用户评论。
aside 用于表示当前页面或文章相关的附属信息，可包含该页面或内容相关的引用、侧边栏、广告、导航条等
section 用于表示一个整体的一部分主题
footer 用于表示页面或者某个区域的脚注，可以包含所有放在页面底部的内容
div与语义化结构的区别
div与语义化结构标签的功能是一样的，但是使用语义化结构标签可以让页面结构更加清晰。
a标签
元素书写格式
<a href="目标">内容</a>
1
href属性
页面地址（路径）
多个页面中相互跳转
锚点
可以在同一个页面之间，相互跳转
先将要跳转的位置加上id属性
<h1 id="title2">标题二</h1>
1
将#+属性名
<a href="#title2">跳转到标题二</a>
1
功能链接
打电话
<a href="tel：12345678910">给我打电话</a>
1
发邮件
<a href="mailto：123456789@163.com">给我发邮件</a>
1
返回顶部
<a href="#">返回顶部</a>
1
a标签的打开方式
书写方式：
<a target="_blank" href="目标"></a>
1
属性 target
属性值
_blank 新页面打开
_self 当前页面打开（默认值）
link外部引用的好处
批量修改
复用
绝对路径和相对路径
绝对路径
从根目录开始写，写到要找文件的位置
当网站部署到服务器后，网站中的所有资源都可以通过一个地址（路径）访问
书写格式：协议：//域名/目录
使用场景：
访问站外资源时，只能使用绝对路径
访问站内资源时，若网站已部署到服务器，可以使用绝对路径，并可以省略协议和域名。推荐使用相对路径
相对路径
相对路径是相对于当前资源的位置，只能用于访问站内资源
相对路径的书写格式为：./路径
./ 表示当前资源所在的目录，必须作为相对路径的开始，可省略
…/ 表示返回上一级目录 （…/…/可以返回上两级目录，写几次就可以返回几次
转自：csdn 作者：小王小王 辅助在行
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝 http://www.lanlanwork.com