WEB前端HTML页面性能优化的9个方法
网站一般分为前端和后台。咱们能够了解成后台是用来完结网站的功用的，比方：完结用户注册，用户能够为文章宣布评论等等。而前端应该是归于功用的表现。并且影响用户拜访体会的绝大部分来自前端页面。
咱们网站建设的目的不就是为了让方针人群来拜访吗？
所以咱们能够了解成前端才是真正和用户触摸的。除了后台需求在功能上做优化外，其实前端的页面更需求在功能优化上下功夫，只要这样才华给咱们的用户带来更好的用户体会。
举个比方：就好像，好多人问，男人在找女朋友的时分是不是只看表面，一些才智的男人给出了这样的回答：脸蛋和身段决议了我是否想去了解她的思维，思维决议了我是否会一票否决她的脸蛋和身段。同理，网站也是这样，网站前端的用户体会决议了用户是否想要去运用网站的功用，而网站的功用决议了用户是否会一票否决前端体会。
不仅仅如此，假定前端优化得好，他不仅能够为企业节约本钱，他还能给用户带来更多的用户，由于增强的用户体会。所以说，网站和女人相同，都要表里兼修呀”。说了这么多，那么咱们应该怎么对咱们前端的页面进行功能优化呢？
1、削减http恳求，合理设置 HTTP缓存
http协议是无状况的运用层协议，意味着每次http恳求都需求建立通讯链路、进行数据传输，而在服务器端，每个http都需求发动独立的线程去处理。这些通讯和服务的开支都很贵重，削减http恳求的数目可有用提高拜访功能。
削减http的主要手法是兼并CSS、兼并javascript、兼并图片。将浏览器一次拜访需求的javascript和CSS兼并成一个文件，这样浏览器就只需求一次恳求。图片也能够兼并，多张图片兼并成一张，假定每张图片都有不同的超链接，可经过CSS偏移呼应鼠标点击操作，构造不同的URL。
缓存的力量是强大的，恰当的缓存设置能够大大的削减 HTTP恳求。假定某网站主页，当浏览器没有缓存的时分拜访一共会宣布 78个恳求，共 600多 K数据，而当第二次拜访即浏览器已缓存之后拜访则仅有 10个恳求，共 20多 K数据。 (这儿需求阐明的是，假定直接 F5刷新页面的话效果是不相同的，这种状况下恳求数还是相同，不过被缓存资源的恳求服务器是 304呼应，只要 Header没有Body ，能够节约带宽 )
怎样才算合理设置 ?
准则很简略，能缓存越多越好，能缓存越久越好。例如，很少改动的图片资源能够直接经过 HTTP Header中的Expires设置一个很长的过期头 ;改动不频频而又或许会变的资源能够运用 Last-Modifed来做恳求验证。尽或许的让资源能够在缓存中待得更久。关于 HTTP缓存的详细设置和原理此处就不再详述了。
2、运用浏览器缓存
对一个网站而言，CSS、javascript、logo、图标这些静态资源文件更新的频率都比较低，而这些文件又几乎是每次http恳求都需求的，假定将这些文件缓存在浏览器中，能够极好的改善功能。经过设置http头中的cache-control和expires的特点，可设定浏览器缓存，缓存时间能够是数天，乃至是几个月。
在某些时分，静态资源文件改动需求及时运用到客户端浏览器，这种状况，可经过改动文件名完结，即更新javascript文件并不是更新javascript文件内容，而是生成一个新的JS文件并更新HTML文件中的引用。
运用浏览器缓存战略的网站在更新静态资源时，应采用逐量更新的办法，比方需求更新10个图标文件，不宜把10个文件一次悉数更新，而是应该一个文件一个文件逐步更新，并有必定的间隔时间，避免用户浏览器遽然很多缓存失效，集中更新缓存，造成服务器负载骤增、网络堵塞的状况。
3、启用紧缩
在服务器端对文件进行紧缩，在浏览器端对文件解紧缩，可有用削减通讯传输的数据量。假定能够的话，尽或许的将外部的脚本、样式进行兼并，多个合为一个。文本文件的紧缩效率可到达80%以上，因而HTML、CSS、javascript文件启用GZip紧缩可到达较好的效果。可是紧缩对服务器和浏览器产生必定的压力，在通讯带宽良好，而服务器资源不足的状况下要权衡考虑
4、Lazy Load Images
这条战略实际上并不必定能削减 HTTP恳求数，可是却能在某些条件下或许页面刚加载时削减 HTTP恳求数。关于图片而言，在页面刚加载的时分能够只加载第一屏，当用户持续往后滚屏的时分才加载后续的图片。这样一来，假定用户只对第一屏的内容感兴趣时，那剩下的图片恳求就都节约了。
5、CSS放在页面最上部，javascript放在页面最下面
浏览器会在下载完结悉数CSS之后才对整个页面进行烘托，因而最好的做法是将CSS放在页面最上面，让浏览器尽快下载CSS。假定将 CSS放在其他地方比方 BODY中，则浏览器有或许还未下载和解析到 CSS就现已开端烘托页面了，这就导致页面由无 CSS状况跳转到 CSS状况，用户体会比较糟糕，所以能够考虑将CSS放在HEAD中。
Javascript则相反，浏览器在加载javascript后当即履行，有或许会堵塞整个页面，造成页面显现缓慢，因而javascript最好放在页面最下面。但假定页面解析时就需求用到javascript，这时放到底部就不适宜了。
6、合理的ajax恳求
关于回来内容相同的恳求，没必要每次都直接从服务端拉取，合理运用 AJAX 缓存能加快 AJAX 呼应速度并减轻服务器压力。
7、缩小 favicon.ico 并缓存
有利于 favicon.ico 的重复加载，由于一般一个 Web 运用的 favicon.ico 是很少改动的。
8、削减DOM数量和层级数量
HTML 中标签元素越多，标签的层级越深，浏览器解析 DOM 并制作到浏览器中所花的时间就越长，所以应尽或许坚持 DOM 元素简洁和扁平化的层级。
9、HTML标签转化
语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎简略了解网页
HTML标签的转化主要是指运用短标签替换在网页中有相同效果的长标签，比方b与strong标签两者都是对字体加粗可是strong却比b多了5个字符。假定一个页面呈现上百个加粗标签，就会产生不少的冗余代码。
与，假定只是单纯加粗或斜体则用b、i标签；
假定想对搜索引擎优化产生影响则用strong、em，可自行调理样式，在制作html页面的时分。进行优化的挑选运用的标签。
头部标签
1.标题：只强调要点即可，尽量把重要的关键词放在前面，关键词不要重复呈现，尽量做到每个页面的title标题中不要设置相同的内容。
2.标签：关键词，罗列出几个页面的重要关键字即可，牢记过火堆砌。
3.标签：网页描绘，需求高度归纳网页内容，牢记不能太长，过火堆砌关键词，每个页面也要有所不同。
表格，ur 等容器方式的标签
浏览器编译器遇到一个标签时，就开端寻找它的完毕标签，直到它匹配上,才华显现它的内容，所以当表，ur等容器方式的标签嵌套非常多时,打开页面就会特别慢,这样就削减用户体会了。
解决办法：在编写html的时分：尽量使每一个容器独立。假定要嵌套的时分，必定要使其清楚、简略介绍。
图片img标签
alt特点必定要写
合理 target="_blank"
合理而不频频运用target="_blank" 是能够在必定程度上位站点带来回旋流量和点击的。同一时分。在细节上运用 target="_blank" ，能够增强站点总体用户体会。
head头部标签部分
标题: 只强调要点，不要重复呈现关键词，各个页面的title不要设置相同的
关键词： 罗列出关键词，不要过火堆砌
描绘： 同2，不要太长，各个页面的description不要设置相同的
body代码正文
标签语义化，比较以下两部分代码做头部导航：
以上代码没有一点语义化，能够优化成如下： 关于a标签，要加title，一起加特点rel=‘nofollow’ nofollow: 告知爬虫不要去该链接去爬了，由于爬过去或许爬不回来了，不利于搜索引擎优化优化 h1、h2 标题太大的话，自行用css去修饰 //正确示例，注意p表明 文本阶段,不必div
这是文本内容啊
这是文本内容啊
这是文本内容啊 table，定义table标题，以下为正确示例 表格标题…… 注意 重要的html代码放在文件最前边，爬虫是由上之下抓取html代码的 重要的内容不要用js输出，爬虫是看不懂js的，所以咱们常用的vue框架是不利于搜索引擎优化优化的。 尽量少用iframe标签，爬虫是不会读取iframe的内容的 慎重运用display：none ，理由同3 精简代码，若用一个标签完结的布局，不要用两个……
li {
border-right: 1px solid #000;
}关于标题尽量用h标签，并且是h1标签，由于爬虫以为h1标签是本文最重要的标题，副标题用h2，其他不重要的标题就不要用h标签了
\ 表明换行，假定内容是纯文本内容，能够br换行，示例如下，假定是之间换行则不必，运用盒模型来调整