站打开速度慢？网站加载图片慢？网站容易卡顿？身为站长和网站用户的你有没有遇到过这种情况？没错，这些都是网站页面体积惹的祸。解决办法是通过技术手段去掉臃肿杂乱的代码，减小网页文件大小，加快网页加载速度，替身网站打开速度。

网页精简代码主要涉及以下几个要点：

1.CSS样式精简

网页制作应通过CSS（层叠样式表单）来统一定制字体风格。例如：

(bstyle="color:red;font-size:16px;")测试(/b)

(divid="divmain"style="font-size:12px;")DIV(/b)

(divstyle="color:red;")红色(bstyle="color:green;")绿色(/b)(/div)

----------------------

(styletype="text/css")

b（color:red;font-size:16px;）/*通用对象*/

#divmain（font-size:12px;）/*ID对象*/

.red（color:red;）/*定制类别*/

.redb（color:green;）/*定制类别下的通用对象*/

(/style)

(b)测试(/b)

(divid="divmain")DIV(/b)

(divclass="red")红色(b)绿色(/b)(/div)

CSS精简代码示例文件把文字的字体、字号、颜色、背景色等统一起来，不用对每段文字单独进行格式定义，从而减少大量重复性标签。注意把所有css文件单独存放在命名为css的外部文件中。

语法：(linkrel="stylesheet"type="text/css"href="/common/client.css")

作用的优先级：自身的style属性)页面的内部style对象)页面外部css文件。

下载：css帮助

2.JavaScript精简：

1.简化js中的函数名称和变量。

例如：Google，里面的函数名称只有1个或者2个字符。

2.将网页的公共部分转换为脚本并存于js文件里。这样可以减少文件大小，加快下载速度，同时也方便管理。不过不能将导航等等优化的关键代码转换成js，否则搜索引擎搜索不到。

转换方式：

原来：(h1)天天收藏夹(/h1)

脚本：document.write(“(h1)天天收藏夹(/h1)”);

例如：华军软件园源代码，将标题、导航等等都放着js文件里，将导航放在js里面就不太好了。

3.使用base标签精简：

Base标签是一个全集控制的标签。

比如：

(AHREF="http://www.llsffx.com/code/1.htm"target=”_blank”)代码一(/A)

(AHREF="http://www.llsffx.com/code/2.htm"target=”_blank”)代码一(/A)

其中http://www.llsffx.com和target=”_blank”:多次重复，增加无用的代码。

修改为：

(head)

