前端常见面试题

1.JavaScript常用基本数据类型：
boolean,number, null,bigInt,String，symbol，undefined
分类：
表示空：undefined，null
三大基础件：boolean,string,number
两个新类型：bigint(1-253),symbol
数据引用对象：
数组：arry
普通对象：object
正则：reqexp
函数：function

2.typeof 返回的是变量值得类型而不是变量的类型，JavaScript中变量没有类型，对于函数返回function，对于null返回object
在JavaScript中，基本类型没有属性和方法，可以用object和valueof()将包装类型倒转成基本类型
3. parseint允许非数字字符传入，number不允许
4. 用boolean函数转换任意值，或者！！

5.generator函数，可以根据用户控制一个一个返回一系列值，场景：使用特定规则生成数据，生成id,生成编号
6.escape已经被废弃，不应该被使用
ecodeURI用来处理整个url，不会转义&，？，/、=等完整URL必备字符
而encodeuricomponent可以转义特殊中字符，所以通用

7.立即执行函数（IIFE:定义匿名函数，然后立即传入函数执行，用途：只需执行一次，没必要取名字）
(function（val）{return val;})(100)

8.函数在JavaScript中是第一公民
因为函数可以被当做一个普通的对象来看待，可以作为一个参数传给另一个函数，可以作为函数的返回值，可以和普通对象拥有自己的键值对以及可以被push进数组中，赋予了JavaScript灵活的编程能力，能够进行函数式编程的充分条件。

9.arguments是类数组，如何遍历？
用array.from方法将类数组转换为数组
用展开运算符将类数组转换为数组

Css：
1.匹配优先级：
A(是否内联)B（id选择次数）C（类，属性，伪类）D（标签和伪元素）
然后得分1001 ，0021等进行比较

