Jacleklm's Blog

Jacleklm's Blog

CSS知识点
CSS 基础1、选择器2、盒模型3、伪类(处理 a 标签的那些和用来处理选择器的:first-child,:nth-child 等)和伪元素(eg. 处理 p 标签首行或首字母的:first-line 和:first-letter ;在元素的内容之前或之后插入内容的:before 和:after)4、页面导入样式时,使用 link 和@import 的区别 link 属于 XHTML 标签,除了加载 CSS 外,定义 rel 连接属性等作用;而@import 是 CSS 提供的,只能用于加载 CSS; 页面被加载的时,link 会同时被加载,而@import 引用的 CSS 会等到页面...
HTML
HTML基础1、 Doctype作用?严格模式与混杂模式如何区分?它们有何意义? 作用:声明文件类型定义(DTD),位于文档中最前面,作用是为了告知浏览器应该用哪种文档类型规范来解析文档 定义 严格模式(标准模式),浏览器按照W3C标准来解析 混杂模式,向后兼容的解析方法,浏览器用自己的方式解析代码 如何区分?用DTD来判断 有严格格式DTD——严格模式; 有URL的过渡DTD——严格模式,没有URL的过渡DTD——混杂模式; DTD不存在/格式不对——混杂模式; HTML5没有严格和混杂之分 区分的意义严格模式的排版和js运行模式以浏览器支持的最高标准运行。如果只存...
HTTPS
HTTP为什么不安全: 通信使用明文(不加密),内容可能被窃听 不验证通信方的身份,因此有可能遭遇伪装 无法证明报文的完整性,所以有可能被篡改 HTTP+加密+认证+完整性保护=HTTPS(HTTP Secure) HTTPS则是具有安全性的SSL加密传输协议 HTTPS协议需要CA申请证书 HTTP和HTTPS使用的是完全不同的连接方式,用的端口也不一样,前者是80,后者是443 HTTPS通过HTTP来传输信息,但是信息通过TLS协议进行了加密 TLShttps仍用http传输信息,但信息通过TLS进行了加密。TLS作用于表示层 两种加密技术 对称加密两边有相同的密钥,...
HTTP
HTTP 方法 GET 获取资源。当前网络请求中,绝大部分使用的是 GET 方法 POST 传输实体主体。POST 主要用来传输数据,而 GET 主要用来获取资源 HEAD 获取报文首部。和 GET 方法类似,但是不返回报文实体主体部分。主要用于确认 URL 的有效性以及资源更新的日期时间等。 PUT 上传文件 OPTIONS 查询支持的方法 *DELETE 删除文件 *PATCH 对资源进行部分修改 *CONNECT 要求在与代理服务器通信时建立隧道 GET 和 POST 的区别从用法上说,GET 一般用于无副作用、幂等的场景;POST 多用于有副作用、不幂等的情况(一次POST请求...
网络概述
转载声明:该文章有一部分转载自CavsZhouyou。欢迎大家去原博主观看,总结的更好 概述详细资料可以参考: 《互联网协议入门(一)》 《互联网协议入门(二)》 OSI 七层模型应用层 :为应用程序(进程)提供服务,并管理应用程序之间的通信(SMTP、HTTP、FTP、DNS)表示层 :处理数据的标识问题,比如编码、格式转化、加密解密等会话层 :负责建立管理和断开通信连接,实现数据同步传输层 :负责向两个主机中进程之间的通讯提供服务,端到端传输数据,同时处理传输错误、控制流量等(TCP UDP)网络层 :负责为分组交换网上的不同主机提供通信服务。地址管理、路由选择(IP 协议)数据...
webpack小结
基本篇对webpack的看法webpack是一个模块打包工具。可以用webpack管理我们的模块依赖,并编绎输出模块们所需的静态文件。它能够很好地管理、打包Web开发中所用到的HTML、Javascript、CSS以及各种静态文件(图片、字体等),让开发过程更加高效。对于不同类型的资源,webpack有对应的模块加载器。webpack模块打包器会分析模块间的依赖关系,最后 生成了优化且合并后的静态资源 entry && outputloaderloader其实就是一个打包的方案,它知道对于某些特定的文件,webpack应该如何去打包。写在配置文件的 module 项中定义...
Bundler源码编写
实现代码实现一个类似webpack的打包工具,代码如下: 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273const fs = require('fs')const path = require('path')const parser = require('@babel/parser')const trav...
如何编写一个plugin
什么是pluginplugin能帮助我们在webpack打包生成文件的某个事件段帮我们做一些事,类似于Vue中的生命周期函数。例如html-webpack-plugin能帮我们在打包结束生成html文件,并把打包生成的脚本文件插入html中。 plugin的编写假如我们想写一个plugin,这个plguin能帮我们在打包生成文件之后再生成一个.txt文件,里面写我们的版权信息。实现代码如下: 123456789101112131415161718192021class CopyrightWebpackPlugin { // constructor部分仅为演示用的代码 co...
如何编写一个loader
什么是loaderloader其实是一种打包方案,loader可以将所有类型的文件转换为 webpack 能够处理的有效模块,然后你就可以利用 webpack 的打包能力,对它们进行处理。 自己编写的loader的使用同普通loader一样,在webpack.config.js的module中写新的rule,还要在webpack.config.js新写一个配置项resolveLoader(代码如下所示),意思是按名称现在node_modules中找loader,找不到再去 ./loader 文件夹中找(自己写的loader放在该文件夹中,为replaceLoader.js) 1...
提升webpack打包速度的方法
及时更新版本(node,npm等),新版本一般都会有提高打包效率的新特性 在尽可能少的模块上应用loader。可以优化文件搜索范围(即在rule中写include或exclude),eg. 可以不用编译node_modules中的代码,因为里面的都是编译过的 plugin尽可能精简并确保可靠,也尽可能少用 resolve参数合理配置import或require的时候可以不写文件后缀,而在resolva中写resolve.extensions,并尽可能减少后缀列表长度,将出现频率高的后缀排在前面resolve.alias:设置别名的方式映射一个路径,让webpack更快找到路径 DllP...
webpack之Lazy Loading
应用场景懒加载就是将不关键的资源延后加载,是一种很好的优化网页或应用的方式。这种方式实际上是先把你的代码在一些逻辑断点处分离开,然后在一些代码块中完成某些操作后,立即引用或即将引用另外一些新的代码块。这样加快了应用的初始加载速度,减轻了它的总体体积,因为某些代码块可能永远不会被加载。 实现对于图片来说,先设置图片标签的src属性为一张占位图,将真实的图片资源放入一个自定义属性中,当进入自定义区域时,就将自定义属性替换为src属性,这样图片就会去下载资源,实现了图片懒加载。懒加载不仅可以用于图片,也可以使用在别的资源上。例如下面这段代码实现click之后再执行异步函数在页面生成文字。 12...
webpack之Code Splitting
应用场景当我们的业务逻辑很大的时候(index.js很大),我们打包生成的文件会很大:用户打开页面要一次性加载这个很大的文件,需要很长的加载时间;当文件有一点点修改,用户又要重新加载这个很大的文件,又需要很长加载时间。所以可以用code splitting(代码分割)把代码分离到不同的 bundle 中,可以实现按需加载或并行加载这些文件,优化加载时间。 实现借用SplitChunksPlugin,可以实现对同步加载的代码或者异步加载的代码实现代码分割。把spliChunk写在webpack配置文件的optimization配置项中。代码如下 123456789101112131415o...
avatar
Jacleklm
witness me