前端面试题整理

仇诺伊

发布于 2018-09-12 14:41:32

1.7K0

发布于 2018-09-12 14:41:32

Javascript数据类型答：null，number，boolean，string，undefined JavaScript 数据类型
ECMAscript和Javascript的关系答：ECMAscript是Javascript的规格，Javascript是ECMAscript的一种实现（另外的ECMAScript方言还有Jscript和ActionScript）。在日常场合，这两个词是可以互换的。es是js的各个版本。 javascript与ECMAScript、DOM、BOM的关系
闭包主要解决什么问题？答：凡是在闭包域内声明的变量或方法,外部无法直接访问,闭包域可以访问外部的变量或方法.隔离了作用域。用9种办法解决 JS 闭包经典面试题之 for 循环取 i
匹配一段由数字和大写字母组成的字符串的正则表达式答：/[A-Z0-9]/ 参考学习：系统地学习正则表达式(一)：基础篇
web storage 和cookie的区别答：① cookie是客户端用来存储数据的,它既可以在客户端设置也可以在服务器端设置。cookie会跟随任意HTTP请求一起发送. ② html5标准中的Web Storage包括了两种存储方式:sessionStorage和localStorage。 sessionStorage用于本地存储一个会话中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。 WebStorage 和 Cookie的区别
JavaScript AMD规范主要解决什么问题？答：主要解决web端模块问题。 JavaScript的AMD规范
样式自动居中有哪几种？答：

{display:block,margin:0 auto}  
{display:block,position,absolute,left:50%,right:50%,transform:translate(-50%,-50%)}

对数组[1，2，1，6，7，-2，4，0，6]按从大到小排序。答: 冒泡排序-----从小到大排序,存在10个不同大小的气泡，由底至上地把较少的气泡逐步地向上升，这样经过遍历一次后，最小的气泡就会被上升到顶（下标为0），然后再从底至上地这样升，循环直至十个气泡大小有序。在冒泡排序中，最重要的思想是两两比较，将两者较少的升上去.冒泡排序最坏情况的时间复杂度是O(n²) 经典排序算法 - 冒泡排序Bubble sort
使用Jquery遍历class等于lock的标签，并将标签内容收集到一个数组中。答：

var a=[]
$('.lock').each(function(){
    var h=$(this).html();
    a.push(h);
})

用SQL语句创建一张USER表答：create table "tablename" (username string,password int)
Nodejs操作文件需要加载哪个模块答：fs
h5的桌面应用开发，以及相应的解决方案答：nw.js 轻量级桌面应用开发的捷径——nw.js
对于web前端适配多端的模式有什么解决方案答：@meida多屏适配移动端Web页面适配方案
行内元素，块级元素，盒模型答：说说行内元素与块级元素以及之间的转换？ html块级元素与行内元素前端面试之CSS总结(上) 你真的了解盒模型吗？ CSS 布局经典问题初步整理
怎样对网站文件和资源进行优化答： 1.尽可能减少http请求次数，将css, js, 图片各自合并 2.使用CDN，降低通信距离 3.添加Expire/Cache-Control头 4.启用Gzip压缩文件 5.将css放在页面最上面 6.将script放在页面最下面 7.避免在css中使用表达式 8.将css, js都放在外部文件中 9.减少DNS查询 10.最小化css, js，减小文件体积 11.避免重定向 12.移除重复脚本 13.配置实体标签ETag 14.使用AJAX缓存，让网站内容分批加载，局部更新如何对网站进行优化提速？
两栏布局答：使用负边距
元素content添加父元素，设置左浮动，宽度为100%；
content 设置右边距，宽度为aside的宽度（留出aside浮上来的空间）；
aside左浮动，并设置负边距，等于自身宽度。

<style type="text/css">
         html,body{
             padding: 0;
             margin: 0;
         }
         #header, #footer{ 
             height: 100px;
             background: red;
            overflow: hidden;
          }
         #main{
            overflow: auto;
         }
         #main .center{
             height: 200px;
            width: 100%;
             float: left;
         }
        .center .content{
            height: 200px;
            background: green;
            margin-right: 100px;
        }
         #main .aside{
             height: 200px;
             width: 100px;
             background: blue;
             float: left;
            margin-left: -100px;
         }
     </style>

 </head>
 <body>
    <div id="header">header</div>
    <div id="main">
        <div class="center">
            <div class="content">
                我是主区块 我是主区块 main main  main
            </div>
        </div>
        <div class="aside"></div>
    </div>
    <div id="footer">footer</div>

两栏布局是主内容区为主，左（右）侧有一栏，(将侧边区块<aside>域浮动，<aside>浮动后覆盖绿色<main>, 再将<main> overflow:auto，形成BFC，形成独立区域，达到效果。)代码如下：

<style>
            #header, #footer{ 
             height: 100px;
             background: red;
          }
         #content .main{
             height: 200px;
             background: green;
             overflow: auto;
         }
         #content .aside{
             height: 200px;
             width: 100px;
             background: blue;
             float: left;
         }
     </style>
   <body>
    <div id="header"></div>
    <div id="content">
        <div class="aside"></div>
        <div class="main">
            main main main main main main
        </div>
    </div>
    <div id="footer"></div>
</body>