js 基础(面试前必看)

因为以前面试一大公司的时候没看基础题,翻车了
所以这篇博客就用来写一些 js 面试的基础题目

行内元素和块元素分别有哪些

块级元素:div  , p  , form,   ul,  li ,  ol, dl,    form,   address, fieldset,  hr, menu,  table
行内元素:span,   strong,   em,  br,  img ,  input,  label,  select,  textarea, cite 

块级元素的前后都会自动换行,如同存在换行符一样,默认情况下,块级元素会独占一行

行内元素可以与其他行内元素位于同一行,在浏览器中显示时不会换行,对其不能设置高度和宽度。

iframe有那些缺点?

1.frame会阻塞主页面的Onload事件;
2.iframe和主页面共享连接池,而浏览器对相同域的连接有限制,所以会影响页面的并行加载。
3.SEO不利,对爬虫不友好。

CSS的优先级?内联和important哪个优先级高?

!important > 行内样式(比重1000)> ID 选择器(比重100) > 类选择器(比重10) > 标签(比重1) > 通配符 > 继承 > 浏览器默认属性

浮动元素清除浮动方法

1、使用空标签清除浮动
2、使用overflow属性。(overflow:auto;zoom:1″用于兼容IE6)
3、使用after伪对象清除浮动。 该方法只适用于非IE浏览器
4、浮动外部元素,float-in-float。这种方法很简单,就是把“#outer”元素也进行浮动(向左或者向右)。

闭包的理解,javascript的作用域

a、闭包就是能够读取其他函数内部变量的函数。
b、在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁。
闭包的用途
闭包可以用在许多地方。它的最大用处有两个,一个是前面提到的可以读取函数内部的变量,另
一个就是让这些变量的值始终保持在内存中。

实例如下:
根据作用域链的规则,底层作用域没有声明的变量,会向上一级找,找到就返回,没找到就一
直找,直到window的变量,没有就返回undefined。这里明显count 是函数内部的flag2 的那
个count 。

var count=10;   //全局作用域 标记为flag1
function add(){
var count=0;    //函数全局作用域 标记为flag2
return function(){
    count+=1;   //函数的内部作用域
    alert(count);
}
}
var s = add()
s();//输出1
s();//输出2

JS中作用域的概念:
表示变量或函数起作用的区域,指代了它们在什么样的上下文中执行,亦即上下
执行环境。Javascript的作用域只有两种:全局作用域和本地作用域,本地作用
是按照函数来区分的。

网站性能优化的方法

1、html语义化
2、减少重复代码,压缩css,js代码大小
3、背景图片大小及数量
4、减少http请求,合理设置缓存
5、图片懒加载
6、减少cookie传输
7、js中减少DOM操作,避免使用eval和 Function,减少作用域链查找
8、CDN加速
9、反向代理
  9.1 传统代理服务器位于浏览器一侧,代理浏览器将http请求发送到互联网上,而反向代理服务器位于网站机房一侧,代理网站web服务器接收http请求。
  9.2 反向代理也可以实现负载均衡的功能,而通过负载均衡构建的应用集群可以提高系统总体处理能力,进而改善网站高并发情况下的性能。

请描述一下 cookies,sessionStorage 和 localStorage 的区别

cookie是网站为了标示用户身份而储存在用户本地终端(Client Side)上的数据(通常经过加密)。

cookie数据始终在同源的http请求中携带(即使不需要),记会在浏览器和服务器间来回传递。

sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。

存储大小: cookie数据大小不能超过4k。 sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。

有期时间: localStorage 存储持久数据,浏览器关闭后数据不丢失除非主动删除数据; sessionStorage 数据在当前浏览器窗口关闭后自动删除。 cookie 设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。

介绍一下CSS的盒子模型?

有两种, IE 盒子模型、标准 W3C 盒子模型;IE的content部分包含了 border 和 pading;

盒模型: 内容(content)、填充(padding)、边界(margin)、 边框(border).

box-sizing的作用就是告诉浏览器,使用的盒模型是W3C盒模型,还是IE盒模型。
当 box-sizing 的值为 content-box 指定盒子模型为W3C (表示width = content),border-box 为IE盒子模型 (width = padding + border + content)。

get 与 post 的区别

