前端页面优化
2020-07-14 05:25
218 查看
优化角度
- 代码语义化(与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结构全放到这标签里面,这样页面解析的时候会忽略它们
[code]<div> <textarea id="lazy-a"> <p> <span>title</span> </p> </textarea> </div>
src按需加载
[code]<img src="伪装的图片" width="990" height="90" data-src="http://dummyimage.com/990x90/333/fff">
原理:把图片的真实资源地址存放在标签自定义的属性里面,如 'data-src',那么src属性就用一张透明的图片占用(1K左右),当触发动作时,交换属性,就可以达到按需加载。
相关文章推荐
- web前端优化vue ssr pwa技术突破性能瓶颈让页面飞
- 前端开发页面的性能优化方案总结
- 前端页面优化技巧
- web 前端页面性能优化总结
- 前端页面性能优化--笔记
- 前端优化:DNS预解析提升页面速度
- 一张图片优化5k带来的带宽成本及其前端页面的优化方法
- web前端页面性能优化小结
- 前端之页面性能优化
- 如何进行前端页面优化 ——《高性能JavaScript》
- Apache自动优化前端页面的模块mod_pagespeed应用(二)
- 了解html页面的渲染过程以备学习前端的性能优化
- web前端页面性能优化小结
- Web前端面试指导(四十七):页面优化有哪些方法
- 前端页面优化:javascript图片延迟加载
- 前端页面优化
- web前端页面性能优化小结
- 【前端页面优化】改善你的jQuery的25个步骤 千倍级效率提升
- 前端优化:DNS预解析提升页面速度
- web前端页面性能优化小结