前端__常见疑问

综合

网页加载速度判断

• 2秒内      ->  进入网页  ->  速度快

• 2秒-5秒   ->  进入网页  ->  速度一般

• 5秒-8秒   ->  进入网页  ->  速度非常慢

网页渲染过程

 网页->输入网址->渲染完成->整个流程

1. 输入网址

2. 发送到DNS服务器,并获取域名对应的web服务器对应的ip地址

3. 与web服务器建立TCP连接

4. 浏览器向web服务器发送http请求

5. web服务器响应请求,并返回指定url的数据(或错误信息,或重定向的新的url地址)

6. 浏览器下载web服务器返回的数据及解析html源文件

7. 生成DOM树,解析Css和Js,渲染页面,直至显示完成

DNS预解析提升页面速度

<link rel='dns-prefetch' href='#网址#'>

当你浏览网页时，浏览器会在加载网页时对网页中的域名进行解析缓存

这样在你单击当前网页中的连接时就无需进行 DNS 的解析

减少用户等待时间，提高用户体验 目前每次DNS解析,通常在200ms以下

针对DNS解析耗时问题,一些浏览器通过DNS Prefetch 来提高访问的流畅性。

在以图片为主移动网站被访问时,在使用DNS预解析的情意中下,页面加载时间可以提升%5个点

dns-prefetch需慎用,多页面重复DNS预解析会增加重复DNS查询次数

如果要禁止隐式的DNS Prefetch

<meta http-equiv='x-dns-prefetch-control' content='off'>

虽然使用 DNS Prefetch 能够加快页面的解析速度，但是也不能滥用

因为有开发者指出 禁用DNS 预读取能节省每月100亿的DNS查询

DNS Prefetch 应该尽量的放在网页的前面 推荐放在 meta charset='UTF-8' > 后面

浏览器起源/Js起源

人物

蒂姆伯纳斯李（蒂姆）

马克安德里森（马克）

起源

1990年-网页诞生

第一个网页诞生（蒂姆） 当时的年代只能用终端运行网页,之后HTML诞生（蒂姆）

1993年-网页初期

渲染HTML引擎工具诞生,可以支持图片的输出

浏览器还没有发明出,后来（蒂姆）用C语言移植了www成为libwww

当时的技术:只能显示文字和超链接的使用(http超文本传输协议)

NCSA的（马克）与其他成员在NCSA开发了【mosiac浏览器】

1994年-浏览器开发

（马克）创立了NetScape网景公司,创作了【netscape navigator浏览器】

NCSA把【mosiac浏览器】版权卖给了spy glass这家公司后来被微软收购,

在基础上做出修改 IE浏览器1.0诞生

1995年-市场拓展

网景公司与SUN公司商业合作,网景公司借助Java语言的影响力拓展市场,

SUN公司影响力拓展到浏览器

1996年-JavaScript诞生

JavaScript诞生,Sun公司(Java语言的发明者和所有者)

Sun公司允许这种语言叫做JavaScript

网景公司与IE经过一番激战后,逐渐处于劣势,几乎被碾压的局势

最终将JavaScript提交到了国家标准化组织ECMA以此对抗微软

之后微软加入浏览器市场

90年代-2003年,网景公司于IE长达十几年的商业斗争

网景公司的一位大神【brendan eich】在netscape navigator的内核基础上开发了【livescript】

此大神借鉴了各大语言的优势,所以现在的JavaScript可以看到个别语言逻辑的原因

2001年-商战竞争

Windows Xp+Ie 6 浏览器将js引擎抽离出来成为了单独引擎,

网景公司彻底无法与之对抗

2003年-商战结束

网景公司彻底被微软 KO 网景公司破产倒闭退出历史的舞台

退出之前将源代码公布开放

FireFox 插一脚,对源代码进行简单改装开发了【火狐浏览器】

2008年-V8引擎诞生

V8引擎诞生（号称最快的浏览器）

谷歌浏览器的出现实现了统一

最终BOSS

最后甲骨文公司收购了SUN公司,JavaScript版权自动归甲骨文公司所有

V8引擎起源

起源

谷歌浏览器与Safari共同研制了webkit内核

后来谷歌浏览器与Safari终止了合作,另辟蹊径,

在webkit的基础上改名为blink内核

优势

1. 直接把代码转化为机器码,跳过字节码

2. 可以独立于浏览器运行nodejs

3. 最快的浏览器

4. JavaScript一跃成为殿堂级语言

Html+Css

@link与@import区别 ?

• link / 先加载 / 较兼容

• import  / 后加载 / 额外增加一次请求      

行内元素/块级元素/空元素

• 行内元素 : span/img/input...

• 块级元素 : div/section/p/h1/header/footer/...

• 空元素   : br/hr/...

png/jpg/gif/webp 区别

• png    无损压缩    体积 > jpg

• jpg     有损压缩     体积 < png

•  gif     动图

•  webp    比较全面      体积 < jpg < png

标准盒子模型/IE盒子模型

