Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >如何优化前端页面 / 如何优化网页

如何优化前端页面 / 如何优化网页

作者头像
HTML5学堂
发布于 2018-03-12 09:15:59
发布于 2018-03-12 09:15:59
2.6K0
举报
文章被收录于专栏:HTML5学堂HTML5学堂

HTML5学堂:如何优化前端页面 / 如何优化网页。作为前端开发人员来说,不但要开发出能兼容各大主流浏览器的页面,而且还需要懂得去优化前端页面。本文主要给大家讲解如何去优化页面。

1 前期准备

1.1 首页命名为index.html / index.htm / index.php等。

1.2 需要制作404页面。

1.3 文件夹结构合理。

1.4 命名使用英文且有语义性的单词,并提供参考文档。

2 结构

2.1 文件头部分

2.1.1 需要提供文档声明

2.1.2 设置utf-8的编码格式,并放置于title之上

2.1.3 合理的填写html文件中的title、meta等内容

2.1.4 使用外部引入样式表和JS行为代码,实现结构、样式和行为的相分离,降低模块间的耦合度

2.1.5 合理控制JS文件的引入位置,提升网站的加载速度

2.1.6 根据具体情况合并CSS、JS文件,降低服务器请求次数

2.2 标签选用与书写规范

2.2.1 书写HTML代码的时候,遵循标签语义化的要求,根据标签的语义性进行选择,如布局使用div、标题使用h系列标签、段落使用p标签等

2.2.2 HTML代码要合理嵌套,一般情况下,行元素当中不能包含块元素,除了段落、标题类型的块元素当中,既能够包含块元素,也能够包含行元素,而段落或标题类的块元素只能够包含文字或行元素。table元素只能够直接包含thead、tbody、tfoot、caption等元素;ul/ol元素只能直接包含li元素;dl元素当中只能直接包含dt和dd元素;form表单当中只能直接包含filedset和legend,不能直接包含input元素。

2.2.3 合理书写注释,代码缩进合理,不出现多余空行或者空标签,提升代码可读性。

2.2.4 权衡嵌套层级以及扩展性等多个方面后,在适当位置使用三层嵌套技术。

2.2.5 合理书写a标签的title、img标签的title和alt,提升网站的SEO。

3 样式

3.1 基本代码规范

3.1.1 CSS规则命名中,一律采用小写加中划线的方式,不使用下划线或大写字母,命名采用更简明有语义的英文单词进行组合,进行合理的缩写

3.1.2 CSS代码的书写顺序遵循CSS样式的渲染顺序:显示属性-自身属性-文本属性-其他。

3.1.3 避免class与id重名,对于class名使用中划线,而id名遵循小驼峰命名法。

3.1.4 在书写网页样式之前,先进行浏览器默认样式重置。

3.2 兼容问题处理

3.2.1 在CSS代码当中,尽量的规避掉不同浏览器的兼容问题,如果实在避免不了,也需要进行合理解决。

3.2.2 尽可能的少使用hack。

3.2.3 对于CSS3部分属性,如果需要兼容各个浏览器,需要书写各个浏览器前缀。

3.3 其他样式处理

3.3.1 合理使用样式的“继承”(CSS后代选择器),或者使用样式的“组合”,减少页面中的类名,提升通用性。

3.3.2 合理使用群组选择器,进行代码的优化。

3.3.3 图片需要设置大小,防止后台传送不正常尺寸图像造成的失真。

3.3.4 对于数据类部分,在适当的地方增加超出隐藏或者超出显示为省略号。

3.3.5 需要考虑a标签的点击区,通常会对a进行处理:转化为块元素并设置高度,或者浮动设置宽高。

3.3.6 合理利用元素的默认样式,而不再进行冗余设置(如div等元素的宽度默认为占满父级,就不需要再设置width:100%,对于高度,默认由内容撑开,也不需要设置高度)。

3.3.7 考虑文档流的变化,对元素进行浮动之后,需要进行及时的清除,采用after伪元素清浮动的方法进行清除。

3.3.8 对盒模型设置时,子级的margin(顶部)通常会影响父级样式,因此,在父子之间的间距使用父级的内边距撑开,兄弟级别标签之间的距离可采用外边距。

4 JS方面

4.1 变量

4.1.1 合理命名,遵循基本的命名规范,并遵循命名推荐:属性/变量以名词开头,方法/函数以动词开头,遵循小驼峰,构造函数使用大驼峰,常量所有字母均大写。

4.1.2 所有变量声明都放在函数的头部。

4.1.3 所有函数都在使用之前定义。

4.1.4 尽量避免使用全局变量,防止全局作用域被污染。

4.1.5 合理书写大括号位置、空行位置、注释等内容,对于声明变量,可以如下声明:

  1. var box = document.getElementById('box'),
  2. con = document.getElementById('con');

4.1.6 利用对象命名空间、匿名函数、协同命名等方法,尽量避免团队合作时产生的命名冲突。

