面试题系列——深思考核内容

面试题系列——深思考核内容

一、如何让(a===1&&a===2&&a===3)的值为true?

双等号(==):会触发隐式类型转换,所以可以使用 valueOf 或者 toString 来实现。
每次判断都会触发valueOf方法,同时让value+1,才能使得下次判断成立。

class A {
    constructor(value) {
        this.value = value;     
    }     
    valueOf() { 
        return this.value++;    
    } 
} 
const a = new A(1);
if (a == 1 && a == 2 && a == 3) {
    console.log("Hi Libai!");
}

全等(===):严格等于不会进行隐式转换,这里使用 Object.defineProperty 数据劫持的方法来实现

let value = 1; 
Object.defineProperty(window, 'a', { 
get() {
    return value++     
} }) 
if (a === 1 && a === 2 && a === 3) { 
    console.log("Hi Libai!")
}

二、如何实现一个无限累加函数

add(1); // 1
add(1)(2);  // 3
add(1)(2)(3)// 6
add(1)(2)(3)(4)// 10
// 以此类推 
function add(a) {
    function sum(b) { // 使用闭包
        a = b ? a + b : a; // 累加
        return sum;     
    }     
sum.toString = function() { // 只在最后一次调用        
    return a;     
}     
return sum; // 返回一个函数 
} 
add(1)              // 1
add(1)(2)           // 3
add(1)(2)(3)        // 6
add(1)(2)(3)(4)     // 10 
  1. add函数内部定义sum函数并返回,实现连续调用
  2. sum函数形成了一个闭包,每次调用进行累加值,再返回当前函数sum
  3. add()每次都会返回一个函数sum,直到最后一个没被调用,默认会触发toString方法,所以我们这里重写toString方法,并返回累计的最终值a

注释:

add(10): 执行函数add(10),返回了sum函数,注意这一次没有调用sum,默认执行sum.toString方法。所以输出10;

add(10)(20): 执行函数add(10),返回sum(此时a为10),再执行sum(20),此时a为30,返回sum,最后调用sum.toString()输出30。add(10)(20)…(n)依次类推。

柯里化实现多参累加

add(1)(3,4)(3,5)    // 16
add(2)(2)(3,5)      // 12
function add(){     
        // 1 把所有参数转换成数组 
        let args = Array.prototype.slice.call(arguments) 
        // 2 再次调用add函数,传递合并当前与之前的参数    
        let fn = function() {
            let arg_fn = Array.prototype.slice.call(arguments)         
            return add.apply(null, args.concat(arg_fn)) 
        }     
        // 3 最后默认调用,返回合并的值 
        fn.toString = function() {
            return args.reduce(function(a, b) { 
            return a + b         
        })     
        }     
            return fn 
    } 
    
    
    // ES6写法 
    function add () {
    let args = [...arguments]; 
    let fn = function(){ 
        return add.apply(null, args.concat([...arguments])) 
    }
    fn.toString = () => args.reduce((a, b) => a + b) 
    return fn; 
    }

三、回流与重绘

reflow(回流) 当浏览器发现某个部分发生了点变化影响了布局,需要倒回去重新渲染,内行称这个回退的过程叫 reflow。

1) 页面首次渲染
2)浏览器窗口大小发生改变
3)元素的尺寸和位置发生改变
4)元素的内容发生改变(文字的数量或字号大小或图片的大小...)
增加 删除(可见的Dom)
激活css伪类
7)查询某些属性或调用某些方法
操作class属性
脚本操作DOM
计算offsetWidth和offsetHeight属性
设置style属性

repaint(重绘) 改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性时,屏幕的一部分要重画,但是元素的几何尺寸没有变。

回流必将引起重绘,重绘不一定会引起回流

四、浏览器打开一个标签页是一个进程还是一个线程

