一、css的居中方式

摘自，CSS居中方式总结_明月落乌江的博客-CSDN博客_css居中

1）行内元素水平居中

给父元素设置text-algin:center后，可以实现子元素水平居中

对行内元素(inline)，行内块(inline-block)，行内表(inline-table)，inline-flex也有效果。

2）块级元素水平居中

a.给元素设置margin:0 auto,可以实现元素本身居中

b.子绝父相后：

left:50%;margin-left:一半长度

left:50%;;transform: translateX(-50%);

3）多块级元素水平居中

a.给父元素设置text-algin:center后，给多个块级元素同时设置inline-block，可以实现多个元素挨着居中

b.利用flex布局，给父元素设置display:flex，jusitify-content:center

4）单行行内元素垂直居中

将height和line-height设置成相同的高度，可以实现元素垂直居中

5）多行元素垂直居中

a.利用表格布局的verticval-algin:middle来实现布局。父元素设置display:table，子元素设置成display:table-cel，vertical-algin:middle

b.利用flex布局diplay:flex，flex-direction:column，jusitify-content:center

6）块级元素垂直居中

在子绝父相的情况下：

top:50%;margin-top:-一半高度;或者top:50%;

transform: translateY(-50%);

二、px,em,rem,%

摘自px、em、rem和%的定义 - 蛋蛋超人z - 博客园

1）px

px单位的名称为像素，它是一个固定大小的单元。1px就是屏幕上的一个点

2）em

m单位的名称为相对长度单位，它是用来设置文本的字体尺寸的，相对于父级元素对象内文本的字体尺寸；如果没有人为设置当前对象内文本的字体尺寸，那么它相对的是浏览器默认的字体尺寸（16px）。

3）rem：

rem是css3新增的一个相对长度单位，它的出现是为了解决em的缺点，em可以说是相对于父级元素的字体大小，当父级元素字体大小改变时，又得重新计算。rem出现就可以解决这样的问题，rem只相对于根目录，即HTML元素。所以只要在html标签上设置字体大小，文档中的字体大小都会以此为参照标准，一般用于自适应布局。

4）%

%也很常见，它和em差不多一样，都是相对于父级元素。但%可以在很多属性中使用，比如：width、height、font-size等。而em是用来设置字体大小（font-size）的单位，width、height等属性是没有em单位的。

三、display的值和作用

摘自display的值和作用_CM22222的博客-CSDN博客_display有哪些值?说明他们的作用

1）display的值有

none，inline，block，list-item，inline-block，table，inline-table，table-caption，table-cell，table-row，table-row-group，table-column，table-column-group，table-footer-group，table-header-group，run-in，box，inline-box，flexbox，inline-flexbox，flex，inline-flex

2）作用

none：表示隐藏对象，与visibility属性的hidden值不同，display：none不为被隐藏的对象保留物理空间，会从文档流中移除，然visibility：hidden就保留

inline（默认值）：表示指定对象为内联元素。默认宽度为内容宽度，不可设置宽高，同行显示。

block：指定对象为块元素。默认宽度为父元素宽度，可设置宽高，换行显示。

list-item：指定对象为列表项目。像块类型元素一样显示，并添加样式列表标记。

inline-block：指定对象为内联块元素。默认宽度为内容宽度，可以设置宽高，同行显示。

table：指定对象作为块元素级的表格。类同于html标签table（CSS2）

inline-table：指定对象作为内联元素级的表格。类同于html标签table（CSS2）

table-caption：指定对象作为表格标题。类同于html标签caption（CSS2）

table-cell：指定对象作为表格单元格。类同于html标签td（CSS2）

table-row：指定对象作为表格行。类同于html标签tr（CSS2）

table-row-group：指定对象作为表格行组。类同于html标签tbody（CSS2）

table-column：指定对象作为表格列。类同于html标签col（CSS2）

table-column-group：指定对象作为表格列组显示。类同于html标签colgroup（CSS2）

table-header-group：指定对象作为表格标题组。类同于html标签thead（CSS2）

table-footer-group：指定对象作为表格脚注组。类同于html标签tfoot（CSS2）

run-in：根据上下文决定对象是内联对象还是块级对象。（CSS3）

box：将对象作为弹性伸缩盒显示。（伸缩盒的最老版本中属性）（CSS3）

inline-box：将对象作为内联块级弹性伸缩盒显示。（伸缩盒的最老版本中属性）（CSS3）

flexbox：将对象作为弹性伸缩盒显示。（伸缩盒的最老版本中属性）（CSS3）

inline-flexbox：将对象作为内联块级弹性伸缩盒显示。（伸缩盒的最老版本中属性）（CSS3）

flex：将对象作为弹性伸缩盒显示。（伸缩盒的最老版本中属性）（CSS3）

inline-flex：将对象作为内联块级弹性伸缩盒显示。（伸缩盒的最老版本中属性）（CSS3）

四、数组去重

1）先将原数组排序，在与相邻的进行比较，如果不同则存入新数组

            var arr=[1,4,9,1,2,7,8,3,3,7,8,9,5,6];var newArr=[];arr.sort(function(a,b){return a-b;});for(var i=0;i<arr.length;i++){if(arr[i]!=arr[i+1]){newArr.push(arr[i]);}}console.log(newArr)//[1, 2, 3, 4, 5, 6, 7, 8, 9]

2）遍历数组，查找新数组中有没有包含旧数组中的值

         //如果在新数组中没有找到。则push进去var arr=[1,1,1,2,3,4,4,2,5,5,5];var newArr=[];for(var i=0,len=arr.length;i<len;i++){if(!newArr.includes(arr[i])){newArr.push(arr[i]);}}console.log(newArr);

3）set方法

