某厂面试

Posted 2021-01-01 rencoo

1、什么是html语义化？

语义化 div ==> section，div ==> nav(语言自己能解释)， input/(关闭符号) br/

相对于样式标记，如 i（样式）/ em（语义）；b（样式）/ strong（语义）;

为什么需要使用语义化标记？

1、HTML本身就是语义化标记语言，使用符合语义的标记，才谈得上正确使用HTML

2、使用合适的标记，可以合理应用浏览器默认样式

3、有利于SEO（搜索引擎的查询）

4、使用合适的标记是确保可访问性的一个前提

5、更好的可维护性

有哪些方法有利于SEO

渐进增强；

关键词；

实行交换链接;

注册一个经过优化了的关键字域名;

保持网站结构简单

保持你的网站结构简单，网站的浏览者就可以很容易的从一个页面跳到另一个页面。

同时，你的网站对搜索引擎越友好，搜索引擎蜘蛛就越容易抓取你网站内容。

2、行内元素、行内块元素、块级元素分别有哪些标签？分别列举 3 个以上(越多越好)

块级元素 div、p、h1-h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre，HTML5新增的header、section、aside、footer

行内元素 span、label、a、b、lable、input、abbr（缩写）、em（强调）、big、small、cite（引用）、strong、i（斜体）、q（短引用）、textarea、select、sub、sup，u（下划线）

行内块元素 button、img、video、input、textarea

块级元素新开启一行（即使是设置了width属性也是独占一行）、尽可能撑满父级元素的宽度，可以设置width和height属性；table元素浏览器默认的display属性为table。

相邻的行内元素不换行，宽度即为内容的宽度、padding的4个方向都有效、margin只有水平方向有效、不可以设置width和height属性。

行内块元素表现其实和块元素一样，只是可以相互挨着；能设置4个方向的margin;

3、请问以下代码的 "标题" 是什么颜色的？

1.head span{color:red;} #head span{color:blue;} #title{color:yellow;} span{color:green;}<br>
2<div id="head" class="head"><span id="title">标题</span></div>  <br>

blue

选择器包含id吗(每个id加1分)；选择器包含类或伪类吗(每个类或伪类加1分);选择器包含元素名吗(一个元素名加一分)

4.请写出你知道的清除浮动的方法?

1.父级div定义height;

2.最后一个浮动元素后加空div标签 并添加样式clear:both;

3.包含浮动元素的父标签添加样式 overflow 为 hidden或auto。

通过设置父元素overflow值设置为hidden；在IE6中还需要触发 hasLayout ，例如 zoom：1；

4.父元素也设置浮动

5.父元素设置display:table;

6.clearfix；如果你的页面使用bootstrap框架，引入css文件，给父元素添加clearfix便可以清除浮动，这也是平时工作中最常用也是最受程序员喜欢的一种方法，只需添加一个类便可;

5.定位方式有几种？分别是相对什么元素定位的？

1.static 2.float 3.relative 4.absolute 5.fixed

1.static定位(普通流定位) -------------- 默认定位

2.float定位(浮动定位) 例：float:left;

有两个取值：left(左浮动)和right(右浮动)。浮动元素会在没有浮动元素的上方，效果上看是遮挡住了没有浮动的元素，
有float样式规则的元素是脱离文档流的，它的父元素的高度并不能有它撑开。

3.relative定位(相对定位)

相对定位最大的作用是为了实现某个元素相对于本元素的左上角绝对定位，本元素需要设置position为relative。

4.absolute定位(绝对定位)

相对于祖代中有relative(相对定位)并且离本元素层级关系上是最近的元素的左上角进行定位，如果在祖代元素中没有有relative定位的，就默认相对于body进行定位。

注意：当同时有浮动元素和绝对定位元素出现并且浮动元素没有设置z-index，浮动元素是压在绝对定位元素上的，即离用户的视线更近。

5.fixed

6.请实现右图的设计

javascript

1.JavaScript 的数据类型有哪些？如何准确检测数据类型？

引用数据类型, 引用数据类型

1.typeof

1typeof 1;//‘number‘
2typeof true;//‘boolean‘
3typeof ‘‘;//‘string‘
4typeof undefined;//‘undefined‘
5typeof function (){};//‘function‘

typeof是基本数据类型检测利器(但是不包括null) // "object"

2.instanceof是检测引用数据类型，而不能检测引用数据类型

1var arr = [];
2arr instanceof Array;//true

但是只要是在原型链上出现过构造函数都会返回true，所以这个检测结果不很准确

1arr instanceof Object;//true
2Array.isArray(a) // true 准确

3.constructor 构造函数

