关于前端常用需要了解的一些问题

it2026-01-29  5

 

一、HTML+CSS

1、img的清除默认边框

当img中间无图片时显示默认边框,在firefox中是没有的,但是Chrome中显示,尝试用border:0无效

可以使用属性选择器设置opacity为空

img[src=""],img:not([src]){ opacity:0; }

 

2、常用的布局方式

1.固定布局

宽度,高度固定,页面被一个固定网页包裹,容器不能移动,页面的宽高不随页面的变化而变化,这种布局大家比较熟悉,这种方式一度成为页面布局的主流方式,这样布局设计简单,更容易定义,但是由于屏幕尺寸的不同,特别是移动端各个设备的不同,这种布局在灵活性方式可用度不高。

2.流式布局

以百分比为主要形式,让屏幕自适应,这种布局方式定义灵活,能够根据屏幕的情况变化,但是这种方式设计的效果不太容易控制,一般移动端结合rem用的比较多,pc端用的不是非常多

3.弹性布局

浮动部分和清楚浮动部分主要是兼容添加的一些代码,重点看弹性布局的部分,弹性布局相对前两种出现的比较晚些,但是弹性布局功能还是很强大的,布局也非常方便,但是此布局形式在pc端并不推荐使用,ie9以下浏览器均不支持,另外火狐等一些浏览器也需要做兼容,移动端目前绝大部分浏览器都已经支持弹性布局,在移动端大家可以尝试使用。

4.浮动布局

浮动布局关键词,float,可以设置left或者right,他使元素脱离文档流进而达到布局的目的,也是目前一个比较主流的布局方式,但是使用浮动的结束以后,别忘记清除浮动哦。

5.定位布局

定位布局也是目前比较常用的一种布局方式,关键词: position: fixed;固定布局,将元素固定在一个位置,不随页面移动而移动,position: relative;相对定位,相对于元素自身定位,不脱离文档流,相当于定义一个参照物,一般和绝对定位结合使用,position: absolute;绝对定位,脱离文档流,一般和相对定位结合使用,如果不定义相对定义,将会相对于整个浏览器定位,所以定位布局,一般情况下都是相对定位和绝对定位结合着来,相当定位相当于划定一个势力范围,制定一个封闭的容器块,然后绝对定位就行对于相对定位来定位,从而达到有效的布局。

3、实现居中的几种方法

1、水平居中:给 div 设置一个宽度,然后添加 margin:0auto 属性

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

2、水平居中,利用 text-align:center 实现

.container { background: rgba(0, 0, 0, 0.5); text-align: center; font-size: 0; } .box { display: inline-block; width: 500px; height: 400px; background-color: pink; }

3、让绝对定位的 div 居中

div { position: absolute; width: 300px; height: 300px; margin: auto; top: 0; left: 0; bottom: 0; right: 0; background-color: pink; /*方便看效果*/ }

4、水平垂直居中

//水平垂直居中一 /*确定容器的宽高宽500高300的层设置层的外边距 div{*/ position:absolute;/*绝对定位*/ width:500px; height:300px; top:50%; left:50%; margin:-150px00-250px;/*外边距为自身宽高的一半*/ background-color:pink;/*方便看效果*/ } //水平垂直居中二 /*未知容器的宽高,利用`transform`属性*/ div { position: absolute; /*相对定位或绝对定位均可*/ width: 500px; height: 300px; top: 50%; left: 50%; transform: translate(-50%,-50%); background-color: pink; /*方便看效果*/ } //水平垂直居中三 /*利用flex布局实际使用时应考虑兼容性*/ .container { display: flex; align-items: center; /*垂直居中*/ justify-content: center; /*水平居中*/ } .containerdiv { width: 100px; height: 100px; background-color: pink; /*方便看效果*/ } //水平垂直居中四 /*利用text-align:center和vertical-align:middle属性*/ .container { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.5); text-align: center; font-size: 0; white-space: nowrap; overflow: auto; } .container::after { content: ""; display: inline-block; height: 100%; vertical-align: middle; } .box { display: inline-block; width: 500px; height: 400px; background-color: pink; white-space: normal; vertical-align: middle; }

