前端——笔试

1.link和@import的区别

link 属于 html 标签，而@import 是 css 提供的
页面被加载时，link 会同时被加载，而@import 引用的 css 会等到页面加载结束后加载。
link 是 html 标签，因此没有兼容性，而@import 只有 IE5 以上才能识别。
link 方式样式的权重高于@import 的。

2.移动端适配的方案？移动端开发和PC端开发的区别，移动端开发需要注意的点。

方案
- meta标签的viewport属性对于最大最小以缩放比例以及是否允许缩放等设置来适配<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
  - width ---- viewport的宽度（width=device-width意思是：宽度等于设备宽度）
  - initial-scale ----- 初始的缩放比例
  - minimum-scale ----- 允许用户缩放到的最小比例
  - maximum-scale ----- 允许用户缩放到的最大比例
  - user-scalable ----- 用户是否可以手动缩放
- 媒体查询@media来控制不同屏幕下的布局样式
```
@media screen and (max-width: 600px) {
        
         
 /*当屏幕尺寸小于600px时，应用下面的CSS样式*/
 /*你的css代码*/
}
```
- 设置不用单位来适配,rem em
  - 扩展：单位讲解
    - px：相对于显示器屏幕分辨率而言的。
    - em:相对于父级字体大小,任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。
    - rem:相对于根元素的字体大小（html）
    - vh：等于viewport高度的1/100。例如，如果浏览器的高是900px,1vh求得的值为9px。
    - vw：如果显示窗口宽度为750px,1vw求得的值为7.5px。
- 百分比
- flex弹性布局
区别
- PC考虑的是浏览器的兼容性，而移动端开发考虑的更多的是手机兼容性，因为目前不管是android手机还是ios手机，一般浏览器使用的都是webkit内核，所以说做移动端开发，更多考虑的应该是手机分辨率的适配，和不同操作系统的略微差异化。
- 在部分事件的处理上，移动端多出来的事件是触屏事件，而缺少的是hover事件。另外包括移动端弹出的手机键盘的处理，这样的问题在PC端都是遇不到的。
- 在布局上，移动端开发一般是要做到布局自适应的rem布局。
- 在动画处理上，PC端由于要考虑IE的兼容性，所以通常使用JS做动画的通用性会更好一些，但是CSS3做了很大的牺牲，而在手机端，如果要做一些动画、特效等，第一选择肯定是CSS3，既简单、效率又高。
- 微信的一些接口组好能去实现一遍，熟悉一下肯定是有好处的，比如通过微信分享文章，title、description、icon等图标的配置，这些还是要会的。
- 百度地图的一些API接口，也得去实现一下，这些对于移动端来说，LBS是一个非常重要的特性，所以地图这块肯定是要了解的，在加上百度地图这块已经是一个比较成熟的平台了，所以学起来也比较容易。
- CSS3的动画一定要比较熟练，这在移动端用的还是比较多的。
注意点
- webkit内核的私有标签
  首先我们来看看webkit内核中的一些私有的meta标签，这些meta标签在开发webapp时起到非常重要的作用。
```
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
```
  - 第一个meta标签表示：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；
  - 第二个meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；
  - 第三个meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；
  - 第四个meta标签表示：告诉设备忽略将页面中的数字识别为电话号码。
- HTML5标签的使用,定义一块内容或文章区域可使用section标签，定义导航条或选项卡可以直接使用nav标签等等。
- 放弃CSS float属性:使用display:inline-block。
- 利用CSS3边框背景属性：-webkit-border-image
- 块级化a标签：数据都放在一个a标签,为提升用户体验，保证用户的可点击区域较大。
- 自适应布局模式：使用自适应布局模式，因为这样做可以让你的页面在ipad、itouch等多种设备都能够正常的显示。
- 学会使用webkit-box：webkit为display属性提供了一个webkit-box做到盒子模型灵活控制。
- 去除Android平台中对邮箱地址的识别<meta content="email=no" name="format-detection" />
- 去除iOS和Android中的输入URL的控件条件：setTimeout(scrollTo,0,0,0);
  放在window.onload里，当前文档的内容高度必须是高于窗口的高度时，才能有效的执行。
- 检测用户是通过主屏启动你的webapp：通过navigator.standalone这个属性获知用户当前是否是从主屏访问我们的webapp的。
  在Android中从来没有添加到主屏这回事！
- 关闭iOS中键盘自动大写：移动版本webkit为input元素提供了autocapitalize属性，通过指定autocapitalize=”off”来关闭键盘默认首字母大写。
- iOS中彻底禁止用户在新窗口打开页面
  有时我们可能需要禁止用户在新窗口打开页面，我们可以使用a标签的target=”_self“来指定用户在新窗口打开，或者target属性保持空。IOS用户可以通过指定当前元素的-webkit-touch-callout样式属性为none来禁止iOS弹出这些按钮。这个技巧仅适用iOS对于Android平台则无效。
- iOS中禁止用户保存图片＼复制图片：同样为一个img标签指定-webkit-touch-callout为none也会禁止设备弹出列表按钮
- iOS中禁止用户选中文字：-webkit-user-select:none
- iOS中获取滚动条的值
  桌面浏览器中想要获取滚动条的值是通过document.scrollTop和document.scrollLeft得到的，在Android中通过这两个属性可以正常获取到滚动条的值，IOS通过window.scrollY和window.scrollX我们可以得到当前窗口的y轴和x轴滚动条的值。
- 解决盒子边框溢出:-webkit-box-sizing:border-box;指定该盒子的大小，包括边框的宽度。

3.JS实现继承

