前端基础知识整理01

比较基础，自己要多看 😈😈😈

# HTML知识

# 语义化

HTML标签的语义化是指：通过使用包含语义的HTML标签，如h1-h6、article、session、header、footer等恰当的表示文档结构
为什么需要语义化：
- HTML语义化让页面的内容结构化，结构更清晰，便于浏览器、搜素引擎解析
- 语义化的代码，便于团队的理解和维护
- 搜素引擎的爬虫更能理解上下文和关键字的权重，有利于seo
- 便即使在没有样式css情况下也是以一种文档格式显示，并且容易阅读

# 标准模式与兼容模式

标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作

# Doctype作用

<!DOCTYPE>声明位于位于HTML文档中的第一行，处于 <html> 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现

# 行内元素与块级元素

行内元素有：a b span img input select strong（强调的语气）
块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
常见的空元素（自闭合）:<br> <hr> <img> <input> <link> <meta>

# link和@import导入样式的区别

link属于XHTML标签，除了加载CSS外，还能用于定义RSS,定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS
页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载
import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题

# 浏览器内核的理解

主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎
渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核
JS引擎：解析和执行javascript来实现网页的动态效果
最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引

# 常见的浏览器内核有哪些

Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等
Gecko内核：Firefox
Presto内核：Opera7及以上
Webkit内核：Safari,Chrome等。 Chrome的Blink（WebKit的分支）

# HTML5新特性

HTML5 主要是关于图像，位置，存储，多任务等功能的增加
- 绘画 canvas
- 用于媒介回放的 video 和 audio 元素
- 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失
- sessionStorage 的数据在浏览器关闭后自动删除
- 语意化更好的内容元素，比如 article、footer、header、nav、section
- 表单控件，calendar、date、time、email、url、search
- 新的技术webworker, websocket, Geolocation
如何区分HTML5： DOCTYPE声明\新增的结构元素\功能元素

# HTML离线存储的使用和原理

在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件
原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示
如何使用：
- 页面头部像下面一样加入一个manifest的属性；
- 在cache.manifest文件的编写离线存储的资源
- 在离线状态时，操作window.applicationCache进行需求实现

CACHE MANIFEST
    #v0.11
    CACHE:
    js/app.js
    css/style.css
    NETWORK:
    resourse/logo.png
    FALLBACK:
    / /offline.html

1
2
3
4
5
6
7
8
9

# 浏览器是怎么对HTML5的离线储存资源进行管理和加载的

在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。
离线的情况下，浏览器就直接使用离线存储的资源。

# cookies，sessionStorage 和 localStorage 的区别

cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）
cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存
存储大小：
- cookie数据大小不能超过4k
- sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大
有期时间：
- localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据
- sessionStorage 数据在当前浏览器窗口关闭后自动删除
- cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

# iframe有那些缺点

iframe会阻塞主页面的Onload事件
搜索引擎的检索程序无法解读这种页面，不利于SEO
iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载
使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以绕开以上两个问题

# label标签的作用和使用网页

label标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件

# HTML5的form如何关闭自动完成功能？

给不想要提示的 form 或某个 input 设置为 autocomplete=off。

# 网页验证码的作用

区分用户是计算机还是人的公共全自动程序，可以防止恶意破解密码、刷票、论坛灌水
有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试

# CSS知识

# display: none; 与 visibility: hidden; 的区别

联系：它们都能让元素不可见
区别：
- display:none;会让元素完全从渲染树中消失，渲染的时候不占据任何空间；visibility: hidden;不会让元素从渲染树消失，渲染师元素继续占据空间，只是内容不可见
- display: none;是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示；visibility:hidden;是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式
- 修改常规流中元素的display通常会造成文档重排。修改visibility属性只会造成本元素的重绘
- 读屏器不会读取display: none;元素内容；会读取visibility: hidden元素内容

# CSS有哪些继承属性

关于文字排版的属性如：
- font
  - word-break
  - letter-spacing
  - text-align
  - text-rendering
  - word-spacing
  - white-space
  - text-indent
  - text-transform
  - text-shadow
- line-height
- color
- visibility
- cursor
不可继承的属性：border padding margin width height

# 外边距重叠