let arr = [1,1,2,3,4,4];
let mySet = new Set(arr);
let newArr = Array.from(mySet);
console.log(newArr);  //[1,2,3,4]

五、统计字符串中出现最多的字符

1）利用对象键不可重复

            var str="qqqwwerrrr";var obj={};for(var i=0;i<str.length;i++){if(str[i] in obj){obj[str[i]]++;}else{obj[str[i]]=1}            }var max=0;var char="";for(var k in obj){if(obj[k]>max){max=obj[k];char=k;}}console.log(max,char)//4 'r'

六、js垃圾回收机制

摘自JS垃圾回收机制_Sunsine_C的博客-CSDN博客_js垃圾回收机制

GC算法

垃圾回收机制的简写。可以找到内存中的垃圾，并释放和回收垃圾。

GC中的垃圾是什么？

程序中不再需要使用的对象
程序中不能再访问到的对象

GC算法是什么？

GC是一种机制，垃圾回收器完成具体的工作。

工作的内容就是查找垃圾释放空间、回收空间。
算法就是工作时查找和回收所遵循的规则

常见的GC算法

引用计数、标记整理、标记清除

七、页面渲染流程

摘自页面渲染流程_Mountain Ghost的博客-CSDN博客_页面渲染的过程

页面渲染的流程_XuJiaShuo777的博客-CSDN博客_页面渲染的全过程

dom节点和样式相结合后，构建呈现树，供浏览器解析绘制画面

一、dom树

浏览器把html代码解析成1个Dom树，html中的每个tag都是Dom树中的1个节点，根节点就是我们常用的document对象。dom树就是html结构，里面包含了所有的html tag，包括用JS添加的元素。

二、样式结构体

浏览器把所有样式(主要包括css和浏览器自带的样式设置)解析成样式结构体，在解析的过程中会去掉浏览器不能识别的样式。

三、呈现树 render tree

dom tree和样式结构体结合后构建呈现树(render tree),将每个节点与其对应的css样式结合。

四、绘制页面

一旦render tree构建完毕后，浏览器就根据render tree来绘制页面。

理解：

1.render tree可以粗犷的理解为加上了对应样式的dom树；

2. render tree不包含隐藏的节点(比如display:none的节点，还有head节点)，因为这些节点不会用于呈现，而且不会影响呈现的，所以就不会包含到render tree中。（不占位置，不影响布局）

3.visibility:hidden隐藏的元素还是会包含到render tree中的，因为visibility:hidden 会影响布局，会占有位置。（占位置，影响布局）

重绘（颜色变了就是重绘）

重新绘画（页面的重新渲染），对页面进行操作，如：更换颜色、更换背景，不改变页面布局，但是颜色或背景变了，就会重新渲染页面，这就是重绘。

重排（节点发生变化，高宽位置发生变化）

1）、添加或者删除可见的DOM元素；

2）、元素位置改变——display、float、position、overflow等等；

3）、元素尺寸改变——边距、填充、边框、宽度和高度

4）、内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变；

5）、页面渲染初始化；

6）、浏览器窗口尺寸改变——resize事件发生时；

如何减少和避免重排

重排的成本比重绘的高的多。一个节点的 Reflow 很有可能导致子节点，甚至父节点以及兄弟节点的 Reflow 。在一些高性能的电脑上也许还没什么，但是如果 Reflow 发生在手机上，那么这个过程是延慢加载和耗电的。----浏览器的渲染原理简介

1. 直接改变className，如果动态改变样式，则使用cssText（考虑没有优化的浏览器）；

2. 让要操作的元素进行”离线处理”，处理完后一起更新；

a) 使用DocumentFragment进行缓存操作,引发一次回流和重绘；
b) 使用display:none技术，只引发两次回流和重绘；
c) 使用cloneNode(true or false) 和 replaceChild 技术，引发一次回流和重绘；

3.不要经常访问会引起浏览器flush队列的属性，如果你确实要访问，利用缓存；

4. 让元素脱离动画流，减少回流的Render Tree的规模；

重排一定引起重绘，重绘不一定是因为发生了重排

八、http中的方法

摘自HTTP协议详解_一只咸鱼。。的博客-CSDN博客_http协议

GET 和 POST 的区别

GET 和 POST 其实没有本质区别，使用 GET 的场景完全可以使用 POST 代替，使用 POST 的场景一样可以使用 GET 代替。但是在具体的使用上，还是存在一些细节的区别

1）GET 习惯上会把客户端的数据通过 query string 来传输（body 部分是空的）；POST 习惯上会把客户端的数据通过 body 来传输（query string 部分是空的）

2）GET 习惯上用于从服务器获取数据；POST 习惯上是客户端给服务器提交数据

一般情况，程序员会把 GET 请求的处理，实现成“幂等”的；对于 POST 请求的处理，不要求实现成“幂等”

九、数组转字符串

1）遍历数组加入到新字符串中

            var arr=['q','w','e','r','t'];var str="";for(var i=0;i<arr.length;i++){str+=arr[i];}console.log(str);//qwert

2）利用join()

            var arr=['q','w','e','r','t'];var res=arr.join("");console.log(res)//qwert

十、连接两个数组

1）利用concat()

            var arr1=[1,2,3];var arr2=['a','b','c']console.log(arr1.concat(arr2))//[1, 2, 3, 'a', 'b', 'c']

十一、const用法

摘自JS中const的使用 - 码农教程

1.const用来定义常量，赋值之后不能再赋值，再次赋值会报错。

2.const不能只声明不赋值，会报错。

3.const常量含义是你不能改变其指向的对象。例如user对象不可以改变，但是你可以改变user对象下的属性。

const内存地址详解

对象count一开始只是0x10的地址，直接将count（给count重新赋值，指向一个新的对象）指向地址改为0x20会报错，const是常量，无法更改对象地址。

