freshman-letter 3

freshman letter

Hi，亲爱的兄弟 || 妹子，

一周又过去了，这一周你还过得好吗？上周我已经很快收到你的回复，非常感谢你的配合和信任。这周的邮件我主要和你分享一下前端学习的一些方法，编码的一些基本原则，以及浏览器工作原理。

一、前端学习的方法
就像我前一封邮件中谈到，作为一个IT工程师，你必须时刻保持一个进取的心，和不断持续学习。我们在学习过程中要：

1. try and test
前端学习不像在学校里学习，只是理论知识的学习，前端更重要的是动手去练习，很多东西很简单，看着很容易，但是你需要去尝试，去练习，多练习，多试验，你才能掌握。我非常讨厌一个人不看文档，不看手册，直接过来问这个怎么用，那个怎么用，自己却从来不尝试。

2. No copy 
IT工程师的工作很多时候都是相似的，你写的代码大部分都是之前写过，今天这修改个参数，那改变下逻辑，前人的工作积累了很多代码，网上也有很多开源的东西，你可以直接拿来用，但是请注意，不要直接copy，copy之前你要弄明白它的原理是什么，它的逻辑是什么，它的功能是不是就是我想要的，它是否有多余的功能，你应该选取你需要的代码，明白你copy的代码在做什么，而不是直接copy，只要能运行就可以，这样对你的提高毫无帮助。而且很多项目中难以排查的bug到最后发现根本原因大部分是直接copy代码导致的。

3. 重视理论知识的学习
虽然前端是一个实干型的工种，不是靠嘴巴吃饭的，show me the code，talk is cheap! 但是并不是说你不管三七二十一，只要能做出效果出来就可以了，你也必须重视理论知识的学习。因为前端的东西入门很容易，写出demo很简单，但是为什么这么写，换个场景这样写还能不能正常显示都是考验一个人的代码水平。从本质上讲，前端的能力进步的过程，都是对html规范，css规范，对ECMAScript规范，对http协议规范，对浏览器运行机制的逐步认识和深入的过程。你对规范越熟悉，理解的越透彻，写前端代码就像是在规范的约束下玩游戏一样，像小孩子搭积木一样。如果不重视理论规范的学习，即使你有几年的工作经验，遇到新的应用场景，你就素手无策，甚至很快被刚毕业的校招生超过。

二、coding的基本原则
1、注释
首先代码是写给人看的，是靠人维护的，你是和别人一块完成一个项目，而不是单打独斗，因此代码要有美观的格式，代码的逻辑要有条理化，不要东一个榔头，西一个棒子；代码要有合理的注释，在必要的地方一定要加注释，在有特殊的逻辑分支，特殊的处理都要进行注释，方便后人的修改和阅读。

2、逻辑分块
代码要按照业务逻辑进行合理的进行模块划分，每一个模块完成特定的功能，不能什么逻辑都放到一块，没有层次；超过2次用到的代码块都应该单独提取出来形成函数，代码中不要出现冗余；

3. 代码的命名
代码文件的命名，函数的命名，变量的命名你都应该深思熟虑，命名既要又意义，又要简短，尽量用英文单词进行命名，我看到莫名其妙的命名我都不能忍受，看到词不达意的命名我都都会晕。

4. 代码格式
你的代码要事先制定好固定的格式，如果你是继承别人的代码，你要保持原有代码的风格，而且要始终如一的贯彻这一风格。

5、先思考规划后动手写
写代码之前一定要思考和规划，按照业务逻辑进行合理的模块划分；先规划好dom结构，再写具体的样式；先思考交互的每一个细节和制定好接口，再开始书写具体的逻辑，不能直接就写代码，中间反复修改，完全是没有脑子的行为。

三、浏览器工作原理
浏览器是人们浏览网页的工具，也是把html，css,js这些文本转化成一个排版美观，图文并茂，并具有交互效果的网页的工具，因此在学习html，css,js之前，了解浏览器是如何工作，是如何完成上述转换是非常有必要的。
浏览器的工作过程分为以下十多个步骤：
1. 输入url
不管是通过地址栏输入url，还是点击一个链接，我们通过告诉浏览器请求页面或资源的url来启动浏览器的一次请求。

2. 本地缓存查找
浏览器得到浏览一个url的指令后，不是马上就去服务器请求了，浏览器是比较智能的，它首先根据URL判断本地缓存是否有该URL的缓存版本，如果存在缓存且缓存没有过期，则直接把缓存的内容交给浏览器进行内容解析。
当不存在该缓存或缓存已过期，浏览器才会启动向服务器发起请求的过程。

3. DNS查询
浏览器向服务器发起请求，本质上是向服务器发起http请求，而http请求本质上目前浏览器是通过和服务器建立tcp连接和服务器进行数据交换。而发起tcp请求，首先需要知道服务器的ip和port，所以请求的启动是从浏览器获得服务器的ip地址开始，如果浏览器存在该服务器的hostname对应的IP，则跳过这一步骤，否则，浏览器要通过dns查询获得服务器hostname对应的IP。

4. 建立tcp连接，通过三次握手来实现
5. 向服务器发起http请求
6. 请求会经过网关，各级路由器的转发，越过千山万水到达服务器。
7. 服务器上的webserver接到请求，根据配置把请求转发给改url对应的处理程序。
8. 程序根据请求的资源url和其他输入参数，读取文件，查询数据库，查询接口，把得到的数据处理，组合，拼装成一个html/css/js文本。
9. 服务器把程序处理结果的文本通过之前发起请求时建立的tcp连接，那个连接一致hold着没有释放，返回给浏览器一个http响应。
10. 浏览器得到返回的响应的文本，当得到的文本达到一定的数量就开始解析，解析的结果是一颗dom树。
11. 浏览器在解析dom树的过程中解析到css，js，图片等等资源，会同时根据这些资源的url同时发起请求。
12. 因为浏览器的单线程机制，所以浏览器在遇到js代码时，会停止解析，转而执行js的代码，之后再继续解析；
13. 在遇到js外部资源时，会启动js的下载和执行，完成之后再继续解析。
14. 当css资源下载和解析完毕，会形成cssom树。
15. 浏览器只有同时具备DOM（Document Object Mode，文档对象模型）和CSSOM（CSS Object Model，CSS对象模型）才能来构造渲染树。
16. 布局layout/reflow
17. 绘制paint
18. 显示器显示
具体的细节大家参考https://www.zybuluo.com/fengfeng/note/25838