前端常见面试题（HTML）

最新推荐文章于 2024-04-30 22:06:17 发布

前端界的小学生_

最新推荐文章于 2024-04-30 22:06:17 发布

阅读量1k

点赞数 4

文章标签： html 前端面试

本文链接：https://blog.csdn.net/Patrick_bulong/article/details/130854521

版权

1、你都做过哪些兼容性问题？

HTML兼容性：

h5新标签只能兼容到ie9，如果想要兼容ie低版本浏览器，需要引入html5shiv.js文件，其cdn写法如下：

<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

CSS兼容性：

1.1、媒体查询兼容性，ie9以下不支持媒体查询，需要引入response.js文件，其cdn写法如下：

<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>

1.2、CSS Hack：

1.2.1、属性前缀：例如 IE6能识别下划线和星号，IE7能识别星号，但不能识别下划线，IE6~IE10都认识"\9"，但firefox前述三个都不能认识。

.red { 
    _color: red; /* ie6 */
    *color: red; /* ie7 */
    color: red\9; /* ie8/9/10 */
}

1.2.2、选择器前缀：例如 IE6能识别 * html .class{}，IE7能识别 +html .class{}或者*:first-child+html .class{}。

*.red {} /* ie6 */
+.red {} /* ie7 */

1.2.3、条件注释：

针对所有IE(注：IE10+已经不再支持条件注释)：

<!--[if IE]>IE浏览器显示的内容 <![endif]-->

针对IE6及以下版本：

<!--[if lt IE 6]>只在IE6-显示的内容 <![endif]-->

这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。

1.3、厂商前缀：谷歌-webkit-、火狐-moz-、IE-ms-、欧朋-o-

1.4、其它兼容性：

1.4.1、ie老版本浮动造成的双边距问题：display:inline;

1.4.2、图片间隙：父盒子设置font-size: 0; 或者图片设置display: block;

1.4.3、块元素默认高度：overflow: hidden;

JavaScript兼容性：一般使用渐进增强和优雅降级的方式来解决兼容性问题。

// 优雅降级
var xhr = null;
if(XMLHttpRequest){
    xhr = new XMLHttpRequest();
}else{
    xhr = new ActiveXObject('Microsoft.XMLHTTP');
}


// 渐进增强
// 前边实现上传文件的基本功能
// 后边再判断如果支持拖拽事件，就实现拖拽上传

2、如何提高页面性能？

2.1、图片压缩、合并（精灵图）、使用字体图标代替小图片、使用base64、图片懒加载

2.2、css、js的压缩、封装复用

2.3、减少重排操作，例如使用transform书写动画效果，在for循环结束后再去操作dom等

2.3、使用CDN网络托管

2.4、数据懒加载、数据按需加载（上拉加载）、分页

2.5、路由懒加载 ( () => import('../pages/index.vue') )

2.6、利用缓存来缓存文件

2.7、频繁触发的事件进行防抖和节流

1.为什么要使用防抖和节流
    有些事件的操作是高频率触发的 但其实触发一次就可以了
    防抖和节流就是减少事件发生的频率
2. 防抖的原理
     在事件处理函数中添加一个定时器 在定时器中执行代码 延迟一定的时间执行代码
     如果你在定时器执行过程中再次触发事件  把原先的定时器清除，再重新定义

 function debounce(fun, wait) {
            var timer;
            function show() {
                // 如果timer有值 定时器没有走完 
                if (timer) {
                    clearTimeout(timer)
                }
                timer = setTimeout(fun, wait)
            }
            return show
        }

3.节流的原理
     在事件处理函数中添加一个延时定时器，延迟一定的时间执行代码
     在当前定时器没有完成之前 禁止事件执行 等定时器完成之后再允许事件执行

 function throttle(fun, wait) {
            var timer;
            function show() {
                //  如果timer有值 定时器没有结束  没有值的时候才去执行
                if (!timer) {
                    timer = setTimeout(function () {
                        fun();//要做的事有很多  放入函数执行
                        timer = undefined;
                    }, wait)
                }
            }
            return show
        }

2.8、异步加载

2.9、减少闭包，递归优化，使用高效的算法

闭包函数：闭包就是能够读取其他函数内部变量的函数   函数套函数
闭包函数的优点：缓存数据  扩大变量的作用域范围
闭包函数的缺点：如果大量使用闭包，可能造成内存泄漏(后期没用的变量不能及时得到释放，会浪费内存)。
手动释放：将变量重复设置为null

•   (闭包就是能够读取其他函数内部变量的函数。

例：function f1(){

　　　　var n=999;

　　　　function f2(){
　　　　　　alert(n); // 999
　　　　}

　　}

防抖节流也是典型的闭包案例

)

