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

2024-01-11 11:33:10

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

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

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

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

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

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


####预热
* 你们平时怎么学习前端？ * 本次学习仅仅是引导性交流学习

  • 你们都有github吗？了解到什么情况？

    • 只要和前端有关。
    • 有创意，新颖。
    • 课程比较满，设计产品：简约美，小而精。

    • 最终的项目代码提交到github中
    • 关于项目的要求：

  • 善于思考



  1. 前端工程师是怎样的人？

  • 页面实现
  • 用户交互
  • 网络安全
  • 页面性能

前端工程师有怎样的特质？

优秀的前端工程师最重要的是什么？

  • 如何成为最优秀的前端工程师
  • 注重基础的数学算法

平时工作中前端攻城狮主要做哪些事情？

  • 他／她们是如何工作的

前端工程师一般涌什么开发工具和调试工具？

  • 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》
    • 《http权威指南》
    • 《web性能权威指南》

    • 样式内连
    • 页面加载时间点
    • 在地址栏回车、点击链接；使用全部缓存。
    • f5/cmd＋r；忽略 Expires、cache-control
    • keep－alive
    • 同域并发限制
    • 域名散列
    • 协议开销，websocket（无请求头） 适合用来做小而多的包
    • 合并请求
    • 压缩
    • cache

    • ETag

        ETag或实体标签（entity tag）是万维网协议HTTP的一部分。ETag是HTTP协议提供的若干机制中的一种Web缓存验证机制，并且允许客户端进行缓存协商。这就使得缓存变得更加高效，而且节省带宽。如果资源的内容没有发生改变，Web服务器就不需要发送一个完整的响应。ETag也可用于乐观并发控制[1]，作为一种防止资源同步更新而相互覆盖的方法。

    • Expires

        ...

    • cache-control

        ...

    • http请求与相应

    • 浏览器请求的三种方式

    • 阻塞渲染

    • http性能指标

    • http性能测量工具

    • http瀑布图

    • 推荐书目：

总结：

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



Day02.HTML与CSS精髓


时间  | 内容  | 讲师 -----|------|---- 上午（一）  | html基础| 文博大大 上午（二） |css基础 | 文博大大   |  | 下午（一）  | css进阶 | 文博大大 下午（二）   | Web移动开发 | 瓜瓜
桌面名牌的制作与其必要性

HTML与CSS（文博）


### HTML基础：

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

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

  • html5设计思想

    • 兼容已经内容
    • 避免不必要的复杂性
    • 解决现实的问题
    • 优雅降级
    • 尊重事实标准
    • 用户 开发者 浏览器厂商 标准执行者 理论完美

  • 语义化的好处

    • 可访问性
    • 搜索引擎优化
    • 易读
    • 易维护

  • 元数据元素

    • meta的作用
    • meta扩展HTML
    • robots
    • format－detection
    • renderer

      360首创，点赞



    • base
    • title
    • script
    • style
    • link
    • noscript
    • meta

  • 文档结构

  • 文本语义

  • a链接

    • target
    • href

  • 引用

  • 列表

    • 有序
    • 无序
    • 定义列表

  • 图片的使用

    • jpg
    • png
    • gif
    • 照片
    • 色彩较少时使用
    • 可以半透明
    • 无法半透明
    • 可以多帧做动画

    • 图片的高宽指定
    • 常用图片的格式

  • HTML公共属性

    • 开发拓展能力

    • id
    • title
    • lang
    • style
    • class
    • 自定义 data-*

  • 如何做到语义化？

    • 清楚了解每一个标签和属性的语义
    • html中指描述内容和结构，样式留给css
    • 手写html，避免食用生成工具
    • 命名遵循行业通用标准

  • naming things

    • hcard/vcard
    • h-product
    • h-recipe

    • Microformats

  • Schema.org

    • schema.org

  • ARIA:Accessible Rich Internet Applications

  • HTML如何学习

    • the living standard

    • webplatform.org
    • codecademy
    • 教程
    • 手册

上午：CSS基础

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

