JS 对象浅拷贝与深拷贝方法

JS 对象浅拷贝是将对象的属性和值复制出来给另一个对象,可能没有将对象的所有层级的属性复制,新对象的属性的引用地址可能与原对象相同。而深拷贝就是将对象完全复制一份,复制出来的对象与原对象具有相同层级的属性和值,并且新对象的属性拥有独立的引用地址。 继续阅读

发表在 JavaScript | 标签为 , , , | JS 对象浅拷贝与深拷贝方法已关闭评论

CSS常见的自适应布局

自适应布局是在网页开发中很常见的一种布局方式,就是为了适配不同屏幕尺寸的设备,页面元素中内容主体的宽度或高度会根据浏览器窗口的大小自动调整。以下是几种自适应布局的实现:

自适应布局一:左侧宽度固定,右侧宽度自适应

HTML:

<div class="box">
  <div class="left"></div>
  <div class="right"></div>
</div>

继续阅读

发表在 CSS | 标签为 , , | CSS常见的自适应布局已关闭评论

JS获取DOM元素CSS样式的方法

CSS 样式有两种类型:
1.行内样式,即通过元素的 style 属性定义的样式。
2.非行内样式,即通过 <style> 标签或引入外部 CSS 文件定义的样式。
针对 DOM 元素的行内样式,可以从 DOM.style 样式集合中读取对应行内样式属性,如:DOM.style.width、DOM.style.height 等。而要获取非行内样式,则需要通过 window.getComputedStyle()(W3C)方法或 DOM.currentStyle(IE)当前样式集合属性去获取。 继续阅读

发表在 JavaScript | 标签为 , , , , | JS获取DOM元素CSS样式的方法已关闭评论

JS var、let、const 关键字的区别一览

var 关键字:ES5 标准,用 var 关键字声明的变量存在声明提升,即会将变量提前到当前作用域顶部进行声明,不存在块级作用域,允许重复声明同名变量,变量声明后可被修改。
let 关键字:ES6 标准,声明的变量不存在声明提升,变量在当前块作用域及子作用域内才可访问,不允许重复声明同名变量,变量声明后可被修改。 继续阅读

发表在 JavaScript | 标签为 , , , , | JS var、let、const 关键字的区别一览已关闭评论

回流/重排(reflow)与重绘(repaint)

回流/重排(reflow): 渲染树(Render Tree)中一些节点的尺寸、位置、可见性等属性发生改变时需要重新计算几何信息,浏览器重新渲染页面,导致页面布局变化的过程。
重绘(repaint): 当页面元素的样式改变不影响其在文档流中的尺寸、位置、可见性,如改变元素的字体颜色、背景颜色等,就是重绘,这个过程不会导致页面的布局变化。 继续阅读

发表在 前端 | 标签为 , , | 回流/重排(reflow)与重绘(repaint)已关闭评论

浏览器渲染页面过程

浏览器从服务器获取到 HTML 文档后,HTML 解释器开始对 HTML 自上而下解析,构建 DOM Tree(DOM 树)。CSS 解释器解析 CSS,构建 CSS Rule Tree(CSS 规则树)。文档解析完成后,将 CSS Rule Tree 附加到 DOM Tree 生成 Render Tree(渲染树)。而后,Layout(布局)会从渲染树的根节点开始遍历,输出渲染树上每个节点在页面上的具体大小和位置。 继续阅读

发表在 前端 | 标签为 , | 浏览器渲染页面过程已关闭评论

JS获取页面滚动条位置的方法(含浏览器测试)

在 Javascript 中,获取页面滚动条位置的 DOM 属性有:document.body.scrollTop / document.body.scrollLeft、document.documentElement.scrollTop / document.documentElement.scrollLeft,但存在浏览器兼容性问题,以下是测试结果:
1、document.body.scrollTop / document.body.scrollLeft
① 存在文档声明(<!DOCTYPE html>)
谷歌浏览器:正常
360浏览器:正常
火狐浏览器:0
IE浏览器:0 继续阅读

发表在 JavaScript | 标签为 , , | JS获取页面滚动条位置的方法(含浏览器测试)已关闭评论

什么是BFC(块格式上下文)?

BFC,英文全称:Block Formatting Context,即“块格式化上下文”,是 CSS2.1 规范中的一个概念,定义了浏览器对于 Web 页面中的独立的渲染区域的布局规则。
规范原文是这样描述的,“A block formatting context contains everything inside of the element creating it that is not also inside a descendant element that creates a new block formatting context”,翻译成中文就是“一个块格式上下文包含创建该上下文的元素的所有子元素,但是不包括创建了新的块级格式上下文的子元素的内部元素”。 继续阅读

发表在 CSS | 标签为 , | 什么是BFC(块格式上下文)?已关闭评论

JS AJAX函数封装

AJAX,英文全称:Asynchronous JavaScript and XML,即异步的 JavaScript 和 XML,主要用于在与服务器交换数据时无需重新加载页面。AJAX 的实现是通过创建 XMLHttpRequest 对象,向服务器发送请求,再根据服务器返回的响应决定客户端接下来的动作。 继续阅读

发表在 JavaScript | 标签为 , , | JS AJAX函数封装已关闭评论

webpack性能优化建议

webpack是一个非常出色的、流行的前端模块打包工具,但由于webpack底层的文件模块依赖分析机制,当用于开发大项目时,打包速度会不是很理想,这时候就需要进行优化。
可以通过下面的这些方法来优化webpack。 继续阅读

发表在 JavaScript, Node.js | 标签为 , | webpack性能优化建议已关闭评论