Google Chrome相对于前辈做了一个独特的创新,那就是它界面内的每个标签页(Tab)都是一个进程。而其它浏览器的每个标签页都是一个线程(这只是实际情况的抽象简化,但此题只考虑简化后的情况)。
安全性:相比于线程,进程之间是不共享资源和地址空间的,所以不会存在太多的安全问题,而由于多个线程共享着相同的地址空间和资源,所以会存在线程之间有可能会恶意修改或者获取非授权数据的可能。
健壮性:由于多个线程共享同一个进程的地址空间和相关的资源, 所以当一个线程出现crash,那么可能会导致相应的地址空间和资源会出现问题,从而导致其它的线程也crash。 当一个tab突然崩溃时,所有的tab都会崩溃,这时通常浏览器要重启(重启进程,重新生成线程)。而多进程则不存在这个问题, 因为不同的地址空间和资源, 当一个进程崩溃时, 并不会影响到其它进程。
性能:进程的安全性,健壮性是建立在独立的地址空间和独立的资源的条件下的, 所以进程的启动,关闭,切换相比于线程会有更多的开销。而这种开销的差别在Windows下更加显著。

五、web worker实现原理

Web Worker 规范中包括:DediactedWorkerSharedWorker
DedicatedWorker 简称 Worker,其线程只能与一个页面渲染进程(Render Process)进行绑定和通信,不能多 Tab 共享。DedicatedWorker 是 最早实现并广泛支持的 Web Worker 能力。
SharedWorker可以多个浏览器 Tab 中访问到同一个 Worker 实例,实现多 Tab 共享数据,共享 websocket 等

主线程(Main Thread)

JS 单线程和 Event Loop,是主线程的一部分。JS 单线程的机制避免了多线程开发中的复杂场景(如竞态和死锁),但单线程的主要困扰是:主线程同步 JS 执行耗时过久时(浏览器理想帧间隔约 16ms),会阻塞用户交互和页面渲染。

多线程

Web Worker 会创建 操作系统级别的线程。可以减少主线程卡顿,可能会带来性能提升(多核多线程并行)
JS 多线程,是有独立于主线程的 JS 运行环境,Worker 线程有独立的内存空间,Message Queue,Event Loop,Call Stack 等,线程间通过 postMessage 通信。

六、浏览器缓存

缓存位置

缓存策略

不缓存的情景

Cache-Control:nocache

Pragma:no-cache

Expires:-1

< meta http-equiv=‘Cache-Control’ content=’-1’/>

HTML

三、image标签上title属性与alt属性的区别

alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明的。且长度必须少于100个英文字符或者用户必须保证替换文字尽可能的短。
title属性为设置该属性的元素提供建议性的信息。使用title属性提供非本质的额外信息。

四、分别写出以下几个HTML标签:文字加粗、下标、居中、字体

加粗:<b>、<strong>

下标:<sub>

居中:<center>

字体:<font>、<basefont>

五、请写出至少5个html5新增的标签,并说明其语义和应用场景

section:定义文档中的一个章节

nav:定义只包含导航链接的章节

header:定义页面或章节的头部。它经常包含 logo、页面标题和导航性的目录。

footer:定义页面或章节的尾部。它经常包含版权信息、法律信息链接和反馈建议用的地址。

aside:定义和页面内容关联度较低的内容——如果被删除,剩下的内容仍然很合理。

六、请说说你对标签语义化的理解?

a. 去掉或者丢失样式的时候能够让页面呈现出清晰的结构

b. 有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;

c. 方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页;

d. 便于团队开发和维护,语义化更具可读性,遵循W3C标准的团队都遵循这个标准,可以减少差异化。

七、Doctype作用? 严格模式与混杂模式如何区分?它们有何意义?

声明位于文档中的最前面,处于 标签之前。告知浏览器以何种模式来渲染文档。

严格模式的排版和 JS 运作模式是,以该浏览器支持的最高标准运行。

在混杂模式中,页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。

DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

八、你知道多少种Doctype文档类型?

标签可声明三种 DTD 类型,分别表示严格版本、过渡版本以及基于框架的 HTML 文档。

HTML 4.01 规定了三种文档类型:Strict、Transitional 以及 Frameset。

