链家面试

最新推荐文章于 2020-06-13 18:32:25 发布

liuliuliu_666

最新推荐文章于 2020-06-13 18:32:25 发布

阅读量753

点赞数

分类专栏：面试问题前端文章标签：前端面试

本文链接：https://blog.csdn.net/liuliuliu_666/article/details/77801181

版权

面试问题同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

前端

19 篇文章 0 订阅

订阅专栏

Q1：分页问题

只能offset和limit就能解决分页问题吗？
很显然是不能的，因为会有新的数据填到数据库里面。

解决方案一：存储
把数据查询完以后全部放置前端进行缓存，需要的时候直接在缓存中拿数据即可
解决方案二：使用小于或者大于生成数据的时间进行查询分页的数据

Q2:html

新的标签nav、section、article、footer、header、aside等
为什么新增这些标签？

去掉或者丢失样式的时候能够让页面呈现出清晰的结构
有利于SEO，和搜索引擎建立良好的沟通，有助于爬虫抓取更多有效的信息：爬虫依赖于标签来确定上下文和各个关键字的权重
方便其他设备的解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式渲染网页
便于团队开发和维护，语义化更具可读性。

Q3:怎么实现视频播放

一：使用HTML5新标签
二：使用flash插件
优缺点：使用flash可以做到浏览器兼容，只不过需要安装flash
HTML5新标签，不用安装任何插件，但是低版本浏览器不支持

Q4:float和position

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        div {
            width: 100px;height: 100px;
        }
        #div1 {
            background-color: green;float: left;
        }
        #div2 {
            width: 120px;height: 12px;background-color: red;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
</body>
</html>

效果如图：这里写图片描述

note:元素被float之后已经不再占用原来的位置，所以下一行的元素就上来了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        div {
            width: 100px;height: 100px;
        }
        #div1 {
            background-color: green;float: left;
        }
        #div2 {
            width: 120px;height: 120px;background-color: red;
        }
    </style>
</head>
<body>
    <div id="div2"></div>
    <div id="div1"></div>
</body>
</html>

效果如图：这里写图片描述

note:元素被float之后，它会浮动到遇到父元素边框或者前一个浮动元素为止。

positon:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        div {
            width: 100px;height: 100px;
        }
        #div1 {
            background-color: green;
        }
        #div2 {
            background-color: red;position: absolute;left: 20px;top: 30px;
        }
    </style>
</head>
<body>
    <div id="div2"></div>
    <div id="div1"></div>
    <!-- <div id="div2"></div>效果一样 -->
</body>
</html>

效果如图：这里写图片描述
note：position:absolute;这里也是脱离文档流
来个综合的：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        div {
            width: 100px;height: 100px;
        }
        #div1 {
            background-color: green;float: left;
        }
        #div2 {
            background-color: red;position: absolute;left: 20px;top: 30px;float: left;
        }
        #div3 {
            background-color: black;width: 120px;height: 120px;
        }
    </style>
</head>
<body>
    <div id="div2"></div>
    <div id="div1"></div>
    <div id="div3"></div>
</body>
</html>

效果图：这里写图片描述

Q5:js的五种基本数据类型

null、undefined、string、boolean、number

Q6:

        var a = [1,2,3];
        var b = [4,5,6];
        function foo(a) {
            a = [3,2,1];
            b = [6,5,4];
        }
        foo(a);
        a;//[1,2,3]
        b;//[6,5,4]

        var a = 1;
        var b = 3;
        function foo(a) {
            a = 2;
            b = 4;
        }
        foo(a);
        a;//1
        b;//4

Q7:数组复制

浅复制就不用说了，两个变量指向同一个引用地址
深复制

        var a = [1,2,3];
        function deepCopy(arr) {
            var newArr = [];
            for (var i = 0; i < arr.length; i++) {
                if(Array.isArray(arr[i])) {
                    newArr.push(deepCopy(arr[i]));
                }else {
                    newArr.push(arr[i]);
                }
            }
            return newArr;
        }
        var b = deepCopy(a);
        b.push(4);
        a;//[1,2,3]
        b;//[1,2,3,4]

Q8:http的

http协议在哪一层？应用层
他是基于哪些协议的？HTTP 是基于 TCP/IP 协议的应用层协议。它不涉及数据包（packet）传输，主要规定了客户端和服务器之间的通信格式，默认使用80端口。
https:在http上进行了加密操作
使用https需要注意些什么吗？

liuliuliu_666

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
链家面试

Q1：分页问题只能offset和limit就能解决分页问题吗？很显然是不能的，因为会有新的数据填到数据库里面。解决方案一：存储把数据查询完以后全部放置前端进行缓存，需要的时候直接在缓存中拿数据即可解决方案二：使用小于或者大于生成数据的时间进行查询分页的数据Q2:html新的标签nav、section、article、footer、header、aside等为什么新增这些标签？去掉
复制链接

扫一扫