前端优化

前端页面优化决定了工程师的工作质量与工作效率

前端页面优化它并非一个独立的知识点，包含HTML，CSS，JS，以及其他非代码类知识内容

 

为何进行前端页面的优化？

扩展性更强【页面数据基本上都来源于后端，页面若足够优秀，新增加字段/图片不会改变前端页面的布局--由此也可以看出前端工作并非是独立的】

 

前端页面优化的角度

• 代码语义性
• 代码可读性
• 代码扩展性
• *页面加载速度（文件大小、请求次数、加载方式、代码性能）

 

语义性——语义性的重要性

语义性对SEO以及网站自然排名的影响？SEO是什么？

对语义性的要求使得网站发生了什么变化？

• Table布局-->Div+CSS(HTML+CSS)
• Flash类网站的消亡

语义化的优点

• 1.使HTML的结构更清晰
• 2.代码的可读性较好
• 3.代码的可维护性好
• 4.搜索引擎可根据标签的语言确定上下文和权重
• 5.移动设备的支持度更好

title/meta

标签语义化：div、span、h1-h6、p、ul、ol、li、dl、dt、dd、a、img、table、

特殊属性：img的alt与title属性，a的title属性

 

图片加载

核心原理：1. new Image() 动态创建ing；2. 设置图片src，并使用onload方法回调预加载完成的事件

 

按需加载（懒加载）

按需加载HTML内容

• 核心原理：利用JS在符合某种条件时，将script标签中的内容取出，让HTML生效

按需加载图片

• 核心原理：利用切换图片标签的src属性，实现图片的按需加载

按需整个屏幕进行加载

• 核心原理：将待加载的代码放置于textarea中，在合适的时候使用DOM处理该内容

利用AJAX实现页面懒加载

• 核心原理：在符合某种条件时，触发懒加载
• 使用AJAX实现前后台数据交互，一步请求数据
• 使用DOM讲AJAX异步获取的数据加载到HTML中