下午：css进阶

  • 动手练习

    • 内容居中
    • 绘制三角形
    • 简易布局
    • 媒体查询布局

  • box-sizing

  • viewport

  • 块级元素／行级元素

  • 浮动

    • 伪类 after
    • clear
    • overflow

    • 文字环绕
    • 清除浮动

  • block formatting context 防止高度塌陷

  • 动画

    • animation
    • transition

  • 工程化

    • css style guide
    • 工具
    • 代码风格



移动Web开发（瓜瓜美女）


  • 开发工具

    • 安卓远程调试
    • ios远程调试

    • google chrome

  • viewport（总结）

    • 默认视口
    • 理想视口
    • 布局视口的默认大小
    • 保证pc网页正常渲染
    • 浏览器认为的理想布局视口大小
    • 理想视口

    • 设备像素／css像素
    • viewport（视口）

  • 什么是响应式设计？

    • background-size: 50% auto;
    • 新旧标准，不同浏览器不同实现，但是:
      可以通过编译使得所有浏览器都支持
    • 在各个宽度大小的设备浏览器中都可以有合理的布局
    • 媒体查询（）
    • flexbox
    • 自动缩放
    • 自适应高清屏
    • webFont
    • 响应式Javascript

  • Touch（交互）

    • 使用touch事件，完成对元素的拖放
    • 兼容鼠标事件
    • 移动设备旋转触发事件
    • touchcancel事件
    • click延迟
    • test



总结：



Day03.JavaScript语言

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



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


#### JavaScript实践（上）（月影）

第一天

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

预热

  • 为什么讲原生js？

    • jQuery会限制发展
    • js是基础

  • 课程内容

    • 语言基础 ⬇️
    • 抽象建模 ⬇️
    • 运行环境 ⬇️
    • 解决问题 ⬇️

  • 如何突破？

    • 巩固
    • 练习
    • 思考
    • 创造

  • 1.The Coding

    * 1-3.types
	* 预防代码运行时因为自己考虑不周全出现问题
    • 预防代码运行时因为自己考虑不周全出现问题
    • 程序是给人读的，只是偶尔让计算机执行一下
    • 练习
    • 注释
    • 缩进
    • 空行
    • 空格
    • 命名
    • 分号
    • 折行
    • 判断一个整数是否是整数，如果是，返回true，否则，返回false
    • 对给定的一个数组，找出其中第二大元素
    • 给定任意一个字符串，返回它的逆序字符串

    • 1-1.Coding Style

    • 1-2.防御性编程

      	
	
	防御性编程
	


* 1-4.logic
	* 分支
		* 三目表达式与if语句的选择
		* alert( 1 && 2 )or( 1 || 2 )
	* 循环
		* while,for应该优先使用for
	* 递归
		* 给定一个字符串，例如”abacd“，给定一个次序变换后的结果，例如”abcda“，找出可以完成这一变换的交换堆栈操作，用i表示push，用o表示pop上面的例子变换，结果是：［"ioioioooio"，"iiiiooooiioi"］。
  • 2.The Javascript
    • 数组的排序：实现一个方法，将数值以"3"为中心进行排序，越接近3的排在越前面。
    • 实现一个函数：传入一系列数字，求这些数字的和。
    • 实现一个方法：将函数的arguments转换为一个真正的数组对象。小技巧


    • 实现一个方法，传入一个对象，返回这个对象的拷贝
    • 谈谈 Object、Json的区别
    • 浅拷贝
    • 深拷贝
    • 2-1.Object、Json
    • 2-2.The functions

jQuery开发（岳文）

  • 了解jq
    • 1.x
    • 2.x（新特性）

    • 轻量级
    • 兼容css3
    • 跨浏览器
    • 默认标准
    • jq fundation
    • 特点
    • 版本分支
    • 测试选择器的性能

这里不得不承认的是：

此节课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 * 问题 * 1. * 2. * 3. * 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实践(二)（月影）



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


总结：



Day06.最后的午餐

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


总结：



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


[［360前端星计划］BlackJack(21点)（原生JS）](http://www.cnblogs.com/thqy39/p/5382174.html)

360前端星计划详情跳转

上一篇：字节跳动+京东+360+网易面试题整理，最强技术实现


下一篇：百度网盘打开秒传链接教程