前一篇文章整理了 html 在面试中可能会被问到的问题,现在把整理的第二部分记录下来。
我们开始吧。
- 为什么操作 DOM 慢?(浏览器绘制过程)
一些 DOM 的操作或者属性访问可能会引起页面的回流和重绘,从而引起性能上的消耗。
- DOMContentLoaded 事件和 Load 事件的区别?
当初始的 HTML 文档被完全加载和解析完成之后,DOMContentLoaded 事件被触发,而无需等待样式表、图像和子框架的加载完成。
Load 事件是当所有资源加载完成后触发的。
HTML5 有哪些新特性、移除了那些元素?
HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增加。新增的有:
绘画 canvas;
用于媒介回放的 video 和 audio 元素;
本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失;
sessionStorage 的数据在浏览器关闭后自动删除;
语意化更好的内容元素,比如 article、footer、header、nav、section;
表单控件,calendar、date、time、email、url、search;
新的技术 webworker, websocket;
新的文档属性 document.visibilityState
移除的元素有:
纯表现的元素:basefont,big,center,font, s,strike,tt,u;
对可用性产生负面影响的元素:frame,frameset,noframes;
- 如何处理 HTML5 新标签的浏览器兼容问题?
(1) IE8/IE7/IE6 支持通过 document.createElement 方法产生的标签,可以利用这一特性让这些浏览器支持 HTML5 新标签,浏览器支持新标签后,还需要添加标签默认的样式。
(2) 当然也可以直接使用成熟的框架,比如 html5shim ;
1 | <!--[if lt IE 9]> |
- 简述一下你对 HTML 语义化的理解?
(1) 用正确的标签做正确的事情。
(2) html 语义化让页面的内容结构化,结构更清晰,便于对浏览器、搜索引擎解析;
(3) 即使在没有样式 CSS 情况下也以一种文档格式显示,并且是容易阅读的;
(4) 搜索引擎的爬虫也依赖于 HTML 标记来确定上下文和各个关键字的权重,利于 SEO ;
(5) 使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解。
总结:
我认为 html 语义化主要指的是我们应该使用合适的标签来划分网页内容的结构。
html 的本质作用其实就是定义网页文档的结构,一个语义化的文档,能够使页面的结构更加清晰,易于理解。
这样不仅有利于开发者的维护和理解,同时也能够使机器对文档内容进行正确的解读。
比如说我们常用的 b 标签和 strong 标签,它们在样式上都是文字的加粗,但是 strong 标签拥有强调的语义。
对于一般显示来说,可能我们看上去没有差异,但是对于机器来说,就会有很大的不同。
如果用户使用的是屏幕阅读器来访问网页的话,使用 strong 标签就会有明显的语调上的变化,而 b 标签则没有。
如果是搜索引擎的爬虫对我们网页进行分析的话,那么它会依赖于 html 标签来确定上下文和各个关键字的权重,一个语义化的文档对爬虫来说是友好的,是有利于爬虫对文档内容解读的,从而有利于我们网站的 SEO 。
从 html5 我们可以看出,标准是倾向于以语义化的方式来构建网页的,比如新增了 header 、footer 这些语义标签,删除了 big 、font 这些没有语义的标签。
- b 与 strong 的区别和 i 与 em 的区别?
从页面显示效果来看,被
<b>
和<strong>
包围的文字将会被加粗,而被<i>
和<em>
包围的文字将以斜体的形式呈现。
但是
<b>
<i>
是自然样式标签,分别表示无意义的加粗,无意义的斜体,表现样式为{ font-weight: bolder}
,仅仅表示「这里应该用粗体显示」或者「这里应该用斜体显示」,此两个标签在 HTML4.01 中并不被推荐使用。
而
<em>
和<strong>
是语义样式标签。<em>
表示一般的强调文本,而<strong>
表示比<em>
语义更强的强调文本。
使用阅读设备阅读网页时:
<strong>
会重读,而<b>
是展示强调内容。
前端需要注意哪些 SEO ?
(1)合理的 title、description、keywords:搜索对着三项的权重逐个减小,title 值强调重点即可,重要关键词出现不要超过2次,而且要靠前,不同页面 title 要有所不同;description 把页面内容高度概括,长度合适,不可过分堆砌关键词,不同页面 description 有所不同;keywords 列举出重要关键词即可。
(2)语义化的 HTML 代码,符合 W3C 规范:语义化代码让搜索引擎容易理解网页。
(3)重要内容 HTML 代码放在最前:搜索引擎抓取 HTML 顺序是从上到下,有的搜索引擎对抓取长度有限制,保证重要内容肯定被抓取。
(4)重要内容不要用 js 输出:爬虫不会执行 js 获取内容
(5)少用 iframe:搜索引擎不会抓取 iframe 中的内容
(6)非装饰性图片必须加 alt
(7)提高网站速度:网站速度是搜索引擎排序的一个重要指标
HTML5 的离线储存怎么使用,工作原理能不能解释一下?
在用户没有与因特网连接时,可以正常访问站点或应用,在用户与因特网连接时,更新用户机器上的缓存文件。原理:HTML5 的离线存储是基于一个新建的 .appcache 文件的缓存机制(不是存储技术),通过这个文件上的解析清单离线存储资源,这些资源就会像 cookie 一样被存储了下来。之后当网络在处于离线状态下时,浏览器会通过被离线存储的数据进行页面展示。
如何使用:
(1)创建一个和 html 同名的 manifest 文件,然后在页面头部像下面一样加入一个 manifest 的属性。 <html lang="en" manifest="index.manifest">
(2)在如下 cache.manifest 文件的编写离线存储的资源。
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html
CACHE: 表示需要离线存储的资源列表,由于包含 manifest 文件的页面将被自动离线存储,所以不需要把页面自身也列出来。
NETWORK: 表示在它下面列出来的资源只有在在线的情况下才能访问,他们不会被离线存储,所以在离线情况下无法使用这些资源。不过,如果在 CACHE 和 NETWORK 中有一个相同的资源,那么这个资源还是会被离线存储,也就是说 CACHE 的优先级更高。
FALLBACK: 表示如果访问第一个资源失败,那么就使用第二个资源来替换他,比如上面这个文件表示的就是如果访问根目录下任何一个资源失败了,那么就去访问 offline.html 。
(3)在离线状态时,操作 window.applicationCache 进行离线缓存的操作。
如何更新缓存:
(1)更新 manifest 文件
(2)通过 javascript 操作
(3)清除浏览器缓存
注意事项:
(1)浏览器对缓存数据的容量限制可能不太一样(某些浏览器设置的限制是每个站点 5MB)。
(2)如果 manifest 文件,或者内部列举的某一个文件不能正常下载,整个更新过程都将失败,浏览器继续全部使用老的缓存。
(3)引用 manifest 的 html 必须与 manifest 文件同源,在同一个域下。
(4)FALLBACK 中的资源必须和 manifest 文件同源。
(5)当一个资源被缓存后,该浏览器直接请求这个绝对路径也会访问缓存中的资源。
(6)站点中的其他页面即使没有设置 manifest 属性,请求的资源如果在缓存中也从缓存中访问。
(7)当 manifest 文件发生改变时,资源请求本身也会触发更新。
浏览器是怎么对 HTML5 的离线储存资源进行管理和加载的呢?
在线的情况下,浏览器发现 html 头部有 manifest 属性,它会请求 manifest 文件,如果是第一次访问 app ,那么浏览器就会根据 manifest 文件的内容下载相应的资源并且进行离线存储。如果已经访问过 app 并且资源已经离线存储了,那么浏览器就会使用离线的资源加载页面,然后浏览器会对比新的 manifest 文件与旧的 manifest 文件,如果文件没有发生改变,就不做任何操作,如果文件改变了,那么就会重新下载文件中的资源并进行离线存储。
离线的情况下,浏览器就直接使用离线存储的资源。
常见的浏览器端的存储技术有哪些?
浏览器常见的存储技术有 cookie、localStorage 和 sessionStorage。
还有两种存储技术用于大规模数据存储,webSQL(已被废除)和 indexDB。
IE 支持 userData 存储数据,但是基本很少使用到,除非有很强的浏览器兼容需求。
请描述一下 cookies,sessionStorage 和 localStorage 的区别?
相关资料:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17SessionStorage, LocalStorage, Cookie 这三者都可以被用来在浏览器端存储数据,而且都是字符串类型的键值对。区别在于前两者属于 HTML5 WebStorage,创建它们的目的便于客户端存储数据。而 cookie 是网站为了标示用户身份而储存在用户本地终端上的数据(通常经过加密)。cookie 数据始终在同源(协议、主机、端口相同)的 http 请求中携带(即使不需要),会在浏览器和服务器间来回传递。
存储大小:
cookie 数据大小不能超过4 k 。
sessionStorage 和 localStorage 虽然也有存储大小的限制,但比 cookie 大得多,可以达到 5M 或更大。
有期时间:
localStorage 存储持久数据,浏览器关闭后数据不丢失除非主动删除数据。
sessionStorage 数据在页面会话结束时会被清除。页面会话在浏览器打开期间一直保持,并且重新加载或恢复页面仍会
保持原来的页面会话。在新标签或窗口打开一个页面时会在顶级浏览上下文中初始化一个新的会话。
cookie 设置的 cookie 过期时间之前一直有效,即使窗口或浏览器关闭。
作用域:
sessionStorage 只在同源的同窗口(或标签页)中共享数据,也就是只在当前会话中共享。
localStorage 在所有同源窗口中都是共享的。
cookie 在所有同源窗口中都是共享的。
总结:
浏览器端常用的存储技术是 cookie 、localStorage 和 sessionStorage。
cookie 其实最开始是服务器端用于记录用户状态的一种方式,由服务器设置,在客户端存储,然后每次发起同源请求时,发送给服务器端。cookie 最多能存储 4 k 数据,它的生存时间由 expires 属性指定,并且 cookie 只能被同源的页面访问共享。
sessionStorage 是 html5 提供的一种浏览器本地存储的方法,它借鉴了服务器端 session 的概念,代表的是一次会话中所保存的数据。它一般能够存储 5M 或者更大的数据,它在当前窗口关闭后就失效了,并且 sessionStorage 只能被同一个窗口的同源页面所访问共享。
localStorage 也是 html5 提供的一种浏览器本地存储的方法,它一般也能够存储 5M 或者更大的数据。它和 sessionStorage 不同的是,除非手动删除它,否则它不会失效,并且 localStorage 也只能被同源页面所访问共享。
上面几种方式都是存储少量数据的时候的存储方式,当我们需要在本地存储大量数据的时候,我们可以使用浏览器的 indexDB 这是浏览器提供的一种本地的数据库存储机制。它不是关系型数据库,它内部采用对象仓库的形式存储数据,它更接近 NoSQL 数据库。
iframe 有那些缺点?
iframe 元素会创建包含另外一个文档的内联框架(即行内框架)。主要缺点有:
(1) iframe 会阻塞主页面的 onload 事件。window 的 onload 事件需要在所有 iframe 加载完毕后(包含里面的元素)才会触发。在 Safari 和 Chrome 里,通过 JavaScript 动态设置 iframe 的 src 可以避免这种阻塞情况。
(2) 搜索引擎的检索程序无法解读这种页面,不利于网页的 SEO 。
(3) iframe 和主页面共享连接池,而浏览器对相同域的连接有限制,所以会影响页面的并行加载。
(4) 浏览器的后退按钮失效。
(5) 小型的移动设备无法完全显示框架。Label 的作用是什么?是怎么用的?
label 标签来定义表单控制间的关系,当用户选择该标签时,浏览器会自动将焦点转到和标签相关的表单控件上。1
2<label for="Name">Number:</label>
<input type=“text“ name="Name" id="Name"/>HTML5 的 form 的自动完成功能是什么?
autocomplete 属性规定输入字段是否应该启用自动完成功能。默认为启用,设置为 autocomplete=off 可以关闭该功能。
自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项。
autocomplete 属性适用于
<form>
,以及下面的<input>
类型:text, search, url, telephone, email, password, datepickers, range 以及 color。如何实现浏览器内多个标签页之间的通信?
相关资料:1
2
3
4
5
6
7(1)使用 WebSocket,通信的标签页连接同一个服务器,发送消息到服务器后,服务器推送消息给所有连接的客户端。
(2)使用 SharedWorker (只在 chrome 浏览器实现了),两个页面共享同一个线程,通过向线程发送数据和接收数据来实现标签页之间的双向通行。
(3)可以调用 localStorage、cookies 等本地存储方式,localStorge 另一个浏览上下文里被添加、修改或删除时,它都会触发一个 storage 事件,我们通过监听 storage 事件,控制它的值来进行页面信息通信;
(4)如果我们能够获得对应标签页的引用,通过 `postMessage` 方法也是可以实现多个标签页通信的。
总结:
实现多个标签页之间的通信,本质上都是通过中介者模式来实现的。因为标签页之间没有办法直接通信,因此我们可以找一个中介者,让标签页和中介者进行通信,然后让这个中介者来进行消息的转发。
第一种实现的方式是使用 websocket 协议,因为 websocket 协议可以实现服务器推送,所以服务器就可以用来当做这个中介者。标签页通过向服务器发送数据,然后由服务器向其他标签页推送转发。
第二种是使用 ShareWorker 的方式,shareWorker 会在页面存在的生命周期内创建一个唯一的线程,并且开启多个页面也只会使用同一个线程。这个时候共享线程就可以充当中介者的角色。标签页间通过共享一个线程,然后通过这个共享的线程来实现数据的交换。
第三种方式是使用 localStorage 的方式,我们可以在一个标签页对 localStorage 的变化事件进行监听,然后当另一个标签页修改数据的时候,我们就可以通过这个监听事件来获取到数据。这个时候 localStorage 对象就是充当的中介者的角色。
还有一种方式是使用 postMessage 方法,如果我们能够获得对应标签页的引用,我们就可以使用 postMessage 方法,进行通信。
webSocket 如何兼容低版本浏览器?
Adobe Flash Socket 、
ActiveX HTMLFile (IE) 、
基于 multipart 编码发送 XHR 、
基于长轮询的 XHR页面可见性(Page Visibility API) 可以有哪些用途?
这个新的 API 的意义在于,通过监听网页的可见性,可以预判网页的卸载,还可以用来节省资源,减缓电能的消耗。比如,一旦用户不看网页,下面这些网页行为都是可以暂停的。(1)对服务器的轮询
(2)网页动画
(3)正在播放的音频或视频如何在页面上实现一个圆形的可点击区域?
(1)纯 html 实现,使用 来给
图像标记热点区域的方式,
(2)纯 css 实现,使用 border-radius ,当 border-radius 的长度等于宽高相等的元素值的一半时,即可实现一个圆形的点击区域。
(3)纯 js 实现,判断一个点在不在圆上的简单算法,通过监听文档的点击事件,获取每次点击时鼠标的位置,判断该位置是否在我们规定的圆形区域内。
实现不使用 border 画出 1 px 高的线,在不同浏览器的标准模式与怪异模式下都能保持一致的效果。
<div style="height:1px;overflow:hidden;background:red"></div>
title 与 h1 的区别?
title 属性没有明确意义只表示是个标题,h1 则表示层次明确的标题,对页面信息的抓取也有很大的影响。
的 title 和 alt 有什么区别?
title 通常当鼠标滑动到元素上的时候显示alt 是
的特有属性,是图片内容的等价描述,用于图片无法加载时显示、读屏器阅读图片。可提图片高可访问性,除了纯装饰图片外都必须设置有意义的值,搜索引擎会重点分析。
Canvas 和 SVG 有什么区别?
Canvas 是一种通过 JavaScript 来绘制 2D 图形的方法。Canvas 是逐像素来进行渲染的,因此当我们对 Canvas 进行缩放时,会出现锯齿或者失真的情况。
SVG 是一种使用 XML 描述 2D 图形的语言。SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的。我们可以为某个元素附加 JavaScript 事件监听函数。并且 SVG 保存的是图形的绘制方法,因此当 SVG 图形缩放时并不会失真。
网页验证码是干嘛的,是为了解决什么安全问题?
(1)区分用户是计算机还是人的公共全自动程序。可以防止恶意破解密码、刷票、论坛灌水
(2)有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试渐进增强和优雅降级的定义
渐进增强:针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级:一开始就根据高版本浏览器构建完整的功能,然后再针对低版本浏览器进行兼容。
attribute 和 property 的区别是什么?
attribute 是 dom 元素在文档中作为 html 标签拥有的属性;
property 就是 dom 元素在 js 中作为对象拥有的属性。
对于 html 的标准属性来说,attribute 和 property 是同步的,是会自动更新的,
但是对于自定义的属性来说,他们是不同步的。对 web 标准、可用性、可访问性的理解
可用性(Usability):产品是否容易上手,用户能否完成任务,效率如何,以及这过程中用户的主观感受可好,是从用户的角度来看产品的质量。可用性好意味着产品质量高,是企业的核心竞争力
可访问性(Accessibility):Web 内容对于残障用户的可阅读和可理解性
可维护性(Maintainability):一般包含两个层次,一是当系统出现问题时,快速定位并解决问题的成本,成本低则可维护性好。二是代码是否容易被人理解,是否容易修改和增强功能。
IE 各版本和 Chrome 可以并行下载多少个资源?
(1) IE6 2 个并发
(2) iE7 升级之后的 6 个并发,之后版本也是 6 个
(3) Firefox,chrome 也是6个Flash、Ajax 各自的优缺点,在使用中如何取舍?
Flash:(1) Flash 适合处理多媒体、矢量图形、访问机器(2) 对 CSS、处理文本上不足,不容易被搜索
Ajax:(1) Ajax 对 CSS、文本支持很好,支持搜索(2) 多媒体、矢量图形、机器访问不足
共同点:
(1) 与服务器的无刷新传递消息
(2) 可以检测用户离线和在线状态
(3) 操作 DOM怎么重构页面?
(1) 编写 CSS
(2) 让页面结构更合理化,提升用户体验
(3) 实现良好的页面效果和提升性能浏览器架构
1
2
3
4
5
6
7
8
9
10
11
12* 用户界面
* 主进程
* 内核
* 渲染引擎
* JS 引擎
* 执行栈
* 事件触发线程
* 消息队列
* 微任务
* 宏任务
* 网络异步线程
* 定时器线程常用的 meta 标签
<meta>
元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。<meta>
标签位于文档的头部,不包含任何内容。<meta>
标签的属性定义了与文档相关联的名称/值对。
<!DOCTYPE html>
H5标准声明,使用 HTML5 doctype,不区分大小写<head lang=”en”>
标准的 lang 属性写法<meta charset=’utf-8′>
声明文档使用的字符编码<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/>
优先使用 IE 最新版本和 Chrome<meta name=”description” content=”不超过150个字符”/>
页面描述<meta name=”keywords” content=””/>
页面关键词者<meta name=”author” content=”name, email@gmail.com”/>
网页作<meta name=”robots” content=”index,follow”/>
搜索引擎抓取<meta name=”viewport” content=”initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no”>
为移动设备添加 viewport<meta name=”apple-mobile-web-app-title” content=”标题”>
iOS 设备 begin<meta name=”apple-mobile-web-app-capable” content=”yes”/>
添加到主屏后的标题(iOS 6 新增)<meta name=”apple-itunes-app” content=”app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL”>
是否启用 WebApp 全屏模式,删除苹果默认的工具栏和菜单栏<meta name=”apple-mobile-web-app-status-bar-style” content=”black”/>
添加智能 App 广告条 Smart App Banner(iOS 6+ Safari)<meta name=”format-detection” content=”telphone=no, email=no”/>
设置苹果工具栏颜色<meta name=”renderer” content=”webkit”>
启用360浏览器的极速模式(webkit)<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
避免IE使用兼容模式<meta http-equiv=”Cache-Control” content=”no-siteapp” />
不让百度转码<meta name=”HandheldFriendly” content=”true”>
针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓<meta name=”MobileOptimized” content=”320″>
微软的老式浏览器<meta name=”screen-orientation” content=”portrait”>
uc强制竖屏<meta name=”x5-orientation” content=”portrait”>
QQ强制竖屏<meta name=”full-screen” content=”yes”>
UC强制全屏<meta name=”x5-fullscreen” content=”true”>
QQ强制全屏<meta name=”browsermode” content=”application”>
UC应用模式<meta name=”x5-page-mode” content=”app”>
QQ应用模式<meta name=”msapplication-tap-highlight” content=”no”>
windows phone 点击无高光<meta http-equiv=”pragma” content=”no-cache”>
设置页面不缓存<meta http-equiv=”cache-control” content=”no-cache”>
设置页面不缓存<meta http-equiv=”expires” content=”0″>
设置页面不缓存
- css reset 和 normalize.css 有什么区别?
相关知识点:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31为什么会有 CSS Reset 的存在呢?那是因为早期的浏览器支持和理解的 CSS 规范不同,导致渲染页面时效果不一致,会出现很多
兼容性问题。
reset 的目的,是将所有的浏览器的自带样式重置掉,这样更易于保持各浏览器渲染的一致性。
normalize 的理念则是尽量保留浏览器的默认样式,不进行太多的重置,而尽力让这些样式保持一致并尽可能与现代标准相符合。
1.Normalize.css 保护了有价值的默认值
Reset 通过为几乎所有的元素施加默认样式,强行使得元素有相同的视觉效果。 相比之下,Normalize.css 保持了许多默认的浏览器样式。 这就意味着你不用再为所有公共的排版元素重新设置样式。 当一个元素在不同的浏览器中有不同的默认值时,Normalize.css 会力求让这些样式保持一致并尽可能与现代标准相符合。
2.Normalize.css 修复了浏览器的 bug
它修复了常见的桌面端和移动端浏览器的 bug。这往往超出了 Reset 所能做到的范畴。关于这一点,Normalize.css 修复的问题包含了 HTML5 元素的显示设置、预格式化文字的 font-size 问题、在 IE9 中 SVG 的溢出、许多出现在各浏览器和操作系统中的与表单相关的 bug。
3.Normalize.css 没有复杂的继承链
使用 Reset 最让人困扰的地方莫过于在浏览器调试工具中大段大段的继承链。在 Normalize.css 中就不会有这样的问题,因为在我们的准则中对多选择器的使用时非常谨慎的,我们仅会有目的地对目标元素设置样式。
4.Normalize.css 是模块化的
这个项目已经被拆分为多个相关却又独立的部分,这使得你能够很容易也很清楚地知道哪些元素被设置了特定的值。因此这能让你自己选择性地移除掉某些永远不会用到部分(比如表单的一般化)。
5.Normalize.css 拥有详细的文档
Normalize.css 的代码基于详细而全面的跨浏览器研究与测试。这个文件中拥有详细的代码说明并在 Github Wiki 中有进一步的说明。这意味着你可以找到每一行代码具体完成了什么工作、为什么要写这句代码、浏览器之间的差异,并且你可以更容易地进行自己的测试。
总结:
css reset 是最早的一种解决浏览器间样式不兼容问题的方案,它的基本思想是将浏览器的所有样式都重置掉,从而达到所有浏览器样式保持一致的效果。
但是使用这种方法,可能会带来一些性能上的问题,并且对于一些元素的不必要的样式的重置,其实反而会造成画蛇添足的效果。
后面出现一种更好的解决浏览器间样式不兼容的方法,就是 normalize.css ,它的思想是尽量的保留浏览器自带的样式,通过在原有的样式的基础上进行调整,来保持各个浏览器间的样式表现一致。
相对与 css reset,normalize.css 的方法保留了有价值的默认值,并且修复了一些浏览器的 bug,而且使用 normalize.css 不会造成元素复杂的继承链。
- 用于预格式化文本的标签是?
预格式化就是保留文字在源码中的格式 最后显示出来样式与源码中的样式一致 所见即所得。
<pre>
定义预格式文本,保持文本原有的格式
head 标签中必不少的是?
<head>
标签用于定义文档的头部,它是所有头部元素的容器。<head>
中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。文档的头部描述了文档的各种属性和信息,包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
下面这些标签可用在 head 部分:
<base>
,<link>
,<meta>
,<script>
,<style>
, 以及<title>
。<title>
定义文档的标题,它是 head 部分中唯一必需的元素。HTML5 新增的表单元素有?
datalist 规定输入域的选项列表,通过 option 创建!
keygen 提供一种验证用户的可靠方法,密钥对生成器,私钥存于客户端,公钥发到服务器,用于之后验证客户端证书!
output 元素用于不同类型的输出!
在 HTML5 中,哪个方法用于获得用户的当前位置?
getCurrentPosition()
文档的不同注释方式?
HTML 的注释方法 <!--注释内容-->
CSS 的��释方法 /*注释内容*/
JavaScript 的注释方法 /* 多行注释方式 */ //单行注释方式
disabled 和 readonly 的区别?
disabled 指当 input 元素加载时禁用此元素。input 内容不会随着表单提交。
readonly 规定输入字段为只读。input 内容会随着表单提交。
无论设置 readonly 还是 disabled,通过 js 脚本都能更改 input 的 value
主流浏览器内核私有属性 css 前缀?
mozilla 内核 (firefox,flock 等) -moz
webkit 内核 (safari,chrome 等) -webkit
opera 内核 (opera 浏览器) -o
trident 内核 (ie 浏览器) -ms前端性能优化?
前端性能优化主要是为了提高页面的加载速度,优化用户的访问体验。我认为可以从这些方面来进行优化。第一个方面是页面的内容方面
(1)通过文件合并、css 雪碧图、使用 base64 等方式来减少 HTTP 请求数,避免过多的请求造成等待的情况。
(2)通过 DNS 缓存等机制来减少 DNS 的查询次数。
(3)通过设置缓存策略,对常用不变的资源进行缓存。
(4)使用延迟加载的方式,来减少页面首屏加载时需要请求的资源。延迟加载的资源当用户需要访问时,再去请求加载。
(5)通过用户行为,对某些资源使用预加载的方式,来提高用户需要访问资源时的响应速度。
第二个方面是服务器方面
(1)使用 CDN 服务,来提高用户对于资源请求时的响应速度。
(2)服务器端启用 Gzip、Deflate 等方式对于传输的资源进行压缩,减小文件的体积。
(3)尽可能减小 cookie 的大小,并且通过将静态资源分配到其他域名下,来避免对静态资源请求时携带不必要的 cookie
第三个方面是 CSS 和 JavaScript 方面
(1)把样式表放在页面的 head 标签中,减少页面的首次渲染的时间。
(2)避免使用 @import 标签。
(3)尽量把 js 脚本放在页面底部或者使用 defer 或 async 属性,避免脚本的加载和执行阻塞页面的渲染。
(4)通过对 JavaScript 和 CSS 的文件进行压缩,来减小文件的体积。
扫描二维码登录网页是什么原理,前后两个事件是如何联系的?
核心过程应该是:1
2
3浏览器获得一个临时 id,通过长连接等待客户端扫描带有此 id 的二维码后,从长连接中获得客户端上报给 server的帐号信息进行展示。
并在客户端点击确认后,获得服务器授信的令牌,进行随后的信息交互过程。
在超时、网络断开、其他设备上登录后,此前获得的令牌或丢失、或失效,对授权过程形成有效的安全防护。我的理解
二维码登录网页的基本原理是,用户进入登录网页后,服务器生成一个 uid 来标识一个用户。
对应的二维码对应了一个对应 uid 的链接,任何能够识别二维码的应用都可以获得这个链接,但是它们没有办法和对应登录的服务器响应。
比如微信的二维码登录,只有用微信识这个二维码才有效。
当微信客户端打开这个链接时,对应的登录服务器就获得了用户的相关信息。
这个时候登录网页根据先前的长连接获取到服务器传过来的用户信息进行显示。
然后提前预加载一些登录后可能用到的信息。
当客户端点击确认授权登陆后,服务器生成一个权限令牌给网页,网页之后使用这个令牌进行信息的交互过程。
由于整个授权的过程都是在手机端进行的,因此能够很好的防止 PC 上泛滥的病毒。
并且在超时、网络断开、其他设备上登录后,此前获得的令牌或丢失、或失效,对授权过程能够形成有效的安全防护。Html 规范中为什么要求引用资源不加协议头http或者https?
如果用户当前访问的页面是通过 HTTPS 协议来浏览的,那么网页中的资源也只能通过 HTTPS 协议来引用,否则浏览器会出现警告信息,不同浏览器警告信息展现形式不同。
为了解决这个问题,我们可以省略 URL 的协议声明,省略后浏览器照样可以正常引用相应的资源,这项解决方案称为
protocol-relative URL
,暂且可译作协议相对 URL。如果使用协议相对 URL,无论是使用 HTTPS,还是 HTTP 访问页面,浏览器都会以相同的协议请求页面中的资源,避免弹出类似的警告信息,同时还可以节省5字节的数据量。
- 本文作者: Jambo
- 版权声明: 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。转载请注明出处!