相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，结合而成的外边距称为折叠外边距
折叠结果遵循下列计算规则：
- 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值
- 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值
- 两个外边距一正一负时，折叠结果是两者的相加的和

# 标准盒模型和怪异盒模型

盒模型：内容(content)、填充(padding)、边界(margin)、边框(border)；
怪异盒模型（IE）的content部分把 border 和 padding计算了进去

# CSS优先级

相同权重，定义最近者为准：行内样式 > 内部样式 > 外部样式
含外部载入样式时，后载入样式覆盖其前面的载入的样式和内部样式
选择器优先级: 行内样式[1000] > id[100] > class[10] > Tag[1]
在同一组属性设置中，!important 优先级最高，高于行内样式

# CSS3新增伪类

p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
p:last-of-type  选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
p:only-of-type  选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
p:only-child        选择属于其父元素的唯一子元素的每个 <p> 元素。
p:nth-child(2)  选择属于其父元素的第二个子元素的每个 <p> 元素。

:after          在元素之前添加内容,也可以用来做清除浮动。
:before         在元素之后添加内容
:enabled        
:disabled       控制表单控件的禁用状态。
:checked        单选框或复选框被选中

1
2
3
4
5
6
7
8
9
10
11

# 如何居中div

给div设置一个宽度，然后添加margin:0 auto属性

div{
    width:200px;
    margin:0 auto;
 }

1
2
3
4

浮动元素居中

//确定容器的宽高 宽500 高 300 的层
//设置层的外边距
 .div {
      width:500px ; 
      height:300px;
      margin: -150px 0 0 -250px;
      position:relative;         //相对定位
      left:50%;
      top:50%;
 }

1
2
3
4
5
6
7
8
9
10

绝对定位的div居中

 position: absolute;
 width: 1200px;
 left: 50%;
 top: 50%;
 transform: translate3d(-50%,-50%,0);

1
2
3
4
5

# display

block 像块类型元素一样显示。
none 元素消失，不在文档流中
inline-block 像行内元素一样显示。
list-item 象块类型元素一样显示，并添加样式列表标记。
table 此元素会作为块级表格来显示
inherit 规定应该从父元素继承 display 属性的值
flex flex布局
table-cell 类似表格的自适应布局

# position的值relative和absolute定位原点

absolute
- 生成绝对定位的元素，相对于值不为 static的第一个父元素进行定位。
fixed （老IE不支持）
- 生成绝对定位的元素，相对于浏览器窗口进行定位。
relative
- 生成相对定位的元素，相对于其正常位置进行定位。
static
- 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right - z-index 声明）。
inherit
- 规定从父元素继承 position 属性的值

# CSS3的新特性

新增选择器 p:nth-child(n){color: rgba(255, 0, 0, 0.75)}
弹性盒模型 display: flex;
多列布局 column-count: 5;
媒体查询 @media (max-width: 480px) {.box: {column-count: 1;}}
个性化字体 @font-face{font-family: BorderWeb; src:url(BORDERW0.eot);}
颜色透明度 color: rgba(255, 0, 0, 0.75);
圆角 border-radius: 5px;
渐变 background:linear-gradient(red, green, blue);
阴影 box-shadow:3px 3px 3px rgba(0, 64, 128, 0.3);
倒影 box-reflect: below 2px;
文字装饰 text-stroke-color: red;
文字溢出 text-overflow:ellipsis;
背景效果 background-size: 100px 100px;
边框效果 border-image:url(bt_blue.png) 0 10;
转换
- 旋转 transform: rotate(20deg);
- 倾斜 transform: skew(150deg, -10deg);
- 位移 transform: translate(20px, 20px);
- 缩放 transform: scale(.5);
平滑过渡 transition: all .3s ease-in .1s;
动画 @keyframes anim-1 {50% {border-radius: 50%;}} animation: anim-1 1s;

# 用纯CSS创建一个三角形

// 把上、左、右三条边隐藏掉（颜色设为 transparent）
#demo {
 width: 0;
 height: 0;
 border-width: 20px;
 border-style: solid;
 border-color: transparent transparent red transparent;
}

1
2
3
4
5
6
7
8

# 一个满屏品字布局如何设计