XHTML 1.0 规定了三种 XML 文档类型:Strict、Transitional 以及 Frameset。

Standards (标准)模式(也就是严格呈现模式)用于呈现遵循最新标准的网页,

Quirks(包容)模式(也就是松散呈现模式或者兼容模式)用于呈现为传统浏览器而设计的网页。

九、HTML与XHTML——二者有什么区别

a. XHTML 元素必须被正确地嵌套。

b. XHTML 元素必须被关闭。

c. 标签名必须用小写字母。

d. XHTML 文档必须拥有根元素。

十、html5有哪些新特性、移除了那些元素?

a. HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增加。

b. 拖拽释放(Drag and drop) API

c. 语义化更好的内容标签(header,nav,footer,aside,article,section)

d. 音频、视频API(audio,video)

e. 画布(Canvas) API

f. 地理(Geolocation) API

g. 本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失

h. sessionStorage 的数据在页面会话结束时会被清除

i. 表单控件,calendar、date、time、email、url、search

j. 新的技术webworker, websocket等

移除的元素:

a. 纯表现的元素:basefont,big,center, s,strike,tt,u;

b. 对可用性产生负面影响的元素:frame,frameset,noframes;

  1. iframe的优缺点?

优点:

a. 解决加载缓慢的第三方内容如图标和广告等的加载问题

b. iframe无刷新文件上传

c. iframe跨域通信

缺点:

a. iframe会阻塞主页面的Onload事件

b. 无法被一些搜索引擎索引到

c. 页面会增加服务器的http请求

d. 会产生很多页面,不容易管理。

十一、Quirks模式是什么?它和Standards模式有什么区别?

在写程序时我们也会经常遇到这样的问题,如何保证原来的接口不变,又提供更强大的功能,尤其是新功能不兼容旧功能时。IE6以前的页面大家都不会去写DTD,所以IE6就假定 如果写了DTD,就意味着这个页面将采用对CSS支持更好的布局,而如果没有,则采用兼容之前的布局方式。这就是Quirks模式(怪癖模式,诡异模式,怪异模式)。

区别:总体会有布局、样式解析和脚本执行三个方面的区别。

a. 盒模型:在W3C标准中,如果设置一个元素的宽度和高度,指的是元素内容的宽度和高度,而在Quirks 模式下,IE的宽度和高度还包含了padding和border。

b. 设置行内元素的高宽:在Standards模式下,给等行内元素设置wdith和height都不会生效,而在quirks模式下,则会生效。

c. 设置百分比的高度:在standards模式下,一个元素的高度是由其包含的内容来决定的,如果父元素没有设置百分比的高度,子元素设置一个百分比的高度是无效的用

d. 设置水平居中:使用margin:0 auto在standards模式下可以使元素水平居中,但在quirks模式下却会失效。

十二、请阐述table的缺点

a. 太深的嵌套,比如table>tr>td>h3,会导致搜索引擎读取困难,而且,最直接的损失就是大大增加了冗余代码量。

b. 灵活性差,比如要将tr设置border等属性,是不行的,得通过td

c. 代码臃肿,当在table中套用table的时候,阅读代码会显得异常混乱

d. 混乱的colspan与rowspan,用来布局时,频繁使用他们会造成整个文档顺序混乱。

e. 不够语义

十三、简述一下src与href的区别

src用于替换当前元素;href用于在当前文档和引用资源之间确立联系。

src是source的缩写,指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置

href是Hypertext Reference的缩写,指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接

CSS

1. 谈谈你对CSS布局的理解

常见的布局方式:固定布局、流式布局、弹性布局、浮动布局、定位布局、margin和padding

请列举几种可以清除浮动的方法(至少两种)

浮动会漂浮于普通流之上,像浮云一样,但是只能左右浮动。正是这种特性,导致框内部由于不存在其他普通流元素了,表现出高度为0(高度塌陷)。

a. 添加额外标签,例如

b. 使用br标签和其自身的html属性,例如


c. 父元素设置 overflow:hidden;在IE6中还需要触发hasLayout,例如zoom:1;

