weixin_30596165

［360前端星计划］总部学习笔记（6/6）

［360前端星计划］BlackJack(21点)（原生JS）

［360前端星计划］详情跳转

Day01.对前端的认知＋HTTP性能

时间	内容	讲师
10：00	开场白	裕波大大
10：15	10个问题	月影大大

14：00	http协议基础	屈屈老师
16：00	http性能优化	屈屈老师
17：00	推荐阅读书目	屈屈老师

我是前端工程师！（10个问题）（月影）

预热

你们平时怎么学习前端？
- 本次学习仅仅是引导性交流学习
你们都有github吗？了解到什么情况？
- 最终的项目代码提交到github中
- 关于项目的要求：
  - 只要和前端有关。
  - 有创意，新颖。
  - 课程比较满，设计产品：简约美，小而精。
善于思考
- html语义化：便于维护（给人阅读），便于搜索seo（给机器阅读）
  - 知乎：如何理解 Web 语义化？
  - 染料典故(think):打破束缚

前端工程师是怎样的人？
- 页面实现
- 用户交互
- 网络安全
- 页面性能
前端工程师有怎样的特质？
优秀的前端工程师最重要的是什么？
- 如何成为最优秀的前端工程师
- 注重基础的数学算法
平时工作中前端攻城狮主要做哪些事情？
- 他／她们是如何工作的
前端工程师一般涌什么开发工具和调试工具？
- 他／她们是如何更好地工作的？
  - Sublime Text 3
  - Atom !!!
  - WebStorm
前端工程师在工作中会遇到哪些挑战？
- 遇到技术难题，他／她们是如何解决的？
成为前端工程师有哪些乐趣？
- 前端工程师好玩在哪里？
前端对公司来说重要吗？
- 一个公司到底需要不需要前端工程师？
前端工程师如何成长？
- 一个前端工程师如何变得更牛？
你们有什么问题
- 中间人劫持及解决

HTTP与性能（屈屈）

下午：
        1.http协议基础
        2.WTO（web性能优化）
        3.推荐书目

http协议基础

node.js基础教程

var http = require('http');

http.createServer(function (request, response) {

    // 发送 HTTP 头部 
    // HTTP 状态值: 200 : OK
    // 内容类型: text/plain
    response.writeHead(200, {'Content-Type': 'text/plain'});

    // 发送响应数据 "Hello World"
    response.end('Hello World\n');
}).listen(8888);

// 终端打印如下信息
console.log('Server running at http://127.0.0.1:8888/');

http get／post
自己写个［浏览器］（读取源代码而不解释）
cookie session
http抓包、发包工具(fiddler使用与调试)
http历史

WTO（web性能优化）
- http请求与相应
  - keep－alive
  - 同域并发限制
  - 域名散列
  - 协议开销，websocket（无请求头）适合用来做小而多的包
  - 合并请求
  - 压缩
  - cache
    - ETag
```
  ETag或实体标签（entity tag）是万维网协议HTTP的一部分。ETag是HTTP协议提供的若干机制中的一种Web缓存验证机制，并且允许客户端进行缓存协商。这就使得缓存变得更加高效，而且节省带宽。如果资源的内容没有发生改变，Web服务器就不需要发送一个完整的响应。ETag也可用于乐观并发控制[1]，作为一种防止资源同步更新而相互覆盖的方法。
```
    - Expires
```
  ...
```
    - cache-control
```
  ...
```
- 浏览器请求的三种方式
  - 在地址栏回车、点击链接；使用全部缓存。
  - f5/cmd＋r；忽略 Expires、cache-control
- 阻塞渲染
  - 样式内连
  - 页面加载时间点
- http性能指标
- http性能测量工具
- http瀑布图
- 推荐书目：
  - 《图解http》
  - 《http权威指南》
  - 《web性能权威指南》

总结：

上午：月影大大提出并分享了十个问题，主要是对前端工程师的职位正确认知以及思维方式的突破还有强调基础算法思维的重要性。
下午：屈屈大大分享了http

Day02.HTML与CSS精髓

时间 | 内容 | 讲师
-----|------|----
上午（一） | html基础| 文博大大
上午（二） |css基础 | 文博大大
| |
下午（一） | css进阶 | 文博大大
下午（二） | Web移动开发 | 瓜瓜

桌面名牌的制作与其必要性

HTML与CSS（文博）

HTML基础：

DOCTYPE 声明的作用是什么? 严格模式与混杂模式如何区分?

            HTML 语言已经存在太久了,目前必然会有一些不同版本的文档存在。为了能够让浏 览器清楚你的文档的版本、类型和风格,需要在文档的起始用 DOCTYPE 声明指定当前文 档的版本和风格。如果在网页中提供了版本信息,则可以有利于验证页面中的代码是否符合 当前的版本和风格。 声明位于文档中的最前面,处于  标签之前,告知浏览器的解 析器,用什么文档类型规范来解析这个文档。在严格模式(标准模式)中,浏览器根据规范呈现页面;在混杂模式中,页面以向后兼 容的方式显示,以防止老站点无法工作。如果 HTML 文档包含形式完整的 DOCTYPE,那么它一般以标准模式呈现。对于 HTML 4.01 文档,包含严格 DTD 的 DOCTYPE 常常导致页面以标准模式呈现。DOCTYPE 不存在 或格式不正确会导致文档以混杂模式呈现。