总结:一般常见的几种居中的方法有: 对于宽高固定的元素 (1)我们可以利用margin:0auto来实现元素的水平居中。 (2)利用绝对定位,设置四个方向的值都为0,并将margin设置为auto,由于宽高固定,因此对应方向实现平分,可以实现水平和垂直方向上的居中。

(3)利用绝对定位,先将元素的左上角通过top:50%和left:50%定位到页面的中心,然后再通过margin负值来调整元素的中心点到页面的中心。 (4)利用绝对定位,先将元素的左上角通过top:50%和left:50%定位到页面的中心,然后再通过translate来调整元素的中心点到页面的中心。 (5)使用flex布局,通过align-items:center和justify-content:center设置容器的垂直和水平方向上为居中对齐,然后它的子元素也可以实现垂直和水平的居中。

4、css的几种选择器及优先级

不同级别 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。 作为style属性写在元素内的样式 id选择器 类选择器 元素选择器 通配符选择器 浏览器自定义或继承 总结排序:!important > 行内样式 > ID选择器 > 类选择器 > 元素 > 通配符 > 继承 > 浏览器默认属性。

同一级别

(1) 同一级别中后写的会覆盖先写的样式

(2) 同一级别css引入方式不同,优先级不同 总结排序:内联(行内)样式 > 内部样式表 > 外部样式表 > 导入样式(@import)。

对于选择器优先级,还可以通过计算权重值来比较。

5、清除浮动有几种方法

父级div定义height结尾处加空div标签clear:both父级div定义伪类:after和zoom父级div定义overflow:hidden父级div也浮动,需要定义宽度结尾处加br标签clear:both比较好的是第3种方式,好多网站都这么用

 

6、对 BFC 规范(块级格式化上下文:blockformattingcontext)的理解?

块格式化上下文(BlockFormattingContext,BFC)是Web页面的可视化CSS渲染的一部分,是布局过程 中生成块级盒  子的区域,也是浮动元素与其他元素的交互限定区域。  通俗来讲 :            •BFC是一个独立的布局环境,可以理解为一个容器,在这个容器中按照一定规则进行物品摆放,并且不会影响 其它环境中的物品。              •如果一个元素符合触发BFC的条件,则BFC中的元素布局不受外部影响。  创建BFC  (1)根元素或包含根元素的元素  (2)浮动元素float=left|right或inherit(≠none)  (3)绝对定位元素position=absolute或fixed  (4)display=inline-block|flex|inline-flex|table-cell或table-caption  (5)overflow=hidden|auto或scroll(≠visible) 

回答:

BFC指的是块级格式化上下文,一个元素形成了BFC之后,那么它内部元素产生的布局不会影响到外部元素, 外部元素的布局也 不会影响到BFC中的内部元素。一个BFC就像是一个隔离区域,和其他区域互不影响。  一般来说根元素是一个BFC区域,浮动和绝对定位的元素也会形成BFC,display属性的值为inline- block、flex这些  属性时也会创建BFC。还有就是元素的overflow的值不为visible时都会创建BFC。 

7、position的值, relative和absolute定位原点是

absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位fixed:生成绝对定位的元素,相对于浏览器窗口进行定位relative:生成相对定位的元素,相对于其正常位置进行定位static 默认值。没有定位,元素出现在正常的流中inherit 规定从父元素继承 position 属性的值

8、PNG,GIF,JPG的区别及如何选

GIF

8位像素,256色无损压缩支持简单动画支持boolean透明适合简单动画

JPEG

颜色限于256有损压缩可控制压缩质量不支持透明适合照片

PNG

有PNG8和truecolor PNGPNG8类似GIF颜色上限为256,文件小,支持alpha透明度,无动画适合图标、背景、按钮

9、CSS3动画(简单动画的实现,如旋转等)

依靠CSS3中提出的三个属性:transition、transform、animationtransition:定义了元素在变化过程中是怎么样的,包含transition-property、transition-duration、transition-timing-function、transition-delay。transform:定义元素的变化结果,包含rotate、scale、skew、translate。animation:动画定义了动作的每一帧(@keyframes)有什么效果,包括animation-name,animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction

10、base64的原理及优缺点

优点可以加密,减少了http请求缺点是需要消耗CPU进行编解码

11、css盒子模型