(basehref=”http://www.llsffx.com/”target=”_blank”)

(/head)

(body)

(ahref=”/code/1.htm”)代码一(/a)

(ahref=”/code/2.htm”)代码二(/a)

(/body)

4.慎用网页精简代码工具

通常的网页精简代码工具，对htm精简代码具有一定的破坏性，常常为了精简代码将标签的后半个标签删除，造成网页的不完整。

处理前：(table)(tr)(td)第一行(/td)(/tr)(tr)(td)第二行(/td)(/tr)(/table)

处理后：(table)(tr)(td)第一行(tr)(td)第二行(/table)

处理后(/td)(/tr)被去掉了，使页面不完整。

5.删除空格和回车

机智的精简代码是连多余的空格和回车都删除的一干二净。这样能够使网页文件大小下降不少。但是这样的做后果是容易使代码排列杂乱，加大程序猿修改代码进度。

注：()替换成<>和{}

eb前端技术由html、css和 javascript三大部分构成，是一个庞大而复杂的技术体系，其复杂程度不低于任何一门后端语言。而我们在学习它的时候往往是先从某一个点切入，然后不断地接触和学习新的知识点，因此对于初学者很难理清楚整个体系的脉络结构。本文将对Web前端知识体系进行简单的梳理，对应的每个知识点点到为止，不作详细介绍。目的是帮助大家审查自己的知识结构是否完善，如有遗漏或不正确的地方，希望共勉。

HTML 篇

1、BOM

BOM 是 Browser Object Model

的缩写，即浏览器对象模型，当一个浏览器页面初始化时，会在内存创建一个全局的对象，用以描述当前窗口的属性和状态，这个全局对象被称为浏览器对象模型，即BOM。BOM的核心对象就是window，window

对象也是BOM的顶级对象，其中包含了浏览器的 6个核心模块：

document -

即文档对象，渲染引擎在解析HTML代码时，会为每一个元素生成对应的DOM对象，由于元素之间有层级关系，因此整个HTML代码解析完以后，会生成一个由不同节点组成的树形结构，俗称DOM树，document

用于描述DOM树的状态和属性，并提供了很多操作DOM的API。

frames - HTML 子框架，即在浏览器里嵌入另一个窗口，父框架和子框架拥有独立的作用域和上下文。

history - 以栈(FIFO)的形式保存着页面被访问的历史记录，页面前进即入栈，页面返回即出栈。

location - 提供了当前窗口中加载的文档相关信息以及一些导航功能。

navigator - 用来描述浏览器本身，包括浏览器的名称、版本、语言、系统平台、用户特性字符串等信息。

screen - 提供了浏览器显示屏幕的相关属性，比如显示屏幕的宽度和高度，可用宽度和高度。

2、DOM 系统

DOM 是 Document Object Model 的缩写，即 文档对象模型，是所有浏览器公共遵守的标准，DOM

将HTML和XML文档映射成一个由不同节点组成的树型结构，俗称DOM树。其核心对象是document，用于描述DOM树的状态和属性，并提供对应的DOM操作API。随着历史的发展，DOM

被划分为1级、2级、3级，共3个级别：

1级DOM - 在1998年10月份成为W3C的提议，由DOM核心与DOM

HTML两个模块组成。DOM核心能映射以XML为基础的文档结构，允许获取和操作文档的任意部分。DOM

HTML通过添加HTML专用的对象与函数对DOM核心进行了扩展。

2级DOM - 鉴于1级DOM仅以映射文档结构为目标，DOM

2级面向更为宽广。通过对原有DOM的扩展，2级DOM通过对象接口增加了对鼠标和用户界面事件（DHTML长期支持鼠标与用户界面事件）、范围、遍历（重复执行DOM文档）和层叠样式表（CSS）的支持。同时也对DOM

1的核心进行了扩展，从而可支持XML命名空间。

3级DOM -

通过引入统一方式载入和保存文档和文档验证方法对DOM进行进一步扩展，DOM3包含一个名为“DOM载入与保存”的新模块，DOM核心扩展后可支持XML1.0的所有内容，包括XML

Infoset、 XPath、和XML Base。

浏览器对不同级别DOM的支持情况如下所示：

从图中可以看出，移动端常用的 webkit 内核浏览器目前只支持DOM2，而不支持DOM3 。

新手福利获取方式：

1.在你手机的右上角有【关注】选项，或点击我的头像，点击关注！（关注我）

2.关注后，手机客户端点击我的主页面，右上角有私信，请私信发我：html

其实作为一个开发者，有一个学习的氛围跟一个交流圈子特别重要这里请私信我“html”不管你是小白还是大牛欢迎入住大家一起交流成长。小编会在里面不定期分享干货源码，包括我精心整理的一份零基础教程。欢迎各位感兴趣的的小伙伴。

学习思路：

3、事件系统

事件是用户与页面交互的基础，到目前为止，DOM事件从PC端的 鼠标事件(mouse) 发展到了 移动端的 触摸事件(touch) 和

手势事件(guesture)，touch事件描述了手指在屏幕操作的每一个细节，guesture 则是描述多手指操作时更为复杂的情况，总结如下：

第一根手指放下，触发 touchstart，除此之外什么都不会发生

手指滑动时，触发touchmove

第二根手指放下，触发 gesturestart

触发第二根手指的 touchstart

立即触发 gesturechange

任意手指移动，持续触发 gesturechange

第二根手指弹起时，触发 gestureend，以后将不会再触发 gesturechange

触发第二根手指的 touchend

触发touchstart (多根手指在屏幕上，提起一根，会刷新一次全局touch) _ ___

弹起第一根手指，触发 touchend

更多关于手势事件的介绍请参考：

gesture事件处理复杂手势

DOM2.0 模型将事件处理流程分为三个阶段，即 事件捕获阶段 、 事件处理阶段 、 事件冒泡阶段， 如图所示：

事件捕获 ：当用户触发点击事件后，顶层对象document 就会发出一个事件流，从最外层的DOM节点向目标元素节点传递，最终到达目标元素。

事件处理 ：当到达目标元素之后，执行目标元素绑定的处理函数。如果没有绑定监听函数，则不做任何处理。

事件冒泡 ：事件流从目标元素开始，向最外层DOM节点传递，途中如果有节点绑定了事件处理函数，这些函数就会被执行。

利用事件冒泡原理可以实现 事件委托

，所谓事件委托，就是在父元素上添加事件监听器，用以监听和处理子元素的事件，避免重复为子元素绑定相同的事件。当目标元素的事件被触发以后，这个事件就从目标元素开始，向最外层元素传递，最终冒泡到父元素上，父元素再通过event.target

获取到这个目标元素，这样做的好处是，父元素只需绑定一个事件监听，就可以对所有子元素的事件进行处理了，从而减少了不必要的事件绑定，对页面性能有一定的提升。

4、HTML解析过程

浏览器加载 html 文件以后，渲染引擎会从上往下，一步步来解析HTML标签，大致过程如下：

用户输入网址，浏览器向服务器发出请求，服务器返回html文件；

渲染引擎开始解析 html 标签，并将标签转化为DOM节点，生成 DOM树；

如果head 标签中引用了外部css文件，则发出css文件请求，服务器返回该文件，该过程会阻塞后面的解析；

如果引用了外部 js 文件，则发出 js 文件请求，服务器返回后立即执行该脚本，这个过程也会阻塞html的解析；

引擎开始解析 body 里面的内容，如果标签里引用了css 样式，就需要解析刚才下载好的css文件，然后用css来设置标签的样式属性，并生成渲染树；

如果 body 中的 img 标签引用了图片资源，则立即向服务器发出请求，此时引擎不会等待图片下载完毕，而是继续解析后面的标签；

服务器返回图片文件，由于图片需要占用一定的空间，会影响到后面元素的排版，因此引擎需要重新渲染这部分内容；

如果此时 js 脚本中运行了 style.display="none"，布局被改变，引擎也需要重新渲染这部分代码；

直到 html 结束标签为止，页面解析完毕。

5、重绘 和 回流

当渲染树中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流。比如上面的img文件加载完成后就会引起回流，每个页面至少需要一次回流，就是在页面第一次加载的时候。

当渲染树中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如 background-color。则就叫称为重绘。

从上面可以看出，回流必将引起重绘，而重绘不一定会引起回流。会引起重绘和回流的操作如下：

添加、删除元素(回流+重绘)

隐藏元素，display:none(回流+重绘)，visibility:hidden(只重绘，不回流)

移动元素，比如改变top,left的值，或者移动元素到另外一个父元素中。(重绘+回流)

对style的操作(对不同的属性操作，影响不一样)

还有一种是用户的操作，比如改变浏览器大小，改变浏览器的字体大小等(回流+重绘)

另外，transform

操作不会引起重绘和回流，是一种高效率的渲染。这是因为transform属于合成属性，对合成属性进行transition/animation

动画时将会创建一个合成层，这使得动画元素在一个独立的层中进行渲染，当元素的内容没有发生改变，就没必要进行重绘，浏览器会通过重新复合来创建动画帧。

6、本地存储

本地存储最原始的方式就是 cookie,cookie 是存放在本地浏览器的一段文本，数据以键值对的形式保存，可以设置过期时间。 但是 cookie

不适合大量数据的存储，因为每请求一次页面，cookie 都会发送给服务器，这使得 cookie

速度很慢而且效率也不高。因此cookie的大小被限制为4k左右(不同浏览器可能不同,分HOST)，如下所示：

Firefox和Safari允许cookie多达4097个字节，包括名(name)、值(value) 和 等号。

Opera允许cookie多达4096个字节，包括：名(name)、值(value) 和 等号。

Internet Explorer允许cookie多达4095个字节，包括：名(name)、值(value) 和 等号。

在所有浏览器中，任何cookie大小超过限制都被忽略，且永远不会被设置。

html5 提供了两种在客户端存储数据的新方法：localStorage 和 sessionStorage, 它们都是以key/value

的形式来存储数据，前者是永久存储，后者的存储期限仅限于浏览器会话(session)，即当浏览器窗口关闭后，sessionStorage中的数据被清除。

localStorage的存储空间大约5M左右(不同浏览器可能不同，分

HOST)，这个相当于一个5M大小的前端数据库，相比于cookie，可以节约带宽，但localStorage在浏览器隐私模式下是不可读取的，当存储数据超过了localStorage

的存储空间后会抛出异常。

此外，H5还提供了逆天的websql和

indexedDB，允许前端以关系型数据库的方式来存储本地数据，相对来说，这个功能目前应用的场景比较少，此处不作介绍。

7、浏览器缓存机制

浏览器缓存机制是指通过 HTTP 协议头里的 Cache-Control (或 Expires) 和 Last-Modified (或 Etag)

等字段来控制文件缓存的机制。

Cache-Control 用于控制文件在本地缓存有效时长。最常见的，比如服务器回包：Cache-Control:max-age=600

表示文件在本地应该缓存，且有效时长是600秒 (从发出请求算起)。在接下来600秒内，如果有请求这个资源，浏览器不会发出 HTTP

请求，而是直接使用本地缓存的文件。

Last-Modified 是标识文件在服务器上的最新更新时间。下次请求时，如果文件缓存过期，浏览器通过 If-Modified-Since

字段带上这个时间，发送给服务器，由服务器比较时间戳来判断文件是否有修改。如果没有修改，服务器返回304告诉浏览器继续使用缓存；如果有修改，则返回200，同时返回最新的文件。

Cache-Control 通常与 Last-Modified 一起使用。一个用于控制缓存有效时间，一个在缓存失效后，向服务查询是否有更新。

Cache-Control 还有一个同功能的字段：Expires。Expires 的值一个绝对的时间点，如：Expires: Thu, 10 Nov

2015 08:45:11 GMT，表示在这个时间点之前，缓存都是有效的。

Expires 是 HTTP1.0 标准中的字段，Cache-Control 是 HTTP1.1

标准中新加的字段，功能一样，都是控制缓存的有效时间。当这两个字段同时出现时，Cache-Control 是高优化级的。

Etag 也是和 Last-Modified 一样，对文件进行标识的字段。不同的是，Etag

的取值是一个对文件进行标识的特征字串。在向服务器查询文件是否有更新时，浏览器通过 If-None-Match

字段把特征字串发送给服务器，由服务器和文件最新特征字串进行匹配，来判断文件是否有更新。没有更新回包304，有更新回包200。Etag 和

Last-Modified 可根据需求使用一个或两个同时使用。两个同时使用时，只要满足基中一个条件，就认为文件没有更新。

另外有两种特殊的情况：

手动刷新页面(F5)，浏览器会直接认为缓存已经过期(可能缓存还没有过期)，在请求中加上字段：Cache-Control:max-age=0，发包向服务器查询是否有文件是否有更新。

强制刷新页面(Ctrl+F5)，浏览器会直接忽略本地的缓存(有缓存也会认为本地没有缓存)，在请求中加上字段：Cache-Control:no-cache

(或 Pragma:no-cache)，发包向服务重新拉取文件。

8、History

用户访问网页的历史记录通常会被保存在一个类似于栈的对象中，即history对象，点击返回就出栈，跳下一页就入栈。 它提供了以下方法来操作页面的前进和后退：

window.history.back( ) 返回到上一个页面

window.history.forward( ) 进入到下一个页面

window.history.go( [delta] ) 跳转到指定页面

HTML5 对History Api 进行了增强，新增了两个Api 和一个事件，分别是pushState、replaceState 和

onpopstate：

pushState是往history对象里添加一个新的历史记录，即压栈。

replaceState 是替换history对象中的当前历史记录。

当点击浏览器后退按钮或 js调用history.back 都会触发 onpopstate 事件。

与其类似的还有一个事件：onhashchange，onhashchange是老API，浏览器支持度高，本来是用来监听hash变化的，但可以被利用来做客户端前进和后退事件的监听，而onpopstate是专门用来监听浏览器前进后退的，不仅可以支持hash，非hash的同源

url 也支持。

9、HTML5离线缓存

HTML5离线缓存又叫Application

Cache，是从浏览器的缓存中分出来的一块缓存区，如果要在这个缓存中保存数据，可以使用一个描述文件（manifest file），列出要下载和缓存的资源。

manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。manifest 文件可分为三个部分：

- CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存

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

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

离线缓存为应用带来三个优势：

离线浏览 - 用户可在应用离线时使用它们

速度 - 已缓存资源加载得更快

减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

10、Web语义化 和 SEO

Web语义化是指使用语义恰当的标签，使页面有良好的结构，页面元素有含义，能够让人和搜索引擎都容易理解。

SEO是指在了解搜索引擎自然排名机制的基础之上，对网站进行内部及外部的调整优化，改进网站在搜索引擎中关键词的自然排名，获得更多的展现量，吸引更多目标客户点击访问网站，从而达到互联网营销及品牌建设的目标。

搜索引擎通过爬虫技术获取的页面就是由一堆 html 标签组成的代码，人可以通过可视化的方式来判断页面上哪些内容是重点，而机器做不到。

但搜索引擎会根据标签的含义来判断内容的权重，因此，在合适的位置使用恰当的标签，使整个页面的语义明确，结构清晰，搜索引擎才能正确识别页面中的重要内容，并予以较高的权值。比如h1~h6这几个标签在SEO中的权值非常高，用它们作页面的标题就是一个简单的SEO优化。

言

对于项目，那就是我们的亲儿子啊，作为一个前端菜鸟，面向用户就是将自己的儿子介绍给别人认识，肯定要让他白白净净，漂漂亮亮的啦，给别人一眼就喜欢上的感觉咯，哈哈哈~

常在河边走，哪有不湿鞋，在我们编程的工程中，尤其是前端的同学，肯定少不了跟Css打交道，命名、缩写、书写顺序等都是有一定规范，这个规范可能来源于你、我、或者浏览器等不定向人群（这个规范是我瞎编的），今天自己整合收集，以及个人项目用到的html+css的书写规范送给在"编程界"奋斗的小伙伴，你 不是一个人在战斗。

话不多说，锅烧空气，锅热放油，放入写好的html+css炸一遍，捞出，控油，裹上鸡蛋液，粘上面包糠，再炸，隔壁小孩都馋哭了，不好吃你来打我。

一 命名规则说明

1、所有的命名最好都小写

2、属性的值一定要用双引号("")括起来，且一定要有值如class="app",id="app"

3、每个标签都要有开始和结束，且要有正确的层次，排版有规律工整例如：<div></div>

4、空元素要有结束的tag或于开始的tag后加上"/" <br />、<img />

5、表现与结构完全分离，代码中不涉及任何的表现元素，如style、font、bgColor、border等

6、<h1>到<h6>的定义，应遵循从大到小的原则，体现文档的结构，并有利于搜索引擎的查询,因此，请不要利用标题标签来改变同一行中的字体大小。相反，我们应当使用层叠样式表定义来达到漂亮的显示效果。

7、给每一个表格和表单加上一个唯一的、结构标记id

8、给图片加上alt标签,alt属性是一个必需的属性，它规定在图像无法显示时的替代文本。假设由于下列原因用户无法查看图像，alt 属性可以为图像提供替代的信息：网速太慢、src 属性中的错误、浏览器禁用图像、用户使用的是屏幕阅读器。

9、尽量使用英文命名原则

10、尽量不缩写，除非一看就明白的单词如btn。

11、命名方式(BEM)：类-体（例：g-head）、类-体-修饰符（例：u-btn-active）。

12、scss中的变量、函数、混合、placeholder采用驼峰式命名

13、后代选择器：体-修饰符即可（例：.m-page .cut{}）注：后代选择器不要在页面布局中使用，因为污染的可能性较大；

14、减少id命名，id在JS是唯一的，不能多次使用，id的优先级优先与class，所以id应该按需使用，而不能滥用。

二 网页外层重要部分CSS样式命名

 wrap ------------------ 用于最外层 
 header ---------------- 用于头部 
 main ------------------ 用于主体内容（中部） 
 main-left ------------- 左侧布局 
 main-right ------------ 右侧布局 
 nav ------------------- 网页菜单导航条 
 content --------------- 用于网页中部主体 
 footer ---------------- 用于底部

三 样式属性顺序

1. 定位：positionz-indexleftrighttopbottomclip等。

2. 自身属性：widthheightmin-heightmax-heightmin-widthmax-width等。

3. 文字样式：colorfont-sizeletter-spacing, colortext-align等。

4. 背景：background-imageborder等。

5.文本属性: text-alignvertical-aligntext-wraptext-transformtext-indenttext-decoration letter-spacingword-spacingwhite-spacetext-overflow等。

6. css3中属性：content、box-shadow、animation、border-radius、transform等

/* yes */ 
 .example { 
 z-index: -1;
 display: inline-block;
 font-size: 16px;
 color: red; 
 background-color: #eee; 
} 
/* no */ 
.example { 
 color: red; 
 background-color: #eee; 
 display: inline-block; 
 z-index: -1; 
 font-size: 16px; 
 } 

目的：减少浏览器reflow(回流)，提升浏览器渲染dom的性能。

关注我的头条号，分享更多的技术学习文章，我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。

文档加载完成到完全显示之间浏览器的渲染流程为：

1）浏览器解析html构建dom树，解析css构建cssom树即css rule tree：将html和css都解析成树形的数据结构；dom树的构建过程是一个深度遍历过程：当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。2）构建render树：DOM树和cssom树合并之后形成render树。为了构建渲染树，浏览器大体完成了下列工作：从DOM树的根节点开始遍历每个可见节点。对于每个可见节点，为其找到适配的CSSOM规则并应用它们。发射可见节点，连同其内容和计算的样式。渲染树中包含了屏幕上所有可见内容及其样式信息。3）布局render树：有了render树，浏览器已经知道网页中有哪些节点，各个节点的css定义以及它们的从属关系，接着就开始布局，计算出每个节点在屏幕中的位置和大小。(html采用了一种流式布局的布局模型，从上到下，从左到右顺序布局，布局的起点是从render树的根节点开始的，对应dom树的document节点，其初始位置为(0,0)，详细的布局过程为：每个renderer的宽度由父节点的renderer确定。父节点遍历子节点，确定子节点的位置(x,y)，调用子节点的layout方法确定其高度，父节点根据子节点的height, margin, padding确定自身的高度)。4）渲染，绘制render树：浏览器已经知道啦哪些节点要显示，每个节点的css属性是什么，每个节点在屏幕中的位置是哪里。就进入啦最后一步，按照计算出来的规则，通过显卡把内容画在屏幕上。浏览器并不是一获取到css样式就立马开始解析而是根据css样式的书写顺序按照dom树的结构分布render样式，完成第（2）步，然后开始遍历每个树节点的css样式进行解析，此时的css样式的遍历顺序完全是按照之前的的书写顺序，在解析过程中，一旦浏览器发现某个元素的定位变化影响布局，则需要倒回去重新渲染。例如css样式：{width: 100px; height: 100px; background-color: red; position: absolute;}当浏览器解析到position的时候突然发现该元素是绝对定位元素需要脱离文档流，而之前却是按照普通元素进行解析的，所以不得不重新渲染，解除该元素在文档中所占位置，然而由于该元素的占位发生变化，其他元素也可能会受到回流的影响而重新排位，最终导致（3）步骤花费时间太久而影响到（4）步骤的显示，影响了用户体验。

注：render树的结构不等同于DOM树的结构，一些设置display:none的节点不会被放在render树中，但会在dom树中。

有些情况，比如修改了元素的样式，浏览器并不会立刻回流(reflow)或重绘(repaint)，而是把这些操作积攒一批，然后做一次reflow，这也叫做异步reflow。但是在有些情况下，比如改变窗口大小，改变页面默认字体等浏览器会马上进行reflow。为了更好的用户体验，渲染引擎将会尽可能早的将内容呈现在屏幕上，并不会等到所有html都解析完成之后再去构建和布局render树。它是解析完一部分内容就显示一部分内容，同时，可能还在网络上下载其余内容。

四 css样式书写规范

使用CSS缩写属性

CSS有些属性是可以缩写的，比如padding,margin,font等等，这样精简代码同时又能提高用户的阅读体验。

去掉小数点前的“0”

简写命名(前提是要让人看懂你的命名才能简写哦)

16进制颜色代码缩写

连字符CSS选择器命名规范

1.长名称或词组可以使用中横线来为选择器命名。2.不建议使用“_”下划线来命名CSS选择器，为什么呢？

• 输入的时候少按一个shift键；
• 浏览器兼容问题 （比如使用_tips的选择器命名，在IE6是无效的）
• 能良好区分JavaScript变量命名（JS变量命名是用“_”）

功能

状态

注释的写法

/* Header */ 
 内容区
 
 /* End Header */

id的命名

1)页面结构