2.伪类用担保号‘：’表示：a:link{color:#ff0000}
伪元素用双冒号：‘：：’表示：p::first-line,a::before,a::after

3.尽量避免使用！important，一个地方使用，在其他地方都要再用！important来覆盖。
4.使用通配符把所有的元素设置成box-sizing:border-box.
5.行内元素margin对于行内替换元素都有用，对于行内非替换元素只有margin-left和margin-right气起作用。
6.vertical-align:middle只有在display属性为inline和table-cell时起作用，对齐图片以及文字。

7.让元素垂直居中？
1.不需要指定元素高度时，直接给一个相同的padding-top和padding-bottom，撑大容器(推荐使用，最简单，尽量使元素高度由它自然内容决定)
2.指定容器高度，设置display：inline或者table-cell设置vertical-align=middle
3.不需要严格兼容时，可以用flexbx的话，就用flexbox
4.只有一行文本时，设置行高=高就行
5.绝对定位
6.不知道元素高度时，用绝对定位+transform

8.层叠上下文：
重叠的元素按照一定的规则在垂直方向排列，是HTML元素层级的一个子层级，只有一部分元素可以生成自己的层叠上下文：定位元素以及未定位元素，先渲染未定位元素，再渲染定位元素，越后面的元素会覆盖在上面。定位元素之间通过z-index比较

独立层叠上下文，元素排列：
z-index为正值（包括子元素）>auto>未定位元素>负值>层叠上下文根元素

移动端css:
em适用于需要大小需要和字体变化的属性比如padding，margin
rem适用于字体，通过改变根元素字体大小来改变整个页面字体大小

initial-scale=1指初始页面不放大也不缩小
1.物理像素，逻辑像素，像素密度
一个逻辑像素=3个物理像素，屏幕像素密度为3，也就是所说的三倍屏
对于图片，为了保证不失真，1个图片像素至少对应一个物理像素，在三倍屏至少三倍才能保证不失真可以根据css媒体查询来判断不同的像素密度，从而选择不同的图片。
为了让页面尺寸自适应，可以使用rem,em,vw,vh等单位

响应式开发
不是所有的属性都支持百分比值
1.移动端限制多，网速慢，窗口小，touch事件，PC端容易一些
2.使用媒体查询根据不同视口宽度调整样式
3.使用流式布局来保证布局会随着视口宽度的改变进行调整
4.调整viewport,避免浏览器使用虚拟viewport。

html与浏览器：
浏览器渲染引擎，根据源文件渲染出用户可见的界面
ie引擎为Trident
Firedox(Mozilla)引擎为webkit
safari引擎为webkit
chrome引擎为blink（自己开发，基于webkit）
opera引擎为blink

JavaScript是一门解释型语言，Java是一门编译型语言，编译器在代码运行前将编程语言转换为机器语言，JavaScript需要在机器（node或者浏览器上）安装一个工具（js引擎解释器）才能执行。
JavaScript也带有编译特性，给引擎加了jit(及时编译)的功能。代码运行前，现在jit中编译

user-Agent:特征字符串，标识请求用户代理软件的应用类型，操作系统以及开发商版本信息

性能优化：
浏览器缓存资源？
浏览器在本地磁盘对用户最近请求的文档进行存储，当用户再次访问同一页面，浏览器直接从本地磁盘加载文档，优点：减少复杂数据传输，减轻服务器负担，加快客户端加载网页速度。
缓存规则分为：协商缓存和强制缓存，通过HTTP response header设置。
强制缓存：首先检查本地缓存，有就直接调取，没有就从服务器中获取。
协商缓存：客户端从本地缓存中获取一个缓存表示，带着表示向服务器中发送请求进行验证，获取没有失效则返回304，直接从本地缓存中获取数据，如果失效，就从服务器中获取数据。
2，用什么方法来检测网页性能？
浏览器开发工具，浏览器插件，fiddler，charles查看页面加载情况，原理就是追踪HTTP请求与响应的时间，以图形方式列出所有资源的下载情况，，缺点是人为操作，难以实现批量测试。
使用第三方工具 Chromeux报告，或者W3C的performance接口来测试性能
3.性能优化方法
服务端：使用cdn（内容分发网络）通过dns负载均衡技术将用户的请求转移到就近的cache服务器上，提高请求返回速度，利用静态资源缓存，，给返回头加上cache-control或者etag头

网络：通过雪碧图，合并请求等方法减少请求数；减少文件大小：压缩css/js、图片1，在服务器（nginx）中开启GziP,在服务器端先进行压缩，再在客户端进行解压
客户端：1.使用外联css和js,css放头，js放文档尾部，防止页面加载阻塞以减少对并发下载的影响，尽早给用户展示出页面；
2.js:使用事件委托，减少repaint和reflow，如设置class更新样式，将多次DOM操作改完使用DOM fragment，使用代码拆分，延迟加载。
3.颜色丰富文件大的文件优先考虑jpg；颜色简单地体积小修饰作用的图片优先考虑PNG8，颜色丰富半透明效果考虑PNG24格式
4.减少回流，重绘，通过批量更新元素减少重排次数，设置类class统一更新样式，在添加多个DOM结点时使用DOM fargment来避免页面多次重绘
4.防抖，节流，怎么实现？
输入框联想，监听滚动这种频繁触发的事件，，防抖，节流就是来限制触发频率。
防抖：持续触发事件时，一定时间段内没有再触发，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始演示，某一时间内只执行一次。
节流：当持续触发事件时，保证一段时间内只调用一次事件处理函数，设定一个计时器，间隔时间执行。

***HTTP/HTTPS协议***
get/post
get：只读，纯粹操作，本身不会对服务器产生副作用，无论你请求多少次都是一样的结果，可以被缓存，get方法参数放在url中。get可以直接输入在地址栏中，请求记录会被记录在浏览器历史记录当中
post：语义是非幂等的，有副作用，不能被缓存，因为请求必须真的达到服务器副作用才会发生，所以post请求必须交由web	服务器处理。post方法的参数放在body中

状态码：
2xx:请求已经被处理
4xx:客户端错误
5xx:服务端错误
cookie,localStorage和sessionStorage有哪些区别？
生命周期：cookie（会话追踪），关闭浏览器失效，localstorage除非被清除否则永久保存，对于sessionStorage,仅当前会话有效。
大小：cookie最大4k，storage最大5M
与服务器通信时：cookie每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题，而storage仅在客户端（浏览器）中保存，不参与和服务器的通信。
使用场景：cookie需要精简，只携带验证信息，如用户token；而storage存储浏览器记住的本地地址如购物车中的内容