对象user一开始指向0x10地址，user有Name、Age、Height三个属性，此时修改属性Name='ttt'，user对象的地址未改变，不会报错。

十二、css定位

摘自谈谈fixed ，related ， absolute_yang114544的博客-CSDN博客

1）static静态定位

是HTML中默认的定位，符合常规文档流。

2）relative相对定位

相对定位是相对本身位置而言的，进行上下左右的偏移，但是他不脱离文档流。

3）absolute绝对定位

绝对定位是相对于父元素来定位的，如果没有父元素或者说父元素没有定位的情况下，会向上一直找寻参照物，直至最终的浏览器窗口，区别于相对定位，绝对定位会脱离文档流。

4）、fixe固定定位

固定定位（position：fixed），可理解为绝对定位中的一种特殊情况，即absolute包含fixed。它的特殊之处在于它不用像absolute疯狂“找爸爸”，它天生参照于浏览器窗口！当为对象设置固定定位后，该对象即处于浏览器窗口画面中的固定位置，无视文档长短、窗口大小和滚条滚动。

十三、float和absolute的区别

摘自float和absolute的区别_幼儿园编程的博客-CSDN博客_absolute和float区别

二者都会脱离文档流

float

float浮动，当元素通过float来脱离文档流时，虽然其他的元素会当其不存在，但其他元素的内容还是会把这个元素占的位置让出来。也就是该元素浮动在另外一个有文字内容的元素上时，文字内容并不会被浮动的元素覆盖，而是环绕在周围。

如下图紫色div为浮动元素，蓝色div中的内容会围绕在紫色div周围。因此可以说float这种属于半脱离文档流。float也常常用来实现文字的环绕效果

absolute

absolute脱离文档流的时候，其他元素和元素中的文本都会无视掉他，因此不会像float那样将其他元素的内容挤到旁边去

如下图紫色div（设置了透明度）会覆盖掉蓝色div的内容

十四、CSS3选择器

通配符选择器
类选择器
id选择器
元素选择器
属性选择器

①简单属性选择器：选择具有某个属性名的元素

②具体属性值选择器：选择具有指定属性键值对（属性名和属性值都要匹配）的元素

③子串匹配属性选择器：可以规定属性值包含什么字符串(*)或以什么字符串开头(^)/结尾($)

后代选择器
子元素选择器
兄弟选择器

①相邻兄弟选择器E+F

②通用兄弟选择器E~F

伪元素选择器

①:first-line/::first-line伪元素用于向文本的首行设置特殊样式,只能用于块级元素

②:first-letter/::first-letter伪元素用于向文本的首字母设置样式，只能用于块级元素

③:before/::before 在元素内容之前添加内容，属于该元素，默认伪元素是行内元素

④:after /::after 在元素内容之后添加内容，属于该元素，默认伪元素是行内元素

⑤::selection 设置元素在被选择时的样式。

伪类选择器
群组选择器

