web前端初探
谭雪微
什么是前端
从本质上讲，所有Web应用都是一种运行在网页浏览器中的软件，这些软件的图形用户界面（Graphical User Interface，简称GUI）即为前端。
你看到的都是前端做的，你看不到的都是后台做的
前端三宝
- HTML(5)
- CSS(3)
- JAVASCRIPT(ES6)
结构
表现
行为
浏览器是如何渲染的？
Devtool Timeline
在地址栏中输入一个URL
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<meta charset="utf-8"/>
</head>
<body>
<h1 style="display:none">Article</h1>
<p class="tlt">Hi, 今天的中午饭很好吃</p>
<div class="img">
<img src="photo.png" alt="我的照片" width="320" height="240"/>
</div>
</body>
</html>HTML
网页的信息
网页的具体内容
DOM And request css/image/js
DOM：Document Object Model，浏览器将HTML解析成树形的数据结构
Render CSSOM
CSS文件下载完成，开始构建CSSOM
DOM + CSSOM = Render Tree
Layout
Paint
传输到GPU，渲染到屏幕
(GPU:图形处理器)
HTML
- 了解每个标签的含义
- 块级元素（div）、行内元素(a)
- 不要滥用标签
如：行内元素里不要包含块级元素
<a><li></li></a>
CSS盒模型
CSS
- float、position、flex
- overflow
- background、color
- animation,transform
- box-sizing
- ......
JavaScript
- 给html网页增加动态、交互功能
- 弱类型语言、脚本语言
- 组成部分
ECMAScript：描述了该语言的语法和基本对象
文档对象模型（DOM）：描述处理网页内容的方法和接口
浏览器对象模型（BOM）：描述与浏览器进行交互的接口和方法
JavaScript
- 数据类型
- 变量
- 表达式与运算符
- 控制语句
- 函数
- 异常
- OO
- 事件
- BOM
- 闭包
前端具体要做什么
因图片无法添加，请点击 原图地址
前端体系
页面制作
性能优化
编程语言/框架/库/组件
开发技巧与调试
构建工程
前端技术网站
页面制作
-
ps切图，生成雪碧图
-
HTML+CSS编写页面
-
响应式布局（layout/html/css等）
-
浏览器兼容性与seo
-
CSS3的新属性(animation,Flexbox等)
-
UI框架
-
预处理器:less、sass、postcss等
语言/框架/库
- javascript
- nodejs
- jquery、angularjs、backbone、extjs（网易nej/regularjs）
- 模块化：commonJS/AMD/CMD
构建工程
- grunt/gulp开发环境任务编写
- npm、jspm、bower包管理工具
-
browserify、webpack、webpack 2、Rollup打包工具使用
性能优化
- html/css/js优化
- 图片优化
- 代码打包压缩
- 减少http请求
- js载入优化等
书籍
前端的路很漫长，欢迎大家一起学习
Thank you!
web前端
By tanxuewei
