简介最近开始看一些书和做题。本系列旨在介绍阅读Web最佳实践的一些收获和体会。Web前端开发现状存在的问题：代码组织混乱，代码格式突出。页面布局是随机的。网站的整体性能很差。它不知道缓存、动态加载、脚本压缩和图像压缩等性能增强技术的应用。推荐做法：压缩样式表和脚本文件以减少HTTP请求的数量。简洁且符合W3C标准的HTML和CSS代码可以减少浏览器解析时间并加快渲染过程。页面请求越少，相对页面加载速度越快。在JS代码中选择性能更好的实现，比如懒加载、动态加载等技术；延迟加载最后加载导入外部js脚本文件时，如果放在html的头部，则在页面加载前，js脚本会加载到页面中，并放入body中，它会按照页面加载的顺序从上到下运行javascript代码，所以可以把从外部js导入的文件放到body的底部pageto让js最后引入加速页面加载动态加载s1.src="test.js"前端代码重构去除无用代码，精简代码（非功能性CSS样式和过时的JavaScript函数），标准化前端代码，将CSS代码放在单独的文件中，在JS中定义局部变量，将部分全局变量改为局部变量variables前端代码模块化，引入面向对象思想重构JavaScript代码，进一步明确公有接口和私有接口，提高页面性能：将一些不影响首页显示的JS文件延迟到页面被加载并删除页面中的初始隐藏区域，而是使用JS在页面上按需动态生成一些图片并延迟加载调整CSS和JS文件的引用顺序，即CSS在前，JS在后。CSS和JS代码模块前端重构最佳实践重构风险必须事先预知，最好提高自动化测试代码重构的目的和范围要明确，提高代码的可维护性、可读性和性能，最好先易后难，循序渐进修改命名、格式等不同的东西。在重构涉及具体逻辑的内容的过程中，需要不断的测试，在多个浏览器中进行测试，保证部分重构的功能是正确的。记得重构多了再测试，因为重构多了就很难记住重构的逻辑，可能会遗漏一些测试用例的性能提升。首先，对网站的整体性能进行检测和量化，找出性能瓶颈。在重构过程中，需要持续监控性能，比较前端框架的使用情况。项目需要考察项目是否需要AJAX操作。是否需要支持模块化数据传输格式JSON或XML。需要支持的手机浏览器或普通网站需要的UI模块（模态）窗口、滑块控件、进度条、提示框、拆分框、幻灯片、自动填充）项目特色框架代码质量编写高质量、标准的HTML（standardvalidationtools,ESLint,Flow,JSDoc,ts)明确浏览器支持范围Chrome和SafariIETester(IE兼容性测试工具，避免浏览器兼容性问题首先考虑改方案，使用没有兼容性问题的代码考虑如何兼容配合IE，使用IE特有的条件表达式（hack）使兼容代码独立，提高代码可维护性兼容HTML5新特性和新标签，兼容CSS3，新API（使用html5shiv框架）CSS3本身不支持，会直接无视使用新增加的接口，一定要加条件判断（Modernizr）才能看到能否使用web性能分析YSlow,pagespeed根据不同的规则评估网站的整体性能给出提升web性能的建议在itChrome开发工具Network中，可以查看每个资源请求和下载所花费的时间。Timeline可以查看网页渲染和交互过程中从资源到JS解析执行、样式应用和绘制的每一步所花费的时间。Profiles可以查看网页CPU和内存占用报告Audits提供各种资源和配置优化建议和未使用的CSS规则列表，以加速代码和资源文件传输CDN分发缓存（元）压缩代码和资源文件（优化）Gzip算法(压缩,header可以查看是否启用)JS压缩(UglifyJS压缩和优化,YUICompressor只压缩,ClosureCompiler压缩和优化)CSS(CSSCompressor,YUICompressor)HTML(HtmlCompressor使用时仔细考察测试,避免压缩toolsandDestruction）图片资源压缩（TinyPNG,JPEGmini,ImageOptim）Airbnb规范：https://github.com/airbnb/jav...Eslint规范：https://eslint.org/docs/rules/Beachmark.js性能测试：https://benchmarkjs.com/docs#toc