十五、数组冒泡排序

             function buddleArray(arr){for(var r=1;r<arr.length;r++){//外层循环实现需要几次遍历for(var i=0;i<arr.length-r;i++){//内层循环实现每次遍历把小的值往后放//从0开始遍历arr数组，到length-1结束，每次i++//如果当前元素arr[i]<arr[i+1]，则交换两值位置//x+=y,y=x-y,x-=yif(arr[i]<arr[i+1]){                           arr[i]+=arr[i+1];arr[i+1]=arr[i]-arr[i+1];arr[i]-=arr[i+1];}}}return arr;}var a=[2,5,6,9,3,1,4];buddleArray(a);console.log(a);// [9, 6, 5, 4, 3, 2, 1]

十六、创建新数组，向数组插入数据

         var newArr=[];newArr.unshift("b");newArr.push("a");console.log(newArr);// ['b', 'a']

十七、讲下你做轮播图的思路，无缝轮播

box固定宽高，overflow:hidden;position:relative;

ul放在box里面，宽度由内容li标签决定，position:absolute;left:0;

li标签设置浮动属性，超出的部分会被隐藏。li标签内放图片。

克隆一个第一个li节点到最后（如果需要平滑过渡）

js添加定时器，让ul左移负值，移动到最后一个li标签后，再让ul标签left:0;

十八、原型和原型链

摘自详解JS原型与原型链_YinJie…的博客-CSDN博客_js原型和原型链

构造函数原型prototype

每一个构造函数都有一个prototype属性

对象原型proto

对象都会有一个__ proto__属性

原型链

归纳

一切对象都继承于Object，都是从Object.prototype继承方法和属性。
一切构造函数包括Object与Function，都继承于Function，最终继承于Object

十九、闭包

摘自js中的闭包_万物皆可div的博客-CSDN博客_js闭包

闭包的作用是在函数的外部读取到函数内部的变量，并保护私有变量不被修改

示例：

        function f1() {var n = 999;function f2() {alert(n);}return f2;}var result = f1();result(); // 999

由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成"定义在一个函数内部的函数"。

所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。

以下摘自javascript 闭包问题，为什么要写成闭包的形式？ - SegmentFault 思否

直接 return 返回的是变量，闭包返回的是执行环境；
闭包不是为了让函数外部拿到内部变量。而是为了保护私有变量不被随意修改；
return 出来的是一个值，不是变量本身，此处的 return 是取得私有变量值的一种方法，跟闭包没有严格关系；
闭包作为一个可以访问函数内部变量的函数，更多的是可以在其中添加其他的条件，过滤无效的值。如果直接return 变量，然后赋值的话，还要在后续去判断这个值的有效性。

二十、HTML5的新特性

1）用于绘画的 canvas 元素

2）用于媒介回放的 video 和 audio 元素

3）对本地离线存储的更好的支持

4）新的特殊内容元素，比如 article、footer、header、nav、section

5）新的表单控件，比如 calendar、date、time、email、url、search

二十一、css3的新特性

1）css3选择器

2）边框特性

3）多背景图

4）颜色与透明度

除了rgb和16进制两种模式，HSL、HSLA、RGBA

5）多列布局与弹性盒模型布局

6）盒子的变形

旋转、扭曲、缩放、移位

7）过渡与动画

8）web字体

@font-face

9）媒体查询

10）阴影

二十二、Utf-8编码汉字占多少个字节

在UTF-8编码中，一个中文字符等于三个字节，一个中文标点符号占三个字节；一个英文字符等于一个字节，一个英文标点占一个字节；一个数字符号等于一个字节。

二十三、vue基于什么语言开发的

vue是基于JavaScript语言开发的，是一套用于构建用户界面的渐进式JavaScript框架，旨在更好地组织与简化Web开发。Vue的核心库只关注视图层，并且非常容易学习，也非常容易与其他库或已有项目整合。

二十四、js对数组的操作，包括向数组中插入删除数据

1）删除： arr.splice(starti,n)

2）插入：arr.splice(starti,0,新值1,,,)

3）替换：arr.splice(starti,n,新值1,,,)

5）push()在数组末尾添加一个元素，此方法会直接修改原数组，并返回新的数组长度

6）pop()删除并返回数组最后一个元素，会改变原数组

7）unshift()在数组开头添加一个元素；此方法会直接修改原数组，并返回新的数组长度

8）shift()删除并返回数组第一个元素，返回一个对应类型的值，原数组会被改变

9）sort()排序

二十五、辗转相除法

         function maxNumber(n1, n2) {var n3;n3 = n1%n2;if(n3==0){return n2;}return maxNumber(n2,n3);}

二十六、js选择器

js中原生的选择器

document.getElementById()
document.getElementsByClassName()
document.getElementsByName()
document.getElementsByTagName(）

DOM扩展出了Selector API标准

5、document.querySelector()

6、document.querySelectorAll()

二十七、settimeout和setInterval的区别，以及settimeout多次执行

settimeout只执行一次，setInterval只要没有清楚就会一直执行

settimeout通过设置回调函数，可以多次执行，如下

            function fn(){console.log("1");setTimeout(al,3000);    }fn();

二十八、transition transform translate 之间的区别 transform的属性有哪些？

transition是过渡

tiansform是变换

translate四transform的一个值，让元素在水平或垂直方向移动

transform的属性有translate、rotate、scale、skew

`二十九、<o``l><li></li></ol>`结构的html代码，写原生js实现点击某个li就弹出对应的索引值

let 定义 i，会把每次循环都成一个封闭空间。 i 值就不会传递到空间外了（虽然它也可以自增）。具体可以了解下ES6 对for 的解释，let 和 const 命令 - ES6 教程 - 网道。

         for( let i = 0 ; i< lis.length; i++){lis[i].onclick = function(){console.log(i);}}

三十、对数组进行随机排序，要求数组中的每个元素不能停留在原来的位置

随机生成index下标，将旧数组的值逐一推入新数组中

            let arr=[0,1,2,3,4,5,6,7,8,9];function fn(arr){var arrClone=arr.concat();let newArr=[];while(arr.length){let index=Math.floor(Math.random()*arr.length);newArr.push(arr.splice(index,1)[0]);}for(var i=0;i<arrClone.length;i++){if(arrClone[i]==newArr[i]){return fn(newArr);}}return newArr;}console.log(fn(arr))

三十一、http和https的区别

HTTP协议以明文方式发送内容，不提供任何方式的数据加密。HTTP协议不适合传输一些敏感信息

https则是具有安全性的ssl加密传输协议

HTTPS协议是由SSL+HTTP协议构建的可加密传输、身份认证的网络协议，要比http协议安全。

前端开发工具webstorm

WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。
已经被广大中国JS开发者誉为"Web前端开发神器"、"最强大的HTML5编辑器"、"最智能的JavaScript IDE"等。
与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。

三十二、ajax

AJAX = Asynchronous JavaScript and XML（异步JavaScript 和 XML）。
        AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
        AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
        AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

三十三、盒子模型和怪异模型

1）标准盒模型

标准盒大小计算公式：width(content) + padding + border + margin

`2）怪异盒模型`

怪异盒大小的计算公式：width(content + padding + border) + margin

3、对盒模型设置的属性 box-sizing

三十四、bookstrap的响应式所示怎么实现的

分别为不同的屏幕分辨率定义布局，页面元素宽度随着窗口调整而自动适配。每个屏幕分辨率下面会有一个布局样式，可以对元素位置和大小进行改变。

三十五、js的数据类型

1）基本数据类型：

字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）

2）引用数据类型：

对象(Object)、函数(Function)

三十六、cookie和session有什么联系

session 是基于 cookie 实现的，session 存储在服务器端，sessionID 会被存储到客户端的 cookie 中

相同之处

HTTP 是无状态的协议（对于事务处理没有记忆能力，每次客户端和服务端会话完成时，服务端不会保存任何会话信息），所以服务器与浏览器为了进行会话跟踪（知道是谁在访问我），就必须主动的去维护一个状态，这个状态用于告知服务端前后两个请求是否来自同一浏览器。而这个状态需要通过 cookie 或者 session 去实现。

记录服务器和客户端会话状态的机制

不同之处

安全性：

Session 比 Cookie 安全，Session 是存储在服务器端的，Cookie 是存储在客户端的。

存取值的类型不同：

cookie 只支持存字符串数据，想要设置其他类型的数据，需要将其转换成字符串，Session 可以存任意数据类型。

有效期不同：

cookie 可设置为长时间保持，比如我们经常使用的默认登录功能，Session 一般失效时间较短，客户端关闭（默认情况下）或者 Session 超时都会失效。

存储大小不同：

单个 Cookie 保存的数据不能超过 3K，Session 可存储数据远高于 Cookie，但是当访问量过多，会占用过多的服务器资源。

三十七、图片预加载和懒加载

摘自图片的懒加载与预加载_HaanLen的博客-CSDN博客_图片预加载和懒加载

懒加载

当页面滚动到目视范围内，再进行加载，以提高首屏加载速度

懒加载也叫延迟加载，指的是在长网页中延迟加载图片的时机，当用户需要访问时，再去加载，这样可以提高网站的首屏加载速度，提升用户的体验，并且可以减少服务器的压力。
懒加载的实现原理是将页面上图片的 src 属性设置为空字符串，将图片的真实路径保存在一个自定义属性中，当页面滚动的时候，进行判断，如果图片进入页面可视区域内，则从自定义属性中取出真实路径赋值给图片的 src 属性，以此来实现图片的延迟加载。

预加载：

直接将所有资源一下子加载到本地

指的是将所需的资源提前请求加载到本地，这样后面在需要用到时就直接从缓存取资源。通过预加载能够减少用户的等待时间，提高用户的体验。

实现方法最常用的方式是使用 js 中的 image 对象，通过为 image 对象来设置 scr 属性，来实现图片的预加载。

三十八、减少页面加载时间的方法

摘自三种减少页面加载时间的方法。（加载时间指感知的时间或者实际加载时间）_不愿停的博客-CSDN博客_三种减少页面加载时间的方法

1）减少http请求

2）优化图片文件，减小其尺寸

扩展：将图片转成base64

步骤：搜索base64工具，上传图片后粘贴base64编码，放入img src中就可以了

优缺点：可以减少请求，但是会增大图片体积。base64图片适合做小图片，不适合做大图片

3）图片元素定义好宽高，不然浏览器会不断调整页面

4）在文件头部放css样式的定义，尾部放js脚本

5）减少DCOM元素

6）压缩css文件，js文件，去掉换行、空格

三十九、分析代码中最终生效的CSS样式(CSS样式权重计算)

各选择器优先级

1. 在行内写入 !important (最高优先级慎用,一般是用来检测是否是选择器权重问题）

2.内联样式 1000

3.id选择器 100

4.类和伪类选择器/属性选择器 10

5.元素选择器 1

6.通配符、子选择器、相邻选择器等。如*、>、+ 0

7. 继承的样式没有优先级 00

如何计算优先级

1、比较优先级时，需要将所有选择器的优先级进行相加计算，最后优先级越高，则优先显示；

2、 (并集选择器)分组选择器是单独计算的；

3、如果优先级计算后相同，此时则优先使用靠下的样式；

4、选择器的累加，不会超过上一级数量级，例如：类选择器再高也不会超过id选择器，量变达不到质变；

一般来说选择器越具体，优先级越高。

四十、数组中删除指定索引的元素

         function fn(arr,index){arr.splice(index,1);return arr;}var arr1=[1,2,3,4,5];console.log(fn(arr1,2));

四十一、获取数组最后一个元素

            var arr = [1,2,3,4,5];// 方式1var last = arr.pop();// 方式2var last = arr.slice(-1)[0];// 方式3var last = arr[arr.length-1]

四十二、div高度百分百

需要将div所有的父元素height都设置成百分百

四十三、localstore和sessionstore的区别

摘自

LocalStoreage和SessionStoreage区别与用法 - lenglingx的个人页面 - OSCHINA - 中文开源技术交流社区

localstore

LocalStorage 译为 “本地存储器”，是 HTML5 中新增的一个存储对象，跟 Cookie 一样也是用来本地存储来的，但是解决了 Cookie 存储空间不足的问题 (cookie 每条存储空间为 4k)，而 localStorage 浏览器一般支持 5M，通常以键 / 值对形式的字符串进行存储。只要不手动删除，就会一直存在

sessionstore

SessionStorage 译为 “会话存储”，也是 HTML5 新增的一个存储对象，用于本地临时存储同一窗口的数据，在关闭窗口之后将会删除这些数据，SessionStorage 浏览器一般支持 5M，通常以键 / 值对形式的字符串进行存储。

他们的特点

1. 不同浏览器之间无法共享 LocalStorage 或 SessionStorage 中的数据。

2.LocalStorage 和 SessionStorage 可以使用统一的 API 接口。

3.LocalStorage 或 SessionStorage 通常以键 / 值对形式的字符串进行存储，所以在存储时需要对数据格式进行转换，使用 JSON.stringify 方法将对象转换成字符串，提取时用 JSON.parse 方法将字符串转换成对象

用法示例

localStoreage.setItem('键','值')   //保存数据本地（变量名，值）
localStoreage.getItem('键')        //获取本地数据（变量名）
localStoreage.removeItem('键')     //移除本地数据（变量名）
localStoreage.key(0)               //获取指定下标数据
localStoreage.clear()              //清除localStoreage
//需要配合
JSON.stringify(value)
JSON.parse(value)

四十四、ES6新特性

摘自ES6新特性有哪些？_嘿哈，辉的博客-CSDN博客_es6新特性有哪些

1)、新的原始类型和变量声明

2)、新的对象和方法

3)、函数默认值。箭头函数，class类

5)、模块的导入和导出

