HTML5技术

一位女程序猿前端学习7天之“旅”的故事 - 向婷风(2)

字号+ 作者:H5之家 来源:博客园 2016-05-02 14:00 我要评论( )

从22号-27号便是在360大厦总部度过的,首先介绍一下北京吧,从网申-笔试-参加360前端星云计划-北京培训,一路路刷人,自己也算幸运的,能过来上课。虽然一路上奔波劳累,但也算值了。这么多从全国各个选拔过来的小

  从22号-27号便是在360大厦总部度过的,首先介绍一下北京吧,从网申-笔试-参加360前端星云计划-北京培训,一路路刷人,自己也算幸运的,能过来上课。虽然一路上奔波劳累,但也算值了。这么多从全国各个选拔过来的小伙伴,以及一群优秀的老师(都是360技术高管)给我们上课,收获很大很大啊!

  每个老师都给我们讲解了涉及前端的各个不同领域的东西。主要包括:http、TCP服务器端原理,JavaScript的开发规范,移动端的介绍,thinkjs(创始人李云银老师亲自授课)和nodejs,前端架构流,cdn托管,以及如何读懂技术文档(编写javascript高级程序设计的译者李松峰老师讲解),每一个前沿技术,对自己都是一个冲击,收获真不是一般的大啊!真的要非常感谢这些老师,IT界的技术大牛,程序员的境界原来这么美!

  每一个领域,老师们又引申出了很多前沿的学习工具和新技术,总之,收获很多啊!列举一下这些天涉及到的知识点,供学习前端的孩纸参考。按照时间的先后

