如何优化前端页面 / 如何优化网页
作为前端开发人员来说，不但要开发出能兼容各大主流浏览器的页面，而且还需要懂得去优化前端页面。本文主要给大家讲解如何去优化页面。
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 合理书写大括号位置、空行位置、注释等内容，对于声明变量，可以如下声明：
var box = document.getElementById('box'),
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 文件，具体增加方法此处也不讲解了，可详见《设置网页地址栏前面的标志图标》。
评论区