有两种, IE盒子模型、W3C盒子模型;盒模型: 内容(content)、填充(padding)、边界(margin)、 边框(border);区 别: IE的content部分把 border 和 padding计算了进去;

12、stylus/sass/less区别

均具有“变量”、“混合”、“嵌套”、“继承”、“颜色混合”五大基本特性Scss和LESS语法较为严谨,LESS要求一定要使用大括号“{}”,Scss和Stylus可以通过缩进表示层次与嵌套关系Scss无全局变量的概念,LESS和Stylus有类似于其它语言的作用域概念Sass是基于Ruby语言的,而LESS和Stylus可以基于NodeJS NPM下载相应库后进行编译

13、CSS 优化、提高性能的方法有哪些? 

加载性能:

(1)css压缩:将写好的css进行打包压缩,可以减少很多的体积。  (2)css单一样式:当需要下边距和左边距的时候,很多时候选择:margin:top0bottom0;但margin- bottom:bot tom;margin-left:left;执行的效率更高。  (3)减少使用@import,而建议使用link,因为后者在页面加载时一起加载,前者是等待页面加载完成之后 再进行加载。 

选择器性能: 

(1)关键选择器(keyselector)。选择器的最后面的部分为关键选择器(即用来匹配目标元素的部分)。 CSS选择符是从右到左进行匹配的。当使用后代选择器的时候,浏览器会遍历所有子元素来确定是否是指定的元素等等;  (2)如果规则拥有ID选择器作为其关键选择器,则不要为规则增加标签。过滤掉无关的规则(这样样式系统 就不会浪费时间去匹 配它们了)。  (3)避免使用通配规则,如*{}计算次数惊人!只对需要用到的元素进行选择。  (4)尽量少的去对标签进行选择,而是用class。  (5)尽量少的去使用后代选择器,降低选择器的权重值。后代选择器的开销是最高的,尽量将选择器的深度 降到最低,最高不要超过 三层,更多的使用类来关联每一个标签元素。  (6)了解哪些属性是可以通过继承而来的,然后避免对这些属性重复指定规则。 渲染性能:  (1)慎重使用高性能属性:浮动、定位。  (2)尽量减少页面重排、重绘。  (3)去除空规则:{}。空规则的产生原因一般来说是为了预留样式。去除这些空规则无疑能减少css文档体积。  (4)属性值为0时,不加单位。  (5)属性值为浮动小数0.**,可以省略小数点之前的0。  (6)标准化各种浏览器前缀:带浏览器前缀的在前。标准属性在后。  (7)不使用@import前缀,它会影响css的加载速度。  (8)选择器优化嵌套,尽量避免层级过深。  (9)css雪碧图,同一页面相近部分的小图标,方便使用,减少页面的请求次数,但是同时图片本身会变大, 使用时,优劣考虑清 楚,再使用。  (10)正确使用display的属性,由于display的作用,某些样式组合会无效,徒增样式体积的同时也影响 解析性能。  (11)不滥用web字体。对于中文网站来说WebFonts可能很陌生,国外却很流行。webfonts通常体积庞 大,而且一些浏  览器在下载webfonts时会阻塞页面渲染损伤性能。 可维护性、健壮性:  (1)将具有相同属性的样式抽离出来,整合并通过class在页面中进行使用,提高css的可维护性。  (2)样式与内容分离:将css代码定义到外部css中。 

14、在网页中应该使用奇数还是偶数的字体?为什么呢

(1)偶数字号相对更容易和web设计的其他部分构成比例关系。比如:当我用了14px的正文字号,我可能会 在一些地方用14 ×0.5=7px的margin,在另一些地方用14×1.5=21px的标题字号。  (2)浏览器缘故,低版本的浏览器ie6会把奇数字体强制转化为偶数,即13px渲染为14px。  (3)系统差别,早期的Windows里,中易宋体点阵只有12和14、15、16px,唯独缺少13px。 

15、怎么让 Chrome 支持小于 12px 的文字? 

