优化角度
- 代码语义化(与seo相关)
- 代码可读性(利于维护)
- 代码拓展性
- 页面加载速度(文件大小,请求次数,加载方式,代码性能)
一.语义化
语义化影响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左右),当触发动作时,交换属性,就可以达到按需加载。