4.1.7 文件加载完毕之后再进行代码的执行,合理利用window.onload与jQuery中的$(document).ready。

4.1.8 对于DOM操作,尽可能减少在页面中查找元素的次数,即用变量存储查找的元素,之后再需使用,只需要使用变量即可(for循环中常见的长度控制,同理)。

4.2 数据类型

4.2.1 比较数据时,不要使用"相等"(==)运算符,只使用"严格相等"(===)运算符。

4.2.2 不要使用隐式的数据类型转换。

4.2.3 追加字符串时,采用 str += "独行冰海"; 而不是str = str + "独行冰海";

4.3 页面基本数据交互

4.3.1 获取标签使用最为快捷的方法,在PC端原生方法当中,速度比较如下:通过id > 通过类名 > 通过标签名。如果能够在小范围中进行查找时则缩小范围。

4.3.2 对于样式的修改与调整,根据具体情况采用style或者类名操作(className),防止style的滥用造成的css文件hover失效。

4.3.3 原生当中,一个元素一种事件只能绑定一次。

4.3.4 可以通过事件委托,减少页面中类似事件的数量。

4.3.5 在删除dom节点之前,需要先移除掉该节点上的事件。

4.4 性能

4.4.1 对于功能类似的代码,进行函数的封装,可以使用面向对象的书写方法,提升代码的复用性和扩展性。

4.4.2 尽可能少使用with语句、闭包、eval语句。

4.4.3 在DOM节点相关操作上进行优化,如利用变量存储查找到的元素,从而防止每次查找时进行页面重绘、利用文档碎片等。

4.4.4 尽可能减少页面中dom元素样式的修改,防止页面回流与重绘。

4.4.5 合理使用计时器,防止setInterval造成的内存泄露。

4.4.6 在设置计时器之后需要考虑计时器的清除,以防止计时器的叠加造成的影响。

4.5 AJAX

4.5.1 对于AJAX的异步加载,提供加载的相关提醒。

4.5.2 防止AJAX造成的重复请求。

4.5.3 利用时间戳进行缓存的处理。

4.5.4 对AJAX进行缓存处理。

4.5.5 合理使用AJAX中发送数据的方法,当文档中允许使用post或get发送时,优选选用get方法。

4.6 框架

4.6.1 jQuery等插件的合理引用,处理常见的浏览器兼容问题。

4.6.2 根进jQuery的发展,及时更新文件库,舍弃已经淘汰的方法(如:.toggle(),.live()等)。

5 图像方面

5.1 使用背景图合并技术,将多张背景图合并到一张图片上,从而降低页面与服务器之间的请求次数。

5.2 存储图像时根据需求采取不同的格式,对于不需要透明的图像可以存储为jpg,需要半透明图像存储为png,对于全透明且像素要求不高的图像可以存储为gif或png-8。对图像质量进行控制,保证在显示效果正常的前提下,存储为尽可能小的图像,对于含透明的图像,需要根据具体显示质量而选择。

5.3 对于网页中特殊的字体,可以使用@font-face进行设置,并根据实际情况修改字体包,防止字体包文件过大。具体设置方法此处不讲解了,可以参见文章《网络字体@font-face 如何处理网页中的特殊字体》。

5.4 合理使用图片预加载和图片懒加载。

6 上线准备

6.1 在上线之前对html、css、js文件进行压缩。

