这是我参与8月更文挑战的第10天，活动详情查看：8月更文挑战
优化页面技术，前端能做什么？
在提高页面加载方面，前端主要从以下几个方面入手：减少代码大小、优化代码结构、优化网络请求、页面异步延迟加载
可以用下面的方式去获取代码执行的时间
//浏览器时间测试
console.time('a');
// 这中间是你要执行的代码
for(let i = 0; i < 100000000; i++) {
}
console.timeEnd('a');
// a: 99.567138671875 ms
怎么做？
减少代码大小：包括html、css、js代码文件的大小
我们可以写代码的时候\
- 能用一行代码搞定的就不用两行
- 减少全局变量（js局部变量的查找速度比全局变量块得多）
- 超过三个参数的时候，call的性能比apply的好
- ...
优化代码
- webpack
压缩代码，平时开发的时候，js文件和css样式文件中的代码，都会一句一定的代码规范来提高项目的可维护性，以及团队之间合作的效率，但是在项目发布后，这些代码是交给客户端（浏览器）识别的，此时代码的命名规范、空格缩进都没有必要，我们可以用工具将这些代码进行混淆和压缩，减少静态文件的大小。开启gzip压缩 - 使用第三方库时按需导入
- ...
优化图片资源
- 使用图片压缩工具
- 能使用png8就不使用gif格式。
- 图片懒加载技术，比如：当滚动到图片存在的位置才开始进行加载
- 可以将图片转base64、字符串，这样可以减少http请求，但这仅使用体积较小的图片，比如图片，不然转换后的字符串会比较大，得不偿失。
代码结构的优化
- 把script放到底部 css放顶部
优化网络请求
- 减少网络请求次数，对图片：可以使用雪碧图；数据量不大的几个接口可以进行合并。
- 减少域名DNS查找（DNS查找是网络请求的第一步，浏览器只有根据域名找对应的IP地址才能找到目标服务器，这个查询IP的过程耗时久的话就会影响到网页请求速度）TTL时间设置
当您在地址栏中输入Google.com时，您的ISP会执行DNS查询以请求与该域名关联的域名服务器。然后服务器的幕后完成到IP地址的映射，然后允许您使用域名访问它。没有DNS，您必须输入类似于172.22.22.22的内容才能访问某些地址。 - 使用CDN服务
SSR服务器渲染
将首屏所有内容在服务器端渲染成html静态代码后，直接输出给浏览器，可以有效加快用户访问站点时首屏的加载时间。
css动画影响
避免使用margin，top，left，width，height等属性执行动画，用transform进行替代；
