20200216网站搭建学习小结

在网上寻找网站搭建的教学视频学习中，发现，大多视频都比较基础，如网站部署环境搭建什么的，或者是基础框架（什么laravel、Express、Django、Ruby on Rails等）、基于应用(workpress、Discuz等)的网站部署教学视频。

而我的目的：不仅仅是学习网站的搭建，更重要的是要了解到如何搭建出一个高响应、高并发、安全稳定的网站。

下面我的描述、总结一下网站部署上的问题以及了解到的答案。

首先：网站部署基础准备：

一、购买云服务器、购买域名并实名登记、再域名解析完成域名与IP的绑定关系；

二、搭建网站部署环境：⑴安装与配置Apache或Nginx；完成这一步之后就可以在指定的目录建立一个自己的html文件了！

（中间插入：我们搭建网站的目的是什么？实现信息的发布？自己写个网页游戏自娱自乐？创建一个协作的办事平台？做一个记事本记录笔记或者感悟日记？还是做一个存放自己的资料、方便自己翻阅的平台？考虑到自己平时的兴趣活动基本就是听听歌，所以播放器是要做一个；然后自己偶尔也会写一些人生或生活感悟或经验小结之类的YY文；所以来一个写并能管理日记的小功能吧；最后再考虑到自己的工作是编程开发，所以最好能来个在线编程并能保存测试自己程序的功能！）

然后：开始写网页。使用到语言为HTML/CSS+JS。

在《高效前端——web高效编程与优化实践》一书中说到几点高效方法：

一、能用HTML/CSS解决的问题就不要用JS；[给出的解释是：因为HTML/CSS实现起来简单！这意味着更快的开发速度和更小的维护成本。所以这就要求我们掌握常用的网页模块怎么用HTML/CSS去实现它们！后续其他地方补充！]

二、减少JS代码的耦合；关于这点我总结了一下书中的意思是：减低代码的维护成本（包括开发过程中的维护）,提供代码可读性。

三、通过对整体优化提升页面打开速度！这部分作用通过三个小点去优化：

1、避免页面卡顿；（如果页面看起来不连贯，这里作者特别说，可能是因为渲染某些帧所花的实践比较长，导致停留在这些帧的时间比较长，设备原本可以1秒显示60帧的画面没缺能显示完，所以给人感觉卡顿了。）这里给出的解决方案是：

"60fps就要求1帧的时间为1s/60=16.67ms。浏览器显示页面的时候，要处理JS逻辑，还要做渲染，这个执行片段不能超过16.67ms。而实际上，浏览器内核自身支撑体系运行也需要消耗一些时间，所以留给我们的差不多只有10ms。在这10ms中需要做一些什么事情呢？在Chrome的开发者文档《Rendering Performance》里面提到这个流程——JavaScript→Style→Layout→Paint→Composite。"

"这其中任何一项如果执行时间太长，就会导致渲染这一帧的时间过长，平均帧率就会下降。假设这一帧花费了50ms，那么此时的帧率就为1s/50ms=20fps。"

“当然上面的过程中并不一定每一步都会执行，例如：①JS中只做了一些运算，没有增删DOM或改变CSS，那么后续几步就不会执行；②style只改了color/background-color等不需要重新layout的属性，则不用执行layout这一步；”等

“掉帧分析”每个浏览器可能都有不同的操作方法来显示吧，书本中讲的是Chrome,这一部分，书中讲得比较细，甚至还能查看每个函数的时间开销情况，帮助开发者去找到正确的优化位置。然后最后还简单的说了一些其他的优化方法“①减少layout，能用transform就不要使用position/width/height做动画，另外要减少layout的影响范围。②简化DOM结构。”

2、加快页面打开速度；①避免渲染堵塞；②优化图片‘；③压缩和缓存等

3、增强用户体验；①加Loading效果；②加过渡动画效果；③单击和输入效果；④记住用户使用习惯；⑤避免页面闪动等

（中间插入：刚才我说我的目的是建立一个高响应，高并发、安全与稳定的网站，写到这，突然意识到，这和web前端开发其实关系并不是太多，主要还是在服务器后台处理用户请求部分。所以前端开发和我的最初的目的还是有点偏差！也就是说，我可能找错地方了。）

所以下篇开始，我应该重点讲网站搭建之服务器部分的内容！