html5设计思想
- 兼容已经内容
- 避免不必要的复杂性
- 解决现实的问题
- 优雅降级
- 尊重事实标准
- 用户开发者浏览器厂商标准执行者理论完美
语义化的好处
- 可访问性
- 搜索引擎优化
- 易读
- 易维护
元数据元素
- base
- title
- script
- style
- link
- noscript
- meta
  - meta的作用
  - meta扩展HTML
    - robots
    - format－detection
    - renderer
      360首创，点赞
文档结构
文本语义
a链接
- target
- href
引用
列表
- 有序
- 无序
- 定义列表
图片的使用
- 图片的高宽指定
- 常用图片的格式
  - jpg
    - 照片
  - png
    - 色彩较少时使用
    - 可以半透明
  - gif
    - 无法半透明
    - 可以多帧做动画
HTML公共属性
- id
- title
- lang
- style
- class
- 自定义 data-*
  - 开发拓展能力
如何做到语义化？
- 清楚了解每一个标签和属性的语义
- html中指描述内容和结构，样式留给css
- 手写html，避免食用生成工具
- 命名遵循行业通用标准
naming things
- Microformats
  - hcard/vcard
  - h-product
  - h-recipe
Schema.org
- schema.org
ARIA:Accessible Rich Internet Applications
HTML如何学习
- 教程
  - webplatform.org
  - codecademy
- 手册
  - the living standard

上午：CSS基础

css组成
css代码风格
使用css
- 选择器
- 字体
  - 衬线字体
  - 无衬线字体
  - sans-serif备用
  - font-size
    - px
    - x%
    - em
      - 一般是相对于font-size计算值的
      - 用在font-size属性上时，是相对于父元素的font-size计算值
  - line-height
    - 推荐写法：值使用纯数字，不要带单位
- 文本
  - color
    - rgb/rgba
    - HSL/HSLA
  - text-align
  - text-decoration

下午：css进阶

动手练习
- 内容居中
- 绘制三角形
- 简易布局
- 媒体查询布局
box-sizing
viewport
块级元素／行级元素
浮动
- 文字环绕
- 清除浮动
  - 伪类 after
  - clear
  - overflow
block formatting context 防止高度塌陷
动画
- animation
- transition
工程化
- 代码风格
  - css style guide
  - 工具

移动Web开发（瓜瓜美女）

开发工具
- google chrome
  - 安卓远程调试
  - ios远程调试
viewport（总结）
- 设备像素／css像素
- viewport（视口）
  - 默认视口
    - 布局视口的默认大小
    - 保证pc网页正常渲染
  - 理想视口
    - 浏览器认为的理想布局视口大小
    - 理想视口
什么是响应式设计？
- 在各个宽度大小的设备浏览器中都可以有合理的布局
- 媒体查询（）
- flexbox
  - 新旧标准，不同浏览器不同实现，但是:
    可以通过编译使得所有浏览器都支持
- 自动缩放
- 自适应高清屏
  - background-size: 50% auto;
- webFont
- 响应式Javascript
Touch（交互）
- 兼容鼠标事件
- 移动设备旋转触发事件
- touchcancel事件
- click延迟
- test
  - 使用touch事件，完成对元素的拖放

总结：

Day03.JavaScript语言

时间	内容	讲师
上午（一）	预热	月影
上午（二）	算法训练	月影

下午（一）	JavaScript实践（上）	月影
下午（二）	算法训练	月影
下午（三）	jQuery开发	岳文

JavaScript实践（上）（月影）

第一天

环境安装，工具熟悉，课程说明
熟悉热身，挑战，渐入佳境
javascript语言精髓
第二天

预热

为什么讲原生js？
- jQuery会限制发展
- js是基础
课程内容
- 语言基础 ⬇️
- 抽象建模 ⬇️
- 运行环境 ⬇️
- 解决问题 ⬇️
如何突破？
- 巩固
- 练习
- 思考
- 创造
1.The Coding
- 1-1.Coding Style
  - 程序是给人读的，只是偶尔让计算机执行一下
  - 练习
    - 判断一个整数是否是整数，如果是，返回true，否则，返回false
    - 对给定的一个数组，找出其中第二大元素
    - 给定任意一个字符串，返回它的逆序字符串
  - 注释
  - 缩进
  - 空行
  - 空格
  - 命名
  - 分号
  - 折行
- 1-2.防御性编程
  - 预防代码运行时因为自己考虑不周全出现问题