d. 父元素设置 overflow:auto 属性;同样IE6需要触发hasLayout

e. 父元素也设置浮动

f. 父元素设置display:table

g. 使用:after 伪元素;由于IE6-7不支持:after,使用 zoom:1触发 hasLayout。

在CSS2.1里面有一个很重要的概念,那就是 Block formatting contexts (块级格式化上下文),简称 BFC。

创建了BFC的元素就是一个独立的盒子,里面的子元素不会在布局上影响外面的元素,同时BFC仍然属于文档中的普通流。

IE6-7的显示引擎使用的是一个称为布局(layout)的内部概念。

3. 请列举几种隐藏元素的方法

a. visibility: hidden;这个属性只是简单的隐藏某个元素,但是元素占用的空间任然存在。

b. opacity: 0;一个CSS3属性,设置0可以使一个元素完全透明,制作出和visibility一样的效果。与visibility相比,它可以被transition和animate

c. position: absolute;使元素脱离文档流,处于普通文档之上,给它设置一个很大的left负值定位,使元素定位在可见区域之外。

d. display: none;元素会变得不可见,并且不会再占用文档的空间。

e. transform: scale(0);将一个元素设置为无限小,这个元素将不可见。这个元素原来所在的位置将被保留。

f. HTML5 hidden attribute;hidden属性的效果和display:none;相同,这个属性用于记录一个元素的状态

g. height: 0; overflow: hidden;将元素在垂直方向上收缩为0,使元素消失。只要元素没有可见的边框,该技术就可以正常工作。

h. filter: blur(0);将一个元素的模糊度设置为0,从而使这个元素“消失”在页面中。

4. 如何让一段文本中的所有英文单词的首字母大写

text-transform:none| capitalize(将每个单词的第一个字母转换成大写) | uppercase(将每个单词转换成大写 ) | lowercase(将每个单词转换成小写 )

5. 请简述CSS样式表继承

CSS样式表继承指的是,特定的CSS属性向下传递到子孙元素。会被继承下去的属性如下:

文本相关:font-family,font-size, font-style,font-variant,font-weight, font,letter-spacing,line-height,color

列表相关:list-style-image,list-style-position,list-style-type, list-style

6. 请简述CSS的选择器

