前端面试题（一）

最新推荐文章于 2024-02-13 09:04:42 发布

林夕梦木子李

最新推荐文章于 2024-02-13 09:04:42 发布

阅读量349

点赞数

分类专栏：前端面试

前端面试专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一：什么叫JS的变量提升？

定义：函数声明和变量声明总是被JavaScript解释器隐式地提升到包含他们的作用域的最顶端

注意这里说的是变量或函数的’声明’会被提升到其作用域顶端

另一个需要注意的是作用域。我们知道Javascript中的作用域只有两种，一种是全局作用域，一种是函数作用域(局部作用域) 。是没有块级作用域等概念的。

案例一：正常的变量声明在调用之前

        var x=10;  //全局变量
        function txt1(){
            console.log(x); //打印出10
        }           
        txt1();

此时控制打印出10；

案例二：变量声明在调用之后

        var x=10;  //全局变量
        function txt2(){
            console.log(x); //输出undefined
            var x=34;
        }           
        txt2();

此时发生变量提升，案例二执行的代码实际如下：

        var x=10;  //全局变量
        function txt2(){
            var x; //变量声明被隐式提升
            console.log(x); //输出undefined
            x=34;
        }           
        txt2();

此时，函数中的x被隐式的提升，函数局部的变量x覆盖全局变量x，而局部的变量在输出之前只被声明未被赋值，所以输出undefined。

对于函数提升呢！我们可以用这样一段代码来理解：

        fun();      
        function fun() {
            console.log('nice');  //输出nice
        }

即函数调用在函数定义之前。如果按照javascript的规矩，其代码是按其先后顺序一行一行的执行的话，那么在 fun() 做出函数调用的动作的时候，其前面是没有任何关于fun 这一函数的定义的。
这里之所以能正确调用这个 fun 函数，也是由于在整个javascript代码执行前，其中的函数声明被提升到了其作用域的最前面，这样的话在调用fun() 函数的时候自然能正确执行而不会出错。

二：什么是ajax跨域，如何解决？

我们先回顾一下域名地址的组成：

http:// www . google : 8080 / script/jquery.js

http:// （协议号）

www （子域名）

google （主域名）

8080 （端口号）

script/jquery.js （请求的地址）

当协议、子域名、主域名、端口号中任意一各不相同时，都算不同的“域”。
不同的域之间相互请求资源，就叫“跨域”。

由于在工作中需要使用AJAX请求其他域名下的请求，但是会出现拒绝访问的情况，这是因为基于安全的考虑，AJAX只能访问本地的资源，而不能跨域访问。

比如说你的网站域名是aaa.com，想要通过AJAX请求bbb.com域名中的内容，浏览器就会认为是不安全的，所以拒绝访问。

会出现跨域问题的几种情况：

这里写图片描述

处理跨域的方法：

1. 代理

这种方式是通过后台(ASP、PHP、JAVA、ASP.NET)获取其他域名下的内容，然后再把获得内容返回到前端，这样因为在同一个域名下，所以就不会出现跨域的问题。

2. JSONP

假设在http://www.aaa.com/index.php这个页面中向http://www.bbb.com/getinfo.php提交GET请求，那么我们在www.aaa.com页面中添加如下代码：

    var eleScript= document.createElement("script"); //创建一个script元素

    eleScript.type = "text/javascript"; //声明类型、

    eleScript.src = "http://www.bbb.com/getinfo.php"; //添加src属性 引入跨域访问的url

    document.getElementsByTagName("HEAD")[0].appendChild(eleScript); //在页面中添加新创建的script元素

当GET请求从http://www.bbb.com/getinfo.php返回时，可以返回一段JavaScript代码，这段代码会自动执行，可以用来负责调用http://www.aaa.com/index.php页面中的一个callback函数。看下面一个例子：
在www.aaa.com页面中：

　   function jsonp( json ){ 　           
    　　document.write( json.name ); //输出周星驰 
    }       

    <script src="http://www.bbb.com/getinfo.php"></script>

在www.bbb.com页面中：

　　jsonp({ "name":"周星驰","age":45 });

也就是在www.aaa.com页面中声明，在www.bbb.com页面中调用。但是JSONP只支持 “GET” 请求，但不支持 “POST” 请求。

3. XHR2

“XHR2” 全称 “XMLHttpRequest Level2” 是HTML5提供的方法，对跨域访问提供了很好的支持，并且还有一些新的功能。

IE10一下的版本都不支持

只需要在服务器端头部加上下面两句代码：

　　header( “Access-Control-Allow-Origin:*” );

　　header( “Access-Control-Allow-Methods:POST,GET” );

三：http状态码

HTTP 状态码负责表示客户端 HTTP 请求的返回结果、标记服务器端的处理是否正常、通知出现的错误等工作。借助状态码，用户可以知道服务器端是正常处理了请求，还是出现了错误。
这里写图片描述

四：一个页面从输入URL到页面加载显示完成，这个过程都发生什么？
一般会经历以下几个过程：

1、首先，在浏览器地址栏中输入url

2、浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，会直接在屏幕中显示页面内容。若没有，则跳到第三步操作。

3、在发送http请求前，需要域名解析(DNS解析)，解析获取相应的IP地址。

4、浏览器向服务器发起tcp连接，与浏览器建立tcp三次握手。