1var arr = [];
2console.log(arr.constructor === Array);  // true
3console.log(arr.constructor == Object);  // false
4var num = 1;
5console.log(num.constructor === Number); // true

局限性：若把类的原型进行重写，覆盖掉，检测结果就不准确

4.Object.prototype.toString.call();

在Object基本类定义的这个toString()方法，是用来检测数据类型的；

跟字符串、数字、布尔等原型上定义的toString()方法基本用法都是转换字符串的。

1console.log(Object.prototype.toString.call(1));                // [object Number]
2console.log(Object.prototype.toString.call(‘‘));               // [object String]
3console.log(Object.prototype.toString.call(true));             // [object Boolean]
4console.log(Object.prototype.toString.call(null));             // [object Null]
5console.log(Object.prototype.toString.call(undefined));        // [object Undefined]
6console.log(Object.prototype.toString.call([]));               // [object Array]
7console.log(Object.prototype.toString.call({}));               // [object Object]
8console.log(Object.prototype.toString.call(/^$/));             // [object RegExp]
9console.log(Object.prototype.toString.call((function () {}))); // [object Function]

2.以下代码执行结果分别是什么？

11) 3 + ‘3‘                    // ‘33
22) "23" > "3"                 // false   "23" > 3 // true    "23" < "3" // true
33) var b = true && 2          // b 的值是 2   
44) "abc123".slice(2, -1)      // "c12" (负数就是倒数第几个，这里是倒数第一个，但不包含); "abc123".slice(2, 0)//‘‘; "abc123".slice(2, 1)//‘‘;
55) "abc123".substring(2, -1)  // "ab";  substring()方法会把所有负值参数都转换为0; substring(2, 0) == substring(0, 2)

slice 和 substring 第二个数都不包含

3 以下代码执行结果是什么？

 11) 
 2var foo = 1, bar = 2, j, test
 3test = function(j) {
 4    j = 5;
 5    var bar = 5;
 6    foo = 5;
 7}
 8test(10);
 9console.log(foo); // 5
10console.log(bar); // 2
11console.log(j);   // undefined !!!

JavaScript 中局部变量只可能通过两种方式声明，一个是作为函数参数，另一个是通过 var 关键字声明。

使用var声明的变量会自动被添加到最接近的环境中。在函数内部，最接近的环境就是函数的局部环境;

bar 和 j（函数参数） 是函数 test 内的局部变量，而对 foo 的赋值将会覆盖全局作用域内的同名变量

 12)
 2for(var i=0;i<10;i++){
 3    window.setTimeout(function(){
 4        console.log(i); // 10(后)
 5    }, 100);
 6}
 7console.log(i); // 10 (先)
 8
 93)
10var length = 10;
11function fn(){
12    alert(this.length);
13}
14
15var obj = {
16    length:5,
17    method:function(){
18        fn();
19    }
20}
21
22obj.method() // 10
23
244)
25function foo(){this.value = 42;};
26foo.prototype = {method:function(){return true;}};
27function bar(){
28    var value = 1;
29    return {method:function(){return value;}};
30};
31foo.prototype = new bar();                   // new bar();由于return 是对象类型，则返回该对象； foo.prototype = {method:function(){return value;}} 相当于重写了原型！！！
32console.log(foo.prototype.constructor);      // Object 
33console.log(foo.prototype instanceof bar)    // false  正确应该是 foo.prototype instanceof Object // true
34var test = new foo();                        // 由于是重写原型之后的实例，因此与重写的原型进行连接
35console.log(test instanceof foo)             // true
36console.log(test instanceof bar)             // false
37console.log(test.method())                   // 1; 与重写的原型进行连接

在构造函数中return基本类型，不会影响构造函数的值；而return对象类型，则会替代构造函数返回该对象

4、如何对数组进行重排？如： [2, [1, 2], 3, "2", "a", "b", "a", [1, 2]]，重排后[2, [1,2], 3, "2", "a", b]

 1var arr = [2, [1, 2], 3, "2", "a", "b", "a", [1, 2]];
 2var arr1 = [],
 3    len = arr.length;
 4for(let i = 0; i < len; i++) {
 5    arr1.push(JSON.stringify(arr[i]));
 6}
 7
 8var arr2 = Array.from(new Set(arr1)),
 9    length = arr2.length,
10    arr3 = [];
11for(let i = 0; i < length; i++) {
12    arr3.push(JSON.parse(arr2[i]));
13}
14
15arr3 // [2, [1, 2], 3, "2", "a", "b"]
16// [1, 2] !== [1, 2]

5.要给下面所有 li 元素绑定 click 事件，在鼠标点击每个 li 的时候 alert 该 li 里面的内容；且在鼠标离开外部 ul 元素

