1、w3school
入门级的一个网站,说他是网站不如说他是个工具书,用到的时候查一下,一般不怎么看
2、宁皓网
这是一个个人维护的视频教程网站,全部都是站长一个人录制的,声音略带磁性,很舒服,教程前后有关联,整体上是一个开发行业的知识体系框架,质量很不错,就是内容有点浅,不够深入
3、慕课网
绝对推荐,做开发的好网站,尤其是实战栏目,全部是一线互联网公司的工程师录制的教程,每一个教程都是一个完整的项目,而且内容很新,两个月前刚出的新框架,马上教程就有了
4、laravel-china
laravel框架的中文论坛,以laravel为主,没有遍地的小白,全是高质量的内容。学laravel的必须看,学php的也得看,这个站培养的是你良好的编码规范和怎样利用开源代码,避免闭门造车。
提起Web前端性能优化的问题,前端开发人员非常熟悉,对于一个网站而言,即使内容和功能再优秀,如果用户需要花费很久的时间才能打开,这样迟早会消耗用户的耐心,并最终失去用户。
那如何才能优化前端性能?归纳为三步
一、关键资源字节数
字节数也就是通常说的减少资源文件(js、css、image、video…)的大小。
1、压缩
前端使用uglify混淆压缩
后端开启gzip
对图片进行压缩,使用压缩比例更高的格式(WebP)
2、缓存
强缓存(http状态码:200),不用请求服务器直接使用本地缓存,协商缓存(http状态码:304),使用时先请求服务器若被告知缓存没过期则使用本地缓存,不用下载资源,使用localstorage对数据进行存储。
3、针对首屏优化
对非关键资源延迟加载、异步加载,减少首屏资源大小
二、关键资源连接数
1、合并请求
使用http2.0的多路复用合并请求配置combo,在无法使用http2.0的情况下作为一种合并资源请求的手段。
2、减少图片请求数
使用spite图,使用svg-symbol。
3、针对一些场景采用css、js内联的方式。
4、使用强缓存减少了一次服务器请求。
5、非关键资源延迟、异步加载,减少了首屏资源连接数。
三、关键渲染路径
1、bigpipe分块输出
这里主要是因为要完成一整个页面的输出后端需要处理很多个任务,大家可以将这些多个任务进行分块,谁先完成谁就先输出,最终通过JS回填的方式输出DOM节点,这种方式主要解决了直出页面阻塞的问题。
2、bigrender分块渲染
常规的手段就是采用前端模板渲染页面,针对首屏时间主要减少了首次构建DOM树时的节点数
3、针对reflow,repaint,composit路径处理。
4、涉及到动画时关于layer的概念render layer、graphics layer。
5、css放在头部、js放底部避免阻塞DOM树的构建,关于css、js的位置对于页面渲染的影响大家可以关注下相关的文章。核心:css资源不会阻塞DOM树的构建但会阻塞DOM的渲染,JS会阻塞DOM树的构建,CSS会阻塞JS的执行。
以上就是针对Web前端性能优化归纳出的解决方案。更多Web前端学习资料,关注“武汉千锋”微信公众号领取。
如果想在国内从事前端工作,而且是毫无前端经验的话,建议可以先学习 Vue。
因为现在主流的前端已经是单页应用,而 Vue 的入门难度最低。
入门后可以仿照网易云音乐,饿了么之类的 APP,作为自己的展示项目。这些网上都有比较好的教程,跟着做一遍能学到不少前端和 Vue 的知识。
如果你希望从事前端,当务之急并不是「从网站寻找项目」,而是对照着一个参考教程项目,认真研究其中的知识,并且打造出自己的一个展示项目,这样会给你的求职带来不少帮助。
加油!