简单的方式：
- 上面的div宽100%，
- 下面的两个div分别宽50%，
- 然后用float或者inline使其不换行即可

# 为什么要初始化CSS样式

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异

# display:inline-block产生间隙

原因：换行或空格会占据一定的位置
解决方法：
- 除去当前元素的空格或换行
- 当前元素的父元素中设置font-size:0;
- 在当前元素的父元素中设置letter-spaceing:-4px;

# 隐藏元素的方法

visibility: hidden; 这个属性只是简单的隐藏某个元素，但是元素占用的空间任然存在
opacity: 0; CSS3属性，设置0可以使一个元素完全透明
position: absolute; 设置一个很大的 left 负值定位，使元素定位在可见区域之外
display: none; 元素会变得不可见，并且不会再占用文档的空间。
transform: scale(0); 将一个元素设置为缩放无限小，元素将不可见，元素原来所在的位置将被保留
<div hidden="hidden"> HTML5属性,效果和display:none;相同，但这个属性用于记录一个元素的状态
height: 0; 将元素高度设为 0 ，并消除边框
filter: blur(0); CSS3属性，将一个元素的模糊度设置为0，从而使这个元素“消失”在页面中

# rgba() 和 opacity 的透明效果有什么不同

opacity 作用于元素以及元素内的所有内容（包括文字）的透明度
rgba() 只作用于元素自身的颜色或其背景色，子元素不会继承透明效果

# css 属性 content 的作用

content 属性专门应用在 before/after 伪元素上，用于插入额外内容或样式

# li与li之间有看不见的空白间隔

li排列受到中间空白(回车/空格)等的影响，因为空白也属于字符，会被应用样式占据空间，产生间隔
解决办法：在ul设置设置font-size=0,在li上设置需要的文字大小

# 圣杯布局

要求：三列布局；中间主体内容前置，且宽度自适应；两边内容定宽
- 好处：重要的内容放在文档流前面可以优先渲染
- 原理：利用相对定位、浮动、负边距布局，而不添加额外标签

  .container {
      padding-left: 150px;
      padding-right: 190px;
  }
  .main {
      float: left;
      width: 100%;
  }
  .left {
      float: left;
      width: 190px;
      margin-left: -100%;
      position: relative;
      left: -150px;
  }
  .right {
      float: left;
      width: 190px;
      margin-left: -190px;
      position: relative;
      right: -190px;
  }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 双飞翼布局

双飞翼布局：对圣杯布局（使用相对定位，对以后布局有局限性）的改进，消除相对定位布局
原理：主体元素上设置左右边距，预留两翼位置。左右两栏使用浮动和负边距归位，消除相对定位。