5、握手成功后，浏览器向服务器发送http请求，请求数据包。

6、服务器处理收到的请求，将数据返回至浏览器

7、浏览器收到HTTP响应

8、读取页面内容，浏览器渲染，解析html源码

9、生成Dom树、解析css样式、js交互

10、客户端和服务器交互

11、ajax查询

五：浏览器是如何渲染页面的？

页面渲染就是浏览器将 HTML 代码根据 CSS 定义的规则显示在浏览器窗口中的这个过程，理解了原理就更会容易理解前端优化的一些准则。

主要过程：

       1. 用户输入网址（假设是个 HTML 页面，第一次访问，无缓存情况），浏览器向服务器发出HTTP请求，服务器返回 HTML 文件； （善用缓存，减少HTTP请求，减轻服务器压力）

       2. 浏览器载入 HTML 代码，发现 <head> 内有一个 <link> 引用外部 CSS 文件,则浏览器立即发送CSS文件请求，获取浏览器返回的CSS文件；  （CSS文件合并，减少HTTP请求）

       3. 浏览器继续载入 HTML 中 <body> 部分的代码，并且 CSS 文件已经拿到手了，可以开始渲染页面了；    （CSS文件需要放置最上面，避免网页重新渲染）

       4. 浏览器在代码中发现一个 <img> 标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码；（图片文件合并，减少HTTP请求）

       5. 服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来重新渲染这部分代码；（最好图片都设置尺寸，避免重新渲染）

       6. 浏览器发现了一个包含一行 JavaScript 代码的 <script> 标签，会立即运行该js代码；（script最好放置页面最下面）                   

       7. js脚本执行了语句，它令浏览器隐藏掉代码中的某个 <div>,突然就少了一个元素，浏览器不得不重新渲染这部分代码；（页面初始化样式不要使用js控制）   

       8. 终于等到了 </html> 的到来，浏览器泪流满面……

       9. 等等，还没完，用户点了一下界面中的“换肤”按钮，JavaScript 让浏览器换了一下 <link> 标签的 CSS 路径；

      10. 浏览器召集了在座的各位 <div><span><ul><li> 们，“大伙儿收拾收拾行李，咱得重新来过……”，浏览器向服务器请求了新的CSS文件，重新渲染页面。

影响页面渲染速度主要有： reflow(回流)和repaint(重绘)

reflow(回流)

   说到页面为什么会慢？那是因为浏览器要花时间、花精力去渲染，尤其是当它发现某个部分发生了点变化影响了布局，需要倒回去重新渲染， 该过程称为reflow（回流）。

    reflow 几乎是无法避免的。现在界面上流行的一些效果，比如树状目录的折叠、展开（实质上是元素的显 示与隐藏）等，都将引起浏览器的 reflow。鼠标滑过、点击……只要这些行为引起了页面上某些元素的占位面积、定位方式、边距等属性的变化，都会引起它内部、周围甚至整个页面的重新渲 染。通常我们都无法预估浏览器到底会 reflow 哪一部分的代码，它们都彼此相互影响着。

repaint(重绘)

           如果只是改变某个元素的背景色、文 字颜色、边框颜色等等不影响它周围或内部布局的属性，将只会引起浏览器 repaint（重绘）。

        repaint 的速度明显快于 reflow（在IE下需要换一下说法，reflow 要比 repaint 更缓慢）。

哪些情况导致reflow(回流)

reflow(回流)是导致DOM脚本执行低效的关键因素之一。页面上任何一个结点触发reflow，都会导致它的子结点及祖先结点重新渲染。

 在哪些情况下会导致reflow发生：

    1.改变窗囗大小       
    2.改变文字大小
    3.添加/删除样式表
    4.内容的改变，如用户在输入框中敲字
    5.激活伪类，如:hover (IE里是一个兄弟结点的伪类被激活)
    6.操作class属性
    7.脚本操作DOM
    8.计算offsetWidth和offsetHeight
    9.设置style属性

尽量避免reflow回流

reflow是不可避免的，只能将reflow对性能的影响减到最小。

    1.尽可能限制reflow的影响范围。需要改变元素的样式，不要通过父级元素影响子元素。最好直接加在子元素上。

    2.通过设置style属性改变结点样式的话，每设置一次都会导致一次reflow。所以最好通过设置class的方式。

    4.权衡速度的平滑。比如实现一个动画，以1个像素为单位移动这样最平滑，但reflow就会过于频繁，CPU很快就会被完全占用。如果以3个像素为单位移动就会好很多。

    5.不要用tables布局的另一个原因就是tables中某个元素一旦触发reflow就会导致table里所有的其它元素reflow。在适合用table的场合，可以设置table-layout为auto或fixed，这样可以让table一行一行的渲染，这种做法也是为了限制reflow的影响范围。

    6.很多情况下都会触发reflow，如果css里有expression，每次都会重新计算一遍。

    7.减少不必要的 DOM 层级（DOM depth）。改变 DOM 树中的一级会导致所有层级的改变，上至根部，下至被改变节点的子节点。这导致大量时间耗费在执行 reflow 上面。

    8.避免不必要的复杂的 CSS 选择器，尤其是后代选择器（descendant selectors），因为为了匹配选择器将耗费更多的 CPU。