摘要：介绍最近开始刷一些书和题此系列是介绍在读最佳实践的一些收获和体会。先修改诸如命名，格式等不涉及具体逻辑的内容重构过程中要持续测试，在多个浏览器测试，确保重构的部分功能正确。
介绍
最近开始刷一些书和题,此系列是介绍在读Web最佳实践的一些收获和体会。
存在问题：
代码组织混乱
代码格式的问题突出
页面布局随意
网站整体性能差，没有意识到应用诸如缓存，动态加载，脚本压缩，图片压缩等提高性能技术
推荐做法：
压缩样式表和脚本文件
减少HTTP请求次数
简洁和符合W3C标准的HTML和CSS代码能减少浏览器解析的时间，加快渲染过程
页面请求数量越少，相对页面的加载速度更快
在JS代码中选择性能更好的实现方案，如延迟加载，动态加载等技术;
延迟加载
最后加载
引入外部js脚本文件时，如果放入html的head中,则页面加载前该js脚本就会被加载入页面，而放入body中，则会按照页面从上倒下的加载顺序来运行javascript的代码，所以可以把js外部引入的文件放到页面底部，来让js最后引入，从而加快页面加载速度
动态加载
s1.src="test.js"
删除无用代码，精简代码（不起作用的CSS样式和废弃的JavaScript函数）
前端代码规范化，把CSS代码放到独立的文件中，在JS定义局部变量，把部分全局变量改变成局部变量
前端代码模块化，引入面向对象的思想来重构JavaScript代码，进一步明确公有接口和私有接口
提高页面性能：
将部分不影响首页展示的JS文件延迟到页面的加载后加载
删除页面中初始隐藏的区域，改为通过JS按需动态生成
页面中的部分图片延迟加载
调整CSS和JS文件引用顺序，即CSS在前，JS在后
给静态文件设置缓存，使用CSS Sprite，合并背景图
合并和压缩发布后的CSS和JS代码模块
前端重构最佳实践
重构前一定要预测风险，最好先完善自动化测试代码
重构的目的和范围要明确，提高代码的可维护性，可读性和性能
最好先易后难，循序渐进。先修改诸如命名，格式等不涉及具体逻辑的内容
重构过程中要持续测试，在多个浏览器测试，确保重构的部分功能正确。切记大量重构后再进行测试，因为大量重构后基本很难记得重构的逻辑，也可能遗漏部分测试用例
性能提升，先进行检测网站的整体性能并量化，找出性能瓶颈。重构过程中要持续监控性能，并进行对比
项目需求
调查项目是否需要AJAX操作
是否需要模块化
数据传输格式JSON或者XML
需要支持的浏览器
移动还是普通网站
需要的UI模块（模态窗口，滑块控件，进度条，提示框，分割框，幻灯显示，自动填充）
项目的特点
框架的特点
编写高质量，标准的HTML（标准校验工具，ESLint, Flow, JSDoc, ts）
明确浏览器支持范围
Chrome和Safari IE Tester（IE兼容测试工具
避免浏览器兼容性的问题
先考虑更改方案，使用没有兼容问题的代码
考虑如何兼容的问题
兼容IE，使用IE特有的条件表达式(hack)
让兼容的代码独立，提高代码的可维护性
HTML5新特性
新标签的兼容，CSS3的兼容，新增的API（使用html5shiv框架）
CSS3本身不支持，会直接忽略
新增加的接口的使用，必须添加条件判断（Modernizr）
多看Can I use
YSlow，pagespeed
基于不同的规则评定网站整体性能评分
给出提高网页性能的建议
统计页面加载的组件
页面的统计信息视图
相关性能分析工具集：Smush.it
Chrome开发工具
Network中可以查看各资源请求和下载所用的时间
Timeline可以查看网页渲染和交互过程中个步骤所花费的时间，从资源到JS的解析执行，样式的应用和绘制
Profiles中可以查看网页的CPU及内存占有情况报告
Audits中提供了各种资源和配置优化的建议和未使用CSS规则的列表
加快代码和资源文件传输的方式
CDN分发
缓存(meta)
压缩代码和资源文件（最优）
Gzip算法（压缩，header可以检查是否开启）
JS压缩（UglifyJS压缩和优化，YUI Compressor 仅压缩，Closure Compiler压缩和优化）
CSS(CSS Compressor,YUI Compressor)
HTML(HtmlCompressor使用时仔细调查和测试，避免压缩工具和破坏)
图片资源压缩（TinyPNG，JPEGmini，ImageOptim)
Airbnb规范: https://github.com/airbnb/jav...
Eslint规范: https://eslint.org/docs/rules/
Beachmark.js性能测试: https://benchmarkjs.com/docs#toc
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/88906.html
摘要：介绍最近开始刷一些书和题此系列是介绍在读最佳实践的一些收获和体会。先修改诸如命名，格式等不涉及具体逻辑的内容重构过程中要持续测试，在多个浏览器测试，确保重构的部分功能正确。 介绍 最近开始刷一些书和题,此系列是介绍在读Web最佳实践的一些收获和体会。 showImg(https://segmentfault.com/img/remote/1460000011465909?w=309&...
摘要：介绍最近开始刷一些书和题此系列是介绍在读最佳实践的一些收获和体会。先修改诸如命名，格式等不涉及具体逻辑的内容重构过程中要持续测试，在多个浏览器测试，确保重构的部分功能正确。 介绍 最近开始刷一些书和题,此系列是介绍在读Web最佳实践的一些收获和体会。 showImg(https://segmentfault.com/img/remote/1460000011465909?w=309&...
摘要：代码符合标准标准的页面会保证正确的渲染页面容易被搜索引擎搜索，提高搜索排名提高网站的易用性网页更好维护和扩展，属于插件停止使用不标准的标签和属性，简化代码标签没有实际意义，仅设置样式不推荐使用不推荐使用，让拥有更好的语义移除不常用的标签样式 代码符合标准 标准的页面会保证正确的渲染 页面容易被搜索引擎搜索，提高搜索排名(SEO) 提高网站的易用性 网页更好维护和扩展（Validato...
摘要：代码符合标准标准的页面会保证正确的渲染页面容易被搜索引擎搜索，提高搜索排名提高网站的易用性网页更好维护和扩展，属于插件停止使用不标准的标签和属性，简化代码标签没有实际意义，仅设置样式不推荐使用不推荐使用，让拥有更好的语义移除不常用的标签样式 代码符合标准 标准的页面会保证正确的渲染 页面容易被搜索引擎搜索，提高搜索排名(SEO) 提高网站的易用性 网页更好维护和扩展（Validato...
摘要：代码符合标准标准的页面会保证正确的渲染页面容易被搜索引擎搜索，提高搜索排名提高网站的易用性网页更好维护和扩展，属于插件停止使用不标准的标签和属性，简化代码标签没有实际意义，仅设置样式不推荐使用不推荐使用，让拥有更好的语义移除不常用的标签样式 代码符合标准 标准的页面会保证正确的渲染 页面容易被搜索引擎搜索，提高搜索排名(SEO) 提高网站的易用性 网页更好维护和扩展（Validato...
阅读 2248·2023-04-26 00:01
阅读 780·2021-10-27 14:13
阅读 1787·2021-09-02 15:11
阅读 3348·2019-08-29 12:52
阅读 503·2019-08-26 12:00
阅读 2549·2019-08-26 10:57
阅读 3349·2019-08-26 10:32
阅读 2830·2019-08-23 18:29
