H5前端面试题及答案（2）

时间 2019-11-12

标签 h5 端面试题答案繁體版

原文原文链接

最近想着跳槽，但面试的邀约很少，心里有点烦躁。梳理梳理心情，跳槽季竞争也大，努力作好本身...javascript

21.请设计一套方案，用于确保页面中js加载彻底。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>alert标签名</title>
</head>
<body>
    <script>
    //加载完成后执行回调
    function loadScript(url, callback){
        var script = document.createElement("script")
        script.type = "text/javascript";
        if (script.readyState){ //IE
            script.onreadystatechange = function(){
                if (script.readyState == "loaded" || script.readyState == "complete"){
                    script.onreadystatechange = null;
                    callback();
                }
            };
        } else { //Others: Firefox, Safari, Chrome, and Opera
            script.onload = function(){
                callback();
            };
        }
        script.src = url;
        document.body.appendChild(script);
    }

    loadScript('http://www.taojiaqu.com/resource/public/jquery/jquery-1.11.2.min.js',function(){
        alert('ok');
    })
    </script>
</body>
</html>

22.请优化某页面的加载速度。

1.JS、CSS、HTML作gzip压缩（不要对图片进行Gzip压缩）css

2.删除js、css、html文件的注释，回车符，以及无效字节html

3.javascript放置网页底部，避免阻塞下载java

4.CSS放到header中，避免白屏jquery

5.合并JS和CSS；压缩JS和CSS；css3

6.优化缓存：对没有变化的css、js，图片等网页元素，直接利用客户端的浏览器缓存读取来有效减小http请求数。面试

6.经过增长expires header（给文件加上关于过时时间的header报文）能够告诉浏览器，那些网页元素能够缓存和缓存多长时间。正则表达式

7.采用CSS sprites（CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中）技术来实现。算法

8.把脚本和图片放在不一样的服务器和域名，作成并行下载。浏览器

9.利用H5的缓存技术

23.对 string 对象进行扩展，使其具备删除先后空格的方法。

1.用prototype添加方法

String.prototype.trim=function(){
    return this.replace(/(^\s*)|(\s*$)/g, "");
}

2.利用 substring() 函数

String.prototype.deletSpace = function(){  
    var str = this;  //提取须要操做的字符串  
    while(str[0] == " "){  //删除前面的空格  
        str = str.substring(1);   
    }  
    while(str[str.length - 1] == " "){  //删除后面的空格  
        str = str.substring(0,str.length-1);  
    }  
    return str;  
}

方法仍是有的，欢迎举例

24.完成一个正则表达式，验证用户是否输入正确的身份证号码。

var string='35021119920102353X';
var stringExp=new RegExp(/^(\d{15}$|^\d{18}$|^\d{17}(\d|X|x))$/);
alert(stringExp.test(string)); //true

//15位或18位，若是是15位，必需全是数字
//若是是18位，最后一位能够是数字或字母Xx，其他必需是数字

25.介绍一下CSS的盒子模型。

当IE6~8处于怪异模式下就会使用IE盒子模型，不然将使用W3C标准盒子模型

26.CSS选择符有哪些？哪些属性能够继承？优先级算法如何计算？CSS3新增伪类有哪些？

哪些元素可继承（网站找的，供参考；大体经常使用的都有了）

不可继承的：display、margin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、 page-bread-before和unicode-bidi。

全部元素可继承：visibility和cursor。

内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction。

终端块状元素可继承：text-indent和text-align。

列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。

表格元素可继承：border-collapse

优先级算法

1.选择器都有一个权值，权值越大越优先；

2.当权值相等时，后出现的样式表设置要优于先出现的样式表设置；

3.创做者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式；

4.继承的CSS 样式不如后来指定的CSS 样式；

5.在同一组属性设置中标有“!important”规则的优先级最大；

css3伪类：

27.如何居中 DIV ?如何居中一个浮动元素？

//绝对定位，负边距（这种方式实际项目中不能够）
.div{width:200px;height: 200px;position:absolute;left:50%;top:50%;margin:-100px 0 0 -100px}

//父元素和子元素同时左浮动，而后父元素相对左移动50%，再而后子元素相对右移动50%，或者子元素相对左移动-50%也就能够了
.div{position: relative;left:50%;float: left;}
.con{width:200px;height: 200px;float:left;position:relative;right:50%;background: #000}

<div class="div"><div class="con"></div></div>

28.CSS3有哪些新特性？

新的选择器：上方题目有例子

特效：圆角，阴影，渐变，背景，边框背景，元素变形效果，动画，过渡

29.一个满屏品字布局如何设计？

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>alert标签名</title>
    <style>*{margin:0;padding:0}
    .top{position: absolute;top:0;bottom: 50%;background:red;width: 100%;}
    .con{position: absolute;top:50%;bottom: 0;width: 100%;}
    .left{position: absolute;left:0;top:0;height: 100%;width: 50%;background: #000}
    .right{position: absolute;right:0;top:0;height: 100%;width: 50%;background: yellow}
    </style>

</head>
<body>
    <div class="top"></div>
    <div class="con">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

效果：

30.常常遇到CSS的兼容性有哪些？缘由，解决方法是什么？

参考前一篇15题

31.为何要初始化CSS样式

防止不一样浏览器，对标签的默认样式设置不一样...

H5前端面试题及答案（2）

21.请设计一套方案，用于确保页面中js加载彻底。

22.请优化某页面的加载速度。

23.对 string 对象进行扩展，使其具备删除先后空格的方法。

24.完成一个正则表达式，验证用户是否输入正确的身份证号码。

25.介绍一下CSS的盒子模型。

26.CSS选择符有哪些？哪些属性能够继承？优先级算法如何计算？CSS3新增伪类有哪些？

优先级算法

27.如何居中 DIV ?如何居中一个浮动元素？

28.CSS3有哪些新特性？

29.一个满屏品字布局如何设计？

30.常常遇到CSS的兼容性有哪些？缘由，解决方法是什么？

31.为何要初始化CSS样式

32.absolute 的 containing block 计算方式跟正常流有什么不一样？

33.position 跟 display、margin collapse、overflow、float 这些特征相互叠加后会怎么样？

34.对 BFC 规范的理解？

H5前端面试题及答案（2）

21.请设计一套方案，用于确保页面中js加载彻底。

22.请优化某页面的加载速度。

23.对 string 对象进行扩展，使其具备删除先后空格的方法。

24.完成一个正则表达式，验证用户是否输入正确的身份证号码。

25.介绍一下CSS的盒子模型。

26.CSS选择符有哪些？哪些属性能够继承？优先级算法如何计算？CSS3新增伪类有哪些？

优先级算法

27.如何居中 DIV ?如何居中一个浮动元素？

28.CSS3有哪些新特性？

29.一个满屏 品 字布局 如何设计？

30.常常遇到CSS的兼容性有哪些？缘由，解决方法是什么？

31.为何要初始化CSS样式

32.absolute 的 containing block 计算方式跟正常流有什么不一样？

33.position 跟 display、margin collapse、overflow、float 这些特征相互叠加后会怎么样？

34.对 BFC 规范的理解？

29.一个满屏品字布局如何设计？