在谷歌下css设置字体大小为12px及以下时,显示都是一样大小,都是默认12px。  (1)可以使用Webkit的内核的-webkit-text-size-adjust的私有CSS属性来解决,只要加了-webkit- text-size -adjust:none;字体大小就不受限制了。但是chrome更新到27版本之后就不可以用了。所以高版本chrome 谷歌浏览器 已经不再支持-webkit-text-size-adjust样式,所以要使用时候慎用。  (2)还可以使用css3的transform缩放属性-webkit-transform:scale(0.5); 注意-webkit- transform:scale(0. 75);收缩的是整个元素的大小,这时候,如果是内联元素,必须要将内联元素转换成块元素,可以使用 display:block/ inline-block/...;  (3)使用图片:如果是内容固定不变情况下,使用将小于12px文字内容切出做图片,这样不影响兼容也不影响美观。

16、阐述一下 CSS Sprites

将一个页面涉及到的所有图片都包含到一张大图中去,然后利用CSS的background-image,background- repeat,background -position的组合进行背景定位。利用CSSSprites能很好地减少网页的http请求,从而很好的提高页面的 性能;CSSSprites 能减少图片的字节。  优点:      减少HTTP请求数,极大地提高页面加载速度      增加图片信息重复度,提高压缩比,减少图片大小      更换风格方便,只需在一张或几张图片上修改颜色或样式即可实现  缺点:      图片合并麻烦      维护麻烦,修改一个图片可能需要重新布局整个图片  

17、常见的元素隐藏方式?

(1)使用 display:none;隐藏元素,渲染树不会包含该渲染对象,因此该元素不会在页面中占据位 置,也不会响应绑定的监听事件。  (2)使用 visibility:hidden;隐藏元素。元素在页面中仍占据空间,但是不会响应绑定的监听事件。  (3)使用 opacity:0;将元素的透明度设置为 0,以此来实现元素的隐藏。元素在页面中仍然占据空 间,并且能够响应元素绑定的监听事件。  (4)通过使用绝对定位将元素移除可视区域内,以此来实现元素的隐藏。  (5)通过 z-index 负值,来使其他元素遮盖住该元素,以此来实现隐藏。  (6)通过 clip/clip-path 元素裁剪的方法来实现元素的隐藏,这种方法下,元素仍在页面中占据位 置,但是不会响应绑定的监听事件。  (7)通过 transform:scale(0,0)来将元素缩放为 0,以此来实现元素的隐藏。这种方法下,元素仍在页 面中占据位置,但是不会响应绑定的监听事件

18、css3新增了那些属性

css3新增边框属性

       1、css3新增属性之border-color:为边框设置多种颜色   

       2、css3新增属性之border-image:图片边框

       3、css3新增属性之border-radius:圆角边框      

       4、css3新增属性之box-shadow:阴影效果

css3新增背景属性

       1、css3新增属性之background-size:指定背景图片尺寸

     在 CSS3 之前,背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中,可以规定背景图片的尺寸,这就允许我们在不同的环境中重复使用背景图片。您能够以像素或百分比规定尺寸。如果以百分比规定尺寸,那么尺寸相对于父元素的宽度和高度。

       2、css3新增属性之background-origin:指定背景图片从哪里开始显示

背景图片可以放置于 content-box、padding-box 或 border-box 区域。

css3新增文字效果

        1、css3新增属性之text-shadow:文本阴影

        2、css3新增属性之word-wrap:自动换行

单词太长的话就可能无法超出某个区域,允许对长单词进行拆分,并换行到下一行

css3新增动画效果

        1、transform变换效果:

css3提供了元素变形效果,也叫做变换。它可以将元素实现旋转、缩放和平移的功能。

属性值:(1)transform ;(2)transform-origin:transform-origin 属性可以设置变换的起点。默认情况下,使用元素的中心作为起点。

        2、animation动画效果

CSS3 提供了类似 Flash 关键帧控制的动画效果,通过 animation 属性实现。那么之前的 transition 属性只能通过指定属性的初始状态和结束状态来实现动画效果,有一定的局限性。

animation 实现动画效果主要由两个部分组成:1、通过类似 Flash 动画中的关键帧声明一个动画;2、在 animation 属性中调用关键帧声明的动画。

css3新增过渡效果

       1、transition过渡效果

过渡效果一般是通过一些简单的 CSS 动作触发平滑过渡功能,比如::hover、:focus、:active、:checked 等。CSS3 提供了 transition 属性来实现这个过渡功能。

20、Html5新增特性

1. 语义化标签

2. 增强型表单 (1)新的表单输入类型 (2)新表单元素 (3)新表单属性 

