Jack's Tech Blog

Tech Blog


  • Home

  • Archives

  • Tags

  • Search

CSS 的 BFC 原理

Posted on 2017-03-23 | In 前端
1.常见定位方案有三种: 普通流 (normal flow): 元素按HTML文档中的位置自上而下布局。 浮动 (float):先按照普通流,然后根据浮动方向偏移脱离普通流。 绝对定位 (absolute positioning):整体脱离普通流,不影响兄弟元素,位置由坐标绝地。 2.BFC 概念Block Formatting context(块级格式上下文) 是 W3C 规范中的一个概念。 ...
Read more »

Flexbox 布局

Posted on 2017-03-22 | In 前端
1.简介传统盒子模型布局依赖 display、position、float,对特殊布局非常不方便,如(垂直居中,等量宽高,多列同高)。Flex(Flexible Box)弹性布局,可以灵活、响应式地布局各种页面,将成为未来布局的首选方案。(浏览器兼容问题ie11以上) demo: http://static.vgee.cn/static/index.html 设置Flex布局:display: f ...
Read more »

JavaScript 运行机制

Posted on 2017-02-22 | In 前端
1.单线程避免多线程同时操作DOM,带来复杂的同步问题,同一个时间只能做一件事,提高效率。(Web Worker允许创建多个子线程但不得操作DOM,还是单线程) 2.任务队列任务排队等待一个一个执行。如果遇到很慢的,如网络读取数据,挂起处于等待中的任务,先运行排在后面的任务。挂起的任务出了结果,再回头继续执行。 同步任务(synchronous):主线程上排队执行的任务。 异步任务(asynch ...
Read more »

Web 前端性能优化

Posted on 2017-01-04 | In 前端
传说中的雅虎军规前端优化35条。 1.内容优化1.尽量减少 HTTP 请求 合并文件图片,脚本文件,样式表,(CSS Sprites(背景图绝对定位)、行内图片(Base64编码))。 2.减少 DNS 查找在DNS查找完成之前,浏览器无法从主机名下载任何东西。减少不同的主机名就可以减少DNS查找。DNS查找被缓存起来(网络服务提供商,本地网络服务器,操作系统,浏览器)逐级查找。使用预加载提速:C ...
Read more »

浏览器工作流程

Posted on 2016-12-11 | In 前端
1.构建对象模型浏览器渲染页面前需要先构建对象模型,根据HTML和CSS输入构建了DOM树和CSSOM树,两树合并成渲染树,然后用于计算每个可见元素的布局,并输出给绘制流程,将像素渲染到屏幕上。 字节 → 字符 → 令牌 → 节点 → 对象模型。(令牌:字符转W3C标准的标签) HTML 标记转换成文档对象模型 (DOM)。 CSS 标记转换成 CSS 对象模型 (CSSOM)。 DOM 和 C ...
Read more »

浏览器缓存机制

Posted on 2016-11-26 | In 前端
1.缓存的工作原理所有缓存都是由一套规则决定什么时候使用缓存中的副本,这些规则定义在协议中(http1.0/1.1)或由缓存管理员设置(如DBA、浏览器的用户、代理服务器管理员或者应用开发者)。 2.浏览器缓存规则规则定义在HTTP协议头和HTML页面的Meta标签中。用新鲜度和校验值来规定浏览器是否可以直接使用缓存,还是需要去源服务器获取更新的版本。 新鲜度(过期机制):1.在有效期内的,含有完 ...
Read more »

Markdown 基本用法

Posted on 2016-10-26
Markdown优点Markdown是一种轻量级标记语言,它以纯文本形式(易读、易写、易更改)编写文档,并最终以HTML格式发布。 纯文本,兼容性极强,所有文本编辑器都可打开。 标记语法可读性强。 让你专注于文字而不是排版。 格式转换方便,轻松转换为 html、电子书等。 摆脱Word。 跨平台使用。 越来越多的网站支持Markdown。 Markdown语法代码与语法高亮代码区块的建立是在每 ...
Read more »

Hello World

Posted on 2016-10-24 | In 管理
^_^
Read more »
123
Jack Du

Jack Du

Stay hungry, Stay foolish

28 posts
5 categories
16 tags
© 2019 Jack Du
Powered by Hexo
|
Theme — NexT.Mist v5.1.4