什么是 DOCTYPE, 有何作用?
它是 HTML 的文档声明,通过它告诉浏览器,使用哪一个 HTML 版本标准解析文档。
在浏览器发展的历史中,HTML 出现过很多个版本,不同版本在元素、属性等书写格式上略有差异,如果不预先告诉浏览器,浏览器就不知道我们的文档标准是什么,在这种情况下,大部分浏览器将开启最大兼容模式来解析网页,我们称之为怪异模式。这不仅会降低解析效率,而且会在解析过程中产生一些难以预知的 bug,所以文档声明是必须的。
不同类型的声明见:https://www.runoob.com/tags/tag-doctype.html
PS: 为什么 HTML5 的顶部只需要一段
1HTML4 却需要很长的一段
1其主要原因,是因为 HTML5 不基于 SGML(标准通用标记语言),所以不需要引用 DTD(文档类型定义)。
HTML 4.01 规定了三种不同的 <!DOCTYPE> 声明,分别是:Strict、Transitional 和 Frameset。
说说对 html 语义化的理解
HTML标签的语义化,简单来说,就是用正确的标签做正确的事情,给某块内容用上一个最恰当最合适的标签,使页面有良好的结构,页面元素有含义,无论是谁都能看懂这块内容是什么。
语义化的优点如下:
- 在没有CSS样式情况下也能够让页面呈现出清晰的结构
- 有利于SEO:和搜索引擎建立良好的沟通,有助于爬虫抓取更多的有效信息
- 方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页
- 方便团队开发和维护:语义化更具可读性,遵循W3C标准的团队都遵循这个标准,可以减少差异化
PS:HTML5 中新增加的很多标签,如:<article>、<nav>、<header> 和 <footer> 等就是基于语义化设计原则
H5有哪些新元素和新特性
HTML5 新增特性有:
- 拖拽释放API:
ondrag、ondrop
- 语义化更好的内容标签:
article、footer、header、nav、section
- 视频、音频:
video、audio
- 画布:
canvas
- 地理:
geolocation
- 本地离线存储:
localStorage、sessionStorage
- 表单控件:
calendar、date、time、email、url、search
- 选择器:
document.querySelector
、document.querySelectorAll
、matchesSelector()
- 新技术:
websql、webworker、websocket
等等…,更多见:https://www.runoob.com/html/html-tutorial.htmlPS: 移除的元素:
- 纯表现的元素:
basefont 、 big 、 center 、 font 、 s 、 strike 、 tt 、 u
- 对可⽤性产⽣负⾯影响的元素:
frame 、 frameset 、 noframes
PS:语义元素有:
<form>
,<table>
,<figcaption>
,<figure>
,<header>
,<footer>
,<main>
,<aside>
,<article>
,<section>
,<nav>
,<mark>
,<h1~h6>
,<details>
,<summary>
,<time>
如何处理 HTML5 新标签兼容问题
方法 1:实现标签被识别
通过 document.createElement(“tagName”) 方法即可让浏览器识别新标签,浏览器支持新标签后,还可以为新标签添加 CSS 样式。
方法 2:JavaScript 解决方案
使用 html5shim 框架,在
<head>
中调用以下代码:
1
2
3 <!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->当然也可以直接把这个文件下载到自己的网站上,但这个文件必须在 head 标签中调用。
说说常用的 meta 标签
meta 标签提供关于HTML文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。它可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。
常用的 meta 标签的属性有:
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 <!-- 页面关键词(SEO相关)-->
<meta name="keywords" content="your keywords" />
<!-- 页面描述(SEO相关)-->
<meta name="description" content="your description" />
<!-- 搜索引擎索引方式(SEO相关)-->
<meta name="robots" content="index,follow" />
<!-- 页面重定向和刷新(SEO相关)-->
<meta http-equiv="refresh" content="0;url=https://www.ionluo.cn" />
<!-- 禁止视图缩放(移动设备相关)-->
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
<!-- 启用 WebApp 全屏模式(移动设备相关)-->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- 添加到主屏后的标题(移动设备相关)-->
<meta name="apple-mobile-web-app-title" content="添加到主屏后的标题">
<!-- 忽略数字自动识别为电话号码(移动设备相关)-->
<meta name="format-detection" content="telephone=no" />
<!-- 忽略识别邮箱(移动设备相关)-->
<meta name="format-detection" content="email=no" />
<!-- 申明编码(网页相关)-->
<meta charset='utf-8' />
<!-- 优先使用 IE 最新版本和 Chrome 渲染(网页相关)-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- 指定双内核浏览器采用哪种内核渲染(网页相关)-->
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<!-- 禁止浏览器从本地计算机的缓存中访问页面内容(网页相关)-->
<meta http-equiv="Pragma" content="no-cache">具体的关于 meta 标签能够设置的属性,可以参阅:https://www.runoob.com/w3cnote/meta.html
iframe 框架有那些优缺点?
iframe 也称作嵌入式框架,嵌入式框架和框架网页类似,它可以把一个网页的框架和内容嵌入在现有的网页中。
优点
- 可以在主页面上独立显示其他页面,不会与主页面其他元素冲突
- 可以在多个页面中重用同一个页面,减少代码冗余
- iframe是异步加载的,不影响主页面展示
- 方便实现跨域访问,同域下还可以操作iframe里面的内容
缺点
- 会阻塞主页面的onload事件
- 和主页面共享连接池,影响页面并行加载 (要绕开该问题最好通过 js 动态给 iframe 添加 src 属性值)
- 会影响部分浏览器的后退操作
- 无法被一些搜索引擎索引到,不利于SEO
- iframe 的创建比一般的 DOM 元素慢了 1-2 个数量级
- 多数小型的移动设备(PDA 手机)无法完全显示框架,设备兼容性差
- 由于上面诸多缺点,因此不符合标准网页设计的理念,已经被标准网页设计抛弃
PS: 可通过
"X-Frame-Options": "deny"
、"Content-Security-Policy": "frame-ancestors 'self'"
来禁止 iframe 嵌套,详见:https://juejin.cn/post/6998541496945213477
什么是可替换元素,什么是非可替换元素,它们各自有什么特点?
可替换元素就是浏览器根据其标签的元素属性来判断显示具体的内容的元素,其他都是非可替换元素
我的理解:
可替换元素:该元素可以替换成其他元素来展示,如 p 替换成 div 并不影响显示内容
非可替换元素:该元素不可以替换成其他元素展示,如 img 没有其他标签可以代替(
img
,input
,textarea
,select
,object
等)可替换元素是指这样一种元素,它在页面中的大部分展现效果不由 CSS 决定。
比如 img 元素就是一个可替换元素,它在页面中显示出的效果主要取决于你连接的是什么图片,图片是什么它就展示什么,CSS 虽然可以控制图片的尺寸位置,但永远无法控制图片本身。
再比如,select 元素也是一个典型的可替换元素,它在页面上呈现的是用户操作系统上的下拉列表样式,因此,它的展现效果是由操作系统决定的。所以,同一个 select 元素,放到不同操作系统的电脑上会呈现不同的外观。
img、video、audio、大部分表单元素都属于可替换元素。
非可替换元素就是指的普通元素,它具体在页面上呈现什么,完全由 CSS 来决定。
script、script async 和 script defer 的区别
<script>
- HTML 解析中断,脚本被提取并立即执行。执行结束后,HTML 解析继续。
<script async>
- 脚本的提取、执行的过程与 HTML 解析过程并行,脚本执行完毕可能在 HTML 解析完毕之前。当脚本与页面上其他脚本独立时,可以使用async
,比如用作页面统计分析。
<script defer>
- 脚本仅提取过程与 HTML 解析过程并行,脚本的执行将在 HTML 解析完毕后进行。如果有多个含defer
的脚本,脚本的执行顺序将按照在 document 中出现的位置,从上到下顺序执行。
图片与 span 元素混排图像下方会出现几像素的空隙的原因是什么?
img 作为可替换元素,它没有自己的基线,如果与不可替换元素混合排列,其行盒底端与基线对齐。由于与基线对齐,图像下方就会出现几像素的空隙。
Quirks(怪癖)模式是什么?它和 Standards(标准)模式有什么区别
以 IE6 为例,如果写了 DTD,就意味着这个页面将采用对 CSS 支持更好的布局,而如果没有,则采用兼容之前的布局方式。这就是 Quirks 模式(怪癖模式,诡异模式,怪异模式)。
区别:总体会有布局、样式解析和脚本执行三个方面的区别,这里列举一些比较常见的区别:
- 盒模型:在 W3C 标准中,如果设置一个元素的宽度和高度,指的是元素内容的宽度和高度,而在 Quirks 模式下,IE 的宽度和高度还包含了 padding 和 border。
- 设置行内元素的高宽:在 Standards 模式下,给 <span> 等行内元素设置 wdith 和 height 都不会生效,而在 Quirks 模式下,则会生效。
- 设置百分比的高度:在 Standards 模式下,一个元素的高度是由其包含的内容来决定的,如果父元素没有设置百分比的高度,子元素设置一个百分比的高度是无效的
- 用 margin:0 auto 设置水平居中:使用 margin:0 auto 在 Standards 模式下可以使元素水平居中,但在 Quirks 模式下却会失效。
===== 非重点 =====
下面是一些了解性内容
请描述下 SEO 中的 TDK?
在 SEO 中,所谓的 TDK 其实就是 title、description、keywords 这三个标签,title 标题标签,description 描述标签,keywords 关键词标签。
h5 和 html5 区别
H5 是一个产品名词,包含了最新的 HTML5、CSS3、ES6 等新的技术来制作的应用。
HTML5 是一个技术名词,指代的就仅仅是第五代 HTML。
什么是严格模式与混杂模式?
严格模式:以浏览器支持的最高标准运行
混杂模式:页面以宽松向下兼容的方式显示,模拟老式浏览器的行为
前端页面有哪三层构成,分别是什么?作用是什么?
分成:结构层、表示层、行为层。
- 结构层(structural layer)
由 HTML 或 XHTML 之类的标记语言负责创建。标签,也就是那些出现在尖括号里的单词,对网页内容的语义含义做出了描述,但这些标签不包含任何关于如何显示有关内容的信息。例如,p 标签表达了这样一种语义:“这是一个文本段。”
- 表示层(presentation layer)
由 CSS 负责创建。 CSS 对“如何显示有关内容”的问题做出了回答。
- 行为层(behaviorlayer)
负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM 主宰的领域。
label 的作用是什么?是怎么用的?
label 元素不会向用户呈现任何特殊效果。
不过,它为鼠标用户改进了可用性。
如果您在 label 元素内点击文本,就会触发此控件。
就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
1
2
3
4 <label>男<input type="radio" name="sex" /></label>
<label for="female">女</label>
<input type="radio" name="sex" id="female" />
如何在一张图片上的某一个区域做到点击事件
使用图片热区技术。步骤如下:
1、插入图片,并设置好图像的有关参数,且在 <img> 标记中设置参数 usemap=”#Map”,以表示对图像地图(Map)的引用;
2、用 <map> 标记设定图像地图的作用区域,并取名为:Map;
3、分别用 <area> 标记针对相应位置划分出多个矩形作用区域,并设定好其链接参数 href。示例代码如下:
1
2
3
4
5
6
7
8 <body>
<img src="url/to/your/image.jpg" alt="" usemap="#Map" />
<map name="Map" id="Map">
<area alt="" title="" href="#" shape="poly"
coords="65,71,98,58,114,90,108,112,79,130,56,116,38,100,41,76,52,53,83,34,110,33,139,46,141,75,145,101,127,115,113,133,85,132,82,131,159,117" />
<area alt="" title="" href="#" shape="poly" coords="28,22,57,20,36,39,27,61" />
</map>
</body>
HTML5 引入什么新的表单属性?
主要了解:
- autocomplete(自动补全)、novalidate(禁止校验)
- 新增的 input type:
search, url, telephone, email, password, date,pickers, range 以及 color
、- 校验:
min、max、maxlength、step、pattern、required
form 新属性:
autocomplete:属性规定表单是否应该启用自动完成功能。autocomplete 属性适用于 <form>,以及下面的 <input>类型:text, search, url, telephone, email, password, date,pickers, range 以及 color。语法是 <form autocomplete=”on|off”>
novalidate:如果使用该属性,则提交表单时不进行内容的验证。novalidate 属性适用于:<form>,以及以下类型的 <input> 标签:text, search, url, telephone, email, password, date pickers, range 以及 color。语法:novalidate=”novalidate”
input 新属性:
autocomplete:同上
autofocus:规定输入字段在页面加载时是否获得焦点,加载完成后,光标马上定位在该 input
form:form 属性的值必须是其所属表单的 id。如需引用一个以上的表单,请使用空格分隔的列表。
formaction:属性覆盖 form 元素的 action 属性,比如两个提交按钮的时候,一个是正常提交,一个是管理员提交。该属性适用于 type=”submit” 以及 type=”image”*。语法是 *formaction=”#”
formenctype:formenctype 属性覆盖 form 元素的 enctype 属性。该属性与 type=”submit” 和 type=”image” 配合使用。属性规定在发送到服务器之前应该如何对表单数据进行编码。
formmethod:覆盖表单的 method 属性。适用于 type=“submit” 和 type=“image”
formnovalidate:formnovalidate 属性覆盖 form 元素的 novalidate 属性。如果使用该属性,则提交表单时按钮不会执行验证过程。
formtarget:覆盖表单的 target 属性。适用于 type=”submit” 和 type=”image”*, 该属性规定在何处打开 *action URL。
height 和 width:height 和 width 属性规定用于 image 类型的 <input> 标签的图像高度和宽度。
list:引用包含输入字段的预定义选项的 datalist 。
min 和 max:min 属性与 max 属性配合使用,可创建合法值范围,两个要一对用。语法是选择 0-10 数字,例如:<input type=”number” name=”points” min=”0” max=”10” />
multiple:如果使用该属性,则允许一个以上的值,比如上传文件的时候,设置这个属性后可以一次选择几个图片;multiple 属性适用于以下类型的
<input>
标签:email 和 file。pattern (regexp):描述了一个正则表达式用于验证 <input> 元素的值,pattern 属性适用于以下 <input> 类型:text, search, url, telephone, email 以及 password。
placeholder:提供可描述输入字段预期值的提示信息 (hint)。该提示会在输入字段为空时显示,并会在字段获得焦点时消失。
required:规定必需在提交之前填写输入字段。 如果使用该属性,则字段是必填(或必选)的。
step:为输入域规定合法的数字间隔。 如果 step=”3”*,则合法的数是 *-3、0、3、6 等。step 属性可以与 max 和 min 属性创建一个区域值。
知道什么是微格式吗?谈谈理解。
我的理解是:通过给HTML标签添加一些属性加强语义,有助于处理 HTML 文档的软件(如屏幕阅读器),更好的理解该 HTML 文档。
所谓微格式,是建立在已有的、被广泛采用的标准基础之上的一组简单的、开放的数据格式。
具体表现是把语义嵌入到 HTML 中,以便有助于分离式开发,并通过制定一些简单的约定,来兼顾 HTML 文档的人机可读性,相当于对 Web 网页进行了语义注解。
采用微格式的 Web 页面,在 HTML 文档中给一些标签增加一些属性,这些属性对信息的语义结构进行注解,有助于处理 HTML 文档的软件,更好的理解该 HTML 文档。
在前端构建中微格式的意义
微格式按照某种已有的被广泛应用的标准,通过对内容块的语义标记,可以让外部应用程序、聚合程序和搜索引擎能够做以下事情:
- 在爬取 Web 内容时,能够更为准确地识别内容块的语义;
- 对内容进行操作,包括提供访问、校对,还可以将其转化成其他的相关格式,提供给外部程序和Web服务使用。
总结: 微格式可以对网站进行 SEO 优化,如果需要可以考虑。
HTML 与 XHTML 二者有什么区别,你觉得应该使用哪一个并说出理由。
HTML 与 XHTML 之间的差别,主要分为功能上的差别和书写习惯的差别两方面。
关于功能上的差别,主要是 XHTML 可兼容各大浏览器、手机以及 PDA,并且浏览器也能快速正确地编译网页。
由于 XHTML 的语法较为严谨,所以如果你是习惯松散结构的 HTML 编写者,那需要注意 XHTML 的规则。
下面列出了几条容易犯的错误,供理解。
- 所有标签都必须小写
在 XHTML 中,所有的标签都必须小写,不能大小写穿插其中,也不能全部都是大写。
- 标签必须成双成对
像是 <p>…</p>、<a>…</a>、<div>…</div>标签等,当出现一个标签时,必须要有对应的结束标签,缺一不可,就像在任何程序语言中的括号一样
- 标签顺序必须正确
标签由外到内,一层层包覆着,所以假设你先写 div 后写 h1,结尾就要先写 h1 后写 div。只要记住一个原则“先进后出”,先弹出的标签要后结尾。
- 所有属性都必须使用双引号
在 XHTML 1.0 中规定连单引号也不能使用,所以全程都得用双引号。
- 不允许使用 target=”_blank”
从 XHTML 1.1 开始全面禁止 target 属性,如果想要有开新窗口的功能,就必须改写为 rel=”external”*,并搭配 *JavaScript 实现此效果。
列举 IE 与其他浏览器不一样的特性?
IE 的排版引擎是 Trident (又称为 MSHTML)
Trident 内核曾经几乎与 W3C 标准脱节
Trident 内核的大量 Bug 等安全性问题没有得到及时解决
JS 方面,有很多独立的方法,例如绑定事件的 attachEvent、创建事件的 createEventObject 等
CSS 方面,也有自己独有的处理方式,例如设置透明,低版本 IE 中使用滤镜的方式,盒模型也和 W3C 规定的盒模型不同
html 常见兼容性问题?
PNG24 位的图片在 IE6 浏览器上出现背景
解决方案:做成 PNG8,也可以引用一段脚本处理。
浏览器默认的 margin 和 padding 不同
解决方案:使用 CSS 重置文件。
IE6 双边距 bug
在 IE6 下,如果对元素设置了浮动,同时又设置了 margin-left 或 margin-right,margin 值会加倍。
1
2
3
4
5 #box{
float:left;
width:10px;
margin:10px;
}这种情况之下 IE 会产生 20px 的距离
解决方案:在 float 的标签样式控制中加入
1 _display:inline;将其转化为行内属性。( _ 这个符号只有 IE6 会识别)
渐进识别的方式,从总体中逐渐排除局部。
首先,巧妙的使用 “\9” 这一标记,将 IE 游览器从所有情况中分离出来。
接着,再次使用 “+” 将 IE8 和 IE7、IE6 分离开来,这样 IE8 已经独立识别。
1
2
3
4
5
6 .bb{
background-color:#f1ee18; /*所有识别*/
.background-color:#00deff\9; /*IE6、7、8 识别*/
+background-color:#a200ff; /*IE6、7 识别*/
_background-color:#1e0bd1; /*IE6 识别*/
}IE 下,获取自定义属性用获取常规
IE 下,可以使属性的方法来获取自定义属性用获取常规,也可以使用 getAttribute( ) 方法获取自定义属性,Firefox 下,只能使用 getAttribute( ) 方法获取自定义属性
解决方法:统一通过 getAttribute( ) 方法获取自定义属性
event 对象的区别
IE 下,event 对象有 x、y 属性,但是没有 pageX、pageY 属性,Firefox 下,event 对象有 pageX、pageY 属性,但是没有 x、y 属性。
解决方法:(条件注释)缺点是在 IE 浏览器下可能会增加额外的 HTTP 请求数。
Chrome 12px 像素
Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示
解决方法:可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。
hover 和 active 失效
超链接访问过后 hover 样式就不出现了,被点击访问过的超链接样式不在具有 hover 和 active 了
解决方法:改变 CSS 属性的排列顺序 L-V-H-A
1
2
3
4 a:link {}
a:visited {}
a:hover {}
a:active {}怪异模式问题
漏写 DTD 声明,Firefox 仍然会按照标准模式来解析网页,但在 IE 中会触发怪异模式。
为避免怪异模式给我们带来不必要的麻烦,最好养成书写 DTD 声明的好习惯。
现在可以使用 HTML5, 推荐的写法:<!DOCTYPE html>
上下 margin 重合问题
IE 和 FireFox 都存在,相邻的两个 div 的 margin-left 和 margin-right 不会重合,
但是 margin-top 和 margin-bottom 却会发生重合。
解决方法:养成良好的代码编写习惯,同时采用 margin-top 或者同时采用 margin-bottom。
HTML 性能优化
压缩 HTML:将注释、空格和空行从生产文件中删除。
- 删除所有不必要的空格、注释和中断行将减少 HTML 的大小,加快网站的页面加载时间,并显著减少用户的下载时间。
- 可以使用 Glup 等构建工具进行删除
- HTML minifier | Minify Code
- Experimenting with HTML minifier — Perfection Kills
删除不必要的属性:像
type="text/javascript"
ortype="text/css"
这样的属性应该被移除。
- 类型属性不是必需的,因为 HTML5 把
text/css
和text/javascript
作为默认值。没用的代码应在网站或应用程序中删除,因为它们会使网页体积增大。- 确保所有和
<script>
标签都没有任何type
属性。- The Script Tag | CSS-Tricks
避免脚本阻塞加载。确保在使用 JavaScript 代码之前加载 CSS。
- 在引用 JavaScript 之前引用 CSS 可以实现更好地并行下载,从而加快浏览器的渲染速度。
- 确保
<link>
和<style>
始终位于<script>
之前。- 合理安排 styles 和 scripts 来提高网页速度
尽可能使用
async
和defer
- 确保 JavaScript 脚本兼容
async
和defer
,任何时候都要尽可能使用async
,特别是当你有较多的script
标签时。- 这样在加载 JavaScript 的过程中页面就不会重新绘制,否则,浏览器在不具有这些特性的
script
标签后就不会重绘任何东西。- 消除渲染阻塞资源
DNS 预取:一次 DNS 查询时间大概在 60-120ms 之间或者更长,提前解析网页中可能的网络连接域名
1 <link rel="dns-prefetch" href="http://example.com/" />减少内联脚本的数量
- 内联脚本在页面加载过程中消耗很多资源,因为解析器认为内联脚本会改变页面结构。
- 通常,尽量少的使用内联脚本和减少用
document.write()
来输出内容,在一定情况下可以加速整体页面的载入。现在浏览器中一般使用现代的 W3C DOM 方法操作页面内容,优于使用document.write()
的传统方法。缩小和压缩图像
- 较大的图像会导致页面需要更多的时间来加载。在将图像添加到页面之前,请考虑使用 Photoshop 等图像处理工具内置的压缩功能,或使用 Compress Jpeg 或 Tiny PNG 等专用工具对图像进行压缩
最小化文件数量
- 减少一个页面引用的文件数量可以降低在下载一个页面的过程中需要的 HTTP 请求数量,从而减少这些请求的收发时间。
- 根据其缓存设置,浏览器可能会为每个所引用的文件发送一个带 If-Modified-Since 的请求给网络服务器,以查询这些文件自上次加载后是否有被修改。查询引用文件上次修改时间会花费太多时间,导致网页首屏延迟,这是因为在渲染页面之前浏览器必须确认每个文件的修改时间。
最小化
iframe
的数量:仅在没有任何其他技术可行性时才使用iframe
。避免节点深层级嵌套:深层级嵌套的节点在初始化构建时往往需要更多的内存占用,并且在遍历节点时也会更慢些,这与浏览器构建 DOM 文档的机制有关。浏览器会把整个 HTML 文档的结构存储为 DOM “树” 结构。当文档节点的嵌套层次越深,构建的 DOM 树层次也会越深。
页面缓存:在不设置页面缓存的情况下,每次刷新页面会重新读取服务器文件。设置页面缓存,每次刷新可从本地读取,提高页面加载效率
通过设置页面头的
expires
来定义页面过期时间,将过期时间定久一点就达到了 “永久” 缓存。
1 <meta http-equiv="expires" content="Sunday 26 October 2099 01:00 GMT" />避免 Table 布局:
table
比其它 HTML 标签占更多的字节(造成下载时间延迟,占用服务器更多流量资源)
- 不使用
table
布局,而应运用float
,position
,flex
或grid
来布局。- 当然,
table
仍是不失为一种有效的展示表格数据的方式。为了帮助浏览器更快速的渲染你的页面,你应该避免嵌套table
。- 参考:为什么我们不建议用 Table 布局 和 最小化布局
如何制作快速加载的 HTML 页面 中还有其他方面的例子,如:高效地排列页面组件、合理的选择 user-agent 等
更多
https://segmentfault.com/a/1190000039943415
本文链接: http://www.ionluo.cn/blog/posts/d7296aa1.html
版权声明: 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。转载请注明出处!