一、网络方面
1、DNS预解析。DNS解析也是需要时间的，可以通过预解析的方式预先获取域名所对应的IP
<link ref="dns-prefetched" href="www.123.com">
2、浏览器强缓存。实现强缓存可以通过响应头的Expires和Cache-Control来实现。Expires和Cache-Control后面的时间表示资源在这个时间过后会过期，需要重新请求；并且Expires受限于本地时间，如果手动修改了本地时间，可能会导致缓存失效；Cache-Control的优先级高于Expires
3、浏览器协商缓存。如果缓存过期了，可以使用协商缓存，协商缓存需要重新请求，如果缓存有效，会返回304。可以使用Last-Modified和Etag实现
4、预加载。有些资源不需要马上用到，但希望尽早获取，就可以使用预加载。预加载强制浏览器请求，但是不会阻塞onload事件。预加载可以在一定程度上减少首屏的加载时间，因为可以将一些不影响首屏但重要的文件延迟加载。缺点就是兼容性不好。可以使用以下代码开启预加载
<link ref="preload" href="www.123.com/aa.js" />
5、预渲染。可以通过预渲染将将来需要的文件预先在后台渲染，等到需要该页面的时候就可以提高加载速度，一定要确保预渲染的页面会被用户打开，否则就是浪费资源
<link ref="preload" href="./aaa.html" />
二、优化渲染过程
1、懒执行。懒执行可以用于首屏优化。对于某些耗时逻辑并且不需要在首屏使用的可以使用懒执行。懒执行需要唤醒，可以使用定时器或事件的调用来唤醒
2、懒加载。就是将不关键的资源往后加载，只加载可视区域的内容。对于图片来说，先将图片的src属性设置为一个占位图，将真实的图片资源放入一个自定义属性中，等到进入到自定义区域时，将src属性设置为自定义属性的值，这样浏览器就会去下载图片资源，实现懒加载。
三、文件优化
1、图片。不用或者少用图片，小图用base64格式
2、将css文件在放在head中，script标签放在body底部
3、服务器端开启文件压缩
4、执行js代码过长会卡住渲染。可以用webworker，Webworker会另外开启一个线程执行脚本而不会阻塞渲染
面试题：如何渲染几万条数据而不卡住页面？
答案：不能一次性将几万条数据都渲染出来，而应该一次渲染一部分DOM，可以通过window.requestAnimationFrame来每16ms刷新一次
网友评论