html面试题(二)

文章目录

无样式内容闪烁（FOUC）Flash of Unstyle Content

这和浏览器解析html的顺序有关，@import导入CSS文件会等到html文档加载完后再加载CSS样式表。因此网页上的dom会先加载出来，呈现在用户面前，等过一段时间才会将样式显现出来。

解决的办法：不采用@import的方式加载样式，通过link标签的方式去引入css。link标签是顺序加载的，最后会将样式和html解析的dom树合并成渲染树再渲染。

html的字符编码

在head标签中设置meta标签，设置网站的字符编码方式，常见的字符编码类型有以下几种
utf-8：w3c公布了标准的字符码
gbk：中文编码
gb2312：简体中文
big5：繁体中文
iso8895-1：西欧字母

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

html设置网站的logo

在head标签中设置link标签，当然你还得准备一个favicon.ico的文件，放置在项目打包后的根目录中。

favicon.ico这个文件是16*16大小的。

<head>
	<link rel="icon" href="<%= BASE_URL %>favicon.ico">
</head>

a标签什么时候用新页面打开，什么时候本页面打开

a标签通过设置target=_blank来以新页面打开。

<a href="xxx" target="_blank">xxx</a>

基本遵循以下的规则，除非业务有单独的要求：

新打开的页面是外站，用新标签页打开（你肯定不希望自己的网站留不住用户）
新打开的页面和本页面存在明显的交互关联或父子关系，用新标签页打开
本网站是否还有新的内容能够提供给用户如果没有新的那内容提供给用户，直接本页面打开新网页。（有些流程性的内容，比如登录、改密码，问卷，等等，在用户完成流程之后，需要跳转到其它地方，本页面直接打开新网页。）

html5哪些新增特性

input表单控件：calendar、date、time、email、url、search 等
语义化标签：header、footer、nav、aside、section、article 等
HTML5 drag
Web Worker
Web Storage：localstorage、sessionstorage
WebSocket
视频和音频: audio标签 video标签
Canvas 与 SVG

html图片常用格式与区别

格式	优点	缺点	适用场景
gif	文件小，支持动画、透明，无兼容性问题	只支持256种颜色	色彩简单的logo、icon、动图
jpg	色彩丰富，文件小	有损压缩，反复保存图片质量下降明显	色彩丰富的图片/渐变图像
png	无损压缩，支持透明，简单图片尺寸小	不支持动画	色彩丰富的图片尺寸大的logo/icon/透明图
webp	文件小，支持有损和无损压缩，支持动画、透明	浏览器兼容性不好	支持webp格式的app和webview

HTML5的离线储存资源

（1）浏览器发现html头部有manifest属性，它会请求manifest属性url对应的文件，如果是第一次访问该网站，那么浏览器就会根据url的内容下载相应的资源并且进行离线存储。

扫描二维码关注公众号，回复： 16247184 查看本文章

<html manifest="/demo_html.appcache">
...
</html>

关于manifest文件的配置
manifest 文件有三个部分：
CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存

CACHE MANIFEST
/theme.css
/logo.gif
/main.js

NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存

NETWORK:
login.asp

FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

FALLBACK:
/html/404.html

完整的manifest文件

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

NETWORK:
login.asp

FALLBACK:
/html/404.html

（2）如果已经访问过并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储

localStorage、sessionStorage、Cookie的区别

看这两篇文章就够了
浏览器存储cookie sessionStorage和localStorage session 的区别：https://dengxi.blog.csdn.net/article/details/103272865

前端关于cookie那些事儿：https://dengxi.blog.csdn.net/article/details/126997077

canvas 与 svg

SVG可缩放矢量图形（Scalable Vector Graphics），是基于可扩展标记语言XML描述的2D图形的语言。

Canvas是画布，通过Javascript来绘制2D或3D图形，是逐像素进行渲染的。其位置发生改变，就会重新进行绘制。

区别

svg 不依赖分辨率而 canvas 依赖分辨率
svg 最大的特点就在于无论如何拉伸都不会模糊，所以特别适合用来处理网站中的icon或者logo
canvas是十分依赖分辨率的，使用canvas时，先要设置画布的大小，还要在作画之前，设置画布的分辨率。

设置画布大小

<canvas id="my-canvas" style="width:200px; height:200px;"></canvas>

设置画布分辨率

var canvas=document.getElementById('my-canvas');    
canvas.width=canvas.clientWidth * window.devicePixelRatio;
canvas.height=canvas.clientHeight * window.devicePixelRatio;

canvas能够很好的渲染图片，并且也能导出一张图片，svg却不能
canvas处理图片 https://dengxi.blog.csdn.net/article/details/124847952
canvas是任意改变一点，都会整个重新绘制，我们所知道的插件中echarts就是使用的canvas来实现图表的，我们任意改变echarts中的一点配置，整个图表都会重新绘制。在svg中，每个被绘制的图形均被视为dom对象，每个dom对象都是一个自成一体的实体，它具有颜色、形状、轮廓、大小和屏幕位置等属性。

关于web worker

当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。

web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。

如何创建 web worker：

检测浏览器对于 web worker 的支持性

if(typeof(Worker) !== "undefined") {
    
    
	// 可以使用
} else {
    
    
	// 浏览器不支持，不能使用	
}

创建 web worker 文件（js，回传函数等）

// demo_workers.js
var i=0;

function timedCount()
{
    
    
    i=i+1;
    // postMessage 方法传入的数据会在 主线程js中通过webworker对象的onmessage配置的回调函数拿到
    postMessage(i);
    setTimeout("timedCount()",500);
}

timedCount();

创建 web worker 对象

var w = undefined;
if(typeof(Worker) !== "undefined") {
    
    
	// 可以使用
	if(typeof(w) == "undefined") {
    
    
    	w = new Worker("demo_workers.js");
	}

     w.onmessage = function(event) {
    
    
         console.log(event.data);
     };
} else {
    
    
	// 浏览器不支持，不能使用	
}

var w;

// 创建web worker，创建后，web worker就会开始运行
function startWorker() {
    
    
    if(typeof(Worker) !== "undefined") {
    
    
        if(typeof(w) == "undefined") {
    
    
        	// 传入需要在后台执行的脚本，创建webworker对象
            w = new Worker("demo_workers.js");
        }
        // 监听后台脚本传回的参数
        w.onmessage = function(event) {
    
    
            console.log(event.data);
        };
    } else {
    
    
    	// 浏览器不支持，不能使用	
        document.getElementById("result").innerHTML = "抱歉，你的浏览器不支持 Web Workers...";
    }
}

// 主动停止web worker对象
function stopWorker() 
{
    
     
    w.terminate();
    w = undefined;
}