范围的时候弹出一个 alert 提示。（实现时请注意代码执行效率即浏览器兼容性、不要使用现成的框架库，用原生 js 编写完成)

 1<ul id="ul">
 2    <li>内容1</li>
 3    ......此处省略 1000+ 个对象(注：不要使用循环绑定，如果使用循环绑定 1000+ 的绑定事件会很慢)......
 4    <li>内容n</li>
 5<ul>
 6// 委托
 7var ul = document.getElementById(‘ul‘);
 8var items = ul.querySelectorAll(‘li‘);
 9ul.addEventListener(‘click‘, evt=>{
10  var self = evt.target;
11  var inx = Array.from(items).indexOf(self);
12  console.log(items[inx].innerHTML);
13})
14// 另一种实现方式就是闭包；循环绑定
15ul.addEventListener(‘mouseleave‘, ()=>{ // 使用mouseleave而不是mouseout
16    alert(‘离开组件‘);
17})

综合

1.请从编码和项目实施两个角度谈谈对JS的优化

1.编码

减少DOM访问,避免全局查找；使用事件代理，而不是绑定在每一个子元素上

避免不必要的属性查找(提取)

避免 with 语句（with语句会创建自己的作用域，因此会增加其中执行的代码的作用域链长度）

优化循环

最小化语句数

使用数组和对象字面量而不是构造函数

2.项目实施

减少HTTP请求

打包压缩

本地缓存

将脚本放到页面底部

预加载

本地缓存哪几种方式，优势劣势？

2.请谈谈如何对 CSS 性能方面做优化

1.继承

2.集合写 border{solid 1px black};

3.压缩工具

4.高性能选择器

3.页面图片加载太多，一般如何处理？请写出你的代码？如何延迟和预先加载？

懒加载;

懒加载原理

将资源路径赋值到img标签的data-xx属性中，而非直接赋值在src属性

持续判断图片是否在用户当前窗口的可视范围内，从而动态将data-xx的值(url)赋值到src里去

 1//图片懒加载类<br>
 2class LazyLoad {
 3    constructor(selector) {
 4        this.imglis = Array.from(document.querySelectorAll(selector));
 5        this.init(); // 初始化
 6    }
 7
 8    // 判断图片是否需要加载
 9    load() {
10        let imglis = this.imglis;
11        for (let i = imglis.length; i--;) {
12            if(this.canSeen(imglis[i])) {
13                this.show(imglis[i]);
14                this.del(i);
15            }
16        }
17    }   
18
19    // 判断图片是否在浏览器可视范围内
20    canSeen(el) {
21        let bound = el.getBoundingClientRect();  // 元素相对于视窗的位置集合；有top, right, bottom, left等等属性
22        let clientHeight = window.innerHeight;
23        return bound.top <= clientHeight - 200;  // 为了看效果，加懒加载的图片提前
24    }
25
26    // 显示图片
27    show(el) {
28        let src =el.getAttribute(‘data-src‘);
29        el.src = src;
30    }
31
32    // 移除imglis里面已经加载的图片(避免重复判断,减少开销)
33    del(idx) {
34        this.imglis.splice(idx, 1);                   
35    }
36
37    // 当浏览器滚动的时候，继续判断(持续运行load)
38    bindEvent() {
39        window.addEventListener(‘scroll‘, ()=>{
40            this.load();
41        })
42    }
43
44    // 初始化
45    init() { 
46        this.load();
47        this.bindEvent();
48    }
49}
50
51// 实例化对象(以懒加载的图片类为选择参数)
52const lazy = new LazyLoad(‘.lazyload‘);

4.有无移动端开发经验？

5.您平常看多哪些书：一般通过哪些方式解决问题？

这是昨天某厂的面试；还有一些题，没能放出来；看着简单，其实都不简单；答得很差，大佬一定很失望；电面的时候，大佬应该对我挺有好感的；大佬问我学了多久，我说三个月；临走时，大佬说，虽然现在前端很混乱，但是要想立足还是得以工程师的身份来要求自己；大佬告诉我要打好基础，学得更加系统；学习过程需要好好反思；读文档，自己敲代码验证都是必须的；大佬说反正以后都是一个圈子里混，随时可以联系，有问题也可以微信问他；

回去之后，我挺难过的，毕竟有好多题，想一想都能出来。想想这三个月一直疯狂学习新东西，学完后，上周五花了一天弄简历，这周就去面试了，也没好好整理和刷题；今天早上刷了刷题，发现其实好多知识点都类似；挺可惜的，让大佬失望了；未来加油，希望有缘再见!