学习了下前端的一些概念

很多国外网站明明没被强却经常打不开,比如 Github,甚至 Stackoverflow 有时也不太正常。大概就是因为网页上的JS引用库的来源网站被强了吧,可是为什么有时能顺利打开有时又不行,难道强还有茶歇或下班的时候,百思不得其解。请专家有空的话给解惑解惑,谢谢!

六个基本概念:Library,Toolkit,Framework,Design,Boilerplate,Scaffolding

2 个赞

强确实是有松紧的,比如开会的时候紧。

不过,主要原因是这些网站都使用了CDN。

网上有些工具可以测试网站在不同地区的连通性。把那些绿的地区使用的IP复制到host里,就可以访问了。

这就是改hosts法。

还有一种方法是在浏览器里安装资源替换扩展。

把那些国外的库文件替换成国内的版本。

当然最好的方法

直接全局代理

1 个赞

哦,好像明白了,就是说那些库的来源会有很多镜像或者IP是动态变化的,强的更新会有些滞后。谢谢!

那国内的网站如果在前端设计中引用了那些库,岂不是也有被强的问题?这又是如何解决的呢?是不是在网页中可以指定国内可用的库版本?如果国内可以指定,那Github那样的网站为何不针对国内的访问请求也指定相应可用的库来源?

CDN的服务器要离用户越近越好,访问差打不开自然是因为服务器不在国内,国内有很多代替品的。

1 个赞

这里面的道道还挺多的

看贴不仔细,不好意思

还是有个疑问,浏览器中为什么不能集成一些常用的前端的库,或者象编码用的IDE那样可以下载一些标准库,这样岂不是可以免去很多的麻烦?

因为这不是浏览器的职责,并且如果真集成了会造成更多的麻烦。

这方面早有插件,比如 LocalCDN,但用着用着你就会发现它会出现什么问题。比如,一个网站声称自己用了 jQuery 的 A 版本,插件发现这版本我有啊,就不从该网站/CDN下载 jQuery 了。殊不知,这个 A 版本在插件里和 CDN 的可能不一样,或者这个所谓的 A 版本经过了该网站的魔改,仅仅保留了名字未变。要想正常加载该网站,就必须下载它网页中要求的 jQuery。

其他还会有各种各样的问题,总的来说,是因为前端很多东西都不是标准化的,而 CDN 这个解决方案足够好。并且浏览器其实很聪明,它会根据规则缓存一些库的,只不过都有有效期。

1 个赞

这个问题再大我也得试试,比天天上网肠梗阻好,谢谢!

2 个赞

有一点不解,为什么要强这些标准库呢?库里难道会藏细菌?BAT不是都在用吗?

有没有这样一种做法,我的网站把我用到的前端库在我自己的服务器上装一份,然后就从我自己的服务器上调用?

你的做法就是传统做法啊, 传统网站就是把所有资源都在自己服务器上托管.

它也不是强这些库, 是强云服务商和CDN服务商的服务器,
这些服务商有个服务, 就是免费托管这些开源前端库, 甚至说你把库写好传到npm后, 自动就被托管了.
比如你说你的网站有一个JS文件负责给汉字加拼音, 这文件你当然可以放自己服务器上, 但你也可以做成一个包发布到npm(就是一个仓库), 然后你就可以在一些cdn服务商那里发现这个包被托管了, 比如

你就可以在自己网站用这样的方式unpkg.com/my_pinyin.min.js 引用这个文件,
这样你就节省了自己服务器的流量, 同时让用户享受到强大的CDN加速.
整个过程是全自动的, 无需人工操作, 只要你把包传到npm就可以了.

当然, 你可能觉得, 有的文件不适合开源, 也不想发布到npm.

但是现在开发项目都会使用大量的开源框架, 开源库.

当然了, 由于强的存在, 这项便利不但没有了, 还成了麻烦.

1 个赞

老兄的讲解十分透彻,解了我多年的疑惑,谢谢!

再请教下,假如我在编写mdx释义的过程中引用了Vue这个库,但又不想查个字典还要联网去访问CDN,是不是有一个有点像“编译”的机制,可以把库里仅仅被用到的那一小部分提取出来以便我附在mdx或mdd文件中?

(今天追问有点多,不好意思)

有。

要实现的话,这个问题会涉及到现代前端复杂的部分 – toolchain。以 webpack 为例,如果你引用的库支持 tree shaking,那么打包时就会自动舍去程序中未使用的库代码。

1 个赞

看来搞复杂了,谢谢解答!

1 个赞

开了这个后很多网站都顺畅多了,真不错!

image

那些库就是js文件而已, 可以直接下载到本地用, 比如js的桌面开发框架electron, 可以使用vue什么的, 不需要联网.

至于你说的提取一部分, 这个是网站上用时, 网络环境嘛, 为了减小传输的文件体积(影响网页加载速度), 会用打包工具webpack之类的把用到的部分提取出来, 不用的代码去掉.

如果是本地用, “提取”(打包和treeshaking)的用处不是特别大, 也就节省几M, 少用一张图片一个视频就出来了.

1 个赞

明白了,谢谢!