URL到网页过程

从输入URL到显示网页的步骤

  1. DNS 解析:将域名解析成 IP 地址
  2. TCP 连接:TCP 三次握手
  3. 发送 HTTP 请求
  4. 服务器处理请求并返回 HTTP 报文
  5. 浏览器解析渲染页面
  6. 断开连接:TCP 四次挥手

JS模块化

为什么要使用模块化?

无模块化的痛点

  • 命名冲突
  • 文件依赖(js 加载顺序)
  • 代码复用

npm常用命令

查看npm命令:

1
$ npm help

始化一个基于node的项目,会创建一个配置文件package.json(两种方式):

webpack入门

WebPack 是一个模块打包工具,你可以使用WebPack管理你的模块依赖,并编绎输出模块们所需的静态文件。它能够很好地管理、打包Web开发中所用到的HTMLJavascriptCSS以及各种静态文件(图片、字体等),让开发过程更加高效。对于不同类型的资源,webpack有对应的模块加载器。webpack模块打包器会分析模块间的依赖关系,最后 生成了优化且合并后的静态资源

跨域解决方案

跨域(非同源策略请求)

因为浏览器出于安全考虑,有同源策略。同源策略是指协议、域名、端口,三者都相同

也就是说,如果协议、域名、端口,只要有一个不同就是跨域, 请求就会失败。


清除浮动

清除浮动可以理解为清除浮动产生的影响。当元素浮动时也就是为当前元素创建了块格式化上下文(BFC),会对周围的元素或者父元素在布局上会产生一定的影响。

比如:父元素因无法自动计算高度而产生的高度塌陷;因脱离文档流而使兄弟元素错位等。

要清除浮动产生的影响,其实就是在解决这两方面的问题。方法是可以通过设置父元素高度,或利用BFC,或者使用自带属性 clear进行清除。

BFC

什么是BFC

块格式化上下文(Block Formatting Context,BFC)是Web页面的可视化CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。

你可以把它理解成一个独立的区域


Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×