flask做网站工具,大宗商品价格查询网站,养老院网站建设,网站开发 平台目录 1.说一下web worker
2.iframe有哪些优点和缺点
3.label的作用是什么#xff1f;如何使用#xff1f;
4.script标签中defer和async的区别
5.Canvas和SVG的区别
6.head标签有什么作用#xff0c;其中什么标签必不可少#xff1f;
7.浏览器是如何对HTML5的离线储存…目录 1.说一下web worker
2.iframe有哪些优点和缺点
3.label的作用是什么如何使用
4.script标签中defer和async的区别
5.Canvas和SVG的区别
6.head标签有什么作用其中什么标签必不可少
7.浏览器是如何对HTML5的离线储存资源进行管理和加载
8.img的srcset属性的作用
9.浏览器乱码的原因是什么如何解决
10.说一下 HTML5 drag API 1.说一下web worker
在HTML页面中如果在执行脚本时页面的状态时不可相应的直到脚本执行完成后页面才变成可相应。web worker 是运行在后台的js独立于其他脚本不会影响页面的性能。并且通过postMessage将结果回传到主线程。这样在进行复杂操作的时候就不会阻塞主线程了。
如何创建web worker
检测浏览器对于web worker的支持性创建web worker文件js回传函数等创建web worker对象 2.iframe有哪些优点和缺点
iframe元素会创建包含另外一个文档的内联框架即行内框架
优点
用来加载速度较慢的内容如广告可以使脚本可以并行下载可以实现跨子域通信
缺点
iframe会阻塞主页面的onload事件无法被一些搜索引擎识别会产生很多页面不容易管理 3.label的作用是什么如何使用
label标签来定义表单控件的关系当用户选择label标签时浏览器会自动将焦点转到和label标签相关的表单控件上。
使用方法1
label formobileNumber:/label
input typetext idmobile/
使用方法2
labelDate:input typetext//label 4.script标签中defer和async的区别
如果没有defer或async属性浏览器会立即加载并执行相应的脚本。他不会等待后续加载的文档元素读取到就会开始加载和执行这样就阻塞了后续文档的加载。
下图可以直观的看出三者之间的区别 其中蓝色代表js脚本网络加载事件红色代表js脚本执行时间绿色代表html解析时间。
defer和async属性都是去异步加载外部的js脚本文件它们都不会阻塞页面的解析其区别如下
执行顺序多个带async属性的标签不能保证加载的顺序多个带defer属性的标签按照加载顺序执行脚本是否并行执行async属性表示后续文档的加载和执行与js脚本的加载和执行时并行进行的即异步执行defer属性加载后续文档的过程和js脚本的加载时并行进行的js脚本需要等到文档所有元素解析完成之后才执行DOMContentLoaded事件触发执行之前。 5.Canvas和SVG的区别
1.SVGSVG可缩放矢量图标是基于可扩展标记语言xml描述的2D图形的语言SVG基于xml就意味着SVG DOM中的每个元素都是可用的可以为某个元素附加JavaScript事件处理器。在SVG中每个被绘制的图形均被视为对象。如果SVG对象的属性发生变化那么浏览器能够自动重现图形。
其特点如下
不依赖分辨率支持事件处理器最适合带有大型渲染区域的应用程序复杂度高会减慢渲染速度不适合游戏应用‘
2.CanvasCanvas是画布通过JavaScript来绘制2D图形是逐像素进行渲染的。其位置发生改变就会重新进行绘制。
其特点如下
依赖分辨率不支持事件处理器弱的文本渲染能力能够以.png或.jpg格式保存结果图像最适合图像密集型的游戏其中的许多对象会被频繁重绘
注矢量图也称为面向对象的图像或绘制图像在数学上定义为一系列由线连接的点。矢量挖金中的图形元素称为对象。每个对象都是一个自成一体的实体它具有颜色形状轮廓大小和屏幕位置等属性。 6.head标签有什么作用其中什么标签必不可少
head标签用于定义文档的头部它是所有头部元素的容器。标签中的元素可以引用脚本指示浏览器在哪里找到样式表提供元信息等。
文档的头部描述了文档的各种属性和信息包括文档的标题在web中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
下面这些标签可用在head部分base,link,meta,script,style,title.
其中title定义文档的标题它是head部分唯一必需的元素。 7.浏览器是如何对HTML5的离线储存资源进行管理和加载
在线的情况下浏览器发现html头部有manifest属性它会请求manifest文件如果是第一次访问页面那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过页面并且资源已经进行离线存储了那么浏览器就会使用离线的资源加载页面然后浏览器会对比新的 manifest 文件与旧的 manifest 文件如果文件没有发生改变就不做任何操作如果文件改变了就会重新下载文件中的资源并进行离线存储。离线的情况下浏览器会直接使用离线存储的资源。 8.img的srcset属性的作用
响应式页面中经常用到根据屏幕密度设置不同的图片。这时就用到了 img 标签的srcset属性。srcset属性用于设置不同屏幕密度下img 会自动加载不同的图片。用法如下
img srcimage-128.png srcsetimage-256.png 2x /使用上面的代码就能实现在屏幕密度为1x的情况下加载image-128.png, 屏幕密度为2x时加载image-256.png。
按照上面的实现不同的屏幕密度都要设置图片地址目前的屏幕密度有1x,2x,3x,4x四种如果每一个图片都设置4张图片加载就会很慢。所以就有了新的srcset标准。代码如下
img srcimage-128.pngsrcsetimage-128.png 128w, image-256.png 256w, image-512.png 512wsizes(max-width: 360px) 340px, 128px /其中srcset指定图片的地址和对应的图片质量。sizes用来设置图片的尺寸零界点。对于 srcset 中的 w 单位可以理解成图片质量。如果可视区域小于这个质量的值就可以使用。浏览器会自动选择一个最小的可用图片。
sizes语法如下
sizes[media query] [length], [media query] [length] ... sizes就是指默认显示128px, 如果视区宽度大于360px, 则显示340px。 9.浏览器乱码的原因是什么如何解决
产生乱码的原因
网页源代码是gbk的编码而内容中的中文字是utf-8编码的这样浏览器打开即会出现html乱码反之也会出现乱码html网页编码是gbk而程序从数据库中调出呈现是utf-8编码的内容也会造成编码乱码浏览器不能自动检测网页编码造成网页乱码。
解决办法
使用软件编辑HTML网页内容如果网页设置编码是gbk而数据库储存数据编码格式是UTF-8此时需要程序查询数据库数据显示数据前进程序转码如果浏览器浏览时候出现网页乱码在浏览器中找到转换编码的菜单进行转换。 10.说一下 HTML5 drag API
dragstart事件主体是被拖放元素在开始拖放被拖放元素时触发。darg事件主体是被拖放元素在正在拖放被拖放元素时触发。dragenter事件主体是目标元素在被拖放元素进入某元素时触发。dragover事件主体是目标元素在被拖放在某元素内移动时触发。dragleave事件主体是目标元素在被拖放元素移出目标元素是触发。drop事件主体是目标元素在目标元素完全接受被拖放元素时触发。dragend事件主体是被拖放元素在整个拖放操作结束时触发。
