meta
元素有哪些?script
标签中, async
和 defer
两个属性有什么用途和区别?HTML
语义化?void
)元素有那些?a
标签跳转页面或定位链接?HTML
标签中的 src
和 href
有什么区别?script
标签为什么建议放在 body
标签的底部(defer
、async
)?HTML5
有哪些新特性?HTML
渲染过程link
和 @import
有什么区别?css
加载会造成阻塞吗?CSSOM
树和 DOM
树是同时解析的吗?input
上传文件可以同时选择多张吗?怎么设置?label
标签有什么用?js
和 css
是如何影响 DOM
树构建的?title
与h1
的区别、b
与 strong
的区别、i
与em
的区别?SEO
是什么?SEO
优化URL
和URI
的区别是什么?DOMContentLoaded
和load
和unload
和beforeunload
的区别是什么?pv
,什么是uv
?DOM
和BOM
?iconfont
,优缺点有哪些?下附答案
<meta>
元素标签是提供有关 HTML
文档的元数据,元数据不会显示在页面上,但是能够被机器识别。
总而言之, meta
标签是用来让机器识别的,同时它对SEO
起着重要的作用。
指定了 html
文档的编码格式,常用的是 utf-8
(Unicode的字符编码),还有 ISO-8859-1
(拉丁字母的字符编码)。当然还有其他的,但是一般不常用也就不介绍了。
html<meta charset="utf-8">
name & content
指定元数据的名称(这部分对SEO
非常有用)
html<!-- author——定义了页面的作者 -->
<meta name="author" content="Tony">
<!-- keywords——为搜索引擎提供关键字 -->
<meta name="keywords" content="HTML, CSS, JavaScript">
<!-- description——对网页整体的描述 -->
<meta name="description" content="My tutorials on HTML, CSS and JavaScript">
<!-- viewport——对页面视图相关进行定义 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minmum-scale=1.0">
<!-- theme-color——定义主题颜色 -->
<meta name="theme-color" content="#222">
http-equiv & content
为内容属性的信息/值提供HTTP标头
html<!-- refresh——每30s刷新一次文档 -->
<meta http-equiv="refresh" content="30">
<!-- Cache-Control——请求和响应遵循的缓存机制,可以声明缓存的内容,修改过期时间,可多次声明
1. no-transform——不得对资源进行转换或转变。
2. no-siteapp——禁止百度进行转码
-->
<meta http-equiv="Cache-Control" content="no-transform">
<meta http-equiv="Cache-Control" content="no-siteapp">
<!-- 可以用于设定网页的到期时间。一旦网页过期,必须到服务器上重新传输。(GMT格式) -->
<meta http-equiv="expires" content="Wed, 20 Jun 2007 22:33:00 GMT"/>
property & content
可以让网页成为一个富媒体对象,同意网页内容被其他网站引用,同时在应用的时候不会只是一个链接,会提取相应的信息展现给用户。
html<meta property="og:type" content="website">
<meta property="og:url" content="https://zjgyb.github.io/index.html">
<meta property="og:site_name" content="tony's blog">
async
和defer
的作用是使的浏览器的能异步的加载和执行指定的脚本。
区别是
defer
脚本会在文档渲染完毕后,DOMContentLoaded
事件调用前执行。aysnc
脚本会在加载完后直接执行。defer
属性script
标签,按照顺序执行这些脚本,而async
属性不会按照顺序执行。如下图所示:
HTML语义化就是用合理、正确的标签来展示内容。
HTML
结构SEO
css
入手 不响应任何鼠标事件csspointer-events: none;
html<a href="javascript:void(0);" >点此无反应javascript:void(0)</a>
<a href="javascript:;" >点此无反应javascript:</a>
html<a href="" onclick="return false;">return false;</a>
<a href="#" onclick="return false;">return false;</a>
htmlEvent.preventDefault()
浏览器解析 href
不会阻塞对文档的处理(这就是官方建议使用 link
引入而不是 @ import
的原因),src
会阻塞对文档的处理。
因为浏览器在渲染html
的时候是从上到下执行的,当遇到js
文件的时候就会停止当前页面的渲染,转而去下载js
文件。
如果将script
标签放在头部,在文件很大的情况下将导致首屏加载时间延长,影响用户体验。
script
标签放在body
的底部defer
、async
属性将js
文件转为异步加载HTML
文件,创建DOM
树CSS
,形成CSS
对象模型CSS
与DOM
合并,构建渲染树(renderingtree
)以上四个步骤并不是一次性顺序完成的。如果DOM
或者CSSOM
被修改,以上过程会被重复执行。实际上,CSS
和JavaScript
往往会多次修改DOM
或者CSSOM
。
Repaint(重绘)
重绘是改变不影响元素在网页中的位置的元素样式时,譬如background-color
(背景色), border-color
(边框色),visibility
(可见性),浏览器会根据元素的新属性重新绘制一次(这就是重绘,或者说重新构造样式),使元素呈现新的外观。
重绘不会带来重新布局,所以并不一定伴随重排。
Reflow(重排)
渲染对象在创建完成并添加到渲染树时,并不包含位置和大小信息。计算这些值的过程称为布局或重排。
"重绘"不一定需要"重排",比如改变某个网页元素的颜色,就只会触发"重绘",不会触发"重排",因为布局没有改变。
但是,"重排"必然导致"重绘",比如改变一个网页元素的位置,就会同时触发"重排"和"重绘",因为布局改变了。
link
属于HTML
标签,而@import
是css
提供的;
页面被加载时,link
会同时被加载,而@import
引用的css
会等到页面被加载完再加载;
@import
只在IE5
以上才能识别,而link
是XHTML
标签,无兼容问题;
link方式的样式的权重高于@import的权重。
css
加载不会阻塞DOM
树的解析css
加载会阻塞DOM
树的渲染css
加载会阻塞后面js
语句的执行、从上面两个流程我们可以看出来:
DOM
解析和CSS
解析是两个并行的进程,所以这也解释了为什么CSS
加载不会阻塞DOM
的解析。Render Tree
是依赖于DOM Tree
和CSSOM Tree
的,所以他必须等待到CSSOM Tree
构建完成,也就是CSS
资源加载完成(或者CSS
资源加载失败)后,才能开始渲染。因此,CSS
加载是会阻塞Dom
的渲染的。浏览器会下下载HTML
解析页面生成DOM
树,遇到CSS
标签就开始解析CSS
,这个过程不会阻塞,但是如果遇到了JS
脚本,此时假如CSSOM
还没有构建完,需要等待CSSOM
构建完,再去执行JS
脚本,然后再执行DOM
解析,此时会阻塞。
可以,通过给input
标签设置multiple
属性。
HTML<input type="file" name="files" multiple/>
label
标签来定义表单控制间的关系。当用户选择该标签时,浏览器会自动将焦点转到和标签相关的表单控件上。
HTML<label for="Name">Number:</label>
<input type='text' name="Name" id="Name"/>
<label>Date:<input type="text" name="B"/></label>
CSS
不会阻塞DOM
的解析,但是会影响javaScript
的运行,javaScript
会阻止DOM
树的解析,最终css(CSSOM)
会影响DOM
树的渲染,也可以说最终会影响渲染树的生成。
strong
和b
的效果都是给文本加粗,strong
有语义性,起到加重语气的效果,而b
标签没有。title
表示网站的标题,一个页面只能有一个。h1
表示文章的标题 有内置的样式。i
和em
效果都是斜体,i
没有实际含义,而em
则是用斜体的方式表示强调的文本。SEO(Search Engine Optimization),汉译为搜索引擎优化。
搜索引擎优化是一种利用搜索引擎的搜索规则来提高目前网站在有关搜索引擎内的自然排名的方式。
SEO
是指为了从搜索引擎中获得更多的免费流量,从网站结构、内容建设方案、用户互动传播、页面等角度进行合理规划,使网站更适合搜索引擎的索引原则的行为。
SEO
主要分为内部和外部两个方向。
META
标签优化:例如:TITLE
,KEYWORDS
,DESCRIPTION
(TDK)等的优化Tag
标签),锚文本链接,各导航链接,及图片链接SSR
)要知道白屏时间长就需要知道白屏经历了哪些过程
从输入url
,到页面的画面展示的过程
url
http
请求前,需要域名解析(DNS解析
),解析获取相应的IP
地址。tcp
连接,与浏览器建立tcp
三次握手。http
请求,请求数据包。HTTP
响应html
源码Dom
树、解析css
样式、js
交互,渲染显示页面白屏优化
DNS
性能优化
DNS
缓存优化DNS
预加载策略DNS服务器
TCP
网络链路优化
Redis
缓存、数据库存储优化或是系统内的各种中间件以及Gzip
压缩等…HTML
的代码和结构CSS
文件和结构JS
代码,尽量不要使用内联的JS
代码CSS
内联到HTML
中,能使CSS
更快速地下载。在HTML
下载完成之后就能渲染了,页面渲染的时间提前,从而缩短首屏渲染时间;浏览其最核心写部分是渲染引擎(Rendering engine) 一般称为浏览器内核
常见浏览器内核有
不同的浏览器内核有不同的的解析、渲染规则,所以同一网页在不同内核的浏览器中的渲染效果也可能不同
URL 全称统一资源定位符Unique Resource Locator 俗称网络地址,相当于网络中的门牌号
URI 全称统一资源标识符Unique Resource Identifier ,用于标识Web技术使用的逻辑地址或物理资源
URL是一个URI的子集
他们都是 html 的页面的重要事件
pv : Page View 页面访问量,用户每访问一次网站就算一次PV,衡量网站用户访问的网页数量
uv: unique visitor 独立访客 指通过互联网访问的自然人,一个电脑客户端是一个访客
DOM;
BOM:
BOM的核心是window
iconfont是一种字体图标
优点;
缺点
本文作者:叶继伟
本文链接:
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!