6)、异步机制

四十五、怎么理解模块化开发

摘自Js模块化开发的理解_WindrunnerMax的博客-CSDN博客_js模块化开发

模块化开发其实就是封装细节，提供使用接口，彼此之间互不影响，每个模块都是实现某一特定的功能，同时也需要避免全局变量的污染

模块化规范

CommonJs、AMD、CMD、ES6都是用于模块化定义中使用的规范，其为了规范化模块的引入与处理模块之间的依赖关系以及解决命名冲突问题，并使用模块化方案来使复杂系统分解为代码结构更合理，可维护性更高的可管理的模块。

ES6

ES6在语言标准的层面上实现了模块的功能，是为了成为浏览器和服务器通用的模块解决方案，ES6标准使用export与export default来导出模块，使用import导入模块。此外在浏览器环境中是可以使用require来导入export、export default导出的模块的，但依然建议使用import标准导入模块。目前ES6模块是静态的，无法实现按需加载，当然可以使用babel进行解析，也可以使用CommonJS的require，此外有一份新的规范提案也有可能将动态加载并入标准。

四十六、手机号正则表达式

let reg=/^1[3|4|5|7|8][0-9]{9}$/

^1 以1开头
[3|4|5|7|8] 第二位是3或4或5或7或8任意一位
[0-9]{9}$ 以0-9任意9位数字结尾

