前端页面优化

优化角度

1. 代码语义化(与seo相关)
2. 代码可读性（利于维护）
3. 代码拓展性
4. 页面加载速度（文件大小，请求次数，加载方式，代码性能）

一.语义化

语义化影响SEO（搜索引擎优化）以及网站自然排名

   语义化标签：h1-h6   ， p  ，  ul ，li ，ol ， dl ， dt ， dd ， a ，img ，table ，small ，strong

• <header>：页眉通常包括网站标志、主导航、全站链接以及搜索框。
• <nav>：标记导航，仅对文档中重要的链接群使用。
• <main>：页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能
• <aside>：定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。
• <footer>：页脚，只有当父级是body时，才是整个页面的页脚。   等等.....

二.可读性

三.拓展性

拓展性不足引起的问题

• 图片尺寸与文本溢出
• 未合理处理“相似元素的某个不同之处”
• 

四。页面加载速度

1.文件合并：涉及服务器的请求次数

文件压缩：涉及文件大小 

使用webpack等自动化构建工具

2.特殊字体使用fontmin压缩Web用汉字字体文件

3.图片压缩

• 在线压缩地址：tinypng：https://tinypng.com/
• 图片转为webp格式

转化方式：iSparta软件或者智图

借助srcset实现全浏览器兼容

4.背景图片合并   （CSS Sprites）

在线生成地址：https://www.toptal.com/developers/css/sprite-generator

5.图片预加载（核心原理：用new image（）动态创建img       并使用onload方法回调预载完成的事件）

6.按需加载

html按需加载：

（1）利用textarea标签，将你需要按需加载的HTML结构全放到这标签里面，这样页面解析的时候会忽略它们

<div>
        <textarea id="lazy-a">
            <p>
                <span>title</span>
            </p>
        </textarea>
</div>

src按需加载

<img src="伪装的图片" width="990" height="90" data-src="http://dummyimage.com/990x90/333/fff">

原理：把图片的真实资源地址存放在标签自定义的属性里面，如 'data-src'，那么src属性就用一张透明的图片占用（1K左右），当触发动作时，交换属性，就可以达到按需加载。