容器: container

页头：header

内容：content/container

页面主体：main

页尾：footer

导航：nav

侧栏：sidebar

栏目：column

页面外围控制整体佈局宽度：wrapper

左右中：left right center(2)导航

导航：nav

主导航：mainnav

子导航：subnav

顶导航：topnav

边导航：sidebar

左导航：leftsidebar

右导航：rightsidebar

菜单：menu

子菜单：submenu

标题: title

摘要: summary

(3)功能

标志：logo

广告：banner

登陆：login

登录条：loginbar

注册：register

搜索：search

功能区：shop

标题：title

加入：joinus

状态：status

按钮：btn

滚动：scroll

标籤页：tab

文章列表：list

提示信息：msg

当前的: current

小技巧：tips

图标: icon

注释：note

指南：guild

服务：service

热点：hot

新闻：news

下载：download

投票：vote

合作伙伴：partner

友情链接：link

版权：copyright

CSS样式表文件命名

主要的 master.css

模块 module.css

基本共用 base.css

布局、版面 layout.css

主题 themes.css

专栏 columns.css

文字 font.css

表单 forms.css

补丁 mend.css

打印 print.css

五 HTML5-语义化

距HTML5标准规范制定完成并公开发布已经有好些年了，但是多数公司还是用的不是很多，可能一部分原因是部分用户在使用低版本浏览器吧。