四十七、用CSS实现一个背景色为红色，半径为200px的圆，并设置不停的上下移动动画

            div{width: 400px;height: 400px;background-color: red;border-radius: 50%;margin: 0 auto;animation: move 10s infinite;}@keyframes move{0%{transform: translateY(0);}50%{transform: translateY(400px);}100%{transform: translateY(0);}}

四十八、列举两种清除浮动的方法

1）在父级元素结尾前加个清除浮动的空div

clear:both

2）给要清楚浮动的父级元素定义伪类after

.clearFloat:after{display:block;clear:both;content:"";
}

四十九、代码实现3栏效果，左右两栏固定宽度，中间栏随着浏览器宽度自适应变化

1）左右两个盒子用绝对定位靠边，中间盒子为标准流，独占一行。左右的盒子会将左右两两边覆盖掉

2）左右两个盒子用浮动定位，中间盒子为标准流独占一行。左右的盒子会将左右两两边覆盖掉

五十、代码实现parse方法，将有效的JSON字符串转换成JavaScript对象

var str = '{"name":"John"}';
var obj = jQuery.parseJSON(str);
alert( obj.name === "John" );

五十一、cookie和localStorage的区别，如何获得他们？

cookie

1、只能存储文本

2、单条存储有大小限制4KB左右

3、数量限制，一般浏览器，限制大概在50条左右

4、读取有域名限制

5、时效限制

6、路径限制

localStorage

1、存储值限定为string类型，使用需要转换

JSON.parse()//转为数组、JSON.stringify()//转为字符串

2、只要写入，存储时限可以是永久

3、浏览器隐私模式下不可读取。

4、太多了会导致页面卡顿

5、不能被爬虫读取

cookie和localStorage的使用

cookie：存：document.cookie = 'key=value';取：let cookie = document.cookie;需要注意的是cookie一般是后端处理localStorage：存：window.localStorage.setItem(key, value);window.localStorage.name = 'zhangsan';取：let value = window.localStorage.getItem(key);let name = window.localStorage.name;

五十二、用什么方法判断是否是数组？又用什么方法判断是否是对象？

1、obj.constructor

2、obj instanceof Array

3、Object.prototype.toString.call()

上面三种数组对象都可以判断

此外数组还可以用Array.isArray()

五十三、对H5新增的语义化标签的理解？

摘自引用样式的方式有哪几种？他们的优先级排序怎么样？_@少年啊的博客-CSDN博客_引入样式的方法有哪几种

header、nav、section、artice、aside、footer

语义化标签和无语义化div一样，都是表示一个空的容器，但是语义化标签通常都代表一个语义的内容块，如头部、导航、脚部、文章、段落、侧边栏……

五十四、引用样式的方式有哪几种？他们的优先级排序怎么样？

1、内联（行内样式） - 在标签内直接写样式

2、内嵌（内部样式） - 在head标签里，加一个style标签，在style里写样式

3、外联（外部样式） - 新建一个.css文件，通过link来引入样式

4、导入（导入样式） - 在head标签里，加一个style标签，再写@import url()，跟用link的方式差不多

优先级：

1、就近原则

2.理论上：内联>内嵌>外联>导入

3.实际上：内嵌、外联、导入在同一个文件头部，在CSS选择器权值相同的情况下，谁离相应的代码近，谁的优先级高

五十五、内存泄漏

内存泄露是指你用不到（访问不到）的变量，依然占据着内存空间，不能被再次利用起来

常见的内存泄漏

1）意外的全局变量

2）闭包引起的内存泄漏

3）没有清理DOM元素

4）被遗忘的定时器和回调函数

怎样避免内存泄漏

1）减少不必要的全局变量，或者生命周期较长的对象，及时对无用的数据进行垃圾回收；

2）注意程序逻辑，避免“死循环”之类的；

3）避免创建过多的对象原则：不用了的东西要及时归还，对象用完赋值为null。

五十六、什么是闭包

https://github.com/WindrunnerMax/EveryDay/blob/master/JavaScript/JavaScript%E9%97%AD%E5%8C%85.md

闭包的作用是从函数的外部访问函数内部的变量

闭包就是利用“函数内部可以访问函数外部的变量”的特性而建立的

由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成"定义在一个函数内部的函数"。

所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁

示例：