```
    
    
    防御性编程


    
```
- 1-3.types
  - 预防代码运行时因为自己考虑不周全出现问题
- 1-4.logic
  - 分支
    - 三目表达式与if语句的选择
    - alert( 1 && 2 )or( 1 || 2 )
  - 循环
    - while,for应该优先使用for
  - 递归
    - 给定一个字符串，例如”abacd“，给定一个次序变换后的结果，例如”abcda“，找出可以完成这一变换的交换堆栈操作，用i表示push，用o表示pop上面的例子变换，结果是：［"ioioioooio"，"iiiiooooiioi"］。
2.The Javascript
- 2-1.Object、Json
  - 实现一个方法，传入一个对象，返回这个对象的拷贝
    - 浅拷贝
    - 深拷贝
  - 谈谈 Object、Json的区别
- 2-2.The functions
  - 数组的排序：实现一个方法，将数值以"3"为中心进行排序，越接近3的排在越前面。
  - 实现一个函数：传入一系列数字，求这些数字的和。
  - 实现一个方法：将函数的arguments转换为一个真正的数组对象。小技巧

jQuery开发（岳文）

了解jq
- 默认标准
- jq fundation
- 特点
  - 轻量级
  - 兼容css3
  - 跨浏览器
- 版本分支
  - 1.x
  - 2.x（新特性）
- 测试选择器的性能

这里不得不承认的是：

此节课ppt完全看不清，且语速奇快，等待结束后的ppt发放。

其他框架

总结：

Day04.现代前端工作流

现代前端工作流（之杰）

Grunt、Gulp的差别
Grunt、Gulp 文件压缩

Node.js与think.js（成银）

nodejs基础

线程概念
高并发需求
高性能
非阻塞
io.js+node.js
规范于commandjs
模块特性
- 。
- 。
- 。
- 。
- 。
- 。
- 。
模块加载策略
- 使用模块名
- 若不是原声模块，自动添加js，json，mode后缀查找
模块缓存
- 设计优点：只有第一次加载时才有IO操作
- 缓存在require.cache中
- 删除模块缓存
原生模块
- http
- fs
- url
- path
- process
- query string
- ……
- 总共十几个，对于实际开发来说，远远不够
推荐阅读的模块文档
- buffer
- http
- console
- npm安装模块（27w）：
```
npm install xxx
```
node异步问题
- callback hell
  - 嵌套太严重
  - 不能统一处理错误
  - try／catch不能捕获错误
- Promise
  - pending
  - resolved
  - rejected
  - 问题
- Generators
  - 使用 * 和yield
  - 问题
    - 语义化不易理解
    - 需要借助执行器
    - 无法和和arrows混用
- async functions
  - 基于promise
  - 返回promise
  - 使用async await 更加语义化
  - 支持和arrows一起使用
  - 不用借助第三方模块
  - 错误捕获
  - 并行处理
  - 问题
    - stafe－3
    - 没有runtime支持

var http = require('http');

http.createServer(function (request, response) {

    // 发送 HTTP 头部 
    // HTTP 状态值: 200 : OK
    // 内容类型: text/plain
    response.writeHead(200, {'Content-Type': 'text/plain'});

    // 发送响应数据 "Hello World"
    response.end('Hello World\n');
}).listen(8888);

// 终端打印如下信息
console.log('Server running at http://127.0.0.1:8888/');

开启 ThinkJS 之旅（考核）

访问 thinkjs.org 学习官方文档

总结：

Day05. 架构＋JS

组织与架构（lc）

网站架构模式
- 分层
- 分割
- 分布式
- 集群
- 缓存
- 异步
- 夯余
- 自动化
- 安全

web前端性能优化
- 减少http请求
- 使用浏览器缓存
- 启用压缩
- css放在页面最上面，js放在最下面
- 减少cookie传输
- cdn加速
- 延迟一切能延迟的：bigrender，switchable等
- 就近原则

应用服务器性能优化
网站性能优化第一定律
- 优先考虑使用缓存优化性能
  1. 缓存的基本原理
  - 合理使用缓存
  - 分布式缓存
异步操作
使用集群

75team开发的东西

存储性能优化

架构误区

小结

JavaScript实践(二)（月影）

2-3 prototype
2-4 asynchronous
- requestAnimationFrame
2-5 closures
- 月影closures演示
3-4 dom实现动画
3-5 兼容性

通过课程我们学习了什么？
怎样写可维护性高的代码？
如何提高代码可重用性？
什么是闭包？
什么是过程抽象？
原型和类在代码复用过程中起到什么作用？它们各有什么利弊？
如何进行DOM操作？
如何绑定事件？为什么要用事件代理？
动画的基本原理是什么？如何实现动画
兼容性问题该如何考虑？

总结：

Day06.最后的午餐

CDN与开发者工具
《javascript高级程序设计》译者李松峰老师讲技术翻译
中午面试
下午总结大会

总结：