3. 视频和音频

4. Canvas绘图(图形、路径、文本、渐变、图像)

5. SVG绘图 (与Canvas的区别)

6. 地理定位

7. 拖放API

8. Web Worker

完整的Web Worker实例

9. Web Storage

10. Web Socket

11.其他

<a>标签.html5的a标签增加了download属性,可利用此属性实现图片下载.

 

详细内容:https://www.cnblogs.com/sarah-wen/p/10767178.html

二、javascript

1、闭包

闭包就是能够读取其他函数内部变量的函数。 即实现一个暴露内部变量,而且外部可以访问修改的函数

闭包是指有权访问另一个函数作用域中变量的函数,创建闭包的最常见的方式就是在一个函数内创建另一个函数,通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域

闭包的特性:

函数内再嵌套函数内部函数可以引用外层的参数和变量参数和变量不会被垃圾回收机制回收

说说你对闭包的理解

使用闭包主要是为了设计私有的方法和变量。闭包的优点是可以避免全局变量的污染,缺点是闭包会常驻内存,会增大内存使用量,使用不当很容易造成内存泄露。在js中,函数即闭包,只有函数才会产生作用域的概念

闭包 的最大用处有两个,一个是可以读取函数内部的变量,另一个就是让这些变量始终保持在内存中

闭包的另一个用处,是封装对象的私有属性和私有方法

好处:能够实现封装和缓存等;

坏处:就是消耗内存、不正当使用会造成内存溢出的问题

使用闭包的注意点

由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露解决方法是,在退出函数之前,将不使用的局部变量全部删除

2、说说你对作用域链的理解

作用域链的作用是保证执行环境里有权访问的变量和函数是有序的,作用域链的变量只能向上访问,变量访问到window对象即被终止,作用域链向下访问变量是不被允许的简单的说,作用域就是变量与函数的可访问范围,即作用域控制着变量与函数的可见性和生命周期

3、JavaScript原型,原型链 ? 有什么特点?

     每个对象都会在其内部初始化一个属性,就是prototype(原型),当我们访问一个对象的属性时,如果这个对象内部不存在这个属性,那么他就会去prototype里找这个属性,这个prototype又会有自己的prototype,于是就这样一直找下去,也就是我们平时所说的原型链的概念。

关系:instance.constructor.prototype = instance.__proto__

特点;

JavaScript对象是通过引用来传递的,我们创建的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时,与之相关的对象也会继承这一改变,当我们需要一个属性的时,Javascript引擎会先看当前对象中是否有这个属性, 如果没有的,就会查找他的Prototype对象是否有这个属性,如此递推下去,一直检索到 Object 内建对象。

图解:

     

4、请解释什么是事件代理

事件代理(Event Delegation),又称之为事件委托。是 JavaScript 中常用绑定事件的常用技巧。顾名思义,“事件代理”即是把原本需要绑定的事件委托给父元素,让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。使用事件代理的好处是可以提高性能可以大量节省内存占用,减少事件注册,比如在table上代理所有td的click事件就非常棒可以实现当新增子对象时无需再次对其绑定

5、Javascript如何实现继承?

1.原型链

基本思想:利用原型让一个引用类型继承另外一个引用类型的属性和方法。

构造函数,原型,实例之间的关系:每个构造函数都有一个原型对象,原型对象包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针。

2.借用构造函数

基本思想:在子类型构造函数的内部调用超类构造函数,通过使用call()和apply()方法可以在新创建的对象上执行构造函数。

3.组合继承

基本思想:将原型链和借用构造函数的技术组合在一块,从而发挥两者之长的一种继承模式。

4.原型式继承

基本想法:借助原型可以基于已有的对象创建新对象,同时还不必须因此创建自定义的类型。

5.寄生式继承

基本思想:创建一个仅用于封装继承过程的函数,该函数在内部以某种方式来增强对象,最后再像真正是它做了所有工作一样返回对象。

6.寄生组合式继承

基本思想:通过借用函数来继承属性,通过原型链的混成形式来继承方法

详细类容:https://www.jb51.net/article/81766.htm

6、谈谈This对象的理解