6.2 增加网页图标 ico文件,具体增加方法此处也不讲解了,可详见《设置网页地址栏前面的标志图标》。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2016-01-17,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 懂点君 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
2016.05 第三周 群问题分享
HTML+CSS 一个div里面有个img标签,div的高度由img撑开;img的兄弟级有个div要使内层div的高度等于外层div的高度,除了用JS实现,还能怎么实现? 2016.05.16~2016.06.20 核心概念 flex、position、display 参考答案 结构: <div class="wrap"> <img src="h5_course.jpg" alt="HTML5学堂"> <div>HTML5</div> </div> 设置多栏多列布局display
HTML5学堂
2018/03/13
1.1K0
前端面试汇总
Layout(回流):根据生成的渲染树,进行回流(Layout),得到节点的几何信息(位置,大小)
Dawnzhang
2022/05/10
2K0
前端面试汇总
前端面试题-每日练习(3)
标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链css和 js 脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件,容易维护、改版方便,不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性。
y191024
2023/09/11
2280
前端面试题-每日练习(3)
Web前端面试宝典(最新)
html语义化让页面的内容结构化,结构更清晰,便于对浏览器、搜索引擎解析;即使在没有样式CSS情况下也以一种文档格式显示,并且是容易阅读的;
半指温柔乐
2018/09/11
3.3K0
HTML5项目开发备忘录
HTML5学堂:良好的项目开发,从缜密的分析与计划开始,充分的项目开发准备能够让之后的问题降低到最少,让我们的整体开发效率提升不少。精心准备了关于项目开发的相关备忘,分享给大家啦~! 刘国利 - 独行冰海:从9月份开始送5班毕业开始,到现在,应该说两个月的时间,基本就没有闲下来,十一之后也仅仅就“喘息”了一天,未来的一个月貌似也是完全无休的状态,谁让赶上六班七班毕业还有八班的课呢?于是乎,官网文章的更新就断了很久~昨天(2015.10.29)称了称体重,竟然又瘦了5斤……心塞啊…… 写这篇文章,主要是两方面
HTML5学堂
2018/03/12
1.3K0
高频前端开发面试问题及答案整理
https://blog.csdn.net/p358278505/article/details/78718283
@超人
2021/02/26
1.5K0
高频前端开发面试问题及答案整理
你不可错过的前端面试题(二)
(1)合理的 title、description 和 keywords,他们的搜索权重逐个减小 title 强调重点即可,重要关键词出现不要超过2次,而且要靠前,不同页面 title 要有所不同;description 把页面内容高度概括,长度合适,不可过分堆砌关键词,不同页面 description 有所不同;keywords 列举出重要关键词即可。
WEBING
2019/02/26
9750
前端 50 道面试题与答案邀你轻松拿到Offer
第四种 console.log("a="+b);console.log("b="+a);
前端开发博客
2020/11/04
1.6K0
年薪30万的前端面试题,你能答对几道?|附答案
HTML面试题 1.XHTML和HTML有什么区别 HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言 最主要的不同: XHTML 元素必须被正确地嵌套。 XHTML 元素必
BestSDK
2018/03/01
5.7K2
年薪30万的前端面试题,你能答对几道?|附答案
WEB前端知识体系精简
Web前端技术由html、css和 javascript三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言。而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学习新的知识点,因此对于初学者很难理清楚整个体系的脉络结构。本文将对Web前端知识体系进行简单的梳理,对应的每个知识点点到为止,不作详细介绍。目的是帮助大家审查自己的知识结构是否完善,如有遗漏或不正确的地方,希望共勉。
Java帮帮
2018/12/29
1.2K0
web前端常见面试题归纳
行内元素和块元素的区别 概念 块元素:默认独占一行,页面中垂直排列,宽高和内外边距可控 行内元素:默认同行排列,宽高由内容决定 行内元素和块元素举例 块元素:<div>、<p>、<table>、<ul> 行内元素:<span>、<img>、<a>、<input> 行内元素和块元素的相互转换 display:inline;将块元素转换为行内元素 display:block;将行内元素转换为块元素 display;inline-blockl;行内块元素,既有block的宽度高度特性,也有inline的同行特性
Akilar
2023/04/30
1K0
第136天:Web前端面试题总结(理论)
  a. 请求数量:合并脚本和样式表,CSS Sprites,拆分初始化负载,划分主域
半指温柔乐
2018/09/11
2.2K0
每天10个前端小知识 【Day 16】
改变transform或opacity不会触发浏览器重新布局(reflow)或重绘(repaint),只会触发复合(compositions)。
程序媛夏天
2024/01/18
1900
每天10个前端小知识 【Day 16】
web前端面试题汇总_web前端面试题模拟
position的值, relative和absolute分别是相对于谁进行定位的?
全栈程序员站长
2022/09/27
5100
「资深前端工程师总结」前端面试知识点大全—CSS篇
display:none使用后,元素的宽度,高度都会丢失,视为不存在不加载;元素原来占据的空间位置不保留;产生回流和重绘;
用户5997198
2019/08/09
1.6K0
「资深前端工程师总结」前端面试知识点大全—CSS篇
2018年前端面试总结
再有两个月,2018就快过完了,因而有必要在年末对2018年的前端学习做一个总结,本文主要从前端面试中的一些基础知识来对前端进行相关的总结。本文根据网络面试题进行总结。
xiangzhihong
2022/11/30
7540
2020 年「我与技术面试那些事儿」
2020年,是个不平凡的一年,因为疫情的蔓延打乱了我的全盘计划。但在工作中,完成了目标项目、攻克了技术难关、学习了新的技术,也感谢平台!
达达前端
2022/04/13
1.3K0
2020 年「我与技术面试那些事儿」
【云+社区年度征文】全年的技术盘点与总结(含小程序开发)
2020年,是个不平凡的一年,因为疫情的蔓延打乱了我的全盘计划。但是这也让我和云+社区一起共同努力,在工作中,完成了目标项目、攻克了技术难关、学习了新的技术,也感谢腾讯云+社区的平台!
达达前端
2020/12/04
1.8K0
【云+社区年度征文】全年的技术盘点与总结(含小程序开发)
前端面试题归类-css
网页看着不方便,想要文档可以私聊我。要是有错别字和错误的地方,请各位大佬直接指出,谢谢啦!!
肥晨
2023/02/16
1.7K0
CSS学习笔记(基础篇)
CSS 指层叠样式表 (Cascading Style Sheets)(级联样式表)
Daotin
2018/08/31
4.7K0
CSS学习笔记(基础篇)
相关推荐
2016.05 第三周 群问题分享
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档