2.10、webpack优化：去除无用代码treeShaking、组件按需加载、使用chunck、模板预编译等

2.11、字库用gb2312不要utf-8，一个汉字少一个字节

3、谈谈你对H5的理解？

Html5是Web中核心语言HTML的规范，是 HyperText Markup Language 5 的缩写，H5提供新的标签元素，使代码变的更有语义；提供了大量api，如本地存储、离线存储、webworker、websocket、filereader、地理定位、拖拽等；提供了更加酷炫的CSS3新特性，如过渡、变形、动画、阴影、渐变等。

HTML5新增标签
hrader  定义了文档的头部区域
footer  定义了文档的尾部区域
nav         定义文档的导航
main  页面主体 
section定义文档中的节（section、区段）
article 定义页面独立的内容区域
aside       定义页面的侧边栏内容
detailes    用于描述文档或文档某个部分的细节
summary 标签包含 details 元素的标题
audio 音频
video  视频  
footer  页面底部


HTML5新增表单属性

1、placeholder属性：简短的提示在用户输入值前会显示在输入域上。即我们常见的输入框默认提示，在用户输入后消失。
2、required属性：是一个boolean属性。要求填写的输入域不能为空。
3、pattern属性，描述了一个正则表达式用于验证input元素的值。
4、min和max属性，设置元素的最大值和最小值。
5、step属性，为输入域规定合法的数字间隔。
6、height和width属性，用于image类型的input标签的图像高度和宽度。
7、autofocus属性，是一个boolean属性。规定在页面加载时，域自动获得焦点。
8、multiple属性，是一个boolean属性。规定input元素中可选择多个值。


canvas--图形
创建一个画布，一个画布在网页中是一个矩形框，通
过 元素来绘制。默认情况下 元素没有边框和内容。
<canvas id="myCanvas"  width="200" height="100"` style="border:1px solid #000000;"></canvas>

SVG绘图
SVG是指----可伸缩的矢量图形,且不失真

Geolocation（地理定位）用于定位用户的位置。
 
window.navigator.geolocation {
    getCurrentPosition:  fn  用于获取当前的位置数据
    watchPosition: fn  监视用户位置的改变
    clearWatch: fn  清除定位监视
}

新增css新特性

1、过渡动画  
transition ：all 2s linear 0s ---过渡动画   
参数：参与过渡的属性  过渡完成时间 过渡执行速度 过渡延迟时间 

2.变形transform 
    translate（位移）
    scale（缩放）
    rotate（旋转）
    skew(倾斜)

3、渐变
background:linear-gradient  线性渐变
    
background:radial-gradient  径向渐变

    3.1、线性渐变：
        语法：background-image: linear-gradient(direction, color-stop1, color-stop2, …); 在后面   可以添加多个颜色

    3.2径向渐变：
         由中心向外扩散渐变。默认情况下，渐变中心是center，渐变形状是ellipse，渐变大小是farther-corner(表示到最远的角落)

    语法: background-image: radial-gradient(shape size at position, start-color, …, last-color);


4.@keyframes和animation    动画
  animation:名称 完成时间 速度延迟 次数 轮流转向 是否停在终点


5.box-shadow  盒子阴影
       box-shadow:阴影水平位置  阴影垂直位置 阴影模糊大小 影子大小 阴影颜色 内外阴影
    
6.text-shadow  文字阴影
        text-shadow: 阴影水平 阴影垂直 阴影模糊的值 阴影的颜色
7.box-sizing  怪异盒模型
        border-box  怪异盒模型
        content-box  标准盒模型

Api方法

    本地缓存
        localStorage永久存储、sessionStorage临时存储
    离线存储
        离线存储是通过manifest文件来管理的,需要服务器端的支持,不同的服务器开启支持的方式也是不同的。
    webworker
        提供一个简单的方法使web内容能够在后台运行脚本
        webWorker实现js的多线程来提升js的性能
    websocket   
        websocket的一个很有意思的特点就是双向通信，这一点其实也不稀奇，跟socket一样的。
        
    地理定位
        let geoloc=window.navigator.geolocation
        geoloc.getCerrentPosition(
            (result)=>{....},//定位成功后执行的回调方法
            (err)=>{...},//定位失败后执行的回调方法
            {timeout:5000} //定位参数：5000ms不返回结果，则抛出超时错误
        拖拽
            只要将元素的 draggable 属性设置为 true 就可以实现拖放功能
            <img draggable="true" id="img1" src="./1.jpg" />