GET后退按钮/刷新无害,POST数据会被重新提交(浏览器应该告知用户数据会被重新提交)。
GET书签可收藏,POST为书签不可收藏。GET能被缓存,POST不能缓存 。
GET编码类型application/x-www-form-url,POST编码类型encodedapplication/x-www-form-urlencoded 或 multipart/form-data。为二进制数据使用多重编码。
GET历史参数保留在浏览器历史中。POST参数不会保存在浏览器历史中。
GET对数据长度有限制,当发送数据时,GET 方法向 URL 添加数据;URL 的长度是受限制的(URL 的最大长度是 2048 个字符)。POST无限制。GET只允许 ASCII 字符。POST没有限制。也允许二进制数据。
与 POST 相比,GET 的安全性较差(相对来说,其实对于服务器都是不安全的),因为所发送的数据是 URL 的一部分。在发送密码或其他敏感信息时绝不要使用 GET !POST 比 GET 更安全,因为参数不会被保存在浏览器历史或 web 服务器日志中。
GET的数据在 URL 中对所有人都是可见的。POST的数据不会显示在 URL 中。

额外知识点 put 和 delete

PUT,DELETE操作是幂等的。所谓幂等是指不管进行多少次操作,结果都一样。比如我用PUT修改一篇文章,然后在做同样的操作,每次操作后的结果并没有不同,DELETE也是一样。顺便说一句,因为GET操作是安全的,所以它自然也是幂等的。
POST操作既不是安全的,也不是幂等的,比如常见的POST重复加载问题:当我们多次发出同样的POST请求后,其结果是创建出了若干的资源。

HTTP状态码及其含义

  • 1XX:信息状态码
    • 100 Continue 继续,一般在发送post请求时,已发送了http header之后服务端将返回此信息,表示确认,之后发送具体参数信息
  • 2XX:成功状态码
    • 200 OK 正常返回信息
    • 201 Created 请求成功并且服务器创建了新的资源
    • 202 Accepted 服务器已接受请求,但尚未处理
  • 3XX:重定向
    • 301 Moved Permanently 请求的网页已永久移动到新位置。
    • 302 Found 临时性重定向。
    • 303 See Other 临时性重定向,且总是使用 GET 请求新的 URI
    • 304 Not Modified 自从上次请求后,请求的网页未修改过。
  • 4XX:客户端错误
    • 400 Bad Request 服务器无法理解请求的格式,客户端不应当尝试再次使用相同的内容发起请求。
    • 401 Unauthorized 请求未授权。
    • 403 Forbidden 禁止访问。
    • 404 Not Found 找不到如何与 URI 相匹配的资源。
  • 5XX: 服务器错误
    • 500 Internal Server Error 最常见的服务器端错误。
    • 503 Service Unavailable 服务器端暂时无法处理请求(可能是过载或维护)。

display: none;visibility: hidden;的区别

  • 联系:它们都能让元素不可见

  • 区别:

    • display:none;会让元素完全从渲染树中消失,渲染的时候不占据任何空间;visibility: hidden;不会让元素从渲染树消失,渲染师元素继续占据空间,只是内容不可见
    • display: none;是非继承属性,子孙节点消失由于元素从渲染树消失造成,通过修改子孙节点属性无法显示;visibility: hidden;是继承属性,子孙节点消失由于继承了hidden,通过设置visibility: visible;可以让子孙节点显式
    • 修改常规流中元素的display通常会造成文档重排。修改visibility属性只会造成本元素的重绘。
    • 读屏器不会读取display: none;元素内容;会读取visibility: hidden;元素内容

display有哪些值?说明他们的作用

  • block 象块类型元素一样显示。
  • none 缺省值。象行内元素类型一样显示。
  • inline-block 象行内元素一样显示,但其内容象块类型元素一样显示。
  • list-item 象块类型元素一样显示,并添加样式列表标记。
  • table 此元素会作为块级表格来显示
  • inherit 规定应该从父元素继承 display 属性的值

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

  • absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位
  • fixed:生成绝对定位的元素,相对于浏览器窗口进行定位
  • relative:生成相对定位的元素,相对于其正常位置进行定位
  • static 默认值。没有定位,元素出现在正常的流中
  • inherit 规定从父元素继承 position 属性的值
  • sticky 可以说是相对定位relative和固定定位fixed的结合;它主要用在对scroll事件的监听上;简单来说,在滑动过程中,某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top:100px);position:sticky这时的效果相当于fixed定位,固定到适当位置。

事件模型

W3C中定义事件的发生经历三个阶段:捕获阶段(capturing)、目标阶段(targetin)、冒泡阶段(bubbling

你可能感兴趣的:(js 基础(面试前必看))