this总是指向函数的直接调用者(而非间接调用者)如果有new关键字,this指向new出来的那个对象在事件中,this指向触发这个事件的对象,特殊的是,IE中的attachEvent中的this总是指向全局对象Window

7、改变This指向有哪些方法

1.call()和apply()

    两中方法都能改变this指向,很类似,区别主要是第二个以后参数,

      call():第一个参数表示要把this指向的新目标,第二个之后的参数其实相当于传参,参数以,隔开    (性能较apply略好)

        用法:a.call(b,1,2);   表示要把a函数的this指向修改为b的this指向,并且运行a函数,传进去的参数是(1,2)

      apply(): 第一个参数同上,第二个参数接受一个数组,里面也是传参,只是以数组的方式,相当于arguments

        用法:a.apply(b,[1,2]);  表示要把a函数的this指向修改为b的this指向,并且运行a函数,传进去的参数是(1,2)注意  :即使只有一个参数的话,也要是数组的形式

//call 的传参和apply的传参 function say(arg1,arg2){ console.log(this.name,arg1,arg2); }; var obj = { name : 'tom', say : function(){ console.log(this.name); } } say.call(obj,'one','two');//tom one two say.spply(obj,['one','two']);//tom one two 效果一样

2.bind()

    作用:bind()方法会创建一个新函数,称为绑定函数,当调用这个绑定函数时,绑定函数会以创建它时传入 bind()方法的第一个参数作为 this,传入 bind() 方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数。

     用法:

var foo = { bar : 1, eventBind: function(){ $('.someClass').on('click',function(event) { /* Act on the event */ console.log(this.bar); //1 }.bind(this));//这里的this是eventBind的this,即指向的是foo } }

 注意:多次bind无效,按第一次算

总结一下

  apply 、 call 、bind 三者都是用来改变函数的this对象的指向的;    apply 、 call 、bind 三者第一个参数都是this要指向的对象,也就是想指定的上下文;    apply 、 call 两者都可以利用后续参数传参; 但是传参的方式不一样,apply是数组,call是正常传参形式   bind 是返回对应函数,便于稍后调用;apply 、call 则是立即调用 。

3、new 和return改变指向。。。谁调用指向谁

8、new操作符具体干了什么呢?

创建一个空对象,并且 this 变量引用该对象,同时还继承了该函数的原型属性和方法被加入到 this 引用的对象中新创建的对象由 this 所引用,并且最后隐式的返回 this

9、Ajax原理

Ajax的原理简单来说是在用户和服务器之间加了—个中间层(AJAX引擎),通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面。使用户操作与服务器响应异步化。这其中最关键的一步就是从服务器获得请求数据Ajax的过程只涉及JavaScript、XMLHttpRequest和DOM。XMLHttpRequest是ajax的核心机制 // 1. 创建连接 var xhr = null; xhr = new XMLHttpRequest() // 2. 连接服务器 xhr.open('get', url, true) // 3. 发送请求 xhr.send(null); // 4. 接受请求 xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ if(xhr.status == 200){ success(xhr.responseText); } else { // fail fail && fail(xhr.status); } } }

ajax 有那些优缺点?

优点: 通过异步模式,提升了用户体验.优化了浏览器和服务器之间的传输,减少不必要的数据往返,减少了带宽占用.Ajax在客户端运行,承担了一部分本来由服务器承担的工作,减少了大用户量下的服务器负载。Ajax可以实现动态不刷新(局部刷新)缺点: 安全问题 AJAX暴露了与服务器交互的细节。对搜索引擎的支持比较弱。不容易调试。

10、如何解决跨域问题?

jsonp、 iframe、window.name、window.postMessage、服务器上设置代理页面

 

11、用过哪些设计模式?

工厂模式:

工厂模式解决了重复实例化的问题,但还有一个问题,那就是识别问题,因为根本无法主要好处就是可以消除对象间的耦合,通过使用工程方法而不是new关键字

构造函数模式

使用构造函数的方法,即解决了重复实例化的问题,又解决了对象识别的问题,该模式与工厂模式的不同之处在于直接将属性和方法赋值给 this对象;

12、offsetWidth/offsetHeight,clientWidth/clientHeight与scrollWidth/scrollHeight的区别

offsetWidth/offsetHeight返回值包含content + padding + border,效果与e.getBoundingClientRect()相同clientWidth/clientHeight返回值只包含content + padding,如果有滚动条,也不包含滚动条scrollWidth/scrollHeight返回值包含content + padding + 溢出内容的尺寸

13、说说你对promise的了解

1、Promise是什么?

Promise是最早由社区提出和实现的一种解决异步编程的方案,比其他传统的解决方案(回调函数和事件)更合理和更强大。

ES6 将其写进了语言标准,统一了用法,原生提供了Promise对象。 ES6 规定,Promise对象是一个构造函数,用来生成Promise实例。

2、Promise是为解决什么问题而产生的?

promise是为解决异步处理回调金字塔问题而产生的

3、Promise的两个特点

      1、Promise对象的状态不受外界影响

         1)pending 初始状态

         2)fulfilled 成功状态

         3)rejected 失败状态

           Promise 有以上三种状态,只有异步操作的结果可以决定当前是哪一种状态,其他任何操作都无法改变这个状态

      2、Promise的状态一旦改变,就不会再变,任何时候都可以得到这个结果,状态不可以逆,只能由 pending变成fulfilled或者由pending变成rejected

4、Promise的三个缺点

1)无法取消Promise,一旦新建它就会立即执行,无法中途取消 2)如果不设置回调函数,Promise内部抛出的错误,不会反映到外部 3)当处于pending状态时,无法得知目前进展到哪一个阶段,是刚刚开始还是即将完成