• 标准   content-box:margin,border,padding,content

• IE     border-box:margin,content(border+padding+content)

line-height/height 区别 

• line-height:2   字体的2倍距离

•  height  固定值,高度

::before和:after中双冒号与单冒号区别

随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号

• 伪类（ ：）

• 伪元素（ ：：）

Css属性继承区分

• 选择器  id/类/标签/相邻/后代/子元素/

• 可继承属性      font-size/color/line-height/text-align/...

• 不可继承属性    border/padding/margin/...

Css优先级算法

优先级比较     !import > 内联样式 > id > class > 标签 > 适配

BFC规范(格式化上下文)

BFC就是一个页面上一个隔离的独立容器,容器里面的子元素不会影响到外面的元素

如何触发BFC ?

• float   非none

• overflow非visible

• display inline-block..

•  position/absolute/fixed

清除浮动有哪些方式

• 方法1 : 多创建一个盒子-clear:both
• 方法2 : .box:after{content:'';display:block;clear:both;}

数值使用奇数还是偶数

偶数更易于计算

Css reset

reset.css 是一个css文件,用来重置css样式

 >>> href='reset.css'

耗性能

Css sprite是什么

把多个小图标合并为一张图

优点:减少请求

缺点:麻烦,不好修改

display / visibility 区别

• display : none  彻底删除

•  visibility : hidden   隐藏,不删除

 rem / em 区别 

• em     根据父元素变动

• rem     根据(html)变动

如何禁止ios和android选中文字

html,
body {
  user-select: none; /* 禁止选中状态 如:长按文字或图片copy */
  -webkit-user-select: none;
}

JavaScript

JavaScript优化

• 函数返回return

• 函数形参3个以上用对象导入

• 减少函数的的嵌套层级

• try-catch 循环外使用  

• DataURL加载慢

• 回流和重绘-耗性能

• 闭包-耗性能

• eval-耗性能

• 每次length计算使用一个变量保存值-缓存

• id选择器最快

• 多依赖于前端-减轻后端压力

位运算

• &   如果两位都是 1   则设置每位为 1

• |   如果两位之一为 1 则设置每位为 1

•  ^   如果两位只有一位为 1     则设置每位为 1

•  ~   反转所有位

• <<  通过从右推入零向左位移,并使最左边的位脱落

•  >>  通过从左推入最左位的拷贝来向右位移,并使最右边的位脱落

• >>> 通过从左推入零来向右位移,并使最右边的位脱落

同步加载与异步加载

同步加载

同步模式，又称阻塞模式，会阻止浏览器的后续处理，停止后续的解析，

只有当当前加载完成，才能进行下一步操作。

所以默认同步执行才是安全的。

但这样如果js中有输出document内容、修改dom、重定向等行为,就会造成页面堵塞

所以一般建议把script标签放在body结尾处,这样尽可能减少页面阻塞。

异步加载

异步加载又叫非阻塞加载,

浏览器在下载执行js的同时, 还会继续进行后续页面的处理

异步加载指外部js文件和当前html页面同时加载

a如何等于1,同时又等于2或3 ?

const a = {
    i: 1,
    toString: function () {
        return a.i++
    }
};
if (a == 1 && a == 2 && a == 3) {
    console.log('Hello World!')
};

延迟加载js方式有哪些 ? 

async/defer/promise

js数据类型有哪些 ?

• 基本类型 : string,number,boolean,undefined,null,symbol,bight...
• 引用类型 : object

null / undefined 区别

• null转为数值时为0,也可以清空对象
• undefined转为数值时为NaN,变量未赋值时会出现

 == / === 区别 

•  ==      等值  不同类型

•  ===    等值  同类型

微任务 / 宏任务

js是单线程语言

js代码执行流程

1. 同步执行完 -> 事件循环

2. 进入事件循环 -> 请求/定时器/事件/...

微任务 : promise.then

宏任务 : setTimeout

要执行宏任务得前提是清空了所有微任务

js作用域

• 除了函数外,js没有块级作用域

• 函数内可以访问外部,外部访问函数内访问不了

两个对象内容相同,是否相等 ?

对象通过new操作符构建,所以两个对象之间无法相等

new操作符具体做什么 ?

创建一个空的对象,将空对象的原型,指向与构造函数的原型(耗性能)

原型可以解决什么问题 ?

• 对象共享属性和共享方法

• 函数拥有 prototype

• 对象拥有 __proto__

 js继承有哪些方式？

•  方法1 : 类继承super方法

•  方法2 : 原型链继承

sort背后原理是什么 ?

 默认排序顺序根据字符串Unicode码点排序

localstorage/sessionstorage/cookie 区别

• sessionstorage  : 临时存储

• localstorage    : 永久存储

• cookie  : 只在设置的cookie过期时间之前有效(配合前者使用)

箭头函数 / 普通函数 区别

1. 自动return

2. 不能new(不能当作构造函数)

3. 没有prototype原型

4. 没有argument