[360前端星计划]总部学习笔记(6/6)

阅读: 评论:0

[360前端星计划]总部学习笔记(6/6)

[360前端星计划]总部学习笔记(6/6)

[360前端星计划]BlackJack(21点)(原生JS)

[360前端星计划]详情跳转

Day01.对前端的认知+HTTP性能
时间内容讲师
10:00开场白裕波大大
10:1510个问题月影大大
14:00http协议基础屈屈老师
16:00http性能优化屈屈老师
17:00推荐阅读书目屈屈老师


我是前端工程师!(10个问题)(月影)


预热


  • 你们平时怎么学习前端?
    • 本次学习仅仅是引导性交流学习

  • 你们都有github吗?了解到什么情况?
    • 最终的项目代码提交到github中
    • 关于项目的要求:
      • 只要和前端有关。
      • 有创意,新颖。
      • 课程比较满,设计产品:简约美,小而精。

  • 善于思考
    • html语义化:便于维护(给人阅读),便于搜索seo(给机器阅读)
      • 知乎:如何理解 Web 语义化?
      • 染料典故(think):打破束缚



  1. 前端工程师是怎样的人?
    • 页面实现
    • 用户交互
    • 网络安全
    • 页面性能

  2. 前端工程师有怎样的特质?

  3. 优秀的前端工程师最重要的是什么?
    • 如何成为最优秀的前端工程师
    • 注重基础的数学算法

  4. 平时工作中前端攻城狮主要做哪些事情?
    • 他/她们是如何工作的

  5. 前端工程师一般涌什么开发工具和调试工具?
    • 他/她们是如何更好地工作的?
      • Sublime Text 3
      • Atom !!!
      • WebStorm

  6. 前端工程师在工作中会遇到哪些挑战?
    • 遇到技术难题,他/她们是如何解决的?

  7. 成为前端工程师有哪些乐趣?
    • 前端工程师好玩在哪里?

  8. 前端对公司来说重要吗?
    • 一个公司到底需要不需要前端工程师?

  9. 前端工程师如何成长?
    • 一个前端工程师如何变得更牛?

  10. 你们有什么问题
    • 中间人劫持及解决

HTTP与性能(屈屈)
下午:1.http协议基础2.WTO(web性能优化)3.推荐书目
  • http协议基础

    • node.js基础教程

      var http = require('http');ateServer(function (request, response) {// 发送 HTTP 头部 // HTTP 状态值: 200 : OK// 内容类型: text/plainresponse.writeHead(200, {'Content-Type': 'text/plain'});// 发送响应数据 "Hello World&#d('Hello Worldn');
      }).listen(8888);// 终端打印如下信息
      console.log('Server running at 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 声明指定当前文 档的版本和风格。如果在网页中提供了版本信息,则可以有利于验证页面中的代码是否符合 当前的版本和风格。<!DOCTYPE> 声明位于文档中的最前面,处于 <html> 标签之前,告知浏览器的解 析器,用什么文档类型规范来解析这个文档。在严格模式(标准模式)中,浏览器根据规范呈现页面;在混杂模式中,页面以向后兼 容的方式显示,以防止老站点无法工作。如果 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
    • schema

  • ARIA:Accessible Rich Internet Applications

  • HTML如何学习
    • 教程
      • webplatform
      • 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.防御性编程
      • 预防代码运行时因为自己考虑不周全出现问题
      <!DOCTYPE html>
      <html>
      <head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>防御性编程</title>
      </head>
      <body><script type="text/javascript">function a() {return 11;}console.log(a());       //10function a() {return 10;}console.log(a());       //10//匿名函数方式防止被破坏(function() {function a() {return 11;}console.log(a());   //11})();function a() {return 10;  }console.log(a());       //10</script>
      </body>
      </html>
    • 预防代码运行时因为自己考虑不周全出现问题

  • 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');ateServer(function (request, response) {// 发送 HTTP 头部 // HTTP 状态值: 200 : OK// 内容类型: text/plainresponse.writeHead(200, {'Content-Type': 'text/plain'});// 发送响应数据 "Hello World&#d('Hello Worldn');
    }).listen(8888);// 终端打印如下信息
    console.log('Server running at 127.0.0.1:8888/');


    开启 ThinkJS 之旅(考核)
    • 访问 thinkjs 学习官方文档


    总结:



    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高级程序设计》译者李松峰老师讲技术翻译
    • 中午面试
    • 下午总结大会


    总结:





    [360前端星计划]BlackJack(21点)(原生JS)

    360前端星计划详情跳转

    转载于:.html

    本文发布于:2024-01-29 16:32:07,感谢您对本站的认可!

    本文链接:https://www.4u4v.net/it/170651713116607.html

    版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

    标签:学习笔记   总部   计划
    留言与评论(共有 0 条评论)
       
    验证码:

    Copyright ©2019-2022 Comsenz Inc.Powered by ©

    网站地图1 网站地图2 网站地图3 网站地图4 网站地图5 网站地图6 网站地图7 网站地图8 网站地图9 网站地图10 网站地图11 网站地图12 网站地图13 网站地图14 网站地图15 网站地图16 网站地图17 网站地图18 网站地图19 网站地图20 网站地图21 网站地图22/a> 网站地图23