5、Promise的几种方法

    1)Promise.catch

         Promise.prototype.catch方法是.then(null, rejection)的别名,用于指定发生错误时的回调函数。

   2) Promise.all 

        参数:接受一个数组,数组内都是Promise实例         返回值:返回一个Promise实例,这个Promise实例的状态转移取决于参数的Promise实例的状态变化。当参数中所有的实例都处于resolve状态时,返回的Promise实例会变为       resolve状态。如果参数中任意一个实例处于reject状态,返回的Promise实例变为reject状态

  3)Promise.resolve     

      返回一个Promise实例,这个实例处于resolve状态。       根据传入的参数不同有不同的功能:

      值(对象、数组、字符串等):作为resolve传递出去的值      Promise实例:原封不动返回

4)Promise.reject

     返回一个Promise实例,这个实例处于reject状态。

     参数一般就是抛出的错误信息。

5) Promise.race

      参数:接受一个数组,数组内都是Promise实例      返回值:返回一个Promise实例,这个Promise实例的状态转移取决于参数的Promise实例的状态变化。当参数中任何一个实例处于resolve状态时,返回的Promise实例会变为           resolve状态。如果参数中任意一个实例处于reject状态,返回的Promise实例变为reject状态。

详细类容:https://www.jianshu.com/p/002003a38e89

14、谈谈你对AMD、CMD的理解

CommonJS是服务器端模块的规范,Node.js采用了这个规范。CommonJS规范加载模块是同步的,也就是说,只有加载完成,才能执行后面的操作。AMD规范则是非同步加载模块,允许指定回调函数AMD推荐的风格通过返回一个对象做为模块对象,CommonJS的风格通过对module.exports或exports的属性赋值来达到暴露模块对象的目的

es6模块 CommonJS、AMD、CMD

CommonJS 的规范中,每个 JavaScript 文件就是一个独立的模块上下文(module context),在这个上下文中默认创建的属性都是私有的。也就是说,在一个文件定义的变量(还包括函数和类),都是私有的,对其他文件是不可见的。CommonJS是同步加载模块,在浏览器中会出现堵塞情况,所以不适用AMD 异步,需要定义回调define方式es6 一个模块就是一个独立的文件,该文件内部的所有变量,外部无法获取。如果你希望外部能够读取模块内部的某个变量,就必须使用export关键字输出该变量 es6还可以导出类、方法,自动适用严格模式

15、那些操作会造成内存泄漏?

内存泄漏指任何对象在您不再拥有或需要它之后仍然存在setTimeout 的第一个参数使用字符串而非函数的话,会引发内存泄漏闭包、控制台日志、循环(在两个对象彼此引用且彼此保留时,就会产生一个循环)

16、介绍js的基本数据类型

Undefined、Null、Boolean、Number、String

17、介绍js有哪些内置对象?