原型链继承
构造函数继承
组合继承
寄生继承
寄生组合继承

4.写一个冒泡排序代码

var bubbleSort = function (arr) {
    
    
    for(var i  = 0; i < arr.length - 1; i++) {
    
    
        var flag = false;
        for(var j = 0; j < arr.length - i - 1; j++) {
    
    
            if(arr[j] > arr[j + 1]) {
    
    
                var t = arr[j];
                arr[j] = arr[j + 1];
                arr[j + 1] = t;
                flag = true;
            }
        }
        console.log(arr);
        if(flag == false) {
    
    
            return arr;
        }
    }
    return arr;
}
console.log(bubbleSort([3,532,55,4,6]));

5.Ajax的原理，处理跨域的方案

定义：Ajax 能够在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容，实现局部刷新，大大降低了资源的浪费，是一门用于快速创建动态网页的技术。

组成

创建 XMLHttpRequest 对象 var xhr = new XMLHttpRequest();
向服务器发送请求，使用 xmlHttpRequest 对象的 open 和 send 方法，
监听状态变化，执行相应回调函数

  var xhr = new XMLHttpRequest(); 
  xhr.open('get', 'aabb.php', true); 
  xhr.send(null); 
  xhr.onreadystatechange = function() {
        
         
  	if(xhr.readyState==4) {
        
         
  		if(xhr.status==200) {
        
         
  			console.log(xhr.responseText); 
  		} 
  	} 
  }
  	```

跨域解决
- JSONP
- CORS
- proxy
- postMessage
- nginx反向代理
- iframe+window.name
- iframe+location.hash
- iframe+document.domain

6.HTML5新特性，如何兼容HTML5新标签解决方案，如何区分HTML和HTML5

h5新特性
- 语义化标签：<hader></header> 、<footer></footer>、<nav></nav>、<section></section>、<article></article>、<aside></aside>、<video></video>、<audio></audio>
- 新增表单元素：email、month、number、range、search、tel、url、week、time、date、datatime、datetime-local
- 新增表单属性：placeholder、required、autofocus、autocomplete、maxlength、novalidate、max、min、step、multipe、disabled、checked
- 新增的视频和音频标签：<video></video>、<audio></audio>
- canvas绘图
- SVG绘图
- 拖拽
- WebWorker、WebStorage、WebSocket
h5新标签的兼容问题
- IE8/IE7/IE6支持通过 document.createElement
- 将html5shiv.js引入到head中（IE9及以下）
- ```
  
```
  - 载入后，初始化新标签的CSS：/html5/
    article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}
如何区分html和html5：
在文档类型声明上，h5为，之前版本比较长
h5有语义化标签，如<header></header>

7.随机打印10个1-100之间的数，将元素去重后求最大和最小值。

var Comp = function () {
    
    
	var arr = [], num;
	 for(var i = 0; i < 10; i++) {
    
    
	     //Math.random() ---[0.0, 1.0)
	     // num = Math.floor(Math.random() * (upper - lower + 1) + 1); //[1,100]
	     // num = Math.floor(Math.random() * (upper - lower) + 1); //[1,100)
	     num = Math.floor(Math.random() * (100 - 1 + 1) + 1); 
	     arr.push(num);
	     console.log(num);
	 }
	 var newArr = [...new Set(arr)];
	 var max = Math.max(...newArr);
	 var min = Math.min(...newArr);
	 return max +'---'+ min;
}
	console.log(Comp());

8.设计一个正则函数是实现匹配class类名

function getClass() {
    
    
    var arr = [];
    var str2 = document.getElementsByTagName("html")[0].innerHTML;
    //定义class有三种方式：class='lov' class="lov" class=lov  class='a b'多个类名
    var reg = /class=['|"]?([\w+\s]+)['|"]?/g;
    //$0匹配的是整个表达式  $1是小括号里面的内容
    str2.replace(reg, function ($0, $1) {
    
    
        arr.push($1);
    });
    return arr;
}
console.log(getClass());

9.页面输入URL后一个整体的过程，根据这个原理设计一定的优化方案

过程
- http缓存
- DNS 解析
- TCP 连接
- 发送 HTTP 请求
- 服务器处理请求并返回 HTTP 报文
- 浏览器解析渲染页面
- 连接结束
http缓存
- 强制缓存：是在浏览器加载资源的时候，先直接从缓存中查找请求结果，如果不存在该缓存结果，则直接向服务端发起请求。Expires和Cache-Control，cache-control 的 max-age 优先级高于 Expires，它们同时出现，浏览器会使用 max-age 的值。
- 协商缓存：浏览器直接发送请求到服务端进行确认缓存是否更新Last-Modified 和 If-Modified-Since，响应头部字段 Last-Modified 和请求头部字段 If-Modified-Since 比对双方资源的修改时间。ETag 和 If-None-Match，响应头部字段 ETag 和请求头部字段 If-None-Match
- 强制缓存的优先级高于协商缓存，在协商缓存中，Etag 优先级比 Last-Modified 高

10.JS中事件监听的方法是什么？有几个参数分别什么意思？哪些参数和JS的事件机制有关，JS中的事件机制事件流有哪些？他们之前的区别？

方法：dom.addEventListener(type,fn,bool)
参数
- type:事件名称
- fn：事件的处理函数
- bool:表示发生的阶段，默认值是false，表示冒泡阶段，如果true是表示捕获阶段
事件流
- 事件捕获：事件由最外层的元素向目标元素传递的过程(IE不支持事件捕获)
- 事件处理：事件正位于目标元素之上
- 事件冒泡：由目标元素向外层元素传递的过程

猜你喜欢