什么是语义化？就是用合理、正确的标签来展示内容，比如h1~h6定义标题。

语义化优点：

• 易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。
• 有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。
• 方便其他设备解析，如盲人阅读器根据语义渲染网页
• 有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐。

1、header

<header>定义文档或者文档的部分区域的页眉，应作为介绍内容或者导航链接栏的容器。在一个文档中，您可以定义多个<header>元素，但需要注意的是<header>元素不能作为<address>、<footer>或 <header>元素的子元素。

2、nav

<nav>描述一个含有多个超链接的区域，该区域包含跳转到其他页面或页面内部其他部分的链接列表。在一个文档中，可定义多个元素。

3、main

<main>定义文档的主要内容，该内容在文档中应当是独一无二的，不包含任何在文档中重复的内容，比如侧边栏，导航栏链接，版权信息，网站logo，搜索框（除非搜索框作为文档的主要功能）。需要注意的是在一个文档中不能出现多个<main>标签。

4、article

<article>元素表示文档、页面、应用或网站中的独立结构，是可独立分配的、可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。当<article>元素嵌套使用时，则该元素代表与外层元素有关的文章。例如，代表博客评论的元素可嵌套在代表博客文章的元素中。

5、aside

<aside>元素表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分且可以被单独的拆分出来而不会影响整体。通常表现为侧边栏或嵌入内容。

6、footer

<footer>定义最近一个章节内容或者根节点元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。使用footer插入联系信息时，应在 footer 元素内使用 元素。注意不能包含<footer>或者<header>

7、section

<section>表示文档中的一个区域（或节），比如，内容中的一个专题组。

如果元素内容可以分为几个部分的话，应该使用 <article>而不是 <section>。不要把 <section>元素作为一个普通的容器来使用，特别是当<section>仅仅是为了美化样式或方便脚本使用的时候，应使用<div>。