Object 是 JavaScript 中所有对象的父对象数据封装类对象:Object、Array、Boolean、Number 和 String其他对象:Function、Arguments、Math、Date、RegExp、Error

18、说几条写JavaScript的基本规范?

不要在同一行声明多个变量请使用===/!==来比较true/false或者数值使用对象字面量替代new Array这种形式不要使用全局函数Switch语句必须带有default分支If语句必须使用大括号for-in循环中的变量 应该使用var关键字明确限定作用域,从而避免作用域污

19、JavaScript有几种类型的值?,你能画一下他们的内存图吗?

栈:原始数据类型(Undefined,Null,Boolean,Number、String)堆:引用数据类型(对象、数组和函数)两种类型的区别是:存储位置不同;原始数据类型直接存储在栈(stack)中的简单数据段,占据空间小、大小固定,属于被频繁使用数据,所以放入栈中存储;引用数据类型存储在堆(heap)中的对象,占据空间大、大小不固定,如果存储在栈中,将会影响程序运行的性能;引用数据类型在栈中存储了指针,该指针指向堆中该实体的起始地址。当解释器寻找引用值时,会首先检索其在栈中的地址,取得地址后从堆中获得实体

 

20、javascript创建对象的几种方式?

javascript创建对象简单的说,无非就是使用内置对象或各种自定义对象,当然还可以用

JSON;但写法有很多种,也能混合使用

对象字面量的方式 person={firstname:"Mark",lastname:"Yun",age:25,eyecolor:"black"}; 用function来模拟无参的构造函数 function Person(){} var person=new Person();//定义一个function,如果使用new"实例化",该function可以看作是一个Class person.name="Mark"; person.age="25"; person.work=function(){ alert(person.name+" hello..."); } person.work(); 用function来模拟参构造函数来实现(用this关键字定义构造的上下文属性) function Pet(name,age,hobby){ this.name=name;//this作用域:当前对象 this.age=age; this.hobby=hobby; this.eat=function(){ alert("我叫"+this.name+",我喜欢"+this.hobby+",是个程序员"); } } var maidou =new Pet("麦兜",25,"coding");//实例化、创建对象 maidou.eat();//调用eat方法 用工厂方式来创建(内置对象) var wcDog =new Object(); wcDog.name="旺财"; wcDog.age=3; wcDog.work=function(){ alert("我是"+wcDog.name+",汪汪汪......"); } wcDog.work(); 用原型方式来创建 function Dog(){ } Dog.prototype.name="旺财"; Dog.prototype.eat=function(){ alert(this.name+"是个吃货"); } var wangcai =new Dog(); wangcai.eat(); 用混合方式来创建 function Car(name,price){ this.name=name; this.price=price; } Car.prototype.sell=function(){ alert("我是"+this.name+",我现在卖"+this.price+"万元"); } var camry =new Car("凯美瑞",27); camry.sell();

 

21、eval是做什么的?

它的功能是把对应的字符串解析成JS代码并运行应该避免使用eval,不安全,非常耗性能(2次,一次解析成js语句,一次执行)由JSON字符串转换为JSON对象的时候可以用eval,var obj =eval('('+ str +')')

22、null,undefined 的区别?

undefined 表示不存在这个值。

undefined :是一个表示"无"的原始值或者说表示"缺少值",就是此处应该有一个值,但是还没有定义。当尝试读取时会返回 undefined

例如变量被声明了,但没有赋值时,就等于undefined

null 表示一个对象被定义了,值为“空值”

null : 是一个对象(空对象, 没有任何属性和方法)

例如作为函数的参数,表示该函数的参数不是对象;

在验证null时,一定要使用 === ,因为 ==无法分别null 和 undefined

 

 

三、HTTP

1、从浏览器地址栏输入url到显示页面的步骤

浏览器根据请求的URL交给DNS域名解析,找到真实IP,向服务器发起请求;服务器交给后台处理完成后返回数据,浏览器接收文件(HTML、JS、CSS、图象等);浏览器对加载到的资源(HTML、JS、CSS等)进行语法解析,建立相应的内部数据结构(如HTML的DOM);载入解析到的资源文件,渲染页面,完成。四、jQuery

五、Node

六、web综合问题

 

:新手上路,多关照,有不足请指出

明天继续跟新

最新回复(0)