比来开始刷一些书和题,此系列是介绍在读Web最佳实践的一些收获和体会。

web前端成长现状

存在问题：

代码组织混乱

代码格局的问题突出

页面构造随意

网站整体性能差，没有意识到应用诸如缓存，动态加载，脚本压缩，，图片压缩等提高性能技术

保举做法：

压缩样式表和脚本文件

减少HTTP请求次数

简洁和切合W3C标准的HTML和CSS代码能减少浏览器解析的时间，加快衬着过程

页面请求数量越少，相对页面的加载速度更快

在JS代码中选择性能更好的实现方案，如延迟加载，动态加载等技术;

延迟加载

<script type=http://www.mamicode.com/”text/javascript” src=http://www.mamicode.com/”" id=http://www.mamicode.com/”my”></script> <script type=http://www.mamicode.com/”text/javascript”> setTimeout(“document.getElementById(‘my‘).src=‘include/php100.php‘; “,3000);//延时3秒 </script>

最后加载

引入外部js脚本文件时，如果放入html的head中,则页面加载前该js脚本就会被加载入页面，而放入body中，则会凭据页面从上倒下的加载挨次来运行javascript的代码，所以可以把js外部引入的文件放到页面底部，来让js最后引入，从而加快页面加载速度

动态加载

<scrīpt src=http://www.mamicode.com/‘‘></scrīpt> <scrīpt language="javascrīpt"> s1.src="test.js" </scrīpt>

前端代码重构

删除无用代码，精简代码（不起感化的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

web性能分析

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)