function student(){var name = "Ming";var sayMyName = function(){ // sayMyName作为内部函数，有权访问父级函数作用域student中的变量console.log(name);}console.dir(sayMyName); // ... [[Scopes]]: Scopes[2] 0: Closure (student) {name: "Ming"} 1: Global ...return sayMyName; // return是为了让外部能访问闭包，挂载到window对象也可以
}
var stu = student();
stu(); // Ming

就是在函数内部在写一个函数表达式。读取函数下的变量再return给函数本身

闭包的缺点降低网页性能，所以能不用就不用

五十七、null和undefined的区别

undefined是所有仅声明但未赋值的变量默认值

null的空是专门修饰引用类型对象的空

五十八、css有哪些选择符？可继承的属性有哪些？css3新增的伪元素有哪些？css优先级的计算

选择符

1.id选择器
2.类选择器
3.标签选择器
4.相邻选择器
5.子选择器
6.后代选择器
7.通配符选择器，也称全局选择器
8.属性选择器
9.伪类选择器

可继承的属性有哪些？（子标签继承父标签）

text-*
font-*
color-*
……

优先级算法

1.优先级就近原则，同权重情况下样式定义最近者为准;
2.载入样式以最后载入的定位为准;
3.!important > id > class > tag
4.important 比内联优先级高，但内联比 id 要高

不可继承的属性有哪些

边框、内外边距’、高宽

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元素。
:enabled： disabled 控制表单控件的禁用状态。
:checked：单选框或复选框被选中。

五十九、link和@import的区别

摘自【前端】link 和 @import 的区别_Dora_5537的博客-CSDN博客

link和@import 的区别（ link 属于 XHTML 标签，而 @import 是 CSS 提供的）

1. 引用的方式不同：

link(外部引用): <link rel="stylesheet" href="xxx.css"  type="text/css" />@import(导入式): @import url(xxx.css);

2. 放置的位置不同：link 一般放在 head 标签中，而 @import 必须放在 <style type="text/css"> 标签中。

3. 加载方式不同：link 会和 dom 结构一同加载渲染，而 @import 只能等 dom 结构加载完成以后才能加载渲染页面。

4. 兼容性不同：@import 只能在 IE6 以上才能识别，而 link 是 XHTML 标签，无兼容问题。

5. 样式权重不同：link 方式的样式的权重高于 @import。

6. 改变样式：link 支持使用 JavaScript 改变样式，而 @import 不可以。

7. 加载内容不同：link 除了可以加载 css 文件以外，还可以加载 MIME 类型的文件；而 @import 只能加载 css 文件。

六十、浏览器如何实现不同标签页的通信？

1、localstorage

2、Websocket

六十一、iframe的优缺点

摘自浅谈iframe的优缺点及应用场景_baxiadsy_csdn的博客-CSDN博客_iframe的优缺点

优点:

1.iframe能够把嵌入的网页原样展现出来；

2.模块分离，便于更改，如果有多个网页引用iframe，只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷；

3.网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，增加代码的可重用；

4.如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决；

5.重载页面时不需要重载整个页面，只需要重载页面中的一个框架页；

6.方便制作导航栏。

缺点:

1.样式和脚本需要额外链入，调用外部页面,需要额外调用css,增加页面额外的请求次数，增加服务器的http请求；

2.代码复杂，在网页中使用框架结构最大的弊病是搜索引擎的“蜘蛛”程序无法解读这种页面，会影响搜索引擎优化，不利于网站排名；

3.框架结构有时会让人感到迷惑，滚动条除了会挤占有限的页面空间外会使iframe布局混乱，还会分散访问者的注意力，影响用户体验；

4.链接导航疑问。运用框架结构时，必须保证正确配置所有的导航链接，否则，会给访问者带来很大的麻烦。比如被链接的页面出现在导航框架内，这种情况下访问者便被陷住了，因为此时他没有其他地点可去；

5.产生多个页面，不易管理；

6.多数小型的移动设备（PDA 手机）无法完全显示框架，设备兼容性差。\

六十一、js 的继承实现方式有哪些

摘自探究JS常见的6种继承方式_CRMEB的博客-CSDN博客

1）原型链继承

2）构造函数继承（借助 call）

3）组合继承（前两种组合）

4）原型式继承

5）寄生式继承

6）寄生组合式继承

7）extends关键字实现逻辑

六十二、eval是什么？

1、eval是js中最强大的方法之一，它就像一个完整的ECMAScript解析器，它会根据ECMAScript语句对字符串进行解析和计算。

2、eval中的所有变量声明和函数声明都不会增加。

示例：

eval("x=10;y=20;console.log(x*y)");//21
console.log(eval("2+2"));//4
var x=10;
console.log(eval(x+17));//27

六十三、用什么会导致内存泄漏

摘自什么操作会造成内存泄漏？_爱学习的小欣欣的博客-CSDN博客_哪些操作会导致内存泄露

1. 使用未声明的变量，而意外的创建了一个全局变量，而使这个变量一直留在内存中无法被回收。

2. 设置了 setInterval 定时器，而忘记取消它，如果循环函数有对外部变量的引用的话，那么这个变量会被一直留在内存中，而无法被回收。

3. 获取一个 DOM 元素的引用，而后面这个元素被删除，由于我们一直保留了对这个元素的引用，所以它也无法被回收。

4. 不合理的使用闭包，从而导致某些变量一直被留在内存当中。

六十四、什么是BFC

摘自什么是BFC，他有什么用？_King十三的博客-CSDN博客_bfc

块级格式化上下文，是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素

触发BFC的条件：1.html2.float属性不为none3.position为absolute或fixed4.display为inline-block, flex，table-cell, table-caption, , inline-flex5.overflow不为visible
应用1、阻止margin重叠2、清除内部浮动3、自适应两栏布局

六十五、css样式不生效怎么办

1、html标签没有写完整

2、样式被覆盖，用!important检查

3、css语法错误，单词拼错了

4、css表编码错误，用utf-8再保存一下

5、浏览器缓存问题，清除缓存重启浏览器

6、有一些属性无效和元素类别有关，用display:block

7、样式表关联问题，尝试给body加背景颜色，可以查得出来

六十六、什么是事件委托？优点缺点有哪些？

事件委托的核心是，利用js的冒泡和事件targert属性。例如给ul标签绑定点击事件，可以触发li标签上的点击事件

事件委托优点：

1、减少事件注册，节省内存。比如，在table上代理所有td的click事件，在ul上代理所有li的click事件。

2、简化了dom节点更新时，相应事件的更新。比如不用在新添加的li上绑定click事件，当删除某个li时，不用移解绑上面的click事件。

事件委托缺点：

1、事件委托基于冒泡，对于不冒泡的事件不支持

2、层级过多，冒泡过程中，可能会被某层阻止掉。

3、理论上委托会导致浏览器频繁调用处理函数，虽然很可能不需要处理。所以建议就近委托，比如在table上代理td，而不是在document上代理td。

4、把所有事件都用代理就可能会出现事件误判。比如，在document中代理了所有button的click事件，另外的人在引用改js时，可能不知道，造成单击button触发了两个click事件。

六十七、箭头函数和普通函数区别？

1、箭头函数更加简洁

2、箭头函数没有自己的this，只会在自己作用域的上一层继承this。所以箭头函数中this的指向在它在定义时已经确定了，之后不会改变。

3、call()、apply()、bind()等方法不能改变箭头函数中this的指向

4、箭头函数不能作为构造函数使用

5、箭头函数没有自己的arguments（伪数组），在箭头函数中访问arguments实际上获得的是它外层函数的arguments值

6、箭头函数没有prototype

六十八、请大概讲一下JS的执行机制

摘自JS执行机制_js中执行机制_FG.的博客-CSDN博客

1、单线程

2、同步和异步

3、宏任务和微任务

具体示例分析：

链接：依次点击4个li标签，哪一个选项是正确的运行结果?_搜狗笔试题_牛客网
来源：牛客网

这里考的是JS的运行机制！事件(click,focus等等)，定时器(setTimeout和setInterval)，ajax,都是会触发异步，属于异步任务；js是单线程的，一个时间点只能做一件事，优先处理同步任务；按照代码从上往下执行，遇到异步，就挂起，放到异步任务里，继续执行同步任务，只有同步任务执行完了，才去看看有没有异步任务，然后再按照顺序执行！这里for循环是同步任务，onclick是异步任务，所以等for循环执行完了，i变成4了，注意：这里因为i是全局变量，最后一个i++，使得i为4(后面的onclick函数，最后在循环外面执行，不受i<length限制)；所以for循环每执行一次，onclick事件函数都会被挂起一次，共4次； for循环结束后，点击事件触发了4个onclick函数，接着输出4个4！

六十九、为什么不推荐使用行内样式

1、多个元素样式相同时，style会让代码大量重复，既冗余又不好维护

2、style需要预留给js控制，优先级比class或者id更高

3、样式和内容混杂在一起，不符合规范，不利于维护

4、影响网页性能

5、单独写一个样式文件，可以在浏览器建立缓存，二次访问更快

引用css的三种方式

1、外部样式表，link

2、内部样式表（嵌入式），写在head>style

3、行内样式表

2023面试题大全updating相关推荐

Java面试题大全带答案 110道（持续更新）
本人发现网上虽然有不少Java面试题大全带答案,但第一未必全,第二未必有答案,第三虽然有答案,但未必能在面试中说,所以在本文里,会不断收集各种面试题,并站在面试官的立场上,给出我自己的答案如果不背 ...
python面试题_Python面试题大全
[导读]推荐一个Python面试题大全,从Python基础到Python高级等非常全的面试题讲解. GitHub地址: https://github.com/kenwoodjw/python_inte ...
c语言试卷大全,C语言试题大全
C语言试题大全引导语:c语言相关的试题都会考察什么内容呢?以下是小编整理的C语言试题大全,欢迎参考阅读! 一.填空题(10分,第1小题4分,其余每空1分) 1.设有下列登记表,请采用最佳方式定义一种 ...
java面试题大全答案版文库_java高级面试题带答案
java高级面试题,java面试题大全带答案,线程面试题,java面试宝典2019 1.[请对以下在J2EE中常用的名词进行解释(或简单描述)](http://www.wityx.com/post/1 ...
2020最新Java面试题大全，赶紧收藏吧！
发现网上很多Java面试题都没有答案,所以花了很长时间搜集整理出来了这套Java面试题大全,希望对大家有帮助哈~ 本套Java面试题大全,全的不能再全,哈哈~ 一.Java 基础 1. JDK 和 J ...
[转载] JAVA面试题大全(part_1)
参考链接: 对Java中派生类方法更严格的访问 JAVA面试题大全(part_1) 1.面向对象的特征有哪些方面 (1)抽象: 抽象就是忽略一个主题中与当前目标无关的那些方面,以便更充分地注意与当前目 ...
[转载] Java面试题大全（2020版）
参考链接: Java中的循环发现网上很多Java面试题都没有答案,所以花了很长时间搜集整理出来了这套Java面试题大全,希望对大家有帮助哈~ 本套Java面试题大全,全的不能再全,哈哈~ 博主已将以 ...
python全栈面试题_python面试题大全（一）
python面试题大全(一) 最近开始整理python的资料,博主建立了一个qq群,希望给大家提供一个交流的同平台 938587844 . 1. (1)python下多线程的限制以及多进程中传递参数的 ...
图像处理算法工程师——1必备技能总结——2面试题大全
图像算法工程师三重境界 : 一.传统图像算法工程师: 主要涉及图形处理,包括形态学.图像质量.相机成像之3A算法.去雾处理.颜色空间转换.滤镜等,主要在安防公司或者机器视觉领域,包括缺陷检测: 二. ...
java面笔试_java笔试手写算法面试题大全含答案
java笔试手写算法面试题大全含答案 1.统计一篇英文文章单词个数. public class WordCounting { public static void main(String[] args ...

2023面试题大全updating