.container {
    /*padding-left:150px;*/
    /*padding-right:190px;*/
}
.main-wrap {
    width: 100%;
    float: left;
}
.main {
    margin-left: 150px;
    margin-right: 190px;
}
.left {
    float: left;
    width: 150px;
    margin-left: -100%;
    /*position: relative;*/
    /*left:-150px;*/
}
.right {
    float: left;
    width: 190px;
    margin-left: -190px;
    /*position:relative;*/
    /*right:-190px;*/
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

# 在CSS样式中常使用 px、em 在表现上有什么区别

px 相对于显示器屏幕分辨率，无法用浏览器字体放大功能
em 值并不是固定的，会继承父级的字体大小： em = 像素值 / 父级font-size

# 浮动元素

工作原理：
- 浮动元素脱离文档流，不占据空间（引起“高度塌陷”现象）
- 浮动元素碰到包含它的边框或者其他浮动元素的边框停留
引起的问题：
- 父元素的高度无法被撑开，影响与父元素同级的元素
- 与浮动元素同级的非浮动元素会跟随其后
清除浮动的方式
- 添加额外标签，例如 <div style="clear:both"></div>
- 使用 br 标签和其自身的 clear 属性，例如 <br clear="all" />
- 父元素设置 overflow：hidden; 在IE6中还需要触发 hasLayout，例如zoom：1;
- 父元素也设置浮动
- 使用 :after 伪元素

.clearfix:after{
   content: "\200B";
   display: table; 
   height: 0;
   clear: both;
 }
 .clearfix{
   *zoom: 1;
 }

1
2
3
4
5
6
7
8
9

# CSS 预处理器

CSS 预处理器基本思想：为 CSS 增加了一些编程的特性（变量、逻辑判断、函数等）
开发者使用这种语言进行进行 Web 页面样式设计，再编译成正常的 CSS 文件使用
使用 CSS 预处理器，可以使 CSS 更加简洁、适应性更强、可读性更佳，无需考虑兼容性
最常用的 CSS 预处理器语言包括：Sass（SCSS）和 LESS

# CSS优化、提高性能的方法

多个css合并，尽量减少HTTP请求
将css文件放在页面最上面
移除空的css规则
避免使用CSS表达式
选择器优化嵌套，尽量避免层级过深
充分利用css继承属性，减少代码量
抽象提取公共样式，减少代码量
属性值为0时，不加单位
属性值为小于1的小数时，省略小数点前面的0
css雪碧图

# 浏览器是怎样解析CSS选择器的

浏览器解析 CSS 选择器的方式是从右到左

# 抽离样式模块

CSS可以拆分成2部分：公共CSS 和业务CSS：
- 网站的配色，字体，交互提取出为公共CSS。这部分CSS命名不应涉及具体的业务
- 对于业务CSS，需要有统一的命名，使用公用的前缀。可以参考面向对象的CSS

# 响应式设计

响应式设计就是网站能够兼容多个终端，而不是为每个终端做一个特定的版本
基本原理是利用CSS3媒体查询，为不同尺寸的设备适配不同样式
对于低版本的IE，可采用JS获取屏幕宽度，然后通过resize方法来实现兼容

$(window).resize(function () {
  screenRespond();
});
screenRespond();
function screenRespond(){
var screenWidth = $(window).width();
if(screenWidth <= 1800){
  $("body").attr("class", "w1800");
}
if(screenWidth <= 1400){
  $("body").attr("class", "w1400");
}
if(screenWidth > 1800){
  $("body").attr("class", "");
}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 伪元素和伪类

伪元素
- 在内容元素的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成。
- 伪元素用 :: 表示,由于低版本IE对双冒号不兼容，开发者为了兼容性各浏览器，继续使使用 :after 这种老语法表示伪元素
伪类
- 将特殊的效果添加到特定选择器上。它是已有元素上添加类别的，不会产生新的元素
- 在 CSS 中伪类一直用 : 表示

a:hover {color: #FF00FF}
p:first-child {color: red}

1
2

# 如何修改Chrome记住密码后自动填充表单的黄色背景

产生原因：由于Chrome默认会给自动填充的input表单加上 input:-webkit-autofill 私有属性造成的
解决方案1：在form标签上直接关闭了表单的自动填充：autocomplete="off"
解决方案2：input:-webkit-autofill { background-color: transparent; }

# line-height的理解

line-height 指一行字的高度，包含了字间距，实际上是下一行基线到上一行基线距离
一个容器没有设置高度，那么撑开容器高度的是 line-height 而不是容器内的文字内容
把 line-height 值设置为 height 一样大小的值可以实现单行文字的垂直居中
赋值方式
- 带单位：px 是固定值，而 em 会参考父元素 font-size 值计算自身的行高
- 纯数字：会把比例传递给后代。例如，父级行高为 1.5，子元素字体为 18px，则子元素行高为 1.5 * 18 = 27px
- 百分比：将计算后的值传递给后代

# 怎么让Chrome支持小于12px 的文字

  .shrink{
    -webkit-transform:scale(0.8);
    -o-transform:scale(1);
    display:inline-block;
  }

1
2
3
4
5

# 让页面里的字体变清晰，变细用CSS怎么做

  -webkit-font-smoothing: antialiased;

# 动画的最小时间间隔是多久

16.7ms 多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔: 1s / 60 * 1000 ＝ 16.7ms

# JS知识

# JavaScript的组成

JavaScript 由以下三部分组成：
- ECMAScript（核心）：JavaScript 语言基础
- DOM（文档对象模型）：规定了访问HTML和XML的接口
- BOM（浏览器对象模型）：提供了浏览器窗口之间进行交互的对象和方法

# JS的基本数据类型和引用数据类型

基本数据类型：undefined、null、boolean、number、string、symbol
引用数据类型：object、array、function

# 如何编写高性能的JavaScript

遵循严格模式："use strict";
将js脚本放在页面底部，加快渲染页面
将js脚本将脚本成组打包，减少请求
使用非阻塞方式下载js脚本
尽量使用局部变量来保存全局变量
尽量减少使用闭包
使用 window 对象属性方法时，省略 window
尽量减少对象成员嵌套
缓存 DOM 节点的访问
通过避免使用 eval() 和 Function() 构造器
给 setTimeout() 和 setInterval() 传递函数而不是字符串作为参数
尽量使用直接量创建对象和数组
最小化重绘(repaint)和回流(reflow)

# 描述浏览器的渲染过程，DOM树和渲染树的区别

浏览器的渲染过程：
- 解析HTML构建 DOM(DOM树)，并行请求 css/image/js
- CSS 文件下载完成，开始构建 CSSOM(CSS树)
- CSSOM 构建结束后，和 DOM 一起生成 Render Tree(渲染树)
- 布局(Layout)：计算出每个节点在屏幕中的位置
- 显示(Painting)：通过显卡把页面画到屏幕上
DOM树和渲染树的区别：
- DOM树与HTML标签一一对应，包括head和隐藏元素
- 渲染树不包括head和隐藏元素，大段文本的每一个行都是独立节点，每一个节点都有对应的css属性

# 重绘和回流（重排）的区别和关系

重绘：当渲染树中的元素外观（如：颜色）发生改变，不影响布局时，产生重绘
回流：当渲染树中的元素的布局（如：尺寸、位置、隐藏/状态状态）发生改变时，产生重绘回流
注意：JS获取Layout属性值（如：offsetLeft、scrollTop、getComputedStyle等）也会引起回流。因为浏览器需要通过回流计算最新值
回流必将引起重绘，而重绘不一定会引起回流

# 如何最小化重绘(repaint)和回流(reflow)

需要要对元素进行复杂的操作时，可以先隐藏(display:"none")，操作完成后再显示
需要创建多个DOM节点时，使用DocumentFragment创建完后一次性的加入document
缓存Layout属性值，如：var left = elem.offsetLeft; 这样，多次使用 left 只产生一次回流
尽量避免用table布局（table元素一旦触发回流就会导致table里所有的其它元素回流）
避免使用css表达式(expression)，因为每次调用都会重新计算值（包括加载页面）
尽量使用 css 属性简写，如：用 border 代替 border-width, border-style, border-color
批量修改元素样式：elem.className 和 elem.style.cssText 代替 elem.style.xxx

# 解释JavaScript中的作用域与变量声明提升

JavaScript作用域：
- 在Java、C等语言中，作用域为for语句、if语句或{}内的一块区域，称为作用域；
- 而在 JavaScript 中，作用域为function(){}内的区域，称为函数作用域。
JavaScript变量声明提升：
- 在JavaScript中，函数声明与变量声明经常被JavaScript引擎隐式地提升到当前作用域的顶部。
- 声明语句中的赋值部分并不会被提升，只有名称被提升
- 函数声明的优先级高于变量，如果变量名跟函数名相同且未赋值，则函数声明会覆盖变量声明
- 如果函数有多个同名参数，那么最后一个参数（即使没有定义）会覆盖前面的同名参数

# 介绍JavaScript的原型，原型链，有什么特点

原型：
- JavaScript的所有对象中都包含了一个 [proto] 内部属性，这个属性所对应的就是该对象的原型
- JavaScript的函数对象，除了原型 [proto] 之外，还预置了 prototype 属性
- 当函数对象作为构造函数创建实例时，该 prototype 属性值将被作为实例对象的原型 [proto]。
原型链：
- 当一个对象调用的属性/方法自身不存在时，就会去自己 [proto] 关联的前辈 prototype 对象上去找
- 如果没找到，就会去该 prototype 原型 [proto] 关联的前辈 prototype 去找。依次类推，直到找到属性/方法或 undefined 为止。从而形成了所谓的“原型链”
原型特点：
- JavaScript对象是通过引用来传递的，当修改原型时，与之相关的对象也会继承这一改变

# Javascript如何实现继承

构造函数绑定：使用 call 或 apply 方法，将父对象的构造函数绑定在子对象上

function Cat(name,color){
 　Animal.apply(this, arguments);
 　this.name = name;
 　this.color = color;
}

1
2
3
4
5

实例继承：将子对象的 prototype 指向父对象的一个实例

Cat.prototype = new Animal();
Cat.prototype.constructor = Cat;

1
2

拷贝继承：如果把父对象的所有属性和方法，拷贝进子对象

    function extend(Child, Parent) {
  　　　var p = Parent.prototype;
  　　　var c = Child.prototype;
  　　　for (var i in p) {
  　　　   c[i] = p[i];
  　　　}
  　　　c.uber = p;
  　 }

1
2
3
4
5
6
7
8

原型继承：将子对象的 prototype 指向父对象的 prototype

    function extend(Child, Parent) {
        var F = function(){};
      　F.prototype = Parent.prototype;
      　Child.prototype = new F();
      　Child.prototype.constructor = Child;
      　Child.uber = Parent.prototype;
    }

1
2
3
4
5
6
7

ES6 语法糖 extends：class ColorPoint extends Point {}

    class ColorPoint extends Point {
       constructor(x, y, color) {
          super(x, y); // 调用父类的constructor(x, y)
          this.color = color;
       }
       toString() {
          return this.color + ' ' + super.toString(); // 调用父类的toString()
       }
    }

1
2
3
4
5
6
7
8
9

# Javascript作用链域

全局函数无法查看局部函数的内部细节，但局部函数可以查看其上层的函数细节，直至全局细节
如果当前作用域没有找到属性或方法，会向上层作用域查找，直至全局函数，这种形式就是作用域链

# 谈谈this对象的理解

this 总是指向函数的直接调用者
如果有 new 关键字，this 指向 new 出来的实例对象
在事件中，this指向触发这个事件的对象
IE下 attachEvent 中的this总是指向全局对象Window

# 什么是 Window 对象，什么是 Document 对象

Window 对象表示当前浏览器的窗口，是JavaScript的顶级对象。
我们创建的所有对象、函数、变量都是 Window 对象的成员。
Window 对象的方法和属性是在全局范围内有效的。
Document 对象是 HTML 文档的根节点与所有其他节点（元素节点，文本节点，属性节点, 注释节点）
Document 对象使我们可以通过脚本对 HTML 页面中的所有元素进行访问
Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问

# 事件的三个阶段

捕获、目标、冒泡

# 在一个DOM上同时绑定两个点击事件：一个用捕获，一个用冒泡。事件会执行几次，先执行冒泡还是捕获

该DOM上的事件如果被触发，会执行两次（执行次数等于绑定次数）
如果该DOM是目标元素，则按事件绑定顺序执行，不区分冒泡/捕获
如果该DOM是处于事件流中的非目标元素，则先执行捕获，后执行冒泡

# 什么是函数节流，介绍一下应用场景和原理

函数节流(throttle)是指阻止一个函数在很短时间间隔内连续调用。只有当上一次函数执行后达到规定的时间间隔，才能进行下一次调用。但要保证一个累计最小调用间隔（否则拖拽类的节流都将无连续效果）
函数节流用于 onresize, onscroll 等短时间内会多次触发的事件
函数节流的原理：使用定时器做时间节流。当触发一个事件时，先用 setTimout 让这个事件延迟一小段时间再执行。如果在这个时间间隔内又触发了事件，就 clearTimeout 原来的定时器，再 setTimeout 一个新的定时器重复以上流程。
函数节流简单实现：

function throttle(method, context) {
     clearTimeout(methor.tId);
     method.tId = setTimeout(function(){
         method.call(context);
     }， 100); // 两次调用至少间隔 100ms
}
// 调用
window.onresize = function(){
    throttle(myFunc, window);
}

1
2
3
4
5
6
7
8
9
10

# null，undefined 的区别

undefined 表示不存在这个值。
undefined :是一个表示"无"的原始值或者说表示"缺少值"，就是此处应该有一个值，但是还没有定义。当尝试读取时会返回 undefined
例如变量被声明了，但没有赋值时，就等于undefined
null 表示一个对象被定义了，值为“空值”
null : 是一个对象(空对象, 没有任何属性和方法)
例如作为函数的参数，表示该函数的参数不是对象；
在验证null时，一定要使用　=== ，因为 == 无法分别 null 和　undefined

# DOM操作——怎样添加、移除、移动、复制、创建和查找节点

（1）创建新节点
- createDocumentFragment() //创建一个DOM片段
- createElement() //创建一个具体的元素
- createTextNode() //创建一个文本节点
（2）添加、移除、替换、插入
- appendChild()
- removeChild()
- replaceChild()
- insertBefore() //在已有的子节点前插入一个新的子节点
（3）查找
- getElementsByTagName() //通过标签名称
- getElementsByName() // 通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)
- getElementById() //通过元素Id，唯一性

# 渐进增强和优雅降级

渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容

# JavaScript 的同源策略和作用

同源策略指的是：协议，域名，端口相同，同源策略是一种安全协议
作用：比如一个黑客程序，他利用Iframe把真正的银行登录页面嵌到他的页面上，当你使用真实的用户名，密码登录时，他的页面就可以通过Javascript读取到你的表单中input中的内容，这样用户名，密码就轻松到手了。

#面试

最近更新时间： 2021/06/17 10:13:36

← 【面试】2020年底面经前端基础知识整理02→

前端基础知识整理01

# HTML知识

# 语义化

# 标准模式与兼容模式

# Doctype作用

# 行内元素与块级元素

# link和@import导入样式的区别

# 浏览器内核的理解

# 常见的浏览器内核有哪些

# HTML5新特性

# HTML离线存储的使用和原理

# 浏览器是怎么对HTML5的离线储存资源进行管理和加载的

# cookies，sessionStorage 和 localStorage 的区别

# iframe有那些缺点

# label标签的作用和使用网页

# HTML5的form如何关闭自动完成功能？

# 网页验证码的作用

# CSS知识

# display: none; 与 visibility: hidden; 的区别

# CSS有哪些继承属性

# 外边距重叠

# 标准盒模型和怪异盒模型

# CSS优先级

# CSS3新增伪类

# 如何居中div

# display

# position的值relative和absolute定位原点

# CSS3的新特性

# 用纯CSS创建一个三角形

# 一个满屏 品 字布局 如何设计

# 为什么要初始化CSS样式

# display:inline-block产生间隙

# 隐藏元素的方法

# rgba() 和 opacity 的透明效果有什么不同

# css 属性 content 的作用

# li与li之间有看不见的空白间隔

# 圣杯布局

# 双飞翼布局

# 在CSS样式中常使用 px、em 在表现上有什么区别

# 浮动元素

# CSS 预处理器

# CSS优化、提高性能的方法

# 浏览器是怎样解析CSS选择器的

# 抽离样式模块

# 响应式设计

# 伪元素和伪类

# 如何修改Chrome记住密码后自动填充表单的黄色背景

# line-height的理解

# 怎么让Chrome支持小于12px 的文字

# 让页面里的字体变清晰，变细用CSS怎么做

# 动画的最小时间间隔是多久

# JS知识

# JavaScript的组成

# JS的基本数据类型和引用数据类型

# 如何编写高性能的JavaScript

# 描述浏览器的渲染过程，DOM树和渲染树的区别

# 重绘和回流（重排）的区别和关系

# 如何最小化重绘(repaint)和回流(reflow)

# 解释JavaScript中的作用域与变量声明提升

# 介绍JavaScript的原型，原型链，有什么特点

# Javascript如何实现继承

# Javascript作用链域

# 谈谈this对象的理解

# 什么是 Window 对象，什么是 Document 对象

# 事件的三个阶段

# 在一个DOM上同时绑定两个点击事件：一个用捕获，一个用冒泡。事件会执行几次，先执行冒泡还是捕获

# 什么是函数节流，介绍一下应用场景和原理

# null，undefined 的区别

# DOM操作——怎样添加、移除、移动、复制、创建和查找节点

# 渐进增强和优雅降级

# JavaScript 的同源策略和作用

# 一个满屏品字布局如何设计