CSS选择符:id选择器(#myid)、类选择器(.myclassname)、标签选择器(div, h1, p)、相邻选择器(h1 + p)、子选择器(ul > li)、后代选择器(li a)、通配符选择器(*)、属性选择器(a[rel=“external”])、伪类选择器(a:hover, li:nth-child)

可继承的属性:font-size, font-family, color

不可继承的样式:border, padding, margin, width, height

优先级(就近原则):!important > [ id > class > tag ]
!important 比内联优先级高

元素选择器:* 、E、 E#id、 E.class

关系选择器:E、F、E>F、E+F、E~F

属性选择器:E[att]、E[att=“val”]、E[att~=“val”]、E[att^=“val”]、E[att$=“val”]、E[att*=“val”]、E[att|=“val”]

伪类选择器:E:link、E:visited、E:hover、E:active、E:focus、E:lang(fr)、E:not(s)、E:root、E:first-child、E:last-chil等

CSS3新增伪类
p:first-of-type 选择属于其父元素的首个元素
p:last-of-type 选择属于其父元素的最后元素
p:only-of-type 选择属于其父元素唯一的元素
p:only-child 选择属于其父元素的唯一子元素
p:nth-child(2) 选择属于其父元素的第二个子元素
:enabled :disabled 表单控件的禁用状态。
:checked 单选框或复选框被选中。

伪对象选择器:E:first-letter/E::first-letter、E:first-line/E::first-line、E:before/E::before、E:after/E::after、E::selection

7. CSS伪类与CSS伪对象的区别

CSS 引入伪类和伪元素的概念是为了描述一些现有CSS无法描述的东西

根本区别在于:它们是否创造了新的元素(抽象)

伪类:一开始用来表示一些元素的动态状态,随后CSS2标准扩展了其概念范围,使其成为了所有逻辑上存在但在文档树中却无须标识的“幽灵”分类

伪对象:代表了某个元素的子元素,这个子元素虽然在逻辑上存在,但却并不实际存在于文档树中

8. 请简述CSS的权重规则,CSS优先级算法如何计算?

元素选择符: 1
class选择符: 10
id选择符:100
元素标签:1000

!important声明的样式优先级最高,如果冲突再进行计算。
如果优先级相同,则选择最后出现的样式。
继承得到的样式的优先级最低。

一个行内样式+1000,一个id+100,一个属性选择器/class类/伪类选择器+10,一个元素名/伪对象选择器+1。

关系选择器将拆分为两个选择器再计算.

9. 请写出多种等高布局

a. 假等高列:使用背景图片,在列的父元素上使用这个背景图进行Y轴的铺放,从而实现一种等高列的假像

b. 给容器div使用单独的背景色(固定布局)(流体布局):用元素中的最大高度撑大其他的容器高度

c. 创建带边框的两列等高布局:用border-left来做,只能使用两列。

d. 使用正padding和负margin对冲实现多列布局方法:在所有列中使用正的上、下padding和负的上、下margin,并在所有列外面加上一个容器,设置overflow:hiden把溢出背景切掉

e. 使用边框和定位模拟列等高:但不能使用在多列

f. 模仿表格布局等高列效果:兼容性不好,在ie6-7无法正常运行

10. 在CSS样式中常使用px、em,各有什么优劣,在表现上有什么区别?

px是相对长度单位,相对于显示器屏幕分辨率而言的。

em是相对长度单位,相对于当前对象内文本的字体尺寸。

px定义的字体,无法用浏览器字体放大功能。

em的值并不是固定的,会继承父级元素的字体大小,1 ÷ 父元素的font-size × 需要转换的像素值 = em值。

11. CSS中 link 和@import 的区别是什么?

a. link属于HTML标签,而@import是CSS提供的,且只能加载 CSS

b. 页面被加载时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载

c. import只在IE5以上才能识别,而link是HTML标签,无兼容问题

d. link方式的样式的权重 高于@import的权重

e. 当使用 Javascript 控制 DOM 去改变样式的时候,只能使用 link 方式,因为 @import 眼里只有 CSS ,不是 DOM 可以控制

12. position的absolute与fixed共同点与不同点

相同:

a. 改变行内元素的呈现方式,display被置为block

b. 让元素脱离普通流,不占据空间

c. 默认会覆盖到非定位元素上

区别:

absolute的”根元素“是可以设置的,而fixed的”根元素“固定为浏览器窗口。

当你滚动网页,fixed元素与浏览器窗口之间的距离是不变的。

13. position的值, relative和absolute分别是相对于谁进行定位的?

absolute:生成绝对定位的元素,相对于 static 定位以外的第一个祖先元素进行定位

fixed:生成绝对定位的元素,相对于浏览器窗口进行定位。 (IE6不支持)

relative:生成相对定位的元素,相对于其在普通流中的位置进行定位

static:默认值。没有定位,元素出现在正常的流中

14. CSS3有哪些新特性?

CSS3实现圆角(border-radius),阴影(box-shadow),对文字加特效(text-shadow),线性渐变(gradient),变形(transform)

增加了更多的CSS选择器 多背景 rgba,在CSS3中唯一引入的伪元素是::selection,媒体查询,多栏布局

15. 为什么要初始化CSS样式?

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

当然,初始化样式会对SEO有一定的影响,但鱼和熊掌不可兼得,但力求影响最小的情况下初始化。

body,dl,dd,ul,ol,p,h1,h2,h3 , h4, h5 , h6, form, input , textarea , button{
padding: 0;
margin: 0;
}
body, button, input , textarea,select{
font:12px/1.5 'Microsoft YaHei' ," arial' , 'tahoma' ;
color:#666;
}
table {
border-collapse:collapse;
border-spacing:0;
}
ul,ol {
list-style: none;
}
a{
text-decoration: none;
color: inherit;
}
img{
border: none;
vertical-align: middle;
}

16. 解释下 CSS sprites原理,优缺点

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,

再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,

background-position可以用数字精确的定位出背景图片的位置。

优点:

a. 减少网页的http请求

b. 减少图片的字节

c. 解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不需要对每一个小元素进行命名

d. 更换风格方便,只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变。

缺点:

a. 在宽屏,高分辨率的屏幕下的自适应页面,你的图片如果不够宽,很容易出现背景断裂

b. CSS Sprites在开发的时候,要通过photoshop或其他工具测量计算每一个背景单元的精确位置

c. 在维护的时候比较麻烦,如果页面背景有少许改动,一般就要改这张合并的图片

17. 解释下浮动和它的工作原理?

a. 浮动元素脱离文档流,不占据空间(引起“高度塌陷”现象)

b. 浮动元素碰到包含它的边框或者浮动元素的边框停留。

18. 浮动元素引起的问题

a. 父元素的高度无法被撑开,影响与父元素同级的元素

b. 与浮动元素同级的非浮动元素会跟随其后

c. 若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构

19. 什么是 FOUC(无样式内容闪烁)?你如何来避免 FOUC?

如果使用import方法对CSS进行导入,会导致某些页面在Windows下的IE出现一些奇怪的现象:

以无样式显示页面内容的瞬间闪烁,这种现象称之为文档样式短暂失效(Flash of Unstyled Content),简称为FOUC。

原理:当样式表晚于结构性html加载,当加载到此样式表时,页面将停止之前的渲染。此样式表被下载和解析后,将重新渲染页面,也就出现了短暂的花屏现象。

解决方法:使用LINK标签将样式表放在文档HEAD中。

20. line-height三种赋值方式有何区别?(带单位、纯数字、百分比)

带单位:px不用计算,em则会使元素以其父元素font-size值为参考来计算自己的行高

纯数字:把比例传递给后代,例如父级行高为1.5,子元素字体为18px,则子元素行高为1.5*18=27px

百分比:将计算后的值传递给后代

21. :link、:visited、:hover、:active的执行顺序是怎么样的?

L-V-H-A,l(link)ov(visited)e h(hover)a(active)te,即用喜欢和讨厌两个词来概括

22. 经常遇到的浏览器兼容性有哪些?如何解决?

a. 浏览器默认的margin和padding不同

b. IE6双边距bug

c. 在ie6,ie7中元素高度超出自己设置高度。原因是IE8以前的浏览器中会给元素设置默认的行高的高度导致的

d. min-height在IE6下不起作用

e. 透明性IE用filter:Alpha(Opacity=60),而其他主流浏览器用 opacity:0.6

f. input边框问题,去掉input边框一般用border:none;就可以,但由于IE6在解析input样式时的BUG(优先级问题),在IE6下无效

23. 有哪项方式可以对一个DOM设置它的CSS样式?

a. 外部样式表:通过

标签引入一个外部css文件

b. 内部样式表:将css代码放在

<style>

标签内部

c. 内联样式:将css样式直接定义在 HTML 元素内部

24. 什么是外边距重叠?重叠的结果是什么?

外边距重叠就是margin-collapse。

在CSS当中,相邻的两个盒子(可能是兄弟关系也可能是祖先关系)的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠,并且因而所结合成的外边距称为折叠外边距。

折叠结果遵循下列计算规则:

a. 两个相邻的外边距都是正数时,折叠结果是它们两者之间较大的值。

b. 两个相邻的外边距都是负数时,折叠结果是两者绝对值的较大值。

c. 两个外边距一正一负时,折叠结果是两者的相加的和。

25. rgba()和opacity的透明效果有什么不同?

a. opacity作用于元素,以及元素内的所有内容的透明度,rgba()只作用于元素的颜色或其背景色。

b. 设置rgba透明的元素的子元素不会继承透明效果!

26. css属性content有什么作用?有什么应用?

css的content属性专门应用在 before/after 伪元素上,用于来插入生成内容。

可以配合自定义字体显示特殊符号。

27.介绍一下标准的CSS的盒子模型?与低版本IE的盒子模型有什么不同的?

标准盒子模型:宽度=内容的宽度(content)+ border + padding + margin
低版本IE盒子模型:宽度=内容宽度(content+border+padding)+ margin

28.box-sizing属性?

用来控制元素的盒子模型的解析模式,默认为content-box
context-box:W3C的标准盒子模型,设置元素的 height/width 属性指的是content部分的高/宽
border-box:IE传统盒子模型。设置元素的height/width属性指的是border + padding + content部分的高/宽

JS

1.call 和 apply 的区别是什么,哪一个性能更好

fn.call(obj, 10,20,30);
fn.apply(obj, [10,20,30]);

都是function原型上的方法,都是用来改变函数中指向的
call接受多个参数,apply接收两个参数
还有类似功能的bind,不会立即执行而是预处理

在三个参数以内的时候差不多,超过三个参数的时候call性能更好

性能优化

性能优化有三大方面:

一、network

1.减少请求数据,传输数据中垃圾数据,没有实际用途的数据,没有使用上的数据

2.减少数据请求次数,某些接口存在多次请求(例如,使用组件upload时输入了action属性后又写了实际的上传方法调用接口,导致多次请求接口),用户刷新数据的按钮被多次触发,解决方案是防抖节流,在一定时间内的一定时间里多次请求数据的事件只发送最后一次

3.在有文件上传下载的系统中,最大的性能问题就是文件上传下载(之前项目中有G单位数据,采用方法是联合第三方服务_腾讯桶)大量数据上传下载将事件全部交给前端,前端传到其他数据库,不占用后端性能

4.将不用实时刷新,变动不大的数据缓存

二、DOM

1.减少直接对dom节点操作,dom和ECMAscript在浏览器中由不同模块实现,操作dom就是用js代码影响dom,在两个不同的模块中相互调用,如果有多次的调用dom,合并成一次操作,减少重绘重排

2.避免使用CSS表达式,高频率计算多次样式

3.CSS应该放在顶部,在head里面使用link引入外部样式表,让样式逐步渲染

4.使用css3代替js动画

三、构建

1.将css文件放在head里面,将js文件放在body后面,防止js阻塞

2.删除没有用的图片,js文件,css文件等静态文件

3.webpack打包优化:
剥离node_modules
剥离js与css,less文件
分离第三方类库 DllPlugin 和 DllReferencePlugin
利用缓存加速二次构建
利用scope histing (变量提升) 减少代码闭包形成
Tree shaking 删除没用的函数或者变量
压缩图片文件大小

4.使用CDN加速引入资源

5.尽量使用异步操作,放置阻塞,上面的代码无法完成就无法执行下面的代码

6.避免使用eval方法,压缩后容易代码错乱

7.将重复性的代码剥离成组件

四、闭包

MDN
闭包是由函数以及声明该函数的词法环境组合而成的。该环境包含了这个闭包创建时作用域内的任何局部变量。闭包将函数与其所操作的某些数据(环境)关联起来。
《JavaScript权威指南》
从技术的角度讲,所有的 JavaScript 函数都是闭包。
ECMAScript
从理论角度:所有的函数。因为它们都在创建的时候就将上层上下文的数据保存起来了。哪怕是简单的全局变量也是如此,因为函数中访问全局变量就相当于是在访问自由变量,这个时候使用最外层的作用域。
从实践角度:以下函数才算是闭包:
I. 即使创建它的上下文已经销毁,它仍然存在(比如,内部函数从父函数中返回)
II. 在代码中引用了自由变量

实践意义上的闭包

I. 即使创建它的上下文已经销毁(弹出上下文栈),它仍然存在(比如,内部函数从父函数中返回)
II. 在代码中引用了自由变量

function a() {
    var i = 0;
    function b() {
        alert(++i);
    }
    return b;
}
var c = a();
c();

总结

good morning
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值