【22.上】 1.语义化的理解 2.font awesome 3.深刻理解问题的原理,修炼代码的细节 4.与用户打交道,交互变简单,跟人打交道,复杂东西简单化公司日报 5.javascript-的语言重要性脚本,服务器,客户端,硬件方面 算法,可视化,数据交互,与后端的链接,新的技术,行业的标准w3c标准 chrome下开发,断点调试工具。研究代码,而不是复制代码 关注新技术,写技术,业务分隔,200人做前端 5.代码规范,pc jquery mobile MVC think.js ios 安卓app 编译部署的技术 学习 积累沉淀 分享 程序 模型与思考 掌握自己的方法论,形成体系的东西,js的安全问题 6.中间人攻击-- 客户端 ----->服务器端 加私钥的问题A->B->C 同时给AC加私钥 【22.下】 1.HTTP与性能优从输入url到页面加载完的过程中都发生了什么事情? 2.UDP和TCP 3.三次握手,四次挥手 4.请求响应报文格式 TCP Clint/think.js 5.TCP Server升级为HTTP server 6.乱码问题 7.什么是http状态 8:header的分类 content-length来表示其长度 9:压缩content-Encoding:gzip 10:get和post的区别? 11:cookie的理解? 12:Accept-Encoding/Content-Encoding 13:抓包工具 wireshark|fiddle|firebug|IE8+自带工具 14:发包工具 telnet/curl | fiddle 15:http的历史 16:http性能优化问题? 17:keep-alive减少后续的握手时间 18:同域并发控制? 19:模块拆分导致更多的请求||合并请求 20:压缩 21:缓存的问题 Etag||expires|cache-control| 22:浏览器请求的三种方式?F5|cmd+r|忽略Expires和cache-control,发起协商请求 23:样式内联| 24:用户心理? BigPipe|异步加载|按需加载|加载提示|进度条|预判行为| 25:http性能指标 Yslow 26:http瀑布图 27:《图解http 上野宣》《http权威指南》《web性能权威指南》 【23.上】 1.HTML的关键点(doctype与渲染模式|语义化) 2.doctype的作用?文档声明| 3.渲染模式 ?w3c标准模式|准标准模式 4.xhtml class必须小写|属性为单引号|含有结束标签 5.html设计思想?兼容已有内容|避免不必要的麻烦|解决现实问题(localstorage/geoloaction)|优雅降级|尊重事实标准|用户》开发者》浏览器厂商》标准制定者》 6.html5标签(nav|embedded) 7.语义化(元素,属性及属性值都拥有语义含义) 8.语义化的好处?可访问性|便于seo|易读|易维护 9.base:指定基准url及链接打开方式(traget为空白)|meta:页面元数据 10:使用meta扩展html?--一段文字的引用|ol有序|ul无序 11: alt:当图片不被识别时,或者在客户端时,阻止图片加载,则此时可用alt来表示说明 12;lang属性--规定元素内容的语言 13:如何做到语义化?了解标签的语义|手写html,避免生成工具|遵守行业通用标准|行为样式结构分开 14:微格式|schema.org|ARIA 15:webplatform.org--学习网站 16:代码风格?rel:指定外部引入的资源与当前页面的关系 17:简单选择器的选择组合 18:继承-重叠样式,某些属性会自动继承其父元素的值,除非显示指定的一个值19:字体系列|‘font-size|px em(一般是相对于font-size的计算值) 百分比 20:颜色的关键字rgba-解决使用opacity时,遮罩层和文字所有的东西都变为了半透明的情况。 21:HSL:颜色值,饱和度,亮度 22:对齐方式?justify:分散对齐,适用于多行才会起作用, 【23.下】 1.盒模型和视觉可视化模型 2.viewport可视区域 视口 3.块级元素,inline-block元素本身是行级, 4.排版流(文档流) 在排版流中块级元素独占一行,块级元素会受到浮动元素的影响 5.float浮动 6.如何清除浮动?clear|BFC 浮动元素会对后续的行级元素产生影响 :before|:after|伪元素,伪类 7.BFC:块级格式化上下文,把自己里面的东西框起来,包括浮动,使其不影响外面的元素 BFC的创建:overflow:hidden|overflow:auto|BFC不会和块级元素重叠 BFC作用:双栏布局|清除浮动|防止margin重叠 8:position:fixed相对于viewport进行固定的 9:堆叠层次 z-index 10:兄弟选择器 h2~p--跟h2并列的共样式 input:checked~nav{}---当选择框被选择后,对nav进行一系列的操作 11:background size背景图片的大小 12.transition :all 2s--所有的都一起发生变化 13:代码风格 14:代码规范:BEM|smacss 15:css预处理器:less|sass|postcss 16:mobile和pc端 17:viewport 18:Media Query-媒体查询 19:flebox属性 【24.上】 1.变量的赋值?动态绑定|动态类型 2.JQuery 3.zepto下data方法只能处理字符串 【25.上】 1.前端工作流问题 2.合并图片的好处?减少内存开销|减少请求的次数 3.grunt-编译管理工具 grunt-cli(可解决版本问题,针对不同的版本进行兼并)| 4.js的注意点?代码审查->编译-> 合并->压缩 5.针对css?预编译(sass|less|stylus)->后处理(autoprefixer|Mixin)->合并->压缩 6.图片处理?压缩->合并(css spirte) 7.完整处理?处理js->处理css->处理图片->自动化测试->处理版本(cdn处理)->发布上线 8.开发版本?提供静态服务器|只做基础编译|实时编译| 9.GULP与Grunt的区别? 10.GULPfile.js配置|执行? 11.webpack配置|和webpack执行 12.FIS配置工具 【25.下】 1.读写文件 2.创建http服务 3.c10k问题 4.Nginx-异步非阻塞的问题--即高性能的HTTP和反向代理服务器 5.io.js 6.node.js的模块--基于CommonJS 一个单独的文件就是一个模块| var circle=require('.\circel.js')-相对路径的方式 绝对路径 7.模块加载的策略 8.删除模块缓存 9.原生模块 http|url... 10.npm--把所有的模块进行统一管理,直接将npm打包到node里面 11.node.js框架--express|koa|sails.js|think.JS 12.ES6/7特性如下:语法改进|开发方便| 13.arrows 省略function关键字和return| 14.classes/extends继承类/super调用方法 15.template strings 16.destructuring 17.default+rest+spread 18.modules 19.node.js最大的问题?异步的问题 20.callback hell 嵌套严重|不能统一处理错误|try/catch不能捕获错误 21.promise--pedding(可转换为另外的两种状态)|resolved(成功)|rejected(失败) 22.callback包装为promise 23.promise的问题?this指向问题|局部变量需要借助外部变量才能进行 24.generators function *gen(){} 25.generators问题?语义不易理解|需要借助执行器|无法与arrows一起使用|比如yield *yield 26.AsYnc functions--基于promise|返回promise|使用async/wait更加语义化|错误捕获|并行处理|问题? 1.stage-3 2.没有Runtime支持 27.Babel 基于v8 Babel is a javascript compiler 28.ES6/7+Babel 29.demo npm install -g npm@3 - demo npm thinkjs module admin admin->controller->user.js-> view->admin-> 【26.上】 1.组织与结构 LC 2.岗位分工以及分工合作流程 技术发展路线图 前端后端架构模式 3.web平台部--9个部门 4.网站架构 5.网站架构模式 MVC分层|分割|分布式|集群|缓存|异步|冗余|自动化|安全 6.高性能?前端性能优化|服务器性能优化|存储性能优化 7.前端性能优化? 减少HTTP请求|使用浏览器缓存|启用压缩|css放在页面最上面,js放在下面|减少cookie传输|cdn加速| 延迟一切能延迟的:bigRender,switchable|就近原则 8.分布式缓存:缓存热点数据、hash算法取模,memcache, 9.高可用?getlab/git 10.代码协作管理 11.导航业务分析 12.技术一览?导航特征页面简单|数据静态化|使用NGINX,异步,抓取文件到本地文件 13.前端架构|浏览器优化技术|cdn|动静分离,静态资源独立部署|DNS|应用开发架构|开发框架 动态页面静态化|业务拆分|虚拟化服务器|分布式消息|分布式缓存|数据采集与监控|浏览器数据采集|服务器性能数据采集|系统监控报警|架构误区 【26.下】 1.原型:prototype是js构造器的一个特殊的属性,它上面的所有的属性和方法被它的所有实例所共享。 2.asynchronous 异步:是单线程的javascript处理触发任务。 3.document ready 4.捕获阶段在最外层,先于内层 如果中间存在阻止冒泡的话,会将后面的事件推到最前面进行,即捕获阶段。 5.transform-origin:0 45px Math.cos(Math.PI*2*p)*145+'px' sin 6.兼容性?框架底层封装和polyfill(实现标准库) 7.return [].slice.call(arguments).reduce(function(a,b){return a+b;})--支持多个传参 【27.上】 1.使用cdn以及开发工具 2.影响网络传输速度的因素 3.cdn是什么?接管dns|用户访问cdn节点|cdn节点内容来自源站 4.dig|nslookup--可看到dns解析 5.cdn的优势?以前端角度看cdn 6.用于cdn加速的内容有哪些? 7.静态资源?依据url定位资源|内容允许被cdn节点缓存 8.cookie.frame.domain 9.动态资源是什么?可以被cdn加速吗? 10.jsonp方式的调用?通过动态添加的方式。改变script中的src 11.合理回源 12.静态页面资源 13.前端公共库 14.ISP--运营商 15.流媒体加速 16.chrome|IE 17.高级js程序设计--李松峰老师 18.如何阅读和翻译? 19.如何把翻译一本书? 20.注意积累

总结

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 关于人工智能写程序 - draculav

    关于人工智能写程序 - draculav

    2017-05-02 09:00

  • 前端工具的安装 - 韩子卢

    前端工具的安装 - 韩子卢

    2017-05-02 08:00

  • 移动前端常用meta标签 - 0jiji0

    移动前端常用meta标签 - 0jiji0

    2017-04-21 12:00

  • 又是新动作!微信小程序专属二维码出炉 - 腾讯攻城师lee

    又是新动作!微信小程序专属二维码出炉 - 腾讯攻